From 36538a51336557552ff52301e624421a5c5a8124 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Fri, 31 Jul 2026 14:12:29 +0000
Subject: [PATCH] Deploy

---
 src/components/layout/Footer.tsx | 78 ++++++++++++++++++++++++++++++++
 1 file changed, 78 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..9a5a089
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,78 @@
+import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, Star } from 'lucide-react';
+;
+
+const currentYear = new Date().getFullYear();
+
+export default function Footer() {
+  return (
+    <footer className="bg-[#f9f5f4] border-t border-[#e2d9d4] text-[#21140d]">
+      <div className="max-w-7xl mx-auto px-6 py-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
+        {/* Company info */}
+        <div>
+          <h3 className="text-xl font-bold font-heading mb-4" style={{ fontFamily: 'var(--font-heading)' }}>iKhaya Home</h3>
+          <p className="text-sm leading-relaxed mb-4">
+            Handcrafted homeware from Durban, South Africa — cushions, throws, and ceramic décor made by local artisans using skills passed down generations.
+          </p>
+          <div className="flex space-x-3 mt-4">
+            <a href="#" aria-label="Facebook" className="text-[#6b8e23] hover:text-[#ea580c] transition-colors duration-200"><Globe size={18} /></a>
+            <a href="#" aria-label="Instagram" className="text-[#6b8e23] hover:text-[#ea580c] transition-colors duration-200"><Camera size={18} /></a>
+            <a href="#" aria-label="Pinterest" className="text-[#6b8e23] hover:text-[#ea580c] transition-colors duration-200"><Star size={18} /></a>
+            <a href="#" aria-label="WhatsApp" className="text-[#6b8e23] hover:text-[#ea580c] transition-colors duration-200"><MessageCircle size={18} /></a>
+          </div>
+        </div>
+
+        {/* Quick links */}
+        <div>
+          <h4 className="text-lg font-semibold font-heading mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Shop & Explore</h4>
+          <ul className="space-y-2 text-sm">
+            <li><a href="/" className="hover:text-[#ea580c] transition-colors duration-200">Home</a></li>
+            <li><a href="/products" className="hover:text-[#ea580c] transition-colors duration-200">Products</a></li>
+            <li><a href="/#our-story" className="hover:text-[#ea580c] transition-colors duration-200">Our Story</a></li>
+            <li><a href="/#gallery" className="hover:text-[#ea580c] transition-colors duration-200">Umuzi Gallery</a></li>
+            <li><a href="/#collections" className="hover:text-[#ea580c] transition-colors duration-200">Collections</a></li>
+            <li><a href="/#contact" className="hover:text-[#ea580c] transition-colors duration-200">Contact</a></li>
+          </ul>
+        </div>
+
+        {/* Customer Service */}
+        <div>
+          <h4 className="text-lg font-semibold font-heading mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Customer Care</h4>
+          <ul className="space-y-2 text-sm">
+            <li><a href="#" className="hover:text-[#ea580c] transition-colors duration-200">Shipping & Returns</a></li>
+            <li><a href="#" className="hover:text-[#ea580c] transition-colors duration-200">Care Instructions</a></li>
+            <li><a href="#" className="hover:text-[#ea580c] transition-colors duration-200">Artisan Partnerships</a></li>
+            <li><a href="#" className="hover:text-[#ea580c] transition-colors duration-200">FAQs</a></li>
+            <li><a href="#" className="hover:text-[#ea580c] transition-colors duration-200">Privacy Policy</a></li>
+          </ul>
+        </div>
+
+        {/* Contact & Hours */}
+        <div>
+          <h4 className="text-lg font-semibold font-heading mb-4" style={{ fontFamily: 'var(--font-heading)' }}>Reach Us</h4>
+          <ul className="space-y-3 text-sm">
+            <li className="flex items-start gap-2">
+              <MapPin size={16} className="mt-0.5 text-[#6b8e23]" />
+              <span>123 Florida Road, Durban,<br />KwaZulu-Natal 4001</span>
+            </li>
+            <li className="flex items-center gap-2">
+              <Phone size={16} className="text-[#6b8e23]" />
+              <a href="tel:+27310000000" className="hover:text-[#ea580c] transition-colors duration-200">+27 31 000 0000</a>
+            </li>
+            <li className="flex items-center gap-2">
+              <Mail size={16} className="text-[#6b8e23]" />
+              <a href="mailto:hello@ikhayahome.co.za" className="hover:text-[#ea580c] transition-colors duration-200">hello@ikhayahome.co.za</a>
+            </li>
+            <li className="pt-2 text-xs text-gray-600">
+              <span className="block">Customer support:</span>
+              <span className="block">Mon–Fri 08:00–17:00 SAST</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="border-t border-[#e2d9d4] py-5 text-center text-xs text-[#8b5a3c]">
+        <p>© {currentYear} iKhaya Home. All rights reserved.</p>
+      </div>
+    </footer>
+  );
+}
\ No newline at end of file