vula-projects/vula-5be28755
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 07:32:30 +00:00
parent 341b4a9e3c
commit 2b368855e6
1 changed files with 108 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+108
View File
@@ -0,0 +1,108 @@
import Link from 'next/link';
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone, X } from 'lucide-react';
;
export default function Footer() {
const currentYear = new Date().getFullYear();
return (
<footer className="bg-[#f9f5f4] border-t border-[#e2dad4] text-[#21140d] py-16 px-6 md:px-12 lg:px-24">
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
{/* Brand / Contact */}
<div>
<h4 className="text-lg font-heading font-bold text-[#8b5a3c] mb-4">Ndlovu Naturals</h4>
<ul className="space-y-3 text-sm">
<li className="flex items-start gap-2">
<MapPin className="w-5 h-5 text-[#16a34a] mt-0.5 shrink-0" />
<span>123 Thabo Sehume Street, Pretoria, 0001</span>
</li>
<li className="flex items-center gap-2">
<Phone className="w-5 h-5 text-[#16a34a] shrink-0" />
<span>+27 12 345 6789</span>
</li>
<li className="flex items-center gap-2">
<Mail className="w-5 h-5 text-[#16a34a] shrink-0" />
<span>info@ndlovunaturals.co.za</span>
</li>
</ul>
</div>
{/* Quick Links */}
<div>
<h4 className="text-lg font-heading font-bold text-[#8b5a3c] mb-4">Quick Links</h4>
<ul className="space-y-2 text-sm">
<li>
<Link href="/" className="hover:text-[#ea580c] transition-colors">
Home
</Link>
</li>
<li>
<Link href="/products" className="hover:text-[#ea580c] transition-colors">
Products
</Link>
</li>
<li>
<Link href="#indigenous-botanicals" className="hover:text-[#ea580c] transition-colors">
Our Story
</Link>
</li>
<li>
<Link href="#bestselling-botanicals" className="hover:text-[#ea580c] transition-colors">
Bestsellers
</Link>
</li>
<li>
<Link href="#connect-with-us" className="hover:text-[#ea580c] transition-colors">
Contact
</Link>
</li>
<li>
<Link href="#visit-pretoria-oasis" className="hover:text-[#ea580c] transition-colors">
Visit Us
</Link>
</li>
</ul>
</div>
{/* Business Hours */}
<div>
<h4 className="text-lg font-heading font-bold text-[#8b5a3c] mb-4">Visit Our Workshop</h4>
<ul className="text-sm space-y-1">
<li>Monday – Friday</li>
<li className="font-medium">9:00 AM – 5:00 PM</li>
<li>Saturday</li>
<li className="font-medium">9:00 AM – 1:00 PM</li>
<li>Sunday & Public Holidays</li>
<li className="font-medium">Closed</li>
</ul>
</div>
{/* Social & Newsletter hint */}
<div>
<h4 className="text-lg font-heading font-bold text-[#8b5a3c] mb-4">Stay Connected</h4>
<div className="flex gap-4 text-2xl text-[#8b5a3c]">
<a href="https://facebook.com/ndlovunaturals" aria-label="Facebook" className="hover:text-[#ea580c] transition-colors">
<Globe />
</a>
<a href="https://instagram.com/ndlovunaturals" aria-label="Instagram" className="hover:text-[#ea580c] transition-colors">
<Camera />
</a>
<a href="https://x.com/ndlovunaturals" aria-label="X (Twitter)" className="hover:text-[#ea580c] transition-colors">
<X />
</a>
<a href="https://wa.me/27123456789" aria-label="WhatsApp" className="hover:text-[#ea580c] transition-colors">
<MessageCircle />
</a>
</div>
<p className="text-xs mt-5 text-[#8b5a3c]/70">
Subscribe for cold‑pressed tips and new releases.
</p>
</div>
</div>
<div className="max-w-7xl mx-auto mt-12 pt-6 border-t border-[#e2dad4] text-center text-sm text-[#8b5a3c]">
<p>© {currentYear} Ndlovu Naturals. All rights reserved.</p>
</div>
</footer>
);
}