vula-projects/vula-dfe99a27
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-05 18:14:36 +00:00
parent 22063f6759
commit c3c7b061c7
1 changed files with 87 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Footer.tsx
+87
View File
@@ -0,0 +1,87 @@
import Link from 'next/link'
import { Camera, Clock, Globe, Linkedin, Mail, MapPin, MessageCircle, Phone, X } from 'lucide-react'
export default function Footer() {
const currentYear = new Date().getFullYear()
return (
<footer className="border-t border-[#1A2B3C]/15 bg-[#F0F8FF] text-[#1A2B3C]">
<div className="mx-auto max-w-7xl px-6 py-16 lg:px-8">
<div className="grid gap-12 md:grid-cols-2 lg:grid-cols-4">
{/* Contact Information */}
<div>
<h3 className="mb-4 text-sm font-semibold uppercase tracking-widest text-[#0077BE]">Contact</h3>
<ul className="space-y-3 text-sm">
<li className="flex items-start gap-2">
<MapPin className="mt-0.5 h-4 w-4 flex-shrink-0 text-[#00A8CC]" />
<span>Suite 8, Victoria Building, 200 Church Street, Pietermaritzburg, 3201</span>
</li>
<li className="flex items-center gap-2">
<Phone className="h-4 w-4 flex-shrink-0 text-[#00A8CC]" />
<a href="tel:+27331234567" className="transition-colors duration-200 hover:text-[#0077BE]">+27 33 123 4567</a>
</li>
<li className="flex items-center gap-2">
<Mail className="h-4 w-4 flex-shrink-0 text-[#00A8CC]" />
<a href="mailto:info@gumedepartners.co.za" className="transition-colors duration-200 hover:text-[#0077BE]">info@gumedepartners.co.za</a>
</li>
</ul>
</div>
{/* Business Hours */}
<div>
<h3 className="mb-4 text-sm font-semibold uppercase tracking-widest text-[#0077BE]">Office Hours</h3>
<ul className="space-y-2 text-sm">
<li className="flex items-center gap-2">
<Clock className="h-4 w-4 flex-shrink-0 text-[#00A8CC]" />
<span>Mon – Fri: 08:00 – 17:00</span>
</li>
<li className="flex items-center gap-2">
<Clock className="h-4 w-4 flex-shrink-0 text-[#00A8CC]" />
<span>Saturday: 09:00 – 12:00 (by appointment)</span>
</li>
<li className="flex items-center gap-2">
<Clock className="h-4 w-4 flex-shrink-0 text-[#00A8CC]" />
<span>Sunday & Public Holidays: Closed</span>
</li>
</ul>
</div>
{/* Quick Links */}
<div>
<h3 className="mb-4 text-sm font-semibold uppercase tracking-widest text-[#0077BE]">Navigate</h3>
<ul className="space-y-2 text-sm">
<li><Link href="/" className="transition-colors duration-200 hover:text-[#0077BE]">Home</Link></li>
<li><Link href="/#practice-areas" className="transition-colors duration-200 hover:text-[#0077BE]">Practice Areas</Link></li>
<li><Link href="/#about-firm" className="transition-colors duration-200 hover:text-[#0077BE]">About the Firm</Link></li>
<li><Link href="/#legal-team" className="transition-colors duration-200 hover:text-[#0077BE]">Legal Team</Link></li>
<li><Link href="/#office-gallery" className="transition-colors duration-200 hover:text-[#0077BE]">Office Gallery</Link></li>
<li><Link href="/#firm-contact" className="transition-colors duration-200 hover:text-[#0077BE]">Contact</Link></li>
</ul>
</div>
{/* Social & Book */}
<div>
<h3 className="mb-4 text-sm font-semibold uppercase tracking-widest text-[#0077BE]">Connect</h3>
<div className="mb-6 flex space-x-3">
<a href="#" aria-label="Facebook" className="text-[#1A2B3C] transition-colors duration-200 hover:text-[#0077BE]"><Globe className="h-5 w-5" /></a>
<a href="#" aria-label="Instagram" className="text-[#1A2B3C] transition-colors duration-200 hover:text-[#0077BE]"><Camera className="h-5 w-5" /></a>
<a href="#" aria-label="X (Twitter)" className="text-[#1A2B3C] transition-colors duration-200 hover:text-[#0077BE]"><X className="h-5 w-5" /></a>
<a href="#" aria-label="LinkedIn" className="text-[#1A2B3C] transition-colors duration-200 hover:text-[#0077BE]"><Linkedin className="h-5 w-5" /></a>
<a href="#" aria-label="WhatsApp" className="text-[#1A2B3C] transition-colors duration-200 hover:text-[#0077BE]"><MessageCircle className="h-5 w-5" /></a>
</div>
<Link
href="/booking"
className="inline-block rounded-sm border border-[#0077BE] bg-[#0077BE] px-5 py-2.5 text-sm font-semibold text-white transition-all duration-200 ease-out hover:bg-[#005a94] hover:border-[#005a94]"
>
Book Consultation
</Link>
</div>
</div>
<div className="mt-12 border-t border-[#1A2B3C]/15 pt-8 text-center text-xs text-[#1A2B3C]/70">
<p>© {currentYear} Gumede & Partners. All rights reserved. Attorney trust account and legal practice number details available on request.</p>
</div>
</div>
</footer>
)
}