vula-projects/vula-90274496
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-31 14:12:29 +00:00
parent ad99258c1f
commit 36538a5133
1 changed files with 78 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+78
View File
@@ -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>
);
}