Seed: fitness template (17 files)

src/components/Footer.tsx

@@ -0,0 +1,75 @@
+import { Link } from "react-router-dom";
+import { useState } from "react";
+import { MapPin, Phone, Mail, Clock, Facebook, Twitter, Instagram, Youtube } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { toast } from "sonner";
+
+export default function Footer() {
+  const [email, setEmail] = useState("");
+
+  const handleNewsletter = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email) return;
+    toast.success("Welcome to the pack! Check your inbox for your free workout plan.");
+    setEmail("");
+  };
+
+  return (
+    <footer className="bg-slate-950 text-slate-300 py-16 border-t border-slate-800">
+      <div className="mx-auto max-w-7xl px-6">
+        <div className="grid md:grid-cols-4 gap-10">
+          <div>
+            <div className="text-xl font-extrabold uppercase text-white mb-4">Apex Fitness</div>
+            <div className="space-y-3 text-sm">
+              <div className="flex items-start gap-3"><MapPin className="h-4 w-4 mt-0.5 text-orange-400" /><span>750 Iron Avenue, Los Angeles, CA 90015</span></div>
+              <div className="flex items-center gap-3"><Phone className="h-4 w-4 text-orange-400" /><span>(213) 555-0247</span></div>
+              <div className="flex items-center gap-3"><Mail className="h-4 w-4 text-orange-400" /><span>hello@apexfitness.com</span></div>
+              <div className="flex items-center gap-3"><Clock className="h-4 w-4 text-orange-400" /><span>Mon–Sat 5 AM – 11 PM · Sun 7 AM – 8 PM</span></div>
+            </div>
+          </div>
+
+          <div>
+            <div className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Quick Links</div>
+            <div className="space-y-2 text-sm">
+              <Link to="/classes" className="block hover:text-orange-400 transition-colors">Classes</Link>
+              <Link to="/trainers" className="block hover:text-orange-400 transition-colors">Trainers</Link>
+              <Link to="/pricing" className="block hover:text-orange-400 transition-colors">Pricing</Link>
+              <Link to="/contact" className="block hover:text-orange-400 transition-colors">Contact</Link>
+            </div>
+          </div>
+
+          <div>
+            <div className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Programs</div>
+            <div className="space-y-2 text-sm">
+              <span className="block">Strength Training</span>
+              <span className="block">HIIT & Cardio</span>
+              <span className="block">Yoga & Flexibility</span>
+              <span className="block">Boxing & MMA</span>
+              <span className="block">Personal Training</span>
+            </div>
+          </div>
+
+          <div>
+            <div className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Newsletter</div>
+            <p className="text-sm mb-4">Get free workout tips and exclusive member deals.</p>
+            <form onSubmit={handleNewsletter} className="flex gap-2">
+              <Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="your@email.com" type="email" className="bg-slate-900 border-slate-700 text-white placeholder:text-slate-500 text-sm" />
+              <Button type="submit" size="sm" className="bg-orange-500 hover:bg-orange-600 text-white font-bold shrink-0">Go</Button>
+            </form>
+            <div className="flex gap-4 mt-6">
+              {[Facebook, Twitter, Instagram, Youtube].map((Icon, i) => (
+                <a key={i} href="#" className="text-slate-500 hover:text-orange-400 transition-colors"><Icon className="h-5 w-5" /></a>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-12 pt-8 border-t border-slate-800 flex flex-col md:flex-row items-center justify-between gap-4 text-sm text-slate-500">
+          <span>© 2026 Apex Fitness. All rights reserved.</span>
+          <span>Built for athletes. Fueled by passion.</span>
+        </div>
+      </div>
+    </footer>
+  );
+}