Seed: education template (18 files)

src/pages/Instructors.tsx

@@ -0,0 +1,77 @@
+import { Link } from "react-router-dom";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Star, BookOpen, Users, Linkedin, Twitter, Globe } from "lucide-react";
+
+const instructors = [
+  { name: "Dr. Sarah Chen", title: "Senior Software Engineer & Educator", specialties: ["React", "Node.js", "TypeScript"], courses: 12, students: 3200, rating: 4.9, gradient: "from-indigo-500 to-purple-600" },
+  { name: "Prof. James Rivera", title: "Data Science Lead & Researcher", specialties: ["Python", "Machine Learning", "Statistics"], courses: 8, students: 2800, rating: 4.8, gradient: "from-amber-500 to-orange-600" },
+  { name: "Maya Patel", title: "Principal UX Designer", specialties: ["Figma", "UI Design", "Prototyping"], courses: 15, students: 4100, rating: 4.9, gradient: "from-emerald-500 to-teal-600" },
+  { name: "Dr. Alex Kim", title: "AI Research Scientist", specialties: ["Deep Learning", "NLP", "Computer Vision"], courses: 10, students: 3600, rating: 4.7, gradient: "from-rose-500 to-pink-600" },
+  { name: "Rachel Torres", title: "Business Strategy Consultant", specialties: ["Strategy", "Leadership", "Finance"], courses: 6, students: 2100, rating: 4.8, gradient: "from-cyan-500 to-blue-600" },
+  { name: "David Park", title: "Growth Marketing Director", specialties: ["SEO", "Analytics", "Growth"], courses: 9, students: 2500, rating: 4.6, gradient: "from-violet-500 to-fuchsia-600" },
+];
+
+export default function InstructorsPage() {
+  return (
+    <div className="min-h-screen bg-white dark:bg-slate-950">
+      <Header />
+
+      <section className="pt-32 pb-8">
+        <div className="mx-auto max-w-7xl px-6 text-center">
+          <Badge className="bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300 mb-4">Our Team</Badge>
+          <h1 className="text-3xl sm:text-4xl font-bold mb-3 animate-fade-up">Meet Our Instructors</h1>
+          <p className="text-muted-foreground max-w-xl mx-auto animate-fade-up" style={{ animationDelay: "0.05s" }}>Industry veterans and passionate educators dedicated to your success.</p>
+        </div>
+      </section>
+
+      <section className="pb-20">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
+            {instructors.map((inst, i) => (
+              <Card key={i} className="group bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl overflow-hidden text-center p-8 hover:ring-2 hover:ring-indigo-500/30 hover:shadow-xl transition-all duration-300 animate-fade-up" style={{ animationDelay: `\${i * 0.1}s` }}>
+                <div className={`mx-auto w-28 h-28 rounded-full bg-gradient-to-br \${inst.gradient} flex items-center justify-center mb-5 ring-4 ring-white dark:ring-slate-900 group-hover:ring-indigo-200 dark:group-hover:ring-indigo-800 transition-all`}>
+                  <span className="text-3xl font-bold text-white">{inst.name.split(" ").map(n => n[0]).join("")}</span>
+                </div>
+                <h3 className="text-xl font-bold mb-1">{inst.name}</h3>
+                <p className="text-sm text-muted-foreground mb-3">{inst.title}</p>
+                <div className="flex flex-wrap justify-center gap-2 mb-4">
+                  {inst.specialties.map((s) => (
+                    <Badge key={s} variant="secondary" className="text-xs">{s}</Badge>
+                  ))}
+                </div>
+                <div className="grid grid-cols-3 gap-2 text-center mb-4">
+                  <div>
+                    <div className="text-lg font-bold text-indigo-600 dark:text-indigo-400">{inst.courses}</div>
+                    <div className="text-xs text-muted-foreground">Courses</div>
+                  </div>
+                  <div>
+                    <div className="text-lg font-bold text-indigo-600 dark:text-indigo-400">{inst.students.toLocaleString()}</div>
+                    <div className="text-xs text-muted-foreground">Students</div>
+                  </div>
+                  <div>
+                    <div className="text-lg font-bold text-amber-500">{inst.rating}</div>
+                    <div className="text-xs text-muted-foreground">Rating</div>
+                  </div>
+                </div>
+                <div className="flex justify-center gap-3 mb-4">
+                  {[Linkedin, Twitter, Globe].map((Icon, j) => (
+                    <a key={j} href="#" className="text-slate-400 hover:text-indigo-500 transition-colors"><Icon className="h-4 w-4" /></a>
+                  ))}
+                </div>
+                <Button asChild variant="outline" className="w-full rounded-full border-indigo-200 dark:border-indigo-800 hover:bg-indigo-600 hover:text-white transition-all">
+                  <Link to="/courses">View Courses</Link>
+                </Button>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}