Skip to content

Added About and merged contact, updated footer #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Rebeccals1 wants to merge 1 commit into from
Closed

Added About and merged contact, updated footer #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion frontend/bitmatch/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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"
Expand Down Expand Up @@ -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>

Expand Down
41 changes: 41 additions & 0 deletions frontend/bitmatch/src/components/about/TeamCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
77 changes: 0 additions & 77 deletions frontend/bitmatch/src/components/footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -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>
);
Expand Down
1 change: 0 additions & 1 deletion frontend/bitmatch/src/components/navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
];

Expand Down
31 changes: 31 additions & 0 deletions frontend/bitmatch/src/lib/team_data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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/"
}
]

165 changes: 165 additions & 0 deletions frontend/bitmatch/src/views/AboutPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
Loading