Update src/app/page.tsx

This commit is contained in:
2026-05-09 23:57:16 +00:00
parent 51bd9f760b
commit 929a86513a

View File

@@ -29,374 +29,175 @@ export default function LandingPage() {
headingFontWeight="bold" headingFontWeight="bold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay <NavbarLayoutFloatingOverlay
navItems={[ navItems={[
{ { name: "Services", id: "features" },
name: "Services", { name: "Team", id: "team" },
id: "features", { name: "FAQ", id: "faq" },
}, { name: "Contact", id: "contact" },
{ ]}
name: "Team", brandName="Khalifa Surgery"
id: "team", />
}, </div>
{
name: "FAQ",
id: "faq",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Khalifa Surgery"
/>
</div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroOverlay <HeroOverlay
title="Excellence in Surgical Care" title="Excellence in Surgical Care"
description="Khalifa Medical Surgery Complex provides world-class surgical expertise combined with compassionate, patient-centered clinical care." description="Khalifa Medical Surgery Complex provides world-class surgical expertise combined with compassionate, patient-centered clinical care."
tag="Premier Surgery Center" tag="Premier Surgery Center"
tagAnimation="slide-up" tagAnimation="slide-up"
buttons={[ buttons={[
{ { text: "Book Consultation", href: "#contact" },
text: "Book Consultation", { text: "Our Services", href: "#features" },
href: "#contact", ]}
}, imageSrc="http://img.b2bpic.net/free-photo/doctor-walking-down-hospital-corridor_23-2152005570.jpg"
{ imageAlt="modern medical facility"
text: "Our Services", avatars={[
href: "#features", { src: "http://img.b2bpic.net/free-photo/gynecological-room-hospital_7502-8389.jpg", alt: "Gynecological room at the hospital" },
}, { src: "http://img.b2bpic.net/free-photo/interior-view-operating-room_1170-2255.jpg", alt: "Interior view of operating room" },
]} { src: "http://img.b2bpic.net/free-photo/modern-clinical-lab-interior-with-concrete-flooring-metal-cabinet-desk_482257-124614.jpg", alt: "Modern clinical lab interior" },
imageSrc="http://img.b2bpic.net/free-photo/doctor-walking-down-hospital-corridor_23-2152005570.jpg?_wi=1" { src: "http://img.b2bpic.net/free-photo/healthcare-worker-pushing-gurney-hospital-corridor_23-2152005928.jpg", alt: "Healthcare worker" },
imageAlt="modern medical facility" { src: "http://img.b2bpic.net/free-photo/portrait-surgeon-standing-with-arms-crossed-operation-room_1170-2202.jpg", alt: "surgeon doctor portrait" },
avatars={[ ]}
{ avatarText="Trusted by 15,000+ patients"
src: "http://img.b2bpic.net/free-photo/gynecological-room-hospital_7502-8389.jpg", />
alt: "Gynecological room at the hospital", </div>
},
{
src: "http://img.b2bpic.net/free-photo/interior-view-operating-room_1170-2255.jpg",
alt: "Interior view of operating room",
},
{
src: "http://img.b2bpic.net/free-photo/modern-clinical-lab-interior-with-concrete-flooring-metal-cabinet-desk_482257-124614.jpg",
alt: "Modern clinical lab interior with concrete flooring metal cabinet and desk",
},
{
src: "http://img.b2bpic.net/free-photo/healthcare-worker-pushing-gurney-hospital-corridor_23-2152005928.jpg",
alt: "Healthcare worker pushing a gurney in hospital corridor",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-surgeon-standing-with-arms-crossed-operation-room_1170-2202.jpg",
alt: "surgeon doctor portrait",
},
]}
avatarText="Trusted by 15,000+ patients"
/>
</div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<InlineImageSplitTextAbout <InlineImageSplitTextAbout
useInvertedBackground={true} useInvertedBackground={true}
heading={[ heading={[
{ { type: "text", content: "Dedicated to Your Health and Recovery" },
type: "text", { type: "image", src: "http://img.b2bpic.net/free-photo/concentrated-surgeon-writing-clipboard_23-2147896857.jpg", alt: "professional surgeon doctor" },
content: "Dedicated to Your Health and Recovery", ]}
}, buttons={[{ text: "Our Story", href: "#" }]}
{ />
type: "image", </div>
src: "http://img.b2bpic.net/free-photo/concentrated-surgeon-writing-clipboard_23-2147896857.jpg",
alt: "professional surgeon doctor",
},
]}
buttons={[
{
text: "Our Story",
href: "#",
},
]}
/>
</div>
<div id="features" data-section="features"> <div id="features" data-section="features">
<FeatureCardTen <FeatureCardTen
animationType="slide-up" animationType="slide-up"
textboxLayout="split" textboxLayout="split"
useInvertedBackground={false} useInvertedBackground={false}
features={[ features={[
{ {
title: "Robotic Surgery", title: "Robotic Surgery", description: "Minimally invasive procedures for faster recovery.", media: { imageSrc: "http://img.b2bpic.net/free-photo/many-kind-medical-equipment-manage-surgeon-start-operations-operating-room_1301-7799.jpg", imageAlt: "robotic surgery technology" },
description: "Minimally invasive procedures for faster recovery.", items: [
media: { { icon: CheckCircle, text: "Precision Robotics" },
imageSrc: "http://img.b2bpic.net/free-photo/many-kind-medical-equipment-manage-surgeon-start-operations-operating-room_1301-7799.jpg", { icon: CheckCircle, text: "Minimal Recovery" },
}, ],
items: [ reverse: false,
{ },
icon: CheckCircle, {
text: "Precision Robotics", title: "Diagnostic Center", description: "High-resolution imaging and comprehensive clinical diagnostics.", media: { imageSrc: "http://img.b2bpic.net/free-photo/obstetrician-using-digital-tablet-consult-patient-expecting-child-medical-appointment-male-doctor-taking-notes-checkup-visit-examination-talking-woman-with-baby-bump_482257-45825.jpg", imageAlt: "diagnostic tech" },
}, items: [
{ { icon: CheckCircle, text: "Advanced Imaging" },
icon: CheckCircle, { icon: CheckCircle, text: "Rapid Results" },
text: "Minimal Recovery", ],
}, reverse: true,
], },
imageSrc: "http://img.b2bpic.net/free-photo/doctor-walking-down-hospital-corridor_23-2152005570.jpg?_wi=2", {
imageAlt: "robotic surgery technology", title: "Patient Care Suites", description: "Luxurious and sterile post-operative recovery environment.", media: { imageSrc: "http://img.b2bpic.net/free-photo/3d-row-chairs-contemporary-empty-room_1048-9904.jpg", imageAlt: "recovery suites" },
}, items: [
{ { icon: CheckCircle, text: "Comfortable Suites" },
title: "Diagnostic Center", { icon: CheckCircle, text: "24/7 Monitoring" },
description: "High-resolution imaging and comprehensive clinical diagnostics.", ],
media: { reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/obstetrician-using-digital-tablet-consult-patient-expecting-child-medical-appointment-male-doctor-taking-notes-checkup-visit-examination-talking-woman-with-baby-bump_482257-45825.jpg", },
}, ]}
items: [ title="Advanced Surgical Services"
{ description="We utilize cutting-edge technology and evidence-based medicine to ensure optimal patient outcomes."
icon: CheckCircle, />
text: "Advanced Imaging", </div>
},
{
icon: CheckCircle,
text: "Rapid Results",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/concentrated-surgeon-writing-clipboard_23-2147896857.jpg",
imageAlt: "robotic surgery technology",
},
{
title: "Patient Care Suites",
description: "Luxurious and sterile post-operative recovery environment.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/3d-row-chairs-contemporary-empty-room_1048-9904.jpg",
},
items: [
{
icon: CheckCircle,
text: "Comfortable Suites",
},
{
icon: CheckCircle,
text: "24/7 Monitoring",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/portrait-surgeon-standing-with-arms-crossed-operation-room_1170-2202.jpg?_wi=1",
imageAlt: "robotic surgery technology",
},
]}
title="Advanced Surgical Services"
description="We utilize cutting-edge technology and evidence-based medicine to ensure optimal patient outcomes."
/>
</div>
<div id="metrics" data-section="metrics"> <div id="metrics" data-section="metrics">
<MetricCardTwo <MetricCardTwo
animationType="slide-up" animationType="slide-up"
textboxLayout="split" textboxLayout="split"
gridVariant="uniform-all-items-equal" gridVariant="uniform-all-items-equal"
useInvertedBackground={true} useInvertedBackground={true}
metrics={[ metrics={[
{ { id: "m1", value: "99%", description: "Patient Satisfaction" },
id: "m1", { id: "m2", value: "15k+", description: "Successful Surgeries" },
value: "99%", { id: "m3", value: "24/7", description: "Expert Care Available" },
description: "Patient Satisfaction", ]}
}, title="Proven Quality Metrics"
{ description="Quality is the cornerstone of our clinical practice."
id: "m2", />
value: "15k+", </div>
description: "Successful Surgeries",
},
{
id: "m3",
value: "24/7",
description: "Expert Care Available",
},
]}
title="Proven Quality Metrics"
description="Quality is the cornerstone of our clinical practice."
/>
</div>
<div id="team" data-section="team"> <div id="team" data-section="team">
<TeamCardTwo <TeamCardTwo
animationType="slide-up" animationType="slide-up"
textboxLayout="split" textboxLayout="split"
gridVariant="four-items-2x2-equal-grid" gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false} useInvertedBackground={false}
members={[ members={[
{ { id: "t1", name: "Dr. Ahmed Khalid", role: "Lead Surgeon", description: "Expert in robotic surgery.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-surgeon-standing-with-arms-crossed-operation-room_1170-2202.jpg" },
id: "t1", { id: "t2", name: "Dr. Sarah Mansour", role: "Senior Consultant", description: "Cardiothoracic specialty.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-working-as-nurse_23-2151061554.jpg" },
name: "Dr. Ahmed Khalid", { id: "t3", name: "Fatima Noor", role: "Head Nurse", description: "Patient advocacy leader.", imageSrc: "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309959.jpg" },
role: "Lead Surgeon", { id: "t4", name: "Dr. Omar Saeed", role: "Chief Radiologist", description: "Advanced diagnostics specialist.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-doctor-uniform-hospital_23-2148733958.jpg" },
description: "Expert in robotic surgery.", ]}
imageSrc: "http://img.b2bpic.net/free-photo/portrait-surgeon-standing-with-arms-crossed-operation-room_1170-2202.jpg?_wi=2", title="Meet Our Expert Surgeons"
}, description="Our team of board-certified specialists brings years of surgical excellence to every procedure."
{ />
id: "t2", </div>
name: "Dr. Sarah Mansour",
role: "Senior Consultant",
description: "Cardiothoracic specialty.",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-working-as-nurse_23-2151061554.jpg",
},
{
id: "t3",
name: "Fatima Noor",
role: "Head Nurse",
description: "Patient advocacy leader.",
imageSrc: "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309959.jpg",
},
{
id: "t4",
name: "Dr. Omar Saeed",
role: "Chief Radiologist",
description: "Advanced diagnostics specialist.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-doctor-uniform-hospital_23-2148733958.jpg",
},
]}
title="Meet Our Expert Surgeons"
description="Our team of board-certified specialists brings years of surgical excellence to every procedure."
/>
</div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardSix <TestimonialCardSix
animationType="slide-up" animationType="slide-up"
textboxLayout="split" textboxLayout="split"
useInvertedBackground={true} useInvertedBackground={true}
testimonials={[ testimonials={[
{ { id: "1", name: "Aisha R.", handle: "@aishar", testimonial: "Exceptional care and professional staff throughout my recovery.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-health-worker_23-2148980757.jpg" },
id: "1", { id: "2", name: "Hassan M.", handle: "@hassanm", testimonial: "The precision of the surgical team was truly impressive.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-3d-male-doctor_23-2151106991.jpg" },
name: "Aisha R.", { id: "3", name: "Layla Z.", handle: "@laylaz", testimonial: "I felt safe and supported every step of the way.", imageSrc: "http://img.b2bpic.net/free-photo/happy-sick-little-girl-playing-games-laptop-while-mother-sitting-beside-her-inside-hospital-pediatrics-ward-room-joyful-child-treatment-gaming-patient-bed-while-parent-takes-care-her_482257-49450.jpg" },
handle: "@aishar", { id: "4", name: "Omar K.", handle: "@omark", testimonial: "World-class surgical facility with a heart for patients.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-woman-talking_23-2148894920.jpg" },
testimonial: "Exceptional care and professional staff throughout my recovery.", { id: "5", name: "Sara B.", handle: "@sarab", testimonial: "Excellent diagnostics and very quick scheduling.", imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-woman-talking-her-doctor-medical-clinic_637285-9073.jpg" },
imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-health-worker_23-2148980757.jpg", ]}
}, title="Patient Stories"
{ description="Read about the transformative experiences our patients have had at Khalifa Medical Surgery Complex."
id: "2", />
name: "Hassan M.", </div>
handle: "@hassanm",
testimonial: "The precision of the surgical team was truly impressive.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-3d-male-doctor_23-2151106991.jpg",
},
{
id: "3",
name: "Layla Z.",
handle: "@laylaz",
testimonial: "I felt safe and supported every step of the way.",
imageSrc: "http://img.b2bpic.net/free-photo/happy-sick-little-girl-playing-games-laptop-while-mother-sitting-beside-her-inside-hospital-pediatrics-ward-room-joyful-child-treatment-gaming-patient-bed-while-parent-takes-care-her_482257-49450.jpg",
},
{
id: "4",
name: "Omar K.",
handle: "@omark",
testimonial: "World-class surgical facility with a heart for patients.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-woman-talking_23-2148894920.jpg",
},
{
id: "5",
name: "Sara B.",
handle: "@sarab",
testimonial: "Excellent diagnostics and very quick scheduling.",
imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-woman-talking-her-doctor-medical-clinic_637285-9073.jpg",
},
]}
title="Patient Stories"
description="Read about the transformative experiences our patients have had at Khalifa Medical Surgery Complex."
/>
</div>
<div id="faq" data-section="faq"> <div id="faq" data-section="faq">
<FaqSplitMedia <FaqSplitMedia
textboxLayout="split" textboxLayout="split"
useInvertedBackground={false} useInvertedBackground={false}
faqs={[ faqs={[
{ { id: "f1", title: "How do I schedule surgery?", content: "Contact our patient coordinators via the booking form." },
id: "f1", { id: "f2", title: "Is post-operative care provided?", content: "Yes, we offer comprehensive post-surgical recovery suites." },
title: "How do I schedule surgery?", { id: "f3", title: "Which insurance do you accept?", content: "We work with all major regional and international providers." },
content: "Contact our patient coordinators via the booking form.", ]}
}, imageSrc="http://img.b2bpic.net/free-photo/empty-doctors-workplace-room-with-desk-technology_482257-14017.jpg"
{ mediaAnimation="slide-up"
id: "f2", title="Common Questions"
title: "Is post-operative care provided?", description="Find answers to help you prepare for your upcoming visit or surgery."
content: "Yes, we offer comprehensive post-surgical recovery suites.", faqsAnimation="slide-up"
}, />
{ </div>
id: "f3",
title: "Which insurance do you accept?",
content: "We work with all major regional and international providers.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/empty-doctors-workplace-room-with-desk-technology_482257-14017.jpg"
mediaAnimation="slide-up"
title="Common Questions"
description="Find answers to help you prepare for your upcoming visit or surgery."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactText <ContactText
useInvertedBackground={true} useInvertedBackground={true}
background={{ background={{ variant: "gradient-bars" }}
variant: "gradient-bars", text="Schedule your consultation with the leading surgery complex in the region today."
}} buttons={[{ text: "Contact Us", href: "tel:+97100000000" }]}
text="Schedule your consultation with the leading surgery complex in the region today." />
buttons={[ </div>
{
text: "Contact Us",
href: "tel:+97100000000",
},
]}
/>
</div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterSimple <FooterSimple
columns={[ columns={[
{ { title: "Services", items: [{ label: "Robotic Surgery", href: "#" }, { label: "Diagnostics", href: "#" }] },
title: "Services", { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
items: [ { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Use", href: "#" }] },
{ ]}
label: "Robotic Surgery", bottomLeftText="© 2024 Khalifa Medical Surgery Complex"
href: "#", bottomRightText="All rights reserved"
}, />
{ </div>
label: "Diagnostics",
href: "#",
},
],
},
{
title: "Support",
items: [
{
label: "FAQ",
href: "#faq",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Use",
href: "#",
},
],
},
]}
bottomLeftText="© 2024 Khalifa Medical Surgery Complex"
bottomRightText="All rights reserved"
/>
</div>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );