From b62cf40eba3094af90c65bd00ba31903713179be Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Wed, 29 Jul 2026 19:04:16 +0000
Subject: [PATCH] Deploy

---
 src/components/layout/Footer.tsx | 84 ++++++++++++++++++++++++++++++++
 1 file changed, 84 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..e503d15
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,84 @@
+import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Video, X } from 'lucide-react'
+
+export default function Footer() {
+  const year = new Date().getFullYear()
+  return (
+    <footer className="bg-[#1A2B3C] text-white">
+      <div className="container mx-auto px-4 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {/* Brand & Contact */}
+          <div>
+            <h3 style={{ fontFamily: 'var(--font-heading)' }} className="text-2xl uppercase tracking-wider mb-4">
+              Diva
+            </h3>
+            <div className="space-y-3 text-sm">
+              <div className="flex items-start gap-2">
+                <MapPin className="w-4 h-4 mt-1 flex-shrink-0 text-[#FFD700]" />
+                <span>Suite 17, The Pavilion, V&A Waterfront, Cape Town, 8001</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Phone className="w-4 h-4 flex-shrink-0 text-[#FFD700]" />
+                <span>+27 21 555 2888</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Mail className="w-4 h-4 flex-shrink-0 text-[#FFD700]" />
+                <span>hello@diva.co.za</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Quick Links */}
+          <div>
+            <h4 style={{ fontFamily: 'var(--font-heading)' }} className="text-lg uppercase tracking-wider mb-4">
+              Shop & Explore
+            </h4>
+            <ul className="space-y-2 text-sm">
+              <li><a href="/" className="hover:text-[#FFD700] transition-colors">Home</a></li>
+              <li><a href="/products" className="hover:text-[#FFD700] transition-colors">Products</a></li>
+              <li><a href="/#just-dropped" className="hover:text-[#FFD700] transition-colors">Just Dropped</a></li>
+              <li><a href="/#featured-products" className="hover:text-[#FFD700] transition-colors">Featured Products</a></li>
+              <li><a href="/#most-popular" className="hover:text-[#FFD700] transition-colors">Most Popular</a></li>
+              <li><a href="/#lookbook" className="hover:text-[#FFD700] transition-colors">Diva Lookbook</a></li>
+              <li><a href="/#style-obsessions" className="hover:text-[#FFD700] transition-colors">Style Obsessions</a></li>
+              <li><a href="/#style-diaries" className="hover:text-[#FFD700] transition-colors">Style Diaries</a></li>
+              <li><a href="/#shop-now" className="hover:text-[#FFD700] transition-colors">Shop Now</a></li>
+              <li><a href="/#connect" className="hover:text-[#FFD700] transition-colors">Connect</a></li>
+            </ul>
+          </div>
+
+          {/* Customer Care & Social */}
+          <div>
+            <div className="mb-6">
+              <h4 style={{ fontFamily: 'var(--font-heading)' }} className="text-lg uppercase tracking-wider mb-4">
+                Customer Care
+              </h4>
+              <div className="text-sm space-y-2">
+                <p>Monday – Friday: 8am – 6pm SAST</p>
+                <p>Saturday: 9am – 1pm SAST</p>
+                <p className="text-white/60">Online orders accepted 24/7</p>
+                <a href="/#shipping-returns" className="block text-[#FFD700] hover:underline">Shipping & Returns</a>
+              </div>
+            </div>
+
+            <div>
+              <h4 style={{ fontFamily: 'var(--font-heading)' }} className="text-lg uppercase tracking-wider mb-3">
+                Follow Diva
+              </h4>
+              <div className="flex gap-4 text-xl">
+                <a href="#" aria-label="Facebook" className="hover:text-[#FFD700] transition-colors"><Globe /></a>
+                <a href="#" aria-label="Instagram" className="hover:text-[#FFD700] transition-colors"><Camera /></a>
+                <a href="#" aria-label="X" className="hover:text-[#FFD700] transition-colors"><X /></a>
+                <a href="#" aria-label="TikTok" className="hover:text-[#FFD700] transition-colors"><Video /></a>
+                <a href="#" aria-label="WhatsApp" className="hover:text-[#FFD700] transition-colors"><MessageCircle /></a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="border-t border-white/10 mt-10 pt-6 text-center text-sm text-white/60">
+          <p>&copy; {year} Diva. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  )
+}
\ No newline at end of file