Merge version_1 into main #2
480
src/app/page.tsx
480
src/app/page.tsx
@@ -15,335 +15,175 @@ import { Award, CheckCircle, Heart, Star } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="none"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="medium"
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="none"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Expertise",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Patient Stories",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="HeartCare Surgical"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Expertise", id: "features" },
|
||||
{ name: "Patient Stories", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="HeartCare Surgical"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Excellence in Cardiovascular Care"
|
||||
description="Dr. Miller provides world-class surgical expertise and compassionate care for complex heart conditions."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Consultation",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Learn About Procedures",
|
||||
href: "#features",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-confident-male-surgeon_171337-1518.jpg?_wi=1"
|
||||
imageAlt="Leading Heart Surgeon"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/female-doctor-holding-red-heart-blue-uniform-looking-serious_176474-12754.jpg",
|
||||
alt: "Female doctor holding red heart",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-young-male-doctor-wearing-doctor-uniform-with-stethoscope-showing-heart-gesture-isolated-orange-wall_141793-83263.jpg",
|
||||
alt: "Smiling male doctor",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/surgeon-work_23-2147642789.jpg",
|
||||
alt: "Surgeon at work",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-young-bald-male-doctor-wearing-medical-robe-stethoscope_141793-73785.jpg",
|
||||
alt: "Smiling young doctor",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-confident-male-surgeon_171337-1518.jpg",
|
||||
alt: "Leading Heart Surgeon",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by thousands of patients"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Excellence in Cardiovascular Care"
|
||||
description="Dr. Miller provides world-class surgical expertise and compassionate care for complex heart conditions."
|
||||
buttons={[
|
||||
{ text: "Book Consultation", href: "#contact" },
|
||||
{ text: "Learn About Procedures", href: "#features" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-confident-male-surgeon_171337-1518.jpg"
|
||||
imageAlt="Leading Heart Surgeon"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/female-doctor-holding-red-heart-blue-uniform-looking-serious_176474-12754.jpg", alt: "Female doctor holding red heart" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-young-male-doctor-wearing-doctor-uniform-with-stethoscope-showing-heart-gesture-isolated-orange-wall_141793-83263.jpg", alt: "Smiling male doctor" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/surgeon-work_23-2147642789.jpg", alt: "Surgeon at work" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-young-bald-male-doctor-wearing-medical-robe-stethoscope_141793-73785.jpg", alt: "Smiling young doctor" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-confident-male-surgeon_171337-1518.jpg", alt: "Leading Heart Surgeon" },
|
||||
]}
|
||||
avatarText="Trusted by thousands of patients"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Dedicated to Your Heart Health"
|
||||
description="With over 20 years of experience in minimally invasive cardiac surgery, Dr. Miller combines cutting-edge clinical technology with a patient-centered approach to ensure the best possible outcomes."
|
||||
metrics={[
|
||||
{
|
||||
value: "20+",
|
||||
title: "Years Experience",
|
||||
},
|
||||
{
|
||||
value: "2,500+",
|
||||
title: "Successful Surgeries",
|
||||
},
|
||||
{
|
||||
value: "99%",
|
||||
title: "Patient Satisfaction",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/interior-empty-science-laboratory-with-modern-equipment-prepared-pharmaceutical-innovation-using-high-tech-microbiology-tools-scientific-research-vaccine-development-against-covid19-virus_482257-12800.jpg?_wi=1"
|
||||
imageAlt="Advanced Cardiac Equipment"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Dedicated to Your Heart Health"
|
||||
description="With over 20 years of experience in minimally invasive cardiac surgery, Dr. Miller combines cutting-edge clinical technology with a patient-centered approach to ensure the best possible outcomes."
|
||||
metrics={[
|
||||
{ value: "20+", title: "Years Experience" },
|
||||
{ value: "2,500+", title: "Successful Surgeries" },
|
||||
{ value: "99%", title: "Patient Satisfaction" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/interior-empty-science-laboratory-with-modern-equipment-prepared-pharmaceutical-innovation-using-high-tech-microbiology-tools-scientific-research-vaccine-development-against-covid19-virus_482257-12800.jpg"
|
||||
imageAlt="Advanced Cardiac Equipment"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Coronary Bypass",
|
||||
description: "Restoring healthy blood flow to your heart with precision techniques.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-biochemist-checking-manifestations-virus-working-computer-equipped-lab-late-night_482257-489.jpg",
|
||||
imageAlt: "Surgical Procedure",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Minimally invasive approach",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Rapid recovery protocols",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-male-surgeon_171337-1518.jpg?_wi=2",
|
||||
imageAlt: "modern medical surgical technology",
|
||||
},
|
||||
{
|
||||
title: "Valve Repair",
|
||||
description: "Advanced repair and replacement options for optimal valve function.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glasses-dentist-dental-office_627829-9495.jpg",
|
||||
imageAlt: "Surgical Procedure",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "State-of-the-art repair techniques",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Dedicated monitoring",
|
||||
},
|
||||
],
|
||||
reverse: true,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interior-empty-science-laboratory-with-modern-equipment-prepared-pharmaceutical-innovation-using-high-tech-microbiology-tools-scientific-research-vaccine-development-against-covid19-virus_482257-12800.jpg?_wi=2",
|
||||
imageAlt: "modern medical surgical technology",
|
||||
},
|
||||
{
|
||||
title: "Aortic Surgery",
|
||||
description: "Expert intervention for complex aortic conditions.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-female-researcher-laboratory_23-2148776154.jpg",
|
||||
imageAlt: "Surgical Procedure",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "High-precision instrumentation",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Tailored surgical plans",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-older-woman-wearing-glasses_23-2149082498.jpg?_wi=1",
|
||||
imageAlt: "modern medical surgical technology",
|
||||
},
|
||||
]}
|
||||
title="Our Specialized Surgical Services"
|
||||
description="Comprehensive cardiac surgical solutions tailored to your unique condition."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Coronary Bypass", description: "Restoring healthy blood flow to your heart with precision techniques.", media: { imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-male-surgeon_171337-1518.jpg", imageAlt: "Surgical Procedure" },
|
||||
items: [
|
||||
{ icon: CheckCircle, text: "Minimally invasive approach" },
|
||||
{ icon: CheckCircle, text: "Rapid recovery protocols" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
title: "Valve Repair", description: "Advanced repair and replacement options for optimal valve function.", media: { imageSrc: "http://img.b2bpic.net/free-photo/interior-empty-science-laboratory-with-modern-equipment-prepared-pharmaceutical-innovation-using-high-tech-microbiology-tools-scientific-research-vaccine-development-against-covid19-virus_482257-12800.jpg", imageAlt: "Surgical Procedure" },
|
||||
items: [
|
||||
{ icon: CheckCircle, text: "State-of-the-art repair techniques" },
|
||||
{ icon: CheckCircle, text: "Dedicated monitoring" },
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
title: "Aortic Surgery", description: "Expert intervention for complex aortic conditions.", media: { imageSrc: "http://img.b2bpic.net/free-photo/happy-older-woman-wearing-glasses_23-2149082498.jpg", imageAlt: "Surgical Procedure" },
|
||||
items: [
|
||||
{ icon: CheckCircle, text: "High-precision instrumentation" },
|
||||
{ icon: CheckCircle, text: "Tailored surgical plans" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
]}
|
||||
title="Our Specialized Surgical Services"
|
||||
description="Comprehensive cardiac surgical solutions tailored to your unique condition."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Award,
|
||||
title: "Complication Rate",
|
||||
value: "<1%",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Star,
|
||||
title: "Avg Recovery Time",
|
||||
value: "4 Days",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Heart,
|
||||
title: "Patient Success",
|
||||
value: "98%",
|
||||
},
|
||||
]}
|
||||
title="Clinical Performance Indicators"
|
||||
description="Data-driven results ensuring exceptional standards in patient care."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: Award, title: "Complication Rate", value: "<1%" },
|
||||
{ id: "m2", icon: Star, title: "Avg Recovery Time", value: "4 Days" },
|
||||
{ id: "m3", icon: Heart, title: "Patient Success", value: "98%" },
|
||||
]}
|
||||
title="Clinical Performance Indicators"
|
||||
description="Data-driven results ensuring exceptional standards in patient care."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "John Smith",
|
||||
handle: "@jsmith",
|
||||
testimonial: "Dr. Miller saved my life. The procedure was handled with absolute professionalism and the recovery was faster than I ever expected.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-older-woman-wearing-glasses_23-2149082498.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mary Johnson",
|
||||
handle: "@mjohnson",
|
||||
testimonial: "I was very nervous about my valve surgery, but the team's care and clarity made all the difference in my recovery.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/patient-hospital_23-2152005935.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Robert Williams",
|
||||
handle: "@rwilliams",
|
||||
testimonial: "Excellent surgeon and dedicated staff. Could not ask for better care throughout the entire surgical process.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-young-woman-fighting-cancer_23-2148992266.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Susan Davis",
|
||||
handle: "@sdavis",
|
||||
testimonial: "My quality of life has improved drastically after my bypass procedure. Thank you for your incredible work.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-female-doctor-celebrating-good-news-while-working-hospital_637285-5105.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Michael Brown",
|
||||
handle: "@mbrown",
|
||||
testimonial: "Highly recommended surgeon. Extremely knowledgeable and empathetic. My heart health is better than ever.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/senior-man-with-grey-hair-standing-bricks-wall-celebrating-surprised-amazed-success-with-arms-raised-eyes-closed-winner-concept_839833-18748.jpg",
|
||||
},
|
||||
]}
|
||||
showRating={true}
|
||||
title="Patient Success Stories"
|
||||
description="Real life stories from patients who restored their vitality under Dr. Miller's care."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "John Smith", handle: "@jsmith", testimonial: "Dr. Miller saved my life. The procedure was handled with absolute professionalism and the recovery was faster than I ever expected.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-older-woman-wearing-glasses_23-2149082498.jpg" },
|
||||
{ id: "2", name: "Mary Johnson", handle: "@mjohnson", testimonial: "I was very nervous about my valve surgery, but the team's care and clarity made all the difference in my recovery.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/patient-hospital_23-2152005935.jpg" },
|
||||
{ id: "3", name: "Robert Williams", handle: "@rwilliams", testimonial: "Excellent surgeon and dedicated staff. Could not ask for better care throughout the entire surgical process.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/confident-young-woman-fighting-cancer_23-2148992266.jpg" },
|
||||
{ id: "4", name: "Susan Davis", handle: "@sdavis", testimonial: "My quality of life has improved drastically after my bypass procedure. Thank you for your incredible work.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cheerful-female-doctor-celebrating-good-news-while-working-hospital_637285-5105.jpg" },
|
||||
{ id: "5", name: "Michael Brown", handle: "@mbrown", testimonial: "Highly recommended surgeon. Extremely knowledgeable and empathetic. My heart health is better than ever.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/senior-man-with-grey-hair-standing-bricks-wall-celebrating-surprised-amazed-success-with-arms-raised-eyes-closed-winner-concept_839833-18748.jpg" },
|
||||
]}
|
||||
showRating={true}
|
||||
title="Patient Success Stories"
|
||||
description="Real life stories from patients who restored their vitality under Dr. Miller's care."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
tag="Contact Us"
|
||||
title="Schedule a Consultation"
|
||||
description="Take the first step toward better heart health. Reach out to discuss your options with our office."
|
||||
inputPlaceholder="Enter your email for appointment requests"
|
||||
buttonText="Inquire"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Contact Us"
|
||||
title="Schedule a Consultation"
|
||||
description="Take the first step toward better heart health. Reach out to discuss your options with our office."
|
||||
inputPlaceholder="Enter your email for appointment requests"
|
||||
buttonText="Inquire"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="HeartCare Surgical"
|
||||
columns={[
|
||||
{
|
||||
title: "Clinical Services",
|
||||
items: [
|
||||
{
|
||||
label: "Bypass Surgery",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Valve Repair",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Heart Screening",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "About",
|
||||
items: [
|
||||
{
|
||||
label: "Meet the Team",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Our Hospital",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Use",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="HeartCare Surgical"
|
||||
columns={[
|
||||
{
|
||||
title: "Clinical Services", items: [
|
||||
{ label: "Bypass Surgery", href: "#" },
|
||||
{ label: "Valve Repair", href: "#" },
|
||||
{ label: "Heart Screening", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "About", items: [
|
||||
{ label: "Meet the Team", href: "#" },
|
||||
{ label: "Our Hospital", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Use", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user