vula-projects/vula-9ad325dd
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-08-03 11:42:10 +00:00
parent 77e7e1e0c2
commit a102893607
1 changed files with 142 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+142
View File
@@ -0,0 +1,142 @@
import { Camera, Globe, Mail, MapPin, MessageCircle, Phone } from 'lucide-react'
import Link from 'next/link'
export default function Footer() {
const year = new Date().getFullYear()
return (
<footer className="bg-[#1A2B3C] text-white py-12">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 gap-8 md:grid-cols-12">
{/* Brand & contact */}
<div className="md:col-span-4">
<h3 className="font-display text-2xl font-semibold mb-4" style={{ fontFamily: 'var(--font-display)' }}>
Zama Salon
</h3>
<p className="text-white/70 mb-6 leading-relaxed">
Expert hair and nail services for natural and chemically treated hair — cuts, colouring, keratin, braids, and more in the heart of Fourways.
</p>
<div className="space-y-3 text-white/85">
<div className="flex items-start gap-3">
<MapPin className="w-5 h-5 mt-0.5 flex-shrink-0 text-[#FFD700]" />
<span>Cedar Square Shopping Centre, Fourways, Johannesburg</span>
</div>
<div className="flex items-center gap-3">
<Phone className="w-5 h-5 flex-shrink-0 text-[#FFD700]" />
<a href="tel:+27112345678" className="hover:text-[#FFD700] transition-colors duration-200">
+27 11 234 5678
</a>
</div>
<div className="flex items-center gap-3">
<Mail className="w-5 h-5 flex-shrink-0 text-[#FFD700]" />
<a href="mailto:hello@zamasalon.co.za" className="hover:text-[#FFD700] transition-colors duration-200">
hello@zamasalon.co.za
</a>
</div>
</div>
</div>
{/* Quick links */}
<div className="md:col-span-3">
<h4 className="font-semibold text-lg mb-4">Quick Links</h4>
<ul className="space-y-2">
<li>
<Link href="/" className="text-white/75 hover:text-[#FFD700] transition-colors duration-200">
Home
</Link>
</li>
<li>
<Link href="/services" className="text-white/75 hover:text-[#FFD700] transition-colors duration-200">
Services
</Link>
</li>
<li>
<a href="#salon-story" className="text-white/75 hover:text-[#FFD700] transition-colors duration-200">
About
</a>
</li>
<li>
<a href="#salon-gallery" className="text-white/75 hover:text-[#FFD700] transition-colors duration-200">
Gallery
</a>
</li>
<li>
<a href="#salon-insights" className="text-white/75 hover:text-[#FFD700] transition-colors duration-200">
Blog
</a>
</li>
<li>
<a href="#location-contact" className="text-white/75 hover:text-[#FFD700] transition-colors duration-200">
Contact
</a>
</li>
</ul>
</div>
{/* Business hours */}
<div className="md:col-span-2">
<h4 className="font-semibold text-lg mb-4">Hours</h4>
<ul className="space-y-2 text-white/85">
<li className="flex justify-between">
<span>Mon – Fri</span>
<span>9am – 7pm</span>
</li>
<li className="flex justify-between">
<span>Saturday</span>
<span>8am – 6pm</span>
</li>
<li className="flex justify-between">
<span>Sunday</span>
<span>10am – 4pm</span>
</li>
</ul>
</div>
{/* Social */}
<div className="md:col-span-3">
<h4 className="font-semibold text-lg mb-4">Follow Us</h4>
<div className="flex space-x-4 mb-6">
<a
href="https://instagram.com/zamasalon"
target="_blank"
rel="noopener noreferrer"
className="text-white/80 hover:text-[#FFD700] transition-colors duration-200"
aria-label="Instagram"
>
<Camera className="w-6 h-6" />
</a>
<a
href="https://facebook.com/zamasalon"
target="_blank"
rel="noopener noreferrer"
className="text-white/80 hover:text-[#FFD700] transition-colors duration-200"
aria-label="Facebook"
>
<Globe className="w-6 h-6" />
</a>
<a
href="https://wa.me/27112345678"
target="_blank"
rel="noopener noreferrer"
className="text-white/80 hover:text-[#FFD700] transition-colors duration-200"
aria-label="WhatsApp"
>
<MessageCircle className="w-6 h-6" />
</a>
</div>
<p className="text-sm text-white/60">
Tag us with{' '}
<span className="text-[#FFD700] font-medium">#ZamaSalon</span>{' '}
— we love seeing your fresh look!
</p>
</div>
</div>
<div className="border-t border-white/10 mt-10 pt-6 text-center text-sm text-white/60">
&copy; {year} Zama Salon. All rights reserved.
</div>
</div>
</footer>
)
}