159 lines
7.1 KiB
TypeScript
159 lines
7.1 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Linkedin, Twitter, Github, Lightbulb, Users, Trophy, MapPin
|
|
} from "lucide-react";
|
|
import Header from "@/components/Header";
|
|
import Footer from "@/components/Footer";
|
|
|
|
const teamMembers = [
|
|
{
|
|
name: "",
|
|
role: "",
|
|
bio: "With over 12 years in design, Alex leads our creative vision and ensures every project tells a compelling visual story.",
|
|
gradient: "from-violet-400 to-indigo-500",
|
|
},
|
|
{
|
|
name: "",
|
|
role: "",
|
|
bio: "Jordan architects scalable systems and mentors our engineering team. A full-stack expert passionate about clean code.",
|
|
gradient: "from-rose-400 to-orange-500",
|
|
},
|
|
{
|
|
name: "",
|
|
role: "",
|
|
bio: "Priya combines research with intuition to craft experiences users love. She has led UX for 50+ digital products.",
|
|
gradient: "from-emerald-400 to-teal-500",
|
|
},
|
|
{
|
|
name: "",
|
|
role: "",
|
|
bio: "David drives growth through data-driven strategies. He has managed campaigns generating over $10M in revenue.",
|
|
gradient: "from-amber-400 to-pink-500",
|
|
},
|
|
{
|
|
name: "Lisa Nguyen",
|
|
role: "Project Manager",
|
|
bio: "Lisa ensures every project runs on time and on budget. She brings structure and clarity to complex engagements.",
|
|
gradient: "from-cyan-400 to-blue-500",
|
|
},
|
|
{
|
|
name: "Marcus Johnson",
|
|
role: "Content Strategist",
|
|
bio: "Marcus crafts brand narratives that resonate. He has written for top publications and led content for major launches.",
|
|
gradient: "from-fuchsia-400 to-purple-500",
|
|
},
|
|
];
|
|
|
|
const values = [
|
|
{ icon: Lightbulb, title: "Innovation First", desc: "We push boundaries and embrace emerging technologies to deliver forward-thinking solutions." },
|
|
{ icon: Users, title: "Collaboration", desc: "Great work happens when diverse minds come together. We partner closely with every client." },
|
|
{ icon: Trophy, title: "Excellence", desc: "We hold ourselves to the highest standards in design, code quality, and client communication." },
|
|
];
|
|
|
|
const openPositions = [
|
|
{ title: "Senior React Developer", department: "Engineering", location: "San Francisco, CA", type: "Full-time" },
|
|
{ title: "UX Researcher", department: "Design", location: "Remote", type: "Remote" },
|
|
{ title: "Growth Marketing Manager", department: "Marketing", location: "New York, NY", type: "Full-time" },
|
|
];
|
|
|
|
export default function TeamPage() {
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground antialiased">
|
|
<Header />
|
|
|
|
{/* ── HERO ── */}
|
|
<section className="pt-32 pb-20">
|
|
<div className="mx-auto max-w-7xl px-6 text-center">
|
|
<h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight animate-fade-up">
|
|
The People Behind the Work
|
|
</h1>
|
|
<p className="mt-6 text-lg text-muted-foreground max-w-2xl mx-auto">
|
|
A diverse team of designers, developers, strategists, and marketers united by a love for craft.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── TEAM MEMBERS ── */}
|
|
<section className="pb-24">
|
|
<div className="mx-auto max-w-7xl px-6">
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-10 stagger">
|
|
{teamMembers.map((m, i) => (
|
|
<div key={i} className="text-center group">
|
|
<div className={`mx-auto w-32 h-32 rounded-full bg-gradient-to-br ${m.gradient} mb-6 hover:scale-110 hover:ring-4 hover:ring-primary/20 transition-all shadow-lg`} />
|
|
<h3 className="text-xl font-bold">{m.name}</h3>
|
|
<p className="text-sm text-primary font-medium mb-3">{m.role}</p>
|
|
<p className="text-sm text-muted-foreground leading-relaxed mb-4">{m.bio}</p>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<Button variant="ghost" size="icon" className="h-8 w-8"><Linkedin className="h-4 w-4" /></Button>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8"><Twitter className="h-4 w-4" /></Button>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8"><Github className="h-4 w-4" /></Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── CULTURE / VALUES ── */}
|
|
<section className="py-24 bg-muted/30">
|
|
<div className="mx-auto max-w-7xl px-6">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight animate-fade-up">Our Values</h2>
|
|
<p className="mt-4 text-muted-foreground max-w-xl mx-auto">The principles that guide everything we do.</p>
|
|
</div>
|
|
<div className="grid md:grid-cols-3 gap-8 stagger">
|
|
{values.map((v, i) => (
|
|
<Card key={i} className="text-center border hover:border-primary transition-colors">
|
|
<CardHeader>
|
|
<div className="mx-auto w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-3">
|
|
<v.icon className="h-7 w-7 text-primary" />
|
|
</div>
|
|
<CardTitle className="text-lg">{v.title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground leading-relaxed">{v.desc}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── CAREERS ── */}
|
|
<section className="py-24">
|
|
<div className="mx-auto max-w-4xl px-6">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight animate-fade-up">Join Our Team</h2>
|
|
<p className="mt-4 text-muted-foreground max-w-xl mx-auto">We are always looking for talented people who share our passion for great work.</p>
|
|
</div>
|
|
<div className="space-y-4">
|
|
{openPositions.map((job, i) => (
|
|
<Card key={i} className="border hover:border-primary transition-colors">
|
|
<CardContent className="p-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
|
<div className="space-y-2">
|
|
<h3 className="font-bold text-lg">{job.title}</h3>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Badge variant="secondary">{job.department}</Badge>
|
|
<span className="flex items-center gap-1 text-sm text-muted-foreground">
|
|
<MapPin className="h-3.5 w-3.5" /> {job.location}
|
|
</span>
|
|
<Badge variant="outline">{job.type}</Badge>
|
|
</div>
|
|
</div>
|
|
<Button asChild className="active:scale-[0.98]">
|
|
<Link to="/contact">Apply</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
} |