vibeasite-templates/template-healthcare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seed: healthcare template (18 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:12:00 +00:00
parent 1a5822db46
commit aa7b3429b8
1 changed files with 67 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.tsx
+67
View File
@@ -0,0 +1,67 @@
import { Link } from "react-router-dom";
import { MapPin, Phone, Mail, Clock, Facebook, Twitter, Linkedin, Instagram, AlertTriangle } from "lucide-react";
export default function Footer() {
return (
<footer className="bg-slate-950 text-slate-300 py-16 border-t border-slate-800">
<div className="mx-auto max-w-7xl px-6">
<div className="grid md:grid-cols-4 gap-10">
<div>
<div className="text-xl font-bold text-white mb-4">Vitality Medical Center</div>
<div className="space-y-3 text-sm">
<div className="flex items-start gap-3"><MapPin className="h-4 w-4 mt-0.5 text-sky-400" /><span>1200 Wellness Boulevard, Suite 100, San Francisco, CA 94102</span></div>
<div className="flex items-center gap-3"><Phone className="h-4 w-4 text-sky-400" /><span>(415) 555-0180</span></div>
<div className="flex items-center gap-3"><Mail className="h-4 w-4 text-sky-400" /><span>care@vitalitymedical.com</span></div>
<div className="flex items-center gap-3"><Clock className="h-4 w-4 text-sky-400" /><span>Mon–Fri 8:00 AM – 6:00 PM</span></div>
</div>
<div className="mt-4 p-3 rounded-lg bg-red-950/50 border border-red-800/50">
<div className="flex items-center gap-2 text-red-400 font-semibold text-sm"><AlertTriangle className="h-4 w-4" /> Emergency</div>
<div className="text-red-300 text-sm mt-1">(415) 555-0911 — Available 24/7</div>
</div>
</div>
<div>
<div className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Services</div>
<div className="space-y-2 text-sm">
<Link to="/services" className="block hover:text-sky-400 transition-colors">Primary Care</Link>
<Link to="/services" className="block hover:text-sky-400 transition-colors">Cardiology</Link>
<Link to="/services" className="block hover:text-sky-400 transition-colors">Neurology</Link>
<Link to="/services" className="block hover:text-sky-400 transition-colors">Orthopedics</Link>
<Link to="/services" className="block hover:text-sky-400 transition-colors">Pediatrics</Link>
</div>
</div>
<div>
<div className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Patient Resources</div>
<div className="space-y-2 text-sm">
<Link to="/contact" className="block hover:text-sky-400 transition-colors">Book Appointment</Link>
<Link to="/contact" className="block hover:text-sky-400 transition-colors">Insurance Info</Link>
<Link to="/contact" className="block hover:text-sky-400 transition-colors">Patient Portal</Link>
<Link to="/contact" className="block hover:text-sky-400 transition-colors">FAQs</Link>
</div>
</div>
<div>
<div className="text-sm font-semibold text-white uppercase tracking-wider mb-4">About Us</div>
<div className="space-y-2 text-sm">
<Link to="/doctors" className="block hover:text-sky-400 transition-colors">Our Doctors</Link>
<Link to="/about" className="block hover:text-sky-400 transition-colors">Mission & Values</Link>
<Link to="/about" className="block hover:text-sky-400 transition-colors">Certifications</Link>
<Link to="/contact" className="block hover:text-sky-400 transition-colors">Careers</Link>
</div>
<div className="flex gap-3 mt-6">
{[Facebook, Twitter, Linkedin, Instagram].map((Icon, i) => (
<a key={i} href="#" className="text-slate-500 hover:text-sky-400 transition-colors"><Icon className="h-5 w-5" /></a>
))}
</div>
</div>
</div>
<div className="mt-12 pt-8 border-t border-slate-800 flex flex-col md:flex-row items-center justify-between gap-4 text-sm text-slate-500">
<span>© 2026 Vitality Medical Center. All rights reserved.</span>
<span>HIPAA Compliant · Joint Commission Accredited</span>
</div>
</div>
</footer>
);
}