Deploy
This commit is contained in:
Vula Builder
@@ -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">
|
||||||
|
© {year} Zama Salon. All rights reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user