From 172e18e4bcfad777a51c910e58cc3686d23b126f Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Fri, 31 Jul 2026 18:44:25 +0000
Subject: [PATCH] Deploy

---
 src/components/layout/Footer.tsx | 79 ++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 src/components/layout/Footer.tsx

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..d81e5ef
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,79 @@
+import { Camera, Globe, Mail, MapPin, Phone, Star } from 'lucide-react'
+
+import Link from 'next/link'
+
+export default function Footer() {
+  return (
+    <footer className="bg-secondary text-secondary-foreground pt-16 pb-8">
+      <div className="container mx-auto px-6 lg:px-12">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
+          {/* Brand & Contact */}
+          <div>
+            <h3 className="text-xl font-bold mb-4" style={{ fontFamily: 'var(--font-heading)' }}>eKhayalami</h3>
+            <p className="text-sm opacity-80 mb-4 leading-relaxed">
+              Handcrafted homeware from KwaZulu-Natal — contemporary African décor by local artisans.
+            </p>
+            <ul className="space-y-3 text-sm">
+              <li className="flex items-start gap-3">
+                <MapPin size={16} className="mt-0.5 shrink-0 text-primary" />
+                <span>123 Florida Road, Durban, 4001, South Africa</span>
+              </li>
+              <li className="flex items-center gap-3">
+                <Phone size={16} className="shrink-0 text-primary" />
+                <a href="tel:+27310011234" className="hover:text-primary transition-colors">+27 31 001 1234</a>
+              </li>
+              <li className="flex items-center gap-3">
+                <Mail size={16} className="shrink-0 text-primary" />
+                <a href="mailto:hello@ekhayalami.co.za" className="hover:text-primary transition-colors">hello@ekhayalami.co.za</a>
+              </li>
+            </ul>
+          </div>
+
+          {/* Quick Links */}
+          <div>
+            <h4 className="text-lg font-semibold mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Quick Links</h4>
+            <ul className="space-y-3 text-sm">
+              <li><Link href="/" className="hover:text-primary transition-colors">Home</Link></li>
+              <li><Link href="/products" className="hover:text-primary transition-colors">Products</Link></li>
+              <li><Link href="/#our-heritage" className="hover:text-primary transition-colors">Our Heritage</Link></li>
+              <li><Link href="/#artisans-gallery" className="hover:text-primary transition-colors">Gallery</Link></li>
+              <li><Link href="/#artisan-stories" className="hover:text-primary transition-colors">Artisan Stories</Link></li>
+              <li><Link href="/#contact" className="hover:text-primary transition-colors">Contact</Link></li>
+            </ul>
+          </div>
+
+          {/* Business Hours */}
+          <div>
+            <h4 className="text-lg font-semibold mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Showroom Hours</h4>
+            <ul className="space-y-2 text-sm">
+              <li className="flex justify-between"><span>Monday – Friday</span><span>9:00 AM – 5:00 PM</span></li>
+              <li className="flex justify-between"><span>Saturday</span><span>9:00 AM – 1:00 PM</span></li>
+              <li className="flex justify-between"><span>Sunday</span><span>Closed</span></li>
+            </ul>
+            <p className="text-xs mt-3 opacity-70">Online orders ship nationwide, Mon–Fri.</p>
+          </div>
+
+          {/* Social & Newsletter CTA */}
+          <div>
+            <h4 className="text-lg font-semibold mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Follow Along</h4>
+            <div className="flex space-x-4 mb-6">
+              <a href="#" aria-label="Instagram" className="hover:text-primary transition-colors"><Camera size={20} /></a>
+              <a href="#" aria-label="Facebook" className="hover:text-primary transition-colors"><Globe size={20} /></a>
+              <a href="#" aria-label="Pinterest" className="hover:text-primary transition-colors"><Star size={20} /></a>
+            </div>
+            <p className="text-xs opacity-70">Tag your style with <strong>#MyEKhayalami</strong></p>
+          </div>
+        </div>
+
+        {/* Bottom bar */}
+        <div className="border-t border-white/10 pt-6 flex flex-col sm:flex-row justify-between items-center text-xs opacity-70">
+          <span>&copy; {new Date().getFullYear()} eKhayalami. All rights reserved.</span>
+          <div className="flex gap-4 mt-2 sm:mt-0">
+            <Link href="#" className="hover:text-primary transition-colors">Privacy Policy</Link>
+            <Link href="#" className="hover:text-primary transition-colors">Terms of Service</Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
\ No newline at end of file