Seed: services template (18 files)
This commit is contained in:
@@ -0,0 +1,159 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user