Seed: services template (18 files)

src/components/Footer.tsx

@@ -0,0 +1,82 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Twitter, Linkedin, Github, MapPin, Phone, Mail } from "lucide-react";
+
+export default function Footer() {
+  return (
+    <footer className="bg-foreground text-background py-16">
+      <div className="mx-auto max-w-7xl px-6">
+        <div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-12">
+          <div className="lg:col-span-1">
+            <Link to="/" className="text-xl font-bold mb-3 block">Apex Studio</Link>
+            <p className="text-sm text-background/60 max-w-xs">Award-winning digital agency crafting experiences that convert and delight.</p>
+            <div className="flex gap-3 mt-6">
+              {[Twitter, Linkedin, Github].map((Icon, i) => (
+                <Button key={i} variant="ghost" size="icon" className="h-9 w-9 text-background/60 hover:text-background">
+                  <Icon className="h-4 w-4" />
+                </Button>
+              ))}
+            </div>
+          </div>
+          <div>
+            <div className="text-sm font-semibold mb-4">Services</div>
+            <ul className="space-y-2.5">
+              {["Design", "Development", "Marketing", "Consulting"].map((link, j) => (
+                <li key={j}>
+                  <Link to="/services" className="text-sm text-background/60 hover:text-background transition-colors">{link}</Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div>
+            <div className="text-sm font-semibold mb-4">Company</div>
+            <ul className="space-y-2.5">
+              {[
+                { label: "About", to: "/team" },
+                { label: "Careers", to: "/team" },
+                { label: "Blog", to: "/blog" },
+                { label: "Press", to: "/blog" },
+              ].map((link, j) => (
+                <li key={j}>
+                  <Link to={link.to} className="text-sm text-background/60 hover:text-background transition-colors">{link.label}</Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div>
+            <div className="text-sm font-semibold mb-4">Resources</div>
+            <ul className="space-y-2.5">
+              {[
+                { label: "Blog", to: "/blog" },
+                { label: "Case Studies", to: "/case-study" },
+                { label: "FAQ", to: "/contact" },
+                { label: "Newsletter", to: "/blog" },
+              ].map((link, j) => (
+                <li key={j}>
+                  <Link to={link.to} className="text-sm text-background/60 hover:text-background transition-colors">{link.label}</Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div>
+            <div className="text-sm font-semibold mb-4">Contact</div>
+            <ul className="space-y-2.5">
+              <li className="flex items-center gap-2 text-sm text-background/60">
+                <MapPin className="h-4 w-4 shrink-0" /> 123 Design Street, SF, CA
+              </li>
+              <li className="flex items-center gap-2 text-sm text-background/60">
+                <Phone className="h-4 w-4 shrink-0" /> +1 (555) 123-4567
+              </li>
+              <li className="flex items-center gap-2 text-sm text-background/60">
+                <Mail className="h-4 w-4 shrink-0" /> hello@apexstudio.com
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div className="mt-12 pt-8 border-t border-background/10 text-center text-sm text-background/40">
+          © 2026 Apex Studio. All rights reserved.
+        </div>
+      </div>
+    </footer>
+  );
+}