vula-projects/vula-b60f0248
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy

Browse Source
This commit is contained in:
Vula Builder
2026-07-28 12:39:40 +00:00
parent 8c71e4b9a8
commit 55319b8ba9
1 changed files with 75 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+75
View File
@@ -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>
)
}