From 9b69d7462046c78ce959126e69ed5625a7f1e63d Mon Sep 17 00:00:00 2001
From: jyswee <jyswee@gmail.com>
Date: Thu, 23 Jul 2026 22:11:17 +0000
Subject: [PATCH] Seed: services template (18 files)

---
 src/pages/Team.tsx | 159 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 159 insertions(+)
 create mode 100644 src/pages/Team.tsx

diff --git a/src/pages/Team.tsx b/src/pages/Team.tsx
new file mode 100644
index 0000000..045f0f3
--- /dev/null
+++ b/src/pages/Team.tsx
@@ -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>
+  );
+}
\ No newline at end of file