Initial: ecommerce template via tAI

2026-05-21 12:19:54 +01:00
commit dea01a3c01
19 changed files with 2306 additions and 0 deletions
@@ -0,0 +1,93 @@
+import { Link } from "react-router-dom";
+import { Separator } from "@/components/ui/separator";
+
+const footerLinks = {
+  shop: [
+    { label: "New Arrivals", to: "/products" },
+    { label: "Best Sellers", to: "/products" },
+    { label: "Sale", to: "/products" },
+    { label: "Collections", to: "/products" },
+  ],
+  help: [
+    { label: "Customer Service", to: "/" },
+    { label: "Size Guide", to: "/" },
+    { label: "Shipping & Returns", to: "/" },
+    { label: "FAQ", to: "/" },
+  ],
+  about: [
+    { label: "Our Story", to: "/" },
+    { label: "Sustainability", to: "/" },
+    { label: "Careers", to: "/" },
+    { label: "Press", to: "/" },
+  ],
+};
+
+export default function Footer() {
+  return (
+    <footer className="bg-stone-900 text-white">
+      <div className="mx-auto max-w-7xl px-6 py-16">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-10">
+          {/* Brand */}
+          <div className="col-span-2 md:col-span-1">
+            <h3 className="text-lg font-bold mb-4">StyleHaus</h3>
+            <p className="text-sm text-stone-400 leading-relaxed">
+              Discover curated collections of premium fashion, accessories, and lifestyle essentials crafted for the modern individual.
+            </p>
+          </div>
+
+          {/* Shop */}
+          <div>
+            <h4 className="font-semibold text-sm mb-4 text-stone-300 uppercase tracking-wider">Shop</h4>
+            <ul className="space-y-3">
+              {footerLinks.shop.map((link) => (
+                <li key={link.label}>
+                  <Link to={link.to} className="text-sm text-stone-400 hover:text-white transition-colors">{link.label}</Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Help */}
+          <div>
+            <h4 className="font-semibold text-sm mb-4 text-stone-300 uppercase tracking-wider">Help</h4>
+            <ul className="space-y-3">
+              {footerLinks.help.map((link) => (
+                <li key={link.label}>
+                  <Link to={link.to} className="text-sm text-stone-400 hover:text-white transition-colors">{link.label}</Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* About */}
+          <div>
+            <h4 className="font-semibold text-sm mb-4 text-stone-300 uppercase tracking-wider">About</h4>
+            <ul className="space-y-3">
+              {footerLinks.about.map((link) => (
+                <li key={link.label}>
+                  <Link to={link.to} className="text-sm text-stone-400 hover:text-white transition-colors">{link.label}</Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <Separator className="my-10 bg-stone-800" />
+
+        {/* Payment & Copyright */}
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
+          <p className="text-xs text-stone-500">
+            &copy; 2024 StyleHaus. All rights reserved.
+          </p>
+          <div className="flex items-center gap-3">
+            {["Visa", "Mastercard", "Amex", "PayPal", "Apple Pay"].map((method) => (
+              <span key={method} className="text-xs text-stone-500 bg-stone-800 px-2 py-1 rounded">
+                {method}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}