215 lines
14 KiB
TypeScript
215 lines
14 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
ArrowRight, Heart, Brain, Bone, Eye, Stethoscope, Baby,
|
|
ShieldCheck, Clock, Award, Users, Star, Quote, CheckCircle
|
|
} from "lucide-react";
|
|
import Header from "@/components/Header";
|
|
import Footer from "@/components/Footer";
|
|
|
|
const services = [
|
|
{ icon: Heart, title: "Cardiology", desc: "Advanced heart and cardiovascular care with state-of-the-art diagnostics and treatment.", gradient: "from-rose-500/20 to-pink-500/20" },
|
|
{ icon: Brain, title: "Neurology", desc: "Expert neurological care for conditions affecting the brain, spine, and nervous system.", gradient: "from-purple-500/20 to-indigo-500/20" },
|
|
{ icon: Bone, title: "Orthopedics", desc: "Comprehensive bone, joint, and musculoskeletal treatment for optimal mobility.", gradient: "from-amber-500/20 to-orange-500/20" },
|
|
{ icon: Eye, title: "Ophthalmology", desc: "Complete eye care from routine exams to advanced surgical procedures.", gradient: "from-sky-500/20 to-cyan-500/20" },
|
|
{ icon: Stethoscope, title: "Primary Care", desc: "Your first point of contact for preventive care, wellness, and general health needs.", gradient: "from-teal-500/20 to-emerald-500/20" },
|
|
{ icon: Baby, title: "Pediatrics", desc: "Specialized healthcare for infants, children, and adolescents in a warm environment.", gradient: "from-pink-500/20 to-rose-500/20" },
|
|
];
|
|
|
|
const doctors = [
|
|
{ name: "Dr. Sarah Chen", specialty: "Cardiology", exp: "15+ years experience", rating: 4.9, gradient: "from-sky-400 to-teal-400" },
|
|
{ name: "Dr. James Okafor", specialty: "Neurology", exp: "20+ years experience", rating: 4.8, gradient: "from-teal-400 to-emerald-400" },
|
|
{ name: "Dr. Emily Rivera", specialty: "Orthopedics", exp: "12+ years experience", rating: 4.9, gradient: "from-indigo-400 to-sky-400" },
|
|
{ name: "Dr. Michael Patel", specialty: "Pediatrics", exp: "18+ years experience", rating: 4.7, gradient: "from-violet-400 to-indigo-400" },
|
|
];
|
|
|
|
const testimonials = [
|
|
{ initials: "JM", name: "Jennifer M.", text: "The care I received was exceptional. Dr. Chen took the time to explain everything and made me feel completely at ease throughout my treatment.", rating: 5 },
|
|
{ initials: "SK", name: "Steven K.", text: "After years of chronic pain, the orthopedics team gave me my life back. The facility is world-class and the staff genuinely cares.", rating: 5 },
|
|
{ initials: "RL", name: "Rachel L.", text: "As a parent, finding a pediatrician I trust was crucial. Dr. Patel is wonderful with my children and always goes above and beyond.", rating: 5 },
|
|
];
|
|
|
|
const insuranceProviders = ["BlueCross BlueShield", "Aetna", "UnitedHealthcare", "Cigna", "Kaiser Permanente", "Humana"];
|
|
|
|
export default function IndexPage() {
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground antialiased">
|
|
<Header />
|
|
|
|
{/* ── HERO ── */}
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-sky-950 via-teal-950/40 to-slate-950">
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full bg-sky-500 opacity-10 blur-[150px]" />
|
|
<div className="absolute top-1/4 left-1/4 w-[400px] h-[400px] rounded-full bg-teal-400 opacity-10 blur-[120px]" />
|
|
<div className="absolute bottom-1/4 right-1/4 w-[350px] h-[350px] rounded-full bg-sky-600 opacity-8 blur-[120px]" />
|
|
</div>
|
|
<div className="relative z-10 mx-auto max-w-4xl px-6 text-center">
|
|
<Badge variant="secondary" className="mb-6 px-4 py-1.5 text-xs tracking-widest uppercase bg-sky-900/40 text-sky-300 border-sky-700/30 backdrop-blur animate-fade-up">
|
|
Trusted Healthcare Since 2009
|
|
</Badge>
|
|
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight text-white leading-[1.1] animate-fade-up">Your Health, Our Priority</h1>
|
|
<p className="mx-auto mt-6 max-w-xl text-lg text-slate-300 leading-relaxed animate-fade-up">Comprehensive, compassionate healthcare for the whole family. Board-certified specialists delivering exceptional care with the latest medical technology.</p>
|
|
<div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-up">
|
|
<Button asChild size="lg" className="rounded-full px-10 text-sm bg-sky-500 hover:bg-sky-600 text-white shadow-lg shadow-sky-500/30 active:scale-[0.97] transition-all">
|
|
<Link to="/contact">Book Appointment <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
|
</Button>
|
|
<Button asChild variant="outline" size="lg" className="rounded-full px-10 text-sm border-slate-600 text-slate-200 hover:bg-slate-800 active:scale-[0.97] transition-all">
|
|
<Link to="/services">Our Services</Link>
|
|
</Button>
|
|
</div>
|
|
<div className="mt-16 grid grid-cols-2 sm:grid-cols-4 gap-6 animate-fade-up">
|
|
{[
|
|
{ icon: ShieldCheck, label: "Board Certified" },
|
|
{ icon: Clock, label: "24/7 Care" },
|
|
{ icon: Award, label: "15+ Years" },
|
|
{ icon: Users, label: "50K+ Patients" },
|
|
].map((b, i) => (
|
|
<div key={i} className="flex flex-col items-center gap-2 p-4 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10">
|
|
<b.icon className="h-6 w-6 text-sky-400" />
|
|
<span className="text-sm font-medium text-slate-300">{b.label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── SERVICES OVERVIEW ── */}
|
|
<section className="py-24 bg-slate-50 dark:bg-slate-950">
|
|
<div className="mx-auto max-w-6xl px-6">
|
|
<div className="text-center mb-16 animate-fade-up">
|
|
<Badge variant="outline" className="mb-4 text-sky-600 border-sky-300 dark:border-sky-700 dark:text-sky-400">Our Services</Badge>
|
|
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight">Comprehensive Medical Services</h2>
|
|
<p className="mt-3 text-muted-foreground max-w-2xl mx-auto">From preventive care to specialized treatments, we offer a full spectrum of medical services under one roof.</p>
|
|
</div>
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
|
|
{services.map((s, i) => (
|
|
<Card key={i} className="group bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm border-slate-200/60 dark:border-slate-800/60 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
|
|
<CardContent className="p-6">
|
|
<div className={`inline-flex p-3 rounded-xl bg-gradient-to-br \${s.gradient} mb-4`}>
|
|
<s.icon className="h-6 w-6 text-slate-900 dark:text-white" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold mb-2">{s.title}</h3>
|
|
<p className="text-sm text-muted-foreground mb-4">{s.desc}</p>
|
|
<Link to="/services" className="inline-flex items-center text-sm font-medium text-sky-600 dark:text-sky-400 hover:text-sky-700 transition-colors">
|
|
Learn More <ArrowRight className="ml-1 h-3 w-3" />
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── FEATURED DOCTORS ── */}
|
|
<section className="py-24 bg-white dark:bg-slate-900">
|
|
<div className="mx-auto max-w-6xl px-6">
|
|
<div className="text-center mb-16 animate-fade-up">
|
|
<Badge variant="outline" className="mb-4 text-teal-600 border-teal-300 dark:border-teal-700 dark:text-teal-400">Expert Team</Badge>
|
|
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight">Meet Our Specialists</h2>
|
|
<p className="mt-3 text-muted-foreground">Experienced, compassionate physicians dedicated to your well-being.</p>
|
|
</div>
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 stagger">
|
|
{doctors.map((d, i) => (
|
|
<Card key={i} className="group bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm border-slate-200/60 dark:border-slate-800/60 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 text-center">
|
|
<CardContent className="p-6">
|
|
<div className={`mx-auto w-20 h-20 rounded-full bg-gradient-to-br \${d.gradient} flex items-center justify-center text-white text-2xl font-bold mb-4 group-hover:ring-4 group-hover:ring-sky-300/30 transition-all`}>
|
|
{d.name.split(" ").map(n => n[0]).join("")}
|
|
</div>
|
|
<h3 className="text-lg font-semibold">{d.name}</h3>
|
|
<Badge className="mt-2 bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300 border-0">{d.specialty}</Badge>
|
|
<p className="text-xs text-muted-foreground mt-2">{d.exp}</p>
|
|
<div className="flex items-center justify-center gap-1 mt-3">
|
|
{Array.from({ length: 5 }).map((_, si) => (
|
|
<Star key={si} className="h-3.5 w-3.5 fill-amber-400 text-amber-400" />
|
|
))}
|
|
<span className="text-xs text-muted-foreground ml-1">{d.rating}</span>
|
|
</div>
|
|
<Button asChild size="sm" className="mt-4 w-full bg-sky-500 hover:bg-sky-600 text-white rounded-full active:scale-[0.97] transition-all">
|
|
<Link to="/contact">Book Now</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── TESTIMONIALS ── */}
|
|
<section className="py-24 bg-slate-50 dark:bg-slate-950">
|
|
<div className="mx-auto max-w-6xl px-6">
|
|
<div className="text-center mb-16 animate-fade-up">
|
|
<Badge variant="outline" className="mb-4 text-sky-600 border-sky-300 dark:border-sky-700 dark:text-sky-400">Patient Stories</Badge>
|
|
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight">What Our Patients Say</h2>
|
|
</div>
|
|
<div className="grid md:grid-cols-3 gap-6 stagger">
|
|
{testimonials.map((t, i) => (
|
|
<Card key={i} className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm border-slate-200/60 dark:border-slate-800/60 hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center gap-1 mb-4">
|
|
{Array.from({ length: t.rating }).map((_, si) => (
|
|
<Star key={si} className="h-4 w-4 fill-amber-400 text-amber-400" />
|
|
))}
|
|
</div>
|
|
<Quote className="h-8 w-8 text-sky-200 dark:text-sky-800 mb-3" />
|
|
<p className="text-sm text-muted-foreground italic leading-relaxed mb-4">{t.text}</p>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-sky-400 to-teal-400 flex items-center justify-center text-white text-sm font-bold">{t.initials}</div>
|
|
<span className="font-medium text-sm">{t.name}</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── STATS ── */}
|
|
<section className="py-20 bg-gradient-to-r from-sky-950 via-slate-900 to-teal-950">
|
|
<div className="mx-auto max-w-6xl px-6">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 stagger">
|
|
{[
|
|
{ value: "50,000+", label: "Patients Treated" },
|
|
{ value: "15+", label: "Years of Excellence" },
|
|
{ value: "45+", label: "Specialists" },
|
|
{ value: "98%", label: "Satisfaction Rate" },
|
|
].map((s, i) => (
|
|
<div key={i} className="text-center animate-fade-up">
|
|
<div className="text-3xl sm:text-4xl font-bold text-white">{s.value}</div>
|
|
<div className="text-sm text-slate-400 mt-1">{s.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── INSURANCE ── */}
|
|
<section className="py-16 bg-white dark:bg-slate-900">
|
|
<div className="mx-auto max-w-6xl px-6 text-center animate-fade-up">
|
|
<h3 className="text-lg font-semibold text-muted-foreground mb-8">We Accept Major Insurance Providers</h3>
|
|
<div className="flex flex-wrap justify-center gap-6">
|
|
{insuranceProviders.map((name, i) => (
|
|
<div key={i} className="px-6 py-3 rounded-full bg-slate-100 dark:bg-slate-800 text-sm font-medium text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-slate-700">
|
|
{name}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── CTA ── */}
|
|
<section className="py-24 bg-gradient-to-r from-sky-500 to-teal-500">
|
|
<div className="mx-auto max-w-3xl px-6 text-center animate-fade-up">
|
|
<h2 className="text-3xl sm:text-4xl font-bold text-white">Schedule Your Visit Today</h2>
|
|
<p className="mt-4 text-sky-100 text-lg">Experience compassionate, world-class healthcare. Our team is ready to serve you.</p>
|
|
<Button asChild size="lg" className="mt-8 rounded-full px-12 bg-white text-sky-600 hover:bg-sky-50 shadow-xl shadow-sky-700/30 active:scale-[0.97] transition-all font-semibold">
|
|
<Link to="/contact">Book Appointment <ArrowRight className="ml-2 h-4 w-4" /></Link>
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
} |