Seed: real-estate template (18 files)

src/pages/Agents.tsx

@@ -0,0 +1,71 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Phone, Mail, Linkedin, Instagram, Home as HomeIcon } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const agents = [
+  { name: "Jennifer Rodriguez", title: "Senior Listing Agent", spec: "Luxury Homes", sold: "340+", phone: "+1 (310) 555-0147", email: "jennifer@prestigerealty.com", init: "JR", gradient: "from-emerald-400 to-emerald-700" },
+  { name: "Michael Chen", title: "Buyer Specialist", spec: "Condos & Apartments", sold: "280+", phone: "+1 (212) 555-0233", email: "michael@prestigerealty.com", init: "MC", gradient: "from-amber-400 to-amber-700" },
+  { name: "Sarah Thompson", title: "Commercial Director", spec: "Commercial", sold: "195+", phone: "+1 (415) 555-0178", email: "sarah@prestigerealty.com", init: "ST", gradient: "from-stone-400 to-stone-700" },
+  { name: "David Patel", title: "Waterfront Specialist", spec: "Waterfront", sold: "220+", phone: "+1 (305) 555-0192", email: "david@prestigerealty.com", init: "DP", gradient: "from-sky-400 to-sky-700" },
+  { name: "Emily Watson", title: "New Builds Manager", spec: "New Construction", sold: "165+", phone: "+1 (720) 555-0156", email: "emily@prestigerealty.com", init: "EW", gradient: "from-rose-400 to-rose-700" },
+  { name: "Robert Kim", title: "Investment Advisor", spec: "Investment Properties", sold: "310+", phone: "+1 (312) 555-0189", email: "robert@prestigerealty.com", init: "RK", gradient: "from-violet-400 to-violet-700" },
+];
+
+export default function AgentsPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground antialiased">
+      <Header />
+
+      {/* ── HERO ── */}
+      <section className="pt-32 pb-16 bg-gradient-to-b from-stone-950 via-emerald-950/20 to-background">
+        <div className="mx-auto max-w-7xl px-6 text-center animate-fade-up">
+          <Badge className="bg-emerald-600/20 text-emerald-400 border-emerald-600/30 mb-4">Our Team</Badge>
+          <h1 className="text-4xl sm:text-5xl font-bold text-white mb-4">Meet Our Agents</h1>
+          <p className="text-stone-400 max-w-lg mx-auto">Our experienced professionals are dedicated to helping you find the perfect property.</p>
+        </div>
+      </section>
+
+      {/* ── AGENTS GRID ── */}
+      <section className="py-20 bg-background">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {agents.map((a, i) => (
+              <Card key={i} className="bg-white/70 dark:bg-white/5 backdrop-blur-xl border-stone-200 dark:border-white/10 rounded-2xl overflow-hidden hover:-translate-y-2 hover:shadow-xl transition-all duration-300 group animate-fade-up" style={{ animationDelay: `\${i * 100}ms` }}>
+                <CardContent className="p-8 text-center">
+                  <div className={`w-24 h-24 rounded-full bg-gradient-to-br \${a.gradient} flex items-center justify-center text-white text-2xl font-bold mx-auto mb-5 shadow-lg group-hover:scale-110 transition-transform duration-300`}>{a.init}</div>
+                  <h3 className="text-xl font-bold text-stone-900 dark:text-white">{a.name}</h3>
+                  <p className="text-sm text-stone-500 dark:text-stone-400 mt-1">{a.title}</p>
+                  <Badge className="mt-3 bg-emerald-100 text-emerald-700 dark:bg-emerald-600/20 dark:text-emerald-400">{a.spec}</Badge>
+                  <div className="flex items-center justify-center gap-2 mt-4">
+                    <HomeIcon className="h-4 w-4 text-emerald-500" />
+                    <span className="text-sm font-semibold text-stone-700 dark:text-stone-300">{a.sold} Properties Sold</span>
+                  </div>
+                  <div className="mt-5 pt-5 border-t border-stone-100 dark:border-stone-800 space-y-2">
+                    <div className="flex items-center justify-center gap-2 text-sm text-stone-600 dark:text-stone-400">
+                      <Phone className="h-3.5 w-3.5 text-emerald-500" />{a.phone}
+                    </div>
+                    <div className="flex items-center justify-center gap-2 text-sm text-stone-600 dark:text-stone-400">
+                      <Mail className="h-3.5 w-3.5 text-emerald-500" />{a.email}
+                    </div>
+                  </div>
+                  <div className="flex justify-center gap-3 mt-5">
+                    {[Linkedin, Instagram].map((Icon, j) => (
+                      <a key={j} href="#" className="p-2 rounded-full bg-stone-100 dark:bg-stone-800 text-stone-400 hover:bg-emerald-600 hover:text-white transition-all">
+                        <Icon className="h-4 w-4" />
+                      </a>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}