From aa7b3429b861911f864dafc2f17038c9ede33b7d Mon Sep 17 00:00:00 2001
From: jyswee <jyswee@gmail.com>
Date: Thu, 23 Jul 2026 22:12:00 +0000
Subject: [PATCH] Seed: healthcare template (18 files)

---
 src/components/Footer.tsx | 67 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 src/components/Footer.tsx

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..4fc1777
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -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>
+  );
+}
\ No newline at end of file