From fca2c25e12f5891e61f92e08815ddaa554f077d1 Mon Sep 17 00:00:00 2001
From: Biswa Kalyan Bhuyan <biswa@surgot.in>
Date: Wed, 28 May 2025 16:30:40 +0530
Subject: feat: added frontpage layout

---
 frontend/src/components/footer.tsx | 267 +++++++++++++++++++++++++++++++++++++
 1 file changed, 267 insertions(+)
 create mode 100644 frontend/src/components/footer.tsx

(limited to 'frontend/src/components/footer.tsx')

diff --git a/frontend/src/components/footer.tsx b/frontend/src/components/footer.tsx
new file mode 100644
index 0000000..d7c8ae7
--- /dev/null
+++ b/frontend/src/components/footer.tsx
@@ -0,0 +1,267 @@
+import Link from "next/link";
+import Image from "next/image";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import {
+  Facebook,
+  Instagram,
+  Twitter,
+  Youtube,
+  Mail,
+  Phone,
+  MapPin,
+  CreditCard,
+  Shield,
+  Truck,
+  RefreshCw,
+} from "lucide-react";
+
+export function Footer() {
+  const currentYear = new Date().getFullYear();
+
+  const footerLinks = {
+    shop: [
+      { name: "Women", href: "/women" },
+      { name: "Men", href: "/men" },
+      { name: "Kids", href: "/kids" },
+      { name: "Sale", href: "/sale" },
+      { name: "New Arrivals", href: "/new-arrivals" },
+      { name: "Best Sellers", href: "/best-sellers" },
+    ],
+    company: [
+      { name: "About Us", href: "/about" },
+      { name: "Careers", href: "/careers" },
+      { name: "Press", href: "/press" },
+      { name: "Sustainability", href: "/sustainability" },
+      { name: "Store Locator", href: "/stores" },
+    ],
+    help: [
+      { name: "Customer Service", href: "/customer-service" },
+      { name: "Size Guide", href: "/size-guide" },
+      { name: "Shipping & Returns", href: "/shipping-returns" },
+      { name: "Track Your Order", href: "/track-order" },
+      { name: "FAQ", href: "/faq" },
+      { name: "Contact Us", href: "/contact" },
+    ],
+    legal: [
+      { name: "Privacy Policy", href: "/privacy" },
+      { name: "Terms of Service", href: "/terms" },
+      { name: "Cookie Policy", href: "/cookies" },
+      { name: "Accessibility", href: "/accessibility" },
+    ],
+  };
+
+  return (
+    <footer className="bg-neutral-50 border-t">
+      {/* Newsletter Section */}
+      <div className="bg-black text-white">
+        <div className="container mx-auto px-4 py-12">
+          <div className="max-w-2xl mx-auto text-center">
+            <h2 className="text-2xl font-bold mb-4">Stay in the loop</h2>
+            <p className="text-neutral-300 mb-6">
+              Subscribe to our newsletter and be the first to know about new arrivals, sales, and exclusive offers.
+            </p>
+            <div className="flex max-w-md mx-auto gap-3">
+              <Input
+                placeholder="Enter your email"
+                className="bg-white text-black placeholder:text-gray-500"
+              />
+              <Button variant="secondary" className="px-8">
+                Subscribe
+              </Button>
+            </div>
+            <p className="text-xs text-neutral-400 mt-3">
+              By subscribing, you agree to our Privacy Policy and Terms of Service.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Footer Content */}
+      <div className="container mx-auto px-4 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
+          {/* Brand Info */}
+          <div className="lg:col-span-2">
+            <Link href="/" className="flex items-center space-x-2 mb-4">
+              <Image
+                src="/black-logo.png"
+                alt="blcklst"
+                width={140}
+                height={45}
+                className="h-8 w-auto"
+              />
+            </Link>
+            <p className="text-muted-foreground mb-6 max-w-md">
+              not everyone gets blcklsted - discover carefully curated fashion pieces that define modern elegance and exclusivity.
+            </p>
+            
+            {/* Contact Info */}
+            <div className="space-y-3 mb-6">
+              <div className="flex items-center space-x-3 text-sm">
+                <Phone className="h-4 w-4 text-muted-foreground" />
+                <span>+1 (555) 123-4567</span>
+              </div>
+              <div className="flex items-center space-x-3 text-sm">
+                <Mail className="h-4 w-4 text-muted-foreground" />
+                <span>hello@blcklst.com</span>
+              </div>
+              <div className="flex items-center space-x-3 text-sm">
+                <MapPin className="h-4 w-4 text-muted-foreground" />
+                <span>123 Fashion St, New York, NY 10001</span>
+              </div>
+            </div>
+
+            {/* Social Media */}
+            <div className="flex space-x-4">
+              <Link href="#" className="text-muted-foreground hover:text-foreground">
+                <Facebook className="h-5 w-5" />
+              </Link>
+              <Link href="#" className="text-muted-foreground hover:text-foreground">
+                <Instagram className="h-5 w-5" />
+              </Link>
+              <Link href="#" className="text-muted-foreground hover:text-foreground">
+                <Twitter className="h-5 w-5" />
+              </Link>
+              <Link href="#" className="text-muted-foreground hover:text-foreground">
+                <Youtube className="h-5 w-5" />
+              </Link>
+            </div>
+          </div>
+
+          {/* Shop Links */}
+          <div>
+            <h3 className="font-semibold mb-4">Shop</h3>
+            <ul className="space-y-3">
+              {footerLinks.shop.map((link) => (
+                <li key={link.name}>
+                  <Link
+                    href={link.href}
+                    className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    {link.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Company Links */}
+          <div>
+            <h3 className="font-semibold mb-4">Company</h3>
+            <ul className="space-y-3">
+              {footerLinks.company.map((link) => (
+                <li key={link.name}>
+                  <Link
+                    href={link.href}
+                    className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    {link.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Help Links */}
+          <div>
+            <h3 className="font-semibold mb-4">Help</h3>
+            <ul className="space-y-3">
+              {footerLinks.help.map((link) => (
+                <li key={link.name}>
+                  <Link
+                    href={link.href}
+                    className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    {link.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* Features Section */}
+        <div className="mt-12 pt-8 border-t">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+            <div className="flex items-center space-x-3">
+              <div className="bg-primary/10 p-2 rounded-full">
+                <Truck className="h-5 w-5 text-primary" />
+              </div>
+              <div>
+                <h4 className="font-medium text-sm">Free Shipping</h4>
+                <p className="text-xs text-muted-foreground">On orders over $100</p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-3">
+              <div className="bg-primary/10 p-2 rounded-full">
+                <RefreshCw className="h-5 w-5 text-primary" />
+              </div>
+              <div>
+                <h4 className="font-medium text-sm">Easy Returns</h4>
+                <p className="text-xs text-muted-foreground">30-day return policy</p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-3">
+              <div className="bg-primary/10 p-2 rounded-full">
+                <Shield className="h-5 w-5 text-primary" />
+              </div>
+              <div>
+                <h4 className="font-medium text-sm">Secure Payment</h4>
+                <p className="text-xs text-muted-foreground">SSL encrypted checkout</p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-3">
+              <div className="bg-primary/10 p-2 rounded-full">
+                <CreditCard className="h-5 w-5 text-primary" />
+              </div>
+              <div>
+                <h4 className="font-medium text-sm">Multiple Payment</h4>
+                <p className="text-xs text-muted-foreground">Cards, PayPal & more</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom Footer */}
+      <div className="border-t bg-neutral-100">
+        <div className="container mx-auto px-4 py-6">
+          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+            <div className="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-6">
+              <p className="text-sm text-muted-foreground">
+                © {currentYear} blcklst. All rights reserved.
+              </p>
+              <div className="flex space-x-4">
+                {footerLinks.legal.map((link) => (
+                  <Link
+                    key={link.name}
+                    href={link.href}
+                    className="text-xs text-muted-foreground hover:text-foreground"
+                  >
+                    {link.name}
+                  </Link>
+                ))}
+              </div>
+            </div>
+            
+            {/* Payment Methods */}
+            <div className="flex items-center space-x-2">
+              <span className="text-xs text-muted-foreground mr-2">We accept:</span>
+              <div className="flex space-x-1">
+                {["Visa", "Mastercard", "AmEx", "PayPal", "Apple Pay"].map((method) => (
+                  <div
+                    key={method}
+                    className="bg-white border rounded px-2 py-1 text-xs font-medium"
+                  >
+                    {method}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+} 
\ No newline at end of file
-- 
cgit v1.2.3-59-g8ed1b