Update src/app/page.tsx

This commit is contained in:
2026-05-18 09:24:52 +00:00
parent 773345f83e
commit 9930ce478e

View File

@@ -17,475 +17,189 @@ import { Award, CheckCircle, Shield, Smile, Sparkles, Sun, Users, Zap } from "lu
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="small"
sizing="mediumLargeSizeLargeTitles"
background="floatingGradient"
cardStyle="layered-gradient"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="small"
sizing="mediumLargeSizeLargeTitles"
background="floatingGradient"
cardStyle="layered-gradient"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Services",
id: "services",
},
{
name: "Doctors",
id: "doctor",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Lumina Dental"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Services", id: "services" },
{ name: "Doctors", id: "doctor" },
{ name: "Contact", id: "contact" },
]}
brandName="Lumina Dental"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
title="Advanced Dental Care You Can Trust"
description="Modern, painless and hygienic treatments for a healthy confident smile."
testimonials={[
{
name: "Sarah J.",
handle: "@patient",
testimonial: "Exceptional care, the staff is very professional and friendly.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/fuzzy-room-with-television_1203-947.jpg?_wi=1",
imageAlt: "dental clinic interior modern",
},
{
name: "Mark D.",
handle: "@patient",
testimonial: "The best dental experience I've ever had, very modern.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/dentist-standing-with-arms-crossed-dental-clinic_107420-65537.jpg?_wi=1",
imageAlt: "dental clinic interior modern",
},
{
name: "Emily R.",
handle: "@patient",
testimonial: "Painless treatment and a beautiful result. Highly recommend.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smile-woman-brush-teeth-great-health-dental-care-concept-isolated-white-background-asian_1258-101403.jpg?_wi=1",
imageAlt: "dental clinic interior modern",
},
{
name: "Chris P.",
handle: "@patient",
testimonial: "Very hygienic, trustworthy and state-of-the-art tech.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/patient-receiving-dental-treatment_107420-65438.jpg?_wi=1",
imageAlt: "dental clinic interior modern",
},
{
name: "Jane L.",
handle: "@patient",
testimonial: "Luxurious atmosphere and top-tier expertise.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/dental-tools-equipment-white-background_1232-4445.jpg?_wi=1",
imageAlt: "dental clinic interior modern",
},
]}
buttons={[
{
text: "Book Appointment",
href: "#contact",
},
{
text: "WhatsApp Now",
href: "https://wa.me/1234567890",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/fuzzy-room-with-television_1203-947.jpg?_wi=2"
mediaAnimation="blur-reveal"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/anthropomorphic-robot-that-performs-regular-human-job_23-2151061692.jpg",
alt: "Patient profile",
},
{
src: "http://img.b2bpic.net/free-photo/anthropomorphic-robot-that-performs-regular-human-job_23-2151061706.jpg",
alt: "Patient profile",
},
{
src: "http://img.b2bpic.net/free-photo/full-equiped-medical-cabinet_1303-23912.jpg",
alt: "Patient profile",
},
{
src: "http://img.b2bpic.net/free-photo/anthropomorphic-robot-that-performs-regular-human-job_23-2151061695.jpg",
alt: "Patient profile",
},
{
src: "http://img.b2bpic.net/free-photo/male-professional-dentist-with-gloves-mask-discuss-what-treatment-will-look-like-patient-s-teeth_158595-7630.jpg",
alt: "Patient profile",
},
]}
avatarText="Over 5,000+ Happy Smiles"
marqueeItems={[
{
type: "text",
text: "State-of-the-art Technology",
},
{
type: "text",
text: "Painless Procedures",
},
{
type: "text",
text: "20+ Years Experience",
},
{
type: "text",
text: "Board Certified Specialists",
},
{
type: "text",
text: "Comprehensive Care",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
useInvertedBackground={false}
background={{ variant: "gradient-bars" }}
title="Advanced Dental Care You Can Trust"
description="Modern, painless and hygienic treatments for a healthy confident smile."
testimonials={[
{ name: "Sarah J.", handle: "@patient", testimonial: "Exceptional care, the staff is very professional and friendly.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fuzzy-room-with-television_1203-947.jpg", imageAlt: "dental clinic interior modern" },
{ name: "Mark D.", handle: "@patient", testimonial: "The best dental experience I've ever had, very modern.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/dentist-standing-with-arms-crossed-dental-clinic_107420-65537.jpg", imageAlt: "dental clinic interior modern" },
{ name: "Emily R.", handle: "@patient", testimonial: "Painless treatment and a beautiful result. Highly recommend.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-smile-woman-brush-teeth-great-health-dental-care-concept-isolated-white-background-asian_1258-101403.jpg", imageAlt: "dental clinic interior modern" },
{ name: "Chris P.", handle: "@patient", testimonial: "Very hygienic, trustworthy and state-of-the-art tech.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/patient-receiving-dental-treatment_107420-65438.jpg", imageAlt: "dental clinic interior modern" },
{ name: "Jane L.", handle: "@patient", testimonial: "Luxurious atmosphere and top-tier expertise.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/dental-tools-equipment-white-background_1232-4445.jpg", imageAlt: "dental clinic interior modern" },
]}
buttons={[{ text: "Book Appointment", href: "#contact" }, { text: "WhatsApp Now", href: "https://wa.me/1234567890" }]}
imageSrc="http://img.b2bpic.net/free-photo/fuzzy-room-with-television_1203-947.jpg"
mediaAnimation="blur-reveal"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/anthropomorphic-robot-that-performs-regular-human-job_23-2151061692.jpg", alt: "Patient profile" },
{ src: "http://img.b2bpic.net/free-photo/anthropomorphic-robot-that-performs-regular-human-job_23-2151061706.jpg", alt: "Patient profile" },
{ src: "http://img.b2bpic.net/free-photo/full-equiped-medical-cabinet_1303-23912.jpg", alt: "Patient profile" },
{ src: "http://img.b2bpic.net/free-photo/anthropomorphic-robot-that-performs-regular-human-job_23-2151061695.jpg", alt: "Patient profile" },
{ src: "http://img.b2bpic.net/free-photo/male-professional-dentist-with-gloves-mask-discuss-what-treatment-will-look-like-patient-s-teeth_158595-7630.jpg", alt: "Patient profile" },
]}
avatarText="Over 5,000+ Happy Smiles"
marqueeItems={[
{ type: "text", text: "State-of-the-art Technology" },
{ type: "text", text: "Painless Procedures" },
{ type: "text", text: "20+ Years Experience" },
{ type: "text", text: "Board Certified Specialists" },
{ type: "text", text: "Comprehensive Care" },
]}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
useInvertedBackground={false}
title="Your Smile, Our Passion"
description="At Lumina Dental, we blend years of medical experience with state-of-the-art technology to ensure every patient feels comfortable, safe, and heard during their treatment."
bulletPoints={[
{
title: "Expert Specialists",
description: "Board-certified doctors with decades of collective experience.",
},
{
title: "Advanced Equipment",
description: "Using the latest dental technology for precision and safety.",
},
{
title: "Patient Centric",
description: "A relaxing environment designed for stress-free dentistry.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/dentist-standing-with-arms-crossed-dental-clinic_107420-65537.jpg?_wi=2"
mediaAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
useInvertedBackground={false}
title="Your Smile, Our Passion"
description="At Lumina Dental, we blend years of medical experience with state-of-the-art technology to ensure every patient feels comfortable, safe, and heard during their treatment."
bulletPoints={[
{ title: "Expert Specialists", description: "Board-certified doctors with decades of collective experience." },
{ title: "Advanced Equipment", description: "Using the latest dental technology for precision and safety." },
{ title: "Patient Centric", description: "A relaxing environment designed for stress-free dentistry." },
]}
imageSrc="http://img.b2bpic.net/free-photo/dentist-standing-with-arms-crossed-dental-clinic_107420-65537.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="services" data-section="services">
<FeatureBento
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Teeth Cleaning",
description: "Professional hygiene maintenance.",
bentoComponent: "reveal-icon",
icon: Sparkles,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smile-woman-brush-teeth-great-health-dental-care-concept-isolated-white-background-asian_1258-101403.jpg?_wi=2",
imageAlt: "teeth cleaning illustration",
},
{
title: "Teeth Whitening",
description: "Get a brighter, healthier smile.",
bentoComponent: "reveal-icon",
icon: Sun,
imageSrc: "http://img.b2bpic.net/free-photo/fuzzy-room-with-television_1203-947.jpg?_wi=3",
imageAlt: "teeth cleaning illustration",
},
{
title: "Root Canal",
description: "Advanced painless root canal work.",
bentoComponent: "reveal-icon",
icon: Shield,
imageSrc: "http://img.b2bpic.net/free-photo/dentist-standing-with-arms-crossed-dental-clinic_107420-65537.jpg?_wi=3",
imageAlt: "teeth cleaning illustration",
},
{
title: "Braces & Aligners",
description: "Straighten your teeth effectively.",
bentoComponent: "reveal-icon",
icon: Smile,
imageSrc: "http://img.b2bpic.net/free-photo/patient-receiving-dental-treatment_107420-65438.jpg?_wi=2",
imageAlt: "teeth cleaning illustration",
},
{
title: "Smile Makeover",
description: "A total transformation for you.",
bentoComponent: "reveal-icon",
icon: Award,
imageSrc: "http://img.b2bpic.net/free-photo/dental-tools-equipment-white-background_1232-4445.jpg?_wi=2",
imageAlt: "teeth cleaning illustration",
},
{
title: "Dental Implants",
description: "Permanent solutions for missing teeth.",
bentoComponent: "reveal-icon",
icon: Zap,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-dentist-wearing-blue-uniform-standing-dentist-clinic-looking-camera_613910-18521.jpg?_wi=1",
imageAlt: "teeth cleaning illustration",
},
]}
title="Premium Dental Services"
description="Comprehensive care tailored to your specific oral health needs."
/>
</div>
<div id="services" data-section="services">
<FeatureBento
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ title: "Teeth Cleaning", description: "Professional hygiene maintenance.", bentoComponent: "reveal-icon", icon: Sparkles },
{ title: "Teeth Whitening", description: "Get a brighter, healthier smile.", bentoComponent: "reveal-icon", icon: Sun },
{ title: "Root Canal", description: "Advanced painless root canal work.", bentoComponent: "reveal-icon", icon: Shield },
{ title: "Braces & Aligners", description: "Straighten your teeth effectively.", bentoComponent: "reveal-icon", icon: Smile },
{ title: "Smile Makeover", description: "A total transformation for you.", bentoComponent: "reveal-icon", icon: Award },
{ title: "Dental Implants", description: "Permanent solutions for missing teeth.", bentoComponent: "reveal-icon", icon: Zap },
]}
title="Premium Dental Services"
description="Comprehensive care tailored to your specific oral health needs."
/>
</div>
<div id="why-choose-us" data-section="why-choose-us">
<MetricCardThree
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "m1",
title: "Years Experience",
value: "20+",
icon: Award,
},
{
id: "m2",
title: "Happy Patients",
value: "5000+",
icon: Users,
},
{
id: "m3",
title: "Success Rate",
value: "99%",
icon: CheckCircle,
},
]}
title="Why Trust Lumina Dental?"
description="We lead the industry with patient-first results."
/>
</div>
<div id="why-choose-us" data-section="why-choose-us">
<MetricCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{ id: "m1", title: "Years Experience", value: "20+", icon: Award },
{ id: "m2", title: "Happy Patients", value: "5000+", icon: Users },
{ id: "m3", title: "Success Rate", value: "99%", icon: CheckCircle },
]}
title="Why Trust Lumina Dental?"
description="We lead the industry with patient-first results."
/>
</div>
<div id="doctor" data-section="doctor">
<TeamCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
groups={[
{
id: "g1",
groupTitle: "Medical Lead",
members: [
{
id: "doc1",
title: "Dr. Alexander Smith",
subtitle: "Chief Dental Surgeon",
detail: "20+ years of expertise in cosmetic dentistry and implants.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-dentist-wearing-blue-uniform-standing-dentist-clinic-looking-camera_613910-18521.jpg?_wi=2",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/fuzzy-room-with-television_1203-947.jpg?_wi=4",
imageAlt: "professional dentist portrait",
},
]}
title="Meet Our Lead Dentist"
description="Expert care by Dr. Alexander Smith."
/>
</div>
<div id="doctor" data-section="doctor">
<TeamCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
groups={[
{
id: "g1", groupTitle: "Medical Lead", members: [
{ id: "doc1", title: "Dr. Alexander Smith", subtitle: "Chief Dental Surgeon", detail: "20+ years of expertise in cosmetic dentistry and implants." },
],
},
]}
title="Meet Our Lead Dentist"
description="Expert care by Dr. Alexander Smith."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Sarah J.",
handle: "@patient",
testimonial: "Absolutely amazing clinic experience.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-sitting-dentist-s-office_1157-28567.jpg",
},
{
id: "t2",
name: "Mark D.",
handle: "@patient",
testimonial: "Highly recommended for all treatments.",
imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-sportswear-beach_273609-5413.jpg",
},
{
id: "t3",
name: "Emily R.",
handle: "@patient",
testimonial: "Modern, clean and so friendly.",
imageSrc: "http://img.b2bpic.net/free-photo/young-female-patient-bed-physiotherapy-center_1139-1121.jpg",
},
{
id: "t4",
name: "Chris P.",
handle: "@patient",
testimonial: "Very professional clinic.",
imageSrc: "http://img.b2bpic.net/free-photo/smiley-doctor-looking-patient_23-2148485988.jpg",
},
{
id: "t5",
name: "Jane L.",
handle: "@patient",
testimonial: "The best place for my smile.",
imageSrc: "http://img.b2bpic.net/free-photo/horizontal-shot-positive-young-pretty-woman-with-curly-hair-points-index-fingers-toothy-smile-shows-white-even-teeth-dressed-red-turtleneck-poses-indoor-look-my-happy-perfect-smile_273609-60683.jpg",
},
]}
title="Patient Experiences"
description="What our premium patients say about us."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Sarah J.", handle: "@patient", testimonial: "Absolutely amazing clinic experience.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-sitting-dentist-s-office_1157-28567.jpg" },
{ id: "t2", name: "Mark D.", handle: "@patient", testimonial: "Highly recommended for all treatments.", imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-sportswear-beach_273609-5413.jpg" },
{ id: "t3", name: "Emily R.", handle: "@patient", testimonial: "Modern, clean and so friendly.", imageSrc: "http://img.b2bpic.net/free-photo/young-female-patient-bed-physiotherapy-center_1139-1121.jpg" },
{ id: "t4", name: "Chris P.", handle: "@patient", testimonial: "Very professional clinic.", imageSrc: "http://img.b2bpic.net/free-photo/smiley-doctor-looking-patient_23-2148485988.jpg" },
{ id: "t5", name: "Jane L.", handle: "@patient", testimonial: "The best place for my smile.", imageSrc: "http://img.b2bpic.net/free-photo/horizontal-shot-positive-young-pretty-woman-with-curly-hair-points-index-fingers-toothy-smile-shows-white-even-teeth-dressed-red-turtleneck-poses-indoor-look-my-happy-perfect-smile_273609-60683.jpg" },
]}
title="Patient Experiences"
description="What our premium patients say about us."
/>
</div>
<div id="gallery" data-section="gallery">
<ProductCardTwo
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
products={[
{
id: "p1",
brand: "Facility",
name: "Reception",
price: "",
rating: 5,
reviewCount: "1",
imageSrc: "http://img.b2bpic.net/free-photo/view-modern-futuristic-work-space-with-furniture_23-2151797714.jpg",
},
{
id: "p2",
brand: "Treatment",
name: "Room A",
price: "",
rating: 5,
reviewCount: "1",
imageSrc: "http://img.b2bpic.net/free-photo/professional-dentist-tools-chair-dental-office_1204-394.jpg",
},
{
id: "p3",
brand: "Interior",
name: "Lounge",
price: "",
rating: 5,
reviewCount: "1",
imageSrc: "http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg",
},
{
id: "p4",
brand: "Medical",
name: "Clinic B",
price: "",
rating: 5,
reviewCount: "1",
imageSrc: "http://img.b2bpic.net/free-photo/nobody-hospital-waiting-room-front-desk-with-office-supplies-promotional-flyers-healthcare-facility-empty-reception-counter-with-no-people-private-practice-clinic_482257-45891.jpg",
},
{
id: "p5",
brand: "Workspace",
name: "Studio C",
price: "",
rating: 5,
reviewCount: "1",
imageSrc: "http://img.b2bpic.net/free-photo/equipment-dental-instruments-dentist-s-office-tools-close-up_8353-1673.jpg",
},
{
id: "p6",
brand: "Facility",
name: "Clinic D",
price: "",
rating: 5,
reviewCount: "1",
imageSrc: "http://img.b2bpic.net/free-photo/young-female-dentist-treating-patients-teeth-with-dental-microscope-dentistry-concept_169016-66977.jpg",
},
]}
title="Clinic Gallery"
description="Step into a world of comfort."
/>
</div>
<div id="gallery" data-section="gallery">
<ProductCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
products={[
{ id: "p1", brand: "Facility", name: "Reception", price: "", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/view-modern-futuristic-work-space-with-furniture_23-2151797714.jpg" },
{ id: "p2", brand: "Treatment", name: "Room A", price: "", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/professional-dentist-tools-chair-dental-office_1204-394.jpg" },
{ id: "p3", brand: "Interior", name: "Lounge", price: "", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg" },
{ id: "p4", brand: "Medical", name: "Clinic B", price: "", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/nobody-hospital-waiting-room-front-desk-with-office-supplies-promotional-flyers-healthcare-facility-empty-reception-counter-with-no-people-private-practice-clinic_482257-45891.jpg" },
{ id: "p5", brand: "Workspace", name: "Studio C", price: "", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/equipment-dental-instruments-dentist-s-office-tools-close-up_8353-1673.jpg" },
{ id: "p6", brand: "Facility", name: "Clinic D", price: "", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/young-female-dentist-treating-patients-teeth-with-dental-microscope-dentistry-concept_169016-66977.jpg" },
]}
title="Clinic Gallery"
description="Step into a world of comfort."
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
text="Ready for your best smile? Book your premium appointment today via phone or WhatsApp."
buttons={[
{
text: "Call +1 234 567 890",
href: "tel:+1234567890",
},
{
text: "WhatsApp Now",
href: "https://wa.me/1234567890",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{ variant: "gradient-bars" }}
text="Ready for your best smile? Book your premium appointment today via phone or WhatsApp."
buttons={[
{ text: "Call +1 234 567 890", href: "tel:+1234567890" },
{ text: "WhatsApp Now", href: "https://wa.me/1234567890" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Lumina Dental"
columns={[
{
title: "Services",
items: [
{
label: "Teeth Cleaning",
href: "#services",
},
{
label: "Whitening",
href: "#services",
},
],
},
{
title: "Clinic",
items: [
{
label: "About Us",
href: "#about",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Social",
items: [
{
label: "Instagram",
href: "#",
},
{
label: "Facebook",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Lumina Dental"
columns={[
{ title: "Services", items: [{ label: "Teeth Cleaning", href: "#services" }, { label: "Whitening", href: "#services" }] },
{ title: "Clinic", items: [{ label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }] },
{ title: "Social", items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);