From 1a53535e413c33952f01845ff84974d686d7a8eb Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 28 Jul 2026 09:03:27 +0000
Subject: [PATCH] Deploy

---
 src/components/layout/Footer.tsx | 92 ++++++++++++++++++++++++++++++++
 1 file changed, 92 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..a36c752
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,92 @@
+import Link from 'next/link'
+import { Camera, Globe, Mail, MapPin, MessageCircle, Phone } from 'lucide-react'
+
+export default function Footer() {
+  const year = new Date().getFullYear()
+
+  return (
+    <footer className="bg-background text-foreground border-t border-border">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+          {/* Brand & Tagline */}
+          <div className="lg:col-span-1">
+            <h3 className="text-xl font-semibold mb-3" style={{ fontFamily: 'var(--font-display)' }}>
+              Ngcobo Naturals
+            </h3>
+            <p className="text-muted-foreground text-sm leading-relaxed">
+              From raw botanicals to radiant skin — small‑batch skincare rooted in indigenous African wisdom.
+            </p>
+          </div>
+
+          {/* Quick Links */}
+          <div>
+            <h4 className="text-sm font-semibold uppercase tracking-wide mb-4" style={{ fontFamily: 'var(--font-display)' }}>
+              Explore
+            </h4>
+            <ul className="space-y-2 text-sm">
+              <li><Link href="/" className="hover:text-primary transition-colors duration-200">Home</Link></li>
+              <li><Link href="/products" className="hover:text-primary transition-colors duration-200">Products</Link></li>
+              <li><Link href="#featured-products" className="hover:text-primary transition-colors duration-200">Featured Products</Link></li>
+              <li><Link href="#ingredient-story" className="hover:text-primary transition-colors duration-200">Ingredient Story</Link></li>
+              <li><Link href="#bestsellers-grid" className="hover:text-primary transition-colors duration-200">Bestsellers</Link></li>
+              <li><Link href="#gallery" className="hover:text-primary transition-colors duration-200">Gallery</Link></li>
+              <li><Link href="#contact" className="hover:text-primary transition-colors duration-200">Contact</Link></li>
+            </ul>
+          </div>
+
+          {/* Contact */}
+          <div>
+            <h4 className="text-sm font-semibold uppercase tracking-wide mb-4" style={{ fontFamily: 'var(--font-display)' }}>
+              Get in touch
+            </h4>
+            <ul className="space-y-3 text-sm">
+              <li className="flex items-start gap-2">
+                <MapPin size={16} className="mt-0.5 shrink-0 text-secondary" />
+                <span>Pretoria, Gauteng, South Africa</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <Phone size={16} className="shrink-0 text-secondary" />
+                <a href="tel:+27123456789" className="hover:text-primary transition-colors duration-200">+27 12 345 6789</a>
+              </li>
+              <li className="flex items-center gap-2">
+                <Mail size={16} className="shrink-0 text-secondary" />
+                <a href="mailto:hello@ngcobonaturals.co.za" className="hover:text-primary transition-colors duration-200">hello@ngcobonaturals.co.za</a>
+              </li>
+              <li className="flex items-center gap-2">
+                <MessageCircle className="shrink-0 text-secondary" />
+                <a href="https://wa.me/27821234567" target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors duration-200">Chat on WhatsApp</a>
+              </li>
+            </ul>
+          </div>
+
+          {/* Business Hours & Social */}
+          <div>
+            <h4 className="text-sm font-semibold uppercase tracking-wide mb-4" style={{ fontFamily: 'var(--font-display)' }}>
+              Hours &amp; Follow
+            </h4>
+            <div className="text-sm space-y-1 mb-4">
+              <p>Mon–Fri <span className="text-muted-foreground">09:00 – 17:00</span></p>
+              <p>Sat <span className="text-muted-foreground">09:00 – 13:00</span></p>
+              <p>Sun <span className="text-muted-foreground">Closed</span></p>
+            </div>
+            <div className="flex items-center gap-3">
+              <a href="https://facebook.com/ngcobonaturals" target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="text-foreground hover:text-primary transition-colors duration-200">
+                <Globe size={18} />
+              </a>
+              <a href="https://instagram.com/ngcobonaturals" target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="text-foreground hover:text-primary transition-colors duration-200">
+                <Camera size={18} />
+              </a>
+              <a href="https://wa.me/27821234567" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" className="text-foreground hover:text-primary transition-colors duration-200">
+                <MessageCircle size={18} />
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div className="border-t border-border mt-10 pt-6 text-xs text-muted-foreground text-center">
+          &copy; {year} Ngcobo Naturals. All rights reserved.
+        </div>
+      </div>
+    </footer>
+  )
+}
\ No newline at end of file