bender/e38d280a-ffa1-426e-8829-6e672981634b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-09 08:25:45 +00:00
parent 3e23321ad4
commit 49322081aa
1 changed files with 177 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

595
src/app/page.tsx
View File

@@ -2,440 +2,199 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { Award, DollarSign, Heart, Shield } from "lucide-react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="smallMedium"
sizing="medium"
background="none"
cardStyle="gradient-bordered"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="normal"
defaultButtonVariant="directional-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="none"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "home",
},
{
name: "Services",
id: "services",
},
{
name: "Doctors",
id: "doctors",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="MediCare Clinic"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Services", id: "services" },
{ name: "Doctors", id: "doctors" },
{ name: "Contact", id: "contact" }
]}
brandName="MediCare Clinic"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboard
background={{
variant: "gradient-bars",
}}
title="Your Trusted Healthcare Partner"
description="Professional medical care with experienced doctors and advanced healthcare solutions."
buttons={[
{
text: "Book Appointment",
href: "#contact",
},
{
text: "Call Now",
href: "tel:+1234567890",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/doctor-wrking-their-clinic_23-2149281065.jpg?_wi=1"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/female-doctor-her-office_1098-21369.jpg",
alt: "Doctor profile 1",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-happy-confident-doctor-with-arms-crossed-medical-clinic_637285-1463.jpg",
alt: "Doctor profile 2",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-woman-nurse-smiling-wearing-uniform-office-sitting-desk-medical-assistant-with-stethoscope-looking-camera-getting-ready-help-doctor-appointment_482257-41834.jpg",
alt: "Doctor profile 3",
},
{
src: "http://img.b2bpic.net/free-photo/black-nurse-their-workspace_52683-100570.jpg",
alt: "Doctor profile 4",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-man-doctor-with-stethoscope-lights_181624-15323.jpg",
alt: "Doctor profile 5",
},
]}
avatarText="Over 50+ medical staff ready to care for you"
marqueeItems={[
{
type: "text",
text: "24/7 Emergency Care",
},
{
type: "text",
text: "State-of-the-art Tech",
},
{
type: "text",
text: "Award-winning Doctors",
},
{
type: "text",
text: "Patient-Centered Care",
},
{
type: "text",
text: "Compassionate Approach",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboard
background={{ variant: "gradient-bars" }}
title="Your Trusted Healthcare Partner"
description="Professional medical care with experienced doctors and advanced healthcare solutions."
buttons={[
{ text: "Book Appointment", href: "#contact" },
{ text: "Call Now", href: "tel:+1234567890" }
]}
imageSrc="http://img.b2bpic.net/free-photo/doctor-wrking-their-clinic_23-2149281065.jpg"
mediaAnimation="slide-up"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/female-doctor-her-office_1098-21369.jpg", alt: "Doctor profile 1" },
{ src: "http://img.b2bpic.net/free-photo/portrait-happy-confident-doctor-with-arms-crossed-medical-clinic_637285-1463.jpg", alt: "Doctor profile 2" },
{ src: "http://img.b2bpic.net/free-photo/portrait-woman-nurse-smiling-wearing-uniform-office-sitting-desk-medical-assistant-with-stethoscope-looking-camera-getting-ready-help-doctor-appointment_482257-41834.jpg", alt: "Doctor profile 3" },
{ src: "http://img.b2bpic.net/free-photo/black-nurse-their-workspace_52683-100570.jpg", alt: "Doctor profile 4" },
{ src: "http://img.b2bpic.net/free-photo/portrait-man-doctor-with-stethoscope-lights_181624-15323.jpg", alt: "Doctor profile 5" }
]}
avatarText="Over 50+ medical staff ready to care for you"
marqueeItems={[
{ type: "text", text: "24/7 Emergency Care" },
{ type: "text", text: "State-of-the-art Tech" },
{ type: "text", text: "Award-winning Doctors" },
{ type: "text", text: "Patient-Centered Care" },
{ type: "text", text: "Compassionate Approach" }
]}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={true}
title="Excellence in Healthcare"
description="We are dedicated to providing compassionate, high-quality medical care to our community with state-of-the-art facilities and experienced specialists."
metrics={[
{
value: "10+",
title: "Experienced Doctors",
},
{
value: "15,000+",
title: "Happy Patients",
},
{
value: "24/7",
title: "Emergency Support",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/clinic-registration-counter-waiting-room-lobby-computer-make-checkup-appointments-with-healthcare-report-papers-empty-hospital-reception-desk-with-medical-forms-insurance-support_482257-50666.jpg"
mediaAnimation="blur-reveal"
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={true}
title="Excellence in Healthcare"
description="We are dedicated to providing compassionate, high-quality medical care to our community with state-of-the-art facilities and experienced specialists."
metrics={[
{ value: "10+", title: "Experienced Doctors" },
{ value: "15,000+", title: "Happy Patients" },
{ value: "24/7", title: "Emergency Support" }
]}
imageSrc="http://img.b2bpic.net/free-photo/clinic-registration-counter-waiting-room-lobby-computer-make-checkup-appointments-with-healthcare-report-papers-empty-hospital-reception-desk-with-medical-forms-insurance-support_482257-50666.jpg"
mediaAnimation="blur-reveal"
metricsAnimation="slide-up"
/>
</div>
<div id="services" data-section="services">
<FeatureCardMedia
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: "s1",
title: "General Consultation",
description: "Comprehensive checkups for holistic wellness.",
tag: "Primary Care",
imageSrc: "http://img.b2bpic.net/free-vector/medicine-online_24877-49094.jpg",
},
{
id: "s2",
title: "Dental Care",
description: "Expert oral health and cosmetic dentistry.",
tag: "Dentistry",
imageSrc: "http://img.b2bpic.net/free-vector/dental-icons-set_1284-4392.jpg",
},
{
id: "s3",
title: "Pediatric Care",
description: "Dedicated care for infants and children.",
tag: "Pediatrics",
imageSrc: "http://img.b2bpic.net/free-photo/cardboard-family-shapes-medical-pills_23-2148439052.jpg",
},
{
id: "s4",
title: "Skin Treatment",
description: "Advanced dermatological services for healthy skin.",
tag: "Dermatology",
imageSrc: "http://img.b2bpic.net/free-vector/skin-treatment-icons-set_98292-1973.jpg",
},
{
id: "s5",
title: "Diagnostic Testing",
description: "Accurate laboratory testing and screening.",
tag: "Diagnostics",
imageSrc: "http://img.b2bpic.net/free-vector/medical-isometric-icons_1284-3952.jpg",
},
{
id: "s6",
title: "Emergency Care",
description: "Urgent attention when you need it most.",
tag: "Emergency",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-paper-heart-with-heartbeat-world-heart-day_23-2148635246.jpg",
},
]}
title="Our Medical Services"
description="Comprehensive healthcare solutions tailored to your unique needs."
/>
</div>
<div id="services" data-section="services">
<FeatureCardMedia
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ id: "s1", title: "General Consultation", description: "Comprehensive checkups for holistic wellness.", tag: "Primary Care", imageSrc: "http://img.b2bpic.net/free-vector/medicine-online_24877-49094.jpg" },
{ id: "s2", title: "Dental Care", description: "Expert oral health and cosmetic dentistry.", tag: "Dentistry", imageSrc: "http://img.b2bpic.net/free-vector/dental-icons-set_1284-4392.jpg" },
{ id: "s3", title: "Pediatric Care", description: "Dedicated care for infants and children.", tag: "Pediatrics", imageSrc: "http://img.b2bpic.net/free-photo/cardboard-family-shapes-medical-pills_23-2148439052.jpg" },
{ id: "s4", title: "Skin Treatment", description: "Advanced dermatological services for healthy skin.", tag: "Dermatology", imageSrc: "http://img.b2bpic.net/free-vector/skin-treatment-icons-set_98292-1973.jpg" },
{ id: "s5", title: "Diagnostic Testing", description: "Accurate laboratory testing and screening.", tag: "Diagnostics", imageSrc: "http://img.b2bpic.net/free-vector/medical-isometric-icons_1284-3952.jpg" },
{ id: "s6", title: "Emergency Care", description: "Urgent attention when you need it most.", tag: "Emergency", imageSrc: "http://img.b2bpic.net/free-photo/top-view-paper-heart-with-heartbeat-world-heart-day_23-2148635246.jpg" }
]}
title="Our Medical Services"
description="Comprehensive healthcare solutions tailored to your unique needs."
/>
</div>
<div id="doctors" data-section="doctors">
<TeamCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
groups={[
{
id: "group-1",
groupTitle: "Medical Professionals",
members: [
{
id: "doc1",
title: "Dr. Sarah Miller",
subtitle: "Chief of Cardiology",
detail: "15 years experience in cardiovascular health.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-male-doctor_171337-1491.jpg",
},
{
id: "doc2",
title: "Dr. James Chen",
subtitle: "Senior Pediatrician",
detail: "Expert in developmental child health.",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-doctor-wearing-coat_23-2148816198.jpg",
},
{
id: "doc3",
title: "Dr. Elena Rossi",
subtitle: "Dermatologist",
detail: "Specializing in advanced skin treatments.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-young-medical-doctor-grey-background_613910-123.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/doctor-wrking-their-clinic_23-2149281065.jpg?_wi=2",
imageAlt: "doctor studio portrait",
},
]}
title="Meet Our Specialists"
description="Our team of highly qualified medical professionals is committed to your well-being."
/>
</div>
<div id="doctors" data-section="doctors">
<TeamCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
groups={[
{
id: "group-1", groupTitle: "Medical Professionals", members: [
{ id: "doc1", title: "Dr. Sarah Miller", subtitle: "Chief of Cardiology", detail: "15 years experience in cardiovascular health.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-male-doctor_171337-1491.jpg" },
{ id: "doc2", title: "Dr. James Chen", subtitle: "Senior Pediatrician", detail: "Expert in developmental child health.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-doctor-wearing-coat_23-2148816198.jpg" },
{ id: "doc3", title: "Dr. Elena Rossi", subtitle: "Dermatologist", detail: "Specializing in advanced skin treatments.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-young-medical-doctor-grey-background_613910-123.jpg" }
]
}
]}
title="Meet Our Specialists"
description="Our team of highly qualified medical professionals is committed to your well-being."
/>
</div>
<div id="why-us" data-section="why-us">
<MetricCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "m1",
title: "Experienced Doctors",
value: "10+",
icon: Award,
},
{
id: "m2",
title: "Advanced Equipment",
value: "Latest",
icon: Shield,
},
{
id: "m3",
title: "Affordable Care",
value: "Transparent",
icon: DollarSign,
},
{
id: "m4",
title: "Patient Trust",
value: "15k+",
icon: Heart,
},
]}
title="Why Choose Us?"
description="Quality care, advanced equipment, and a patient-first approach."
/>
</div>
<div id="why-us" data-section="why-us">
<MetricCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{ id: "m1", title: "Experienced Doctors", value: "10+", icon: Award },
{ id: "m2", title: "Advanced Equipment", value: "Latest", icon: Shield },
{ id: "m3", title: "Affordable Care", value: "Transparent", icon: DollarSign },
{ id: "m4", title: "Patient Trust", value: "15k+", icon: Heart }
]}
title="Why Choose Us?"
description="Quality care, advanced equipment, and a patient-first approach."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "t1",
title: "Excellent Care",
quote: "The doctors here are professional and very compassionate. I am back to my best thanks to their treatment.",
name: "Mark Stevens",
role: "Patient",
imageSrc: "http://img.b2bpic.net/free-photo/smiley-female-doctor-posing-suit-stethoscope_23-2149014356.jpg",
},
{
id: "t2",
title: "Highly Professional",
quote: "Great experience with the pediatric unit for my son. Quick appointments and clear diagnosis.",
name: "Jane Doe",
role: "Patient",
imageSrc: "http://img.b2bpic.net/free-photo/listen-your-heart_268835-945.jpg",
},
{
id: "t3",
title: "Fast Diagnostics",
quote: "The laboratory testing was efficient and results were delivered fast. Highly recommended.",
name: "Robert Smith",
role: "Patient",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-doctor-wearing-white-coat_23-2149844582.jpg",
},
{
id: "t4",
title: "Skincare Success",
quote: "My skin treatment has given me immense confidence. Dr. Rossi is an absolute expert.",
name: "Emily White",
role: "Patient",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-practitioner-nurse-with-medical-stethoscope-analyzing-pharmaceutical-prescription-clinical-appointment-hospital-office-woman-asisstance-checking-sickness-symptoms_482257-28575.jpg",
},
{
id: "t5",
title: "Quality Support",
quote: "The entire team is friendly, professional, and very helpful. Trust them with your health.",
name: "David Brown",
role: "Patient",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-doctor-examining-patients-report_107420-74135.jpg",
},
]}
title="Patient Stories"
description="Hear what our patients have to say about their care."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{ id: "t1", title: "Excellent Care", quote: "The doctors here are professional and very compassionate. I am back to my best thanks to their treatment.", name: "Mark Stevens", role: "Patient", imageSrc: "http://img.b2bpic.net/free-photo/smiley-female-doctor-posing-suit-stethoscope_23-2149014356.jpg" },
{ id: "t2", title: "Highly Professional", quote: "Great experience with the pediatric unit for my son. Quick appointments and clear diagnosis.", name: "Jane Doe", role: "Patient", imageSrc: "http://img.b2bpic.net/free-photo/listen-your-heart_268835-945.jpg" },
{ id: "t3", title: "Fast Diagnostics", quote: "The laboratory testing was efficient and results were delivered fast. Highly recommended.", name: "Robert Smith", role: "Patient", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-doctor-wearing-white-coat_23-2149844582.jpg" },
{ id: "t4", title: "Skincare Success", quote: "My skin treatment has given me immense confidence. Dr. Rossi is an absolute expert.", name: "Emily White", role: "Patient", imageSrc: "http://img.b2bpic.net/free-photo/portrait-practitioner-nurse-with-medical-stethoscope-analyzing-pharmaceutical-prescription-clinical-appointment-hospital-office-woman-asisstance-checking-sickness-symptoms_482257-28575.jpg" },
{ id: "t5", title: "Quality Support", quote: "The entire team is friendly, professional, and very helpful. Trust them with your health.", name: "David Brown", role: "Patient", imageSrc: "http://img.b2bpic.net/free-photo/smiling-doctor-examining-patients-report_107420-74135.jpg" }
]}
title="Patient Stories"
description="Hear what our patients have to say about their care."
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "How to book an appointment?",
content: "You can book through our online portal or call our reception directly.",
},
{
id: "f2",
title: "Consultation fees?",
content: "Fees vary by service and specialist. Detailed pricing available on request.",
},
{
id: "f3",
title: "Clinic timings?",
content: "We are open Monday through Friday, 9:00 AM - 7:00 PM.",
},
{
id: "f4",
title: "Emergency support?",
content: "Our clinic offers 24/7 urgent care support for emergencies.",
},
]}
title="Frequently Asked Questions"
description="Answers to commonly asked questions about our services."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "How to book an appointment?", content: "You can book through our online portal or call our reception directly." },
{ id: "f2", title: "Consultation fees?", content: "Fees vary by service and specialist. Detailed pricing available on request." },
{ id: "f3", title: "Clinic timings?", content: "We are open Monday through Friday, 9:00 AM - 7:00 PM." },
{ id: "f4", title: "Emergency support?", content: "Our clinic offers 24/7 urgent care support for emergencies." }
]}
title="Frequently Asked Questions"
description="Answers to commonly asked questions about our services."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={true}
background={{
variant: "plain",
}}
tag="Booking Form"
title="Book Your Appointment"
description="Fill out the details below to schedule your visit with our medical team."
inputPlaceholder="Enter your phone number"
buttonText="Submit Appointment Request"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={true}
background={{ variant: "plain" }}
tag="Booking Form"
title="Book Your Appointment"
description="Fill out the details below to schedule your visit with our medical team."
inputPlaceholder="Enter your phone number"
buttonText="Submit Appointment Request"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="MediCare Clinic"
columns={[
{
title: "Quick Links",
items: [
{
label: "Home",
href: "#home",
},
{
label: "Services",
href: "#services",
},
{
label: "Doctors",
href: "#doctors",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Services",
items: [
{
label: "Dental Care",
href: "#services",
},
{
label: "Skin Care",
href: "#services",
},
{
label: "Pediatrics",
href: "#services",
},
],
},
{
title: "Contact",
items: [
{
label: "123 Medical St, Health City",
href: "#",
},
{
label: "+1 234 567 890",
href: "tel:+1234567890",
},
{
label: "contact@medicare.com",
href: "mailto:contact@medicare.com",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="MediCare Clinic"
columns={[
{ title: "Quick Links", items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#services" }, { label: "Doctors", href: "#doctors" }, { label: "Contact", href: "#contact" }] },
{ title: "Services", items: [{ label: "Dental Care", href: "#services" }, { label: "Skin Care", href: "#services" }, { label: "Pediatrics", href: "#services" }] },
{ title: "Contact", items: [{ label: "123 Medical St, Health City", href: "#" }, { label: "+1 234 567 890", href: "tel:+1234567890" }, { label: "contact@medicare.com", href: "mailto:contact@medicare.com" }] }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}