From 9c81a7c5fcad49ed13b5d969bc5afac575d92f77 Mon Sep 17 00:00:00 2001
From: Rebecca Smith <2145912+Rebeccals@users.noreply.github.com>
Date: Sat, 19 Apr 2025 22:13:33 -0700
Subject: [PATCH] Added About and merged contact, updated footer

---
 frontend/bitmatch/src/App.jsx                 |   7 +-
 .../src/components/about/TeamCard.jsx         |  41 +++++
 frontend/bitmatch/src/components/footer.jsx   |  77 --------
 frontend/bitmatch/src/components/navbar.jsx   |   1 -
 frontend/bitmatch/src/lib/team_data.js        |  31 ++++
 frontend/bitmatch/src/views/AboutPage.jsx     | 165 ++++++++++++++++++
 6 files changed, 243 insertions(+), 79 deletions(-)
 create mode 100644 frontend/bitmatch/src/components/about/TeamCard.jsx
 create mode 100644 frontend/bitmatch/src/lib/team_data.js
 create mode 100644 frontend/bitmatch/src/views/AboutPage.jsx

diff --git a/frontend/bitmatch/src/App.jsx b/frontend/bitmatch/src/App.jsx
index 83c1aaa..c7414ea 100644
--- a/frontend/bitmatch/src/App.jsx
+++ b/frontend/bitmatch/src/App.jsx
@@ -11,6 +11,7 @@ import MainFooter from "./components/footer";
 
 import LandingPage from "./views/LandingPage";
 import HomePage from "./views/HomePage";
+import AboutPage from "./views/AboutPage";
 import ProjectListPage from "./views/ProjectListPage";
 import ProjectDetailPage from "./views/IndividualProjectPage";
 import AddProjectPage from "./views/AddProjectPage";
@@ -33,8 +34,9 @@ function AppRoutes() {
   const pathname = location.pathname;
   const isLanding = pathname === "/" && !isSignedIn;
   const isOnboard = pathname.startsWith("/onboard");
+  const isAbout = pathname.startsWith("/about");
 
-  const shouldUseContainer = !isLanding && !isOnboard;
+  const shouldUseContainer = !isLanding && !isOnboard && !isAbout;
 
   const layoutClass = shouldUseContainer
     ? "container mx-auto px-4 py-16 pb-6 min-h-screen"
@@ -103,6 +105,9 @@ function AppRoutes() {
             <Route path="skills" element={<SkillsPage />} />
             <Route path="user" element={<UserPage />} />
           </Route>
+
+          {/* Other routes */}
+          <Route path="/about" element={<AboutPage />} />
         </Routes>
       </main>
 
diff --git a/frontend/bitmatch/src/components/about/TeamCard.jsx b/frontend/bitmatch/src/components/about/TeamCard.jsx
new file mode 100644
index 0000000..09c51c8
--- /dev/null
+++ b/frontend/bitmatch/src/components/about/TeamCard.jsx
@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { teamMembers } from "@/lib/team_data";
+import { motion } from "framer-motion";
+
+export default function TeamCard() {
+  const [profiles, setProfiles] = useState([]);
+
+  useEffect(() => {
+    setProfiles(teamMembers);
+  }, []);
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+      {profiles.map((member, idx) => (
+        <motion.a
+          key={member.id}
+          href={member.linkedin}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="group border border-border text-muted-foreground p-6 rounded-2xl shadow-sm hover:shadow-lg hover:border-primary/40 hover:scale-[1.02] transition-all duration-300 ease-in-out"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.4, delay: idx * 0.1 }}
+        >
+          <div className="overflow-hidden rounded-xl mb-4">
+            <img
+              src={member.image || "/placeholder.svg"}
+              alt={member.name}
+              className="w-full h-64 object-cover group-hover:brightness-90 transition duration-300 ease-in-out rounded-xl"
+            />
+          </div>
+          <h3 className="text-center text-lg font-semibold text-foreground mb-1">
+            {member.name}
+          </h3>
+          <p className="text-center text-sm text-muted-foreground">{member.title}</p>
+        </motion.a>
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/bitmatch/src/components/footer.jsx b/frontend/bitmatch/src/components/footer.jsx
index 542317a..1fa4b6f 100644
--- a/frontend/bitmatch/src/components/footer.jsx
+++ b/frontend/bitmatch/src/components/footer.jsx
@@ -1,13 +1,6 @@
 import { Link } from "react-router-dom";
 
 export default function Footer({ links = [], showSocial = true }) {
-  const defaultLinks = [
-    { href: "/terms", label: "Terms" },
-    { href: "/privacy", label: "Privacy" },
-    { href: "/contact", label: "Contact" },
-  ];
-
-  const footerLinks = links.length > 0 ? links : defaultLinks;
 
   return (
     <footer className="flex flex-col items-center justify-center border-t">
@@ -17,76 +10,6 @@ export default function Footer({ links = [], showSocial = true }) {
             &copy; {new Date().getFullYear()} BITMATCH. All rights reserved.
           </p>
         </div>
-
-        <nav className="flex flex-wrap gap-4 md:gap-6">
-          {footerLinks.map((link) => (
-            <Link
-              key={link.href}
-              to={link.href}
-              className="text-sm font-medium hover:underline underline-offset-4"
-            >
-              {link.label}
-            </Link>
-          ))}
-        </nav>
-
-        {showSocial && (
-          <div className="flex gap-4">
-            <Link to="#" className="text-muted-foreground hover:text-foreground">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="h-5 w-5"
-              >
-                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
-              </svg>
-              <span className="sr-only">Facebook</span>
-            </Link>
-            <Link to="#" className="text-muted-foreground hover:text-foreground">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="h-5 w-5"
-              >
-                <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
-                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
-                <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
-              </svg>
-              <span className="sr-only">Instagram</span>
-            </Link>
-            <Link to="#" className="text-muted-foreground hover:text-foreground">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="h-5 w-5"
-              >
-                <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
-              </svg>
-              <span className="sr-only">Twitter</span>
-            </Link>
-          </div>
-        )}
       </div>
     </footer>
   );
diff --git a/frontend/bitmatch/src/components/navbar.jsx b/frontend/bitmatch/src/components/navbar.jsx
index 8a84929..7d58e69 100644
--- a/frontend/bitmatch/src/components/navbar.jsx
+++ b/frontend/bitmatch/src/components/navbar.jsx
@@ -15,7 +15,6 @@ export default function Navbar({ links = [] }) {
   const defaultLinks = [
     { href: "/about", label: "About" },
     { href: "/browse", label: "Browse" },
-    { href: "/contact", label: "Contact" },
     { href: "/my-profile", label: "My Profile" },
   ];
 
diff --git a/frontend/bitmatch/src/lib/team_data.js b/frontend/bitmatch/src/lib/team_data.js
new file mode 100644
index 0000000..1dcb8b1
--- /dev/null
+++ b/frontend/bitmatch/src/lib/team_data.js
@@ -0,0 +1,31 @@
+export const teamMembers = [
+    {
+      id: 1,
+      name: "Luis Dominguez",
+      title: "Software Engineer",
+      image: "https://avatars.githubusercontent.com/u/118137779?v=4",
+      linkedin: "https://www.linkedin.com/in/luis-dominguez-9b11702b5/"
+    },
+    {
+      id: 2,
+      name: "William Garcia",
+      title: "Software Engineer",
+      image: "https://avatars.githubusercontent.com/u/102125255?v=4",
+      linkedin: "https://www.linkedin.com/in/william-garcia-946709297/"
+    },
+    {
+      id: 3,
+      name: "Larry La",
+      title: "Software Engineer",
+      image: "https://avatars.githubusercontent.com/u/137100338?v=4",
+      linkedin: "https://www.linkedin.com/in/lqla/"
+    },
+    {
+      id: 4,
+      name: "Rebecca Smith",
+      title: "Software Engineer",
+      image: "https://avatars.githubusercontent.com/u/2145912?v=4",
+      linkedin: "https://www.linkedin.com/in/rebecca-l-smith-3075604/"
+    }
+  ]
+  
\ No newline at end of file
diff --git a/frontend/bitmatch/src/views/AboutPage.jsx b/frontend/bitmatch/src/views/AboutPage.jsx
new file mode 100644
index 0000000..c8acd5a
--- /dev/null
+++ b/frontend/bitmatch/src/views/AboutPage.jsx
@@ -0,0 +1,165 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { Mail, MapPin, Phone, Github, Linkedin, Twitter } from "lucide-react";
+import TeamCard from "@/components/about/TeamCard";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+
+function ContactItem({ icon: Icon, label, value }) {
+  return (
+    <div className="flex items-start">
+      <Icon className="h-5 w-5 mr-3 text-muted-foreground mt-0.5" />
+      <div>
+        <h3 className="font-medium text-foreground">{label}</h3>
+        <p className="text-muted-foreground">{value}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function AboutPage() {
+  return (
+    <div className="mt-16">
+      {/* Header Section */}
+      <motion.section
+        initial={{ opacity: 0, y: 40 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, ease: "easeOut" }}
+      >
+        <div className="py-24 w-full bg-black text-white text-center">
+          <motion.h1
+            className="text-4xl md:text-5xl font-bold tracking-tight"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.2 }}
+          >
+            About
+          </motion.h1>
+        </div>
+
+        {/* Story Section */}
+        <motion.div
+          className="pt-24 pb-32 px-4 sm:px-6 max-w-4xl mx-auto space-y-6 text-muted-foreground text-lg leading-relaxed"
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+        >
+          <p>
+            BitMatch was created by a team of students from Cal Poly Pomona who came together under the name Bit by Bit to solve a common challenge: helping students connect with meaningful project opportunities.
+          </p>
+          <p>
+            Our platform acts as a digital project incubator, where users can post their ideas, specify skills they need, and discover teammates with shared interests. Meanwhile, students looking to contribute can receive intelligent project recommendations based on their profile.
+          </p>
+          <p>
+            Our mission is to foster collaboration, drive innovation, and give students real-world experience in their fields by enabling them to build together.
+          </p>
+        </motion.div>
+      </motion.section>
+
+      {/* Team Section */}
+      <motion.section
+        className="bg-white pb-24 px-4 sm:px-6"
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.6 }}
+      >
+        <div className="max-w-6xl mx-auto text-center">
+          <motion.h2
+            className="text-3xl md:text-4xl font-bold text-foreground mb-6"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2 }}
+          >
+            The Developers
+          </motion.h2>
+          <p className="text-muted-foreground text-sm md:text-base mb-12">
+            Meet the passionate team behind BitMatch.
+          </p>
+          <TeamCard />
+        </div>
+      </motion.section>
+
+      {/* Contact Form Section */}
+      <motion.section
+        className="bg-muted py-24 mt-32 px-4 sm:px-6"
+        initial={{ opacity: 0, y: 40 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.6 }}
+      >
+        <div className="max-w-2xl mx-auto">
+          <h2 className="text-3xl font-bold mb-6 text-center text-foreground">Contact Us</h2>
+          <p className="text-muted-foreground mb-10 text-center text-sm md:text-base">
+            Have questions or want to learn more about our mission? Send us a message—we'd love to hear from you.
+          </p>
+
+          <form className="space-y-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <label htmlFor="first-name" className="text-sm font-medium text-foreground">
+                  First name
+                </label>
+                <Input
+                  id="first-name"
+                  name="firstName"
+                  placeholder="John"
+                  className="bg-background text-foreground focus:ring-2 focus:ring-primary"
+                />
+              </div>
+              <div className="space-y-2">
+                <label htmlFor="last-name" className="text-sm font-medium text-foreground">
+                  Last name
+                </label>
+                <Input
+                  id="last-name"
+                  name="lastName"
+                  placeholder="Doe"
+                  className="bg-background text-foreground focus:ring-2 focus:ring-primary"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="email" className="text-sm font-medium text-foreground">
+                Email
+              </label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                placeholder="john.doe@example.com"
+                className="bg-background text-foreground focus:ring-2 focus:ring-primary"
+              />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="subject" className="text-sm font-medium text-foreground">
+                Subject
+              </label>
+              <Input
+                id="subject"
+                name="subject"
+                placeholder="How can we help you?"
+                className="bg-background text-foreground focus:ring-2 focus:ring-primary"
+              />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="message" className="text-sm font-medium text-foreground">
+                Message
+              </label>
+              <Textarea
+                id="message"
+                name="message"
+                placeholder="Tell us about your project..."
+                className="min-h-[150px] bg-background text-foreground focus:ring-2 focus:ring-primary"
+              />
+            </div>
+            <Button type="submit" className="w-full">
+              Send Message
+            </Button>
+          </form>
+        </div>
+      </motion.section>
+    </div>
+  );
+}