Seed: travel template (16 files)

src/components/Footer.tsx

@@ -0,0 +1,81 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Globe, Facebook, Instagram, Twitter, Youtube, Send } from "lucide-react";
+import { toast } from "sonner";
+import { useSaasMutation } from "@/hooks/use-tygarun";
+
+export default function Footer() {
+  const { mutate: subscribe, loading: subscribing } = useSaasMutation("email", "/send/newsletter-confirm");
+
+  const handleNewsletter = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const data = new FormData(e.currentTarget);
+    try {
+      await subscribe({ email: data.get("email") });
+      toast.success("Subscribed! Travel deals incoming.");
+      e.currentTarget.reset();
+    } catch (err) {
+      toast.error("Could not subscribe. Please try again.");
+    }
+  };
+
+  return (
+    <footer className="bg-slate-950 text-slate-300 pt-16 pb-8 border-t border-slate-800">
+      <div className="mx-auto max-w-7xl px-6">
+        <div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-10">
+          <div className="lg:col-span-2">
+            <div className="flex items-center gap-2 text-xl font-bold text-white mb-4">
+              <Globe className="h-5 w-5 text-cyan-400" />
+              <span>Wanderlust Travels</span>
+            </div>
+            <p className="text-sm text-slate-400 leading-relaxed mb-6">Crafting unforgettable travel experiences since 2010. Licensed and bonded travel agency committed to making your dream trips a reality.</p>
+            <form onSubmit={handleNewsletter} className="flex gap-2">
+              <Input name="email" type="email" required placeholder="Your email" className="bg-slate-900 border-slate-700 text-white rounded-full text-sm" />
+              <Button type="submit" size="icon" disabled={subscribing} className="bg-blue-600 hover:bg-blue-500 rounded-full shrink-0 active:scale-[0.98]">
+                <Send className="h-4 w-4" />
+              </Button>
+            </form>
+          </div>
+          <div>
+            <h4 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Destinations</h4>
+            <ul className="space-y-2 text-sm text-slate-400">
+              <li><Link to="/destinations" className="hover:text-cyan-400 transition-colors">Asia</Link></li>
+              <li><Link to="/destinations" className="hover:text-cyan-400 transition-colors">Europe</Link></li>
+              <li><Link to="/destinations" className="hover:text-cyan-400 transition-colors">Americas</Link></li>
+              <li><Link to="/destinations" className="hover:text-cyan-400 transition-colors">Africa</Link></li>
+              <li><Link to="/destinations" className="hover:text-cyan-400 transition-colors">Oceania</Link></li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Company</h4>
+            <ul className="space-y-2 text-sm text-slate-400">
+              <li><Link to="/#about" className="hover:text-cyan-400 transition-colors">About Us</Link></li>
+              <li><Link to="/contact" className="hover:text-cyan-400 transition-colors">Contact</Link></li>
+              <li><a href="#" className="hover:text-cyan-400 transition-colors">Careers</a></li>
+              <li><a href="#" className="hover:text-cyan-400 transition-colors">Blog</a></li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Support</h4>
+            <ul className="space-y-2 text-sm text-slate-400">
+              <li><a href="#" className="hover:text-cyan-400 transition-colors">Help Center</a></li>
+              <li><a href="#" className="hover:text-cyan-400 transition-colors">Travel Insurance</a></li>
+              <li><a href="#" className="hover:text-cyan-400 transition-colors">Cancellation Policy</a></li>
+              <li><a href="#" className="hover:text-cyan-400 transition-colors">Privacy Policy</a></li>
+            </ul>
+          </div>
+        </div>
+        <div className="mt-12 flex flex-col sm:flex-row items-center justify-between gap-4">
+          <div className="flex gap-4">
+            {[Facebook, Instagram, Twitter, Youtube].map((Icon, i) => (
+              <a key={i} href="#" className="text-slate-500 hover:text-cyan-400 transition-colors"><Icon className="h-5 w-5" /></a>
+            ))}
+          </div>
+          <p className="text-xs text-slate-500">© 2026 Wanderlust Travels. All rights reserved.</p>
+        </div>
+        <p className="mt-4 text-center text-xs text-slate-600">Licensed Travel Agency • IATA Accredited • ASTA Member • Bonded & Insured</p>
+      </div>
+    </footer>
+  );
+}