From 55319b8ba9c798e908c63ef2c6e826f2ee246c7d Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 28 Jul 2026 12:39:40 +0000
Subject: [PATCH] Deploy

---
 src/components/layout/Footer.tsx | 75 ++++++++++++++++++++++++++++++++
 1 file changed, 75 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..b6eee68
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,75 @@
+import { Camera, Clock, Globe, Mail, MapPin, MessageCircle, Phone, Video, X } from 'lucide-react'
+
+export default function Footer() {
+  return (
+    <footer className="bg-card text-card-foreground border-t border-border">
+      <div className="max-w-7xl mx-auto px-6 py-16 grid grid-cols-1 md:grid-cols-4 gap-10">
+        <div>
+          <h2 className="text-xl font-semibold text-primary mb-4">Ngema Naturals</h2>
+          <p className="text-sm leading-relaxed text-foreground/80">
+            Ngema Naturals creates handcrafted, small‑batch skincare from indigenous South African botanicals like marula, rooibos, and buchu. Siyabonga for supporting our journey.
+          </p>
+        </div>
+
+        <div>
+          <h3 className="text-sm font-semibold text-secondary mb-4 uppercase tracking-wide">Quick Links</h3>
+          <ul className="space-y-2 text-sm">
+            <li><a href="/" className="hover:text-primary transition-colors">Home</a></li>
+            <li><a href="/products" className="hover:text-primary transition-colors">Products</a></li>
+            <li><a href="#indigenous-botanicals" className="hover:text-primary transition-colors">Indigenous Botanicals</a></li>
+            <li><a href="#bestsellers" className="hover:text-primary transition-colors">Bestsellers</a></li>
+            <li><a href="#our-story" className="hover:text-primary transition-colors">Our Story</a></li>
+            <li><a href="#visit-us" className="hover:text-primary transition-colors">Visit Us</a></li>
+            <li><a href="#contact" className="hover:text-primary transition-colors">Contact</a></li>
+          </ul>
+        </div>
+
+        <div>
+          <h3 className="text-sm font-semibold text-secondary mb-4 uppercase tracking-wide">Contact</h3>
+          <ul className="space-y-3 text-sm">
+            <li className="flex items-start gap-2">
+              <MapPin className="w-4 h-4 mt-0.5 text-primary" />
+              <span>24 Jacaranda Ave, Waterkloof, Pretoria, 0181</span>
+            </li>
+            <li className="flex items-center gap-2">
+              <Phone className="w-4 h-4 text-primary" />
+              <a href="tel:+27123456789" className="hover:text-primary transition-colors">+27 12 345 6789</a>
+            </li>
+            <li className="flex items-center gap-2">
+              <Mail className="w-4 h-4 text-primary" />
+              <a href="mailto:hello@ngemanaturals.co.za" className="hover:text-primary transition-colors">hello@ngemanaturals.co.za</a>
+            </li>
+          </ul>
+        </div>
+
+        <div>
+          <h3 className="text-sm font-semibold text-secondary mb-4 uppercase tracking-wide">Hours &amp; Social</h3>
+          <ul className="space-y-2 text-sm mb-6">
+            <li className="flex items-center gap-2">
+              <Clock className="w-4 h-4 text-primary" />
+              <span>Mon‑Fri 9:00 – 17:00</span>
+            </li>
+            <li className="flex items-center gap-2">
+              <Clock className="w-4 h-4 text-primary" />
+              <span>Sat 9:00 – 13:00</span>
+            </li>
+            <li className="flex items-center gap-2">
+              <Clock className="w-4 h-4 text-primary" />
+              <span>Sun closed</span>
+            </li>
+          </ul>
+          <div className="flex gap-4 items-center">
+            <a href="#" aria-label="Facebook" className="text-foreground/70 hover:text-primary transition-colors"><Globe className="w-5 h-5" /></a>
+            <a href="#" aria-label="Instagram" className="text-foreground/70 hover:text-primary transition-colors"><Camera className="w-5 h-5" /></a>
+            <a href="#" aria-label="X" className="text-foreground/70 hover:text-primary transition-colors"><X className="w-5 h-5" /></a>
+            <a href="#" aria-label="TikTok" className="text-foreground/70 hover:text-primary transition-colors"><Video className="w-5 h-5" /></a>
+            <a href="#" aria-label="WhatsApp" className="text-foreground/70 hover:text-primary transition-colors"><MessageCircle className="w-5 h-5" /></a>
+          </div>
+        </div>
+      </div>
+      <div className="border-t border-border py-5 text-center text-xs text-foreground/60">
+        &copy; 2025 Ngema Naturals. All rights reserved. &mdash; Rooted in ubuntu, crafted in Pretoria.
+      </div>
+    </footer>
+  )
+}
\ No newline at end of file