Update src/app/page.tsx

This commit is contained in:
2026-03-07 18:42:02 +00:00
parent 791dad8489
commit d54f18c1e2

View File

@@ -1,432 +1,192 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { ThemeProvider } from "@/components/theme/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import MediaAbout from "@/components/sections/about/MediaAbout";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import {
Leaf,
Award,
Clock,
Users,
Heart,
Stethoscope,
Pill,
CheckCircle,
Star,
Calendar,
Package,
} from "lucide-react";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import TimelineProcessFlow from "@/components/cardStack/layouts/timelines/TimelineProcessFlow";
import Image from "next/image";
import { ArrowRight, Lightbulb, Zap } from "lucide-react";
import ReactLenis from "lenis/react";
export default function HomePage() {
export default function Home() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "About Doctor", id: "/about" },
{ name: "Treatments", id: "/treatments" },
{ name: "Reviews", id: "/testimonials" },
{ name: "Gallery", id: "/gallery" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Services",
items: [
{ label: "Hair Loss Treatment", href: "/treatments/hair-loss" },
{ label: "Skin Disease Treatment", href: "/treatments/skin-disease" },
{ label: "Allergy Treatment", href: "/treatments/allergies" },
{ label: "Migraine Treatment", href: "/treatments/migraine" },
],
},
{
title: "Company",
items: [
{ label: "About Doctor", href: "/about" },
{ label: "Our Clinic", href: "/contact" },
{ label: "Contact Us", href: "/contact" },
{ label: "Privacy Policy", href: "#" },
],
},
{
title: "Contact",
items: [
{ label: "Phone: +91-9876-543-210", href: "tel:+919876543210" },
{
label: "Email: contact@drgokalgandhi.com",
href: "mailto:contact@drgokalgandhi.com",
},
{ label: "WhatsApp Chat", href: "https://wa.me/919876543210" },
{ label: "Location: Dahisar West, Mumbai", href: "#" },
],
},
{ name: "About", id: "#about" },
{ name: "Features", id: "#features" },
{ name: "Contact", id: "#contact" },
];
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="noise"
cardStyle="layered-gradient"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="layered"
headingFontWeight="normal"
contentWidth="medium"
sizing="medium"
background="aurora"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<ReactLenis root>
<NavbarLayoutFloatingOverlay
brandName="Dr. Gokalgandhi"
navItems={navItems}
brandName="Homeopathy"
button={{
text: "Book Appointment",
href: "/contact",
}}
text: "Get Started", href: "#contact"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
title="Natural Homeopathy Treatment in Dahisar with 30+ Years Experience"
description="Safe and effective homeopathic treatment for chronic diseases by experienced physician Dr. V. M. Gokalgandhi."
tag="Premium Homeopathy Care"
tagIcon={Leaf}
tagAnimation="slide-up"
buttons={[
{
text: "Call Now",
href: "tel:+919876543210",
},
{
text: "Book Appointment",
href: "/contact",
},
]}
buttonAnimation="slide-up"
mediaItems={[
{
imageSrc:
"http://img.b2bpic.net/free-photo/side-view-woman-working-as-nurse_23-2151061608.jpg?_wi=1",
imageAlt: "Modern clinic environment",
},
{
imageSrc:
"http://img.b2bpic.net/free-photo/young-doctor-man-smiling_1194-9701.jpg?_wi=1",
imageAlt: "Dr. V. M. Gokalgandhi",
},
]}
mediaAnimation="slide-up"
rating={5}
ratingText="Trusted by thousands of patients"
background={{ variant: "plain" }}
ariaLabel="Hero section - Homeopathy clinic introduction"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
title="Natural Healing Solutions"
description="Discover the power of homeopathic medicine for your wellness journey"
background={{ variant: "glowing-orb" }}
kpis={[
{ value: "500+", label: "Natural Remedies" },
{ value: "99%", label: "Customer Satisfaction" },
{ value: "20+", label: "Years of Trust" },
]}
enableKpiAnimation={true}
imageSrc="/hero-image.jpg"
imageAlt="Homeopathy solutions"
buttons={[{ text: "Explore Products", href: "#features" }]}
/>
</div>
<div id="trust-indicators" data-section="trust-indicators">
<MetricCardOne
title="Why Trust Our Clinic"
description="Proven credentials and patient outcomes that build confidence in natural healing"
tag="Credentials"
tagIcon={Award}
tagAnimation="slide-up"
metrics={[
{
id: "1",
value: "30",
title: "Years Experience",
description: "Decades of trusted medical practice",
icon: Clock,
},
{
id: "2",
value: "1000",
title: "Patients Treated",
description: "Thousands of successful recovery cases",
icon: Users,
},
{
id: "3",
value: "100",
title: "Natural Medicines",
description: "Safe and pure homeopathic remedies",
icon: Leaf,
},
{
id: "4",
value: "99",
title: "Patient Satisfaction",
description: "Personalized treatment plans for each patient",
icon: Heart,
},
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
title="About Our Medicines"
description="Premium quality homeopathic remedies crafted with precision and care"
textboxLayout="default"
useInvertedBackground={false}
bulletPoints={[
{
title: "100% Natural", description: "All ingredients sourced from nature", icon: Lightbulb,
},
{
title: "Lab Tested", description: "Rigorous quality control standards", icon: Zap,
},
{
title: "Trusted Formulas", description: "Proven traditional recipes"},
]}
imageSrc="/about-image.jpg"
imageAlt="About homeopathy"
/>
</div>
<div id="about" data-section="about">
<MediaAbout
title="Meet Dr. V. M. Gokalgandhi"
description="Dr. V. M. Gokalgandhi is a highly experienced homeopathic physician practicing in Dahisar West, Mumbai. With more than three decades of clinical experience, he has helped thousands of patients recover from chronic and recurring health conditions using safe and natural homeopathic medicines. His approach focuses on identifying the root cause of illness and creating personalized treatment plans for each patient."
tag="Medical Professional"
tagIcon={Stethoscope}
tagAnimation="slide-up"
buttons={[
{
text: "Learn More About Doctor",
href: "/about",
},
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/young-doctor-man-smiling_1194-9701.jpg?_wi=2"
imageAlt="Dr. V. M. Gokalgandhi - Homeopathic Physician"
useInvertedBackground={true}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentySix
features={[
{
title: "Arnica Montana", description: "Powerful remedy for bruises and muscle pain", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcxQdy6Fek6RYDTU0mO1bAE3pV/uploaded-1772908894979-gyx4tx5k.jpg", imageAlt: "Arnica Montana pills", buttonIcon: ArrowRight,
buttonHref: "#"},
{
title: "Belladonna", description: "Effective for acute inflammatory conditions", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcxQdy6Fek6RYDTU0mO1bAE3pV/uploaded-1772908894980-mviwfh1o.jpg", imageAlt: "Belladonna pills", buttonIcon: ArrowRight,
buttonHref: "#"},
{
title: "Aconite", description: "Traditional remedy for sudden illnesses", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcxQdy6Fek6RYDTU0mO1bAE3pV/uploaded-1772908894979-gyx4tx5k.jpg", imageAlt: "Aconite pills", buttonIcon: ArrowRight,
buttonHref: "#"},
{
title: "Chamomilla", description: "Soothing remedy for digestive wellness", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcxQdy6Fek6RYDTU0mO1bAE3pV/uploaded-1772908894980-mviwfh1o.jpg", imageAlt: "Chamomilla pills", buttonIcon: ArrowRight,
buttonHref: "#"},
{
title: "Nux Vomica", description: "Support for digestive balance", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcxQdy6Fek6RYDTU0mO1bAE3pV/uploaded-1772908894979-gyx4tx5k.jpg", imageAlt: "Nux Vomica pills", buttonIcon: ArrowRight,
buttonHref: "#"},
{
title: "Phosphorus", description: "Energizing remedy for vitality", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AcxQdy6Fek6RYDTU0mO1bAE3pV/uploaded-1772908894980-mviwfh1o.jpg", imageAlt: "Phosphorus pills", buttonIcon: ArrowRight,
buttonHref: "#"},
]}
title="Our Medicine Collection"
description="Explore our premium selection of homeopathic medicines"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="treatments" data-section="treatments">
<ProductCardFour
title="Conditions We Treat"
description="Comprehensive homeopathic treatment for a wide range of chronic and recurring health conditions"
tag="Treatment Specialties"
tagIcon={Pill}
tagAnimation="slide-up"
products={[
{
id: "1",
name: "Hair Loss Treatment",
price: "Personalized Plan",
variant: "Natural & Effective",
imageSrc:
"http://img.b2bpic.net/free-photo/side-view-woman-wearing-hair-net_23-2149628027.jpg?_wi=1",
imageAlt: "Hair loss treatment",
},
{
id: "2",
name: "Skin Disease Treatment",
price: "Personalized Plan",
variant: "Root Cause Healing",
imageSrc:
"http://img.b2bpic.net/free-photo/high-angle-gua-sha-face-roller-arrangement_23-2149357152.jpg?_wi=1",
imageAlt: "Skin disease treatment",
},
{
id: "3",
name: "Allergy Treatment",
price: "Personalized Plan",
variant: "Safe & Natural",
imageSrc:
"http://img.b2bpic.net/free-photo/sick-adult-blowing-their-snot_23-2151544767.jpg?_wi=1",
imageAlt: "Allergy treatment",
},
{
id: "4",
name: "Migraine Treatment",
price: "Personalized Plan",
variant: "Long-term Relief",
imageSrc:
"http://img.b2bpic.net/free-photo/man-with-banknotes-isolated-studio_1303-26941.jpg?_wi=1",
imageAlt: "Migraine treatment",
},
{
id: "5",
name: "Asthma Treatment",
price: "Personalized Plan",
variant: "Respiratory Health",
imageSrc:
"http://img.b2bpic.net/free-photo/sick-adult-blowing-their-snot_23-2151544767.jpg?_wi=2",
imageAlt: "Asthma treatment",
},
{
id: "6",
name: "Arthritis Treatment",
price: "Personalized Plan",
variant: "Joint Health",
imageSrc:
"http://img.b2bpic.net/free-photo/man-with-banknotes-isolated-studio_1303-26941.jpg?_wi=2",
imageAlt: "Arthritis treatment",
},
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="benefits" data-section="benefits">
<FeatureCardTwentyFour
title="Why Choose Our Clinic"
description="Experience premium homeopathic care backed by decades of expertise"
tag="Our Advantages"
tagIcon={CheckCircle}
tagAnimation="slide-up"
features={[
{
id: "1",
title: "30+ Years of Experience",
author: "Proven Track Record",
description:
"Three decades of trusted medical practice with thousands of successful patient outcomes.",
tags: ["Experience", "Trust"],
imageSrc:
"http://img.b2bpic.net/free-photo/young-doctor-man-smiling_1194-9701.jpg?_wi=3",
imageAlt: "Experienced physician",
},
{
id: "2",
title: "Natural Homeopathic Medicines",
author: "Pure & Safe",
description:
"100% natural remedies with minimal to no side effects, perfect for long-term healing.",
tags: ["Natural", "Safe"],
imageSrc:
"http://img.b2bpic.net/free-photo/female-pharmacist-seeking-advice-online_329181-19491.jpg?_wi=1",
imageAlt: "Natural medicines",
},
{
id: "3",
title: "Individualized Treatment Plans",
author: "Patient-Centered Care",
description:
"Each patient receives a customized treatment plan based on their unique health condition and history.",
tags: ["Personalized", "Effective"],
imageSrc:
"http://img.b2bpic.net/free-photo/close-up-patient-doctor-s-appointment_23-2148497184.jpg?_wi=1",
imageAlt: "Personalized consultation",
},
{
id: "4",
title: "Root-Cause Healing Approach",
author: "Holistic Treatment",
description:
"We focus on identifying and treating the root cause of illness rather than just symptoms.",
tags: ["Holistic", "Comprehensive"],
imageSrc:
"http://img.b2bpic.net/free-photo/senior-people-discussing-pension-financial-strategy-with-broker_482257-101460.jpg?_wi=1",
imageAlt: "Patient consultation",
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
title="Patient Testimonials"
description="Real stories from patients who have experienced transformation through our homeopathic care"
tag="Patient Reviews"
tagIcon={Star}
tagAnimation="slide-up"
testimonials={[
{
id: "1",
name: "Priya Sharma",
role: "Software Engineer",
testimonial:
"Dr. Gokalgandhi's treatment helped me overcome my chronic hair loss problem. I saw visible improvement within 3 months. His personalized approach and natural medicines gave me back my confidence.",
imageSrc:
"http://img.b2bpic.net/free-photo/female-doctor-standing-with-crossed-arms-blue-uniform_176474-20208.jpg?_wi=1",
imageAlt: "Priya Sharma",
},
{
id: "2",
name: "Rajesh Patel",
role: "Business Owner",
testimonial:
"I was skeptical about homeopathy, but Dr. Gokalgandhi's expertise completely changed my perspective. My skin condition improved significantly, and I'm grateful for his compassionate care.",
imageSrc:
"http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2580.jpg?_wi=1",
imageAlt: "Rajesh Patel",
},
{
id: "3",
name: "Anjali Verma",
role: "Teacher",
testimonial:
"Finally found relief from my seasonal allergies! Dr. Gokalgandhi's natural treatment approach eliminated my symptoms without any side effects. Highly recommended for anyone looking for genuine homeopathic care.",
imageSrc:
"http://img.b2bpic.net/free-photo/smiling-dentist-clinic_107420-74053.jpg?_wi=1",
imageAlt: "Anjali Verma",
},
{
id: "4",
name: "Vikram Singh",
role: "Marketing Manager",
testimonial:
"My chronic migraines have become manageable thanks to Dr. Gokalgandhi's homeopathic treatment. He takes time to understand each patient and creates effective treatment plans.",
imageSrc:
"http://img.b2bpic.net/free-photo/happy-beautiful-blonde-woman-wearing-white-shirt-standing-co-working-space-leaning-desk_74855-15151.jpg?_wi=1",
imageAlt: "Vikram Singh",
},
{
id: "5",
name: "Deepika Nair",
role: "Healthcare Professional",
testimonial:
"As a healthcare professional, I appreciate Dr. Gokalgandhi's scientific approach to homeopathy. His clinic is impeccably maintained and he provides excellent patient care.",
imageSrc:
"http://img.b2bpic.net/free-photo/happy-doctor-greeting-handshaking-with-senior-patient-his-office-focus-is-senior-man_637285-1473.jpg",
imageAlt: "Deepika Nair",
},
{
id: "6",
name: "Arjun Kapoor",
role: "Entrepreneur",
testimonial:
"Dr. Gokalgandhi helped me address my digestive issues holistically. His expertise and dedication to patient wellness is evident in every consultation.",
imageSrc:
"http://img.b2bpic.net/free-photo/happy-african-american-healthcare-expert-looking-camera_637285-11471.jpg?_wi=1",
imageAlt: "Arjun Kapoor",
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="appointment-cta" data-section="appointment-cta">
<ContactCTA
tag="Book Your Consultation"
tagIcon={Calendar}
tagAnimation="slide-up"
title="Ready to Begin Your Journey to Better Health?"
description="Start your journey toward natural healing with homeopathy. Schedule a consultation with Dr. Gokalgandhi today and experience personalized, compassionate care."
buttons={[
{
text: "Book Appointment",
href: "/contact",
},
{
text: "WhatsApp Consultation",
href: "https://wa.me/919876543210",
},
]}
buttonAnimation="slide-up"
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={footerColumns}
copyrightText="© 2025 Dr. Gokalgandhi V. M. Homeopathic Clinic. All rights reserved."
/>
</div>
<div id="process" data-section="process">
<TimelineProcessFlow
title="Our Process"
description="How we create premium homeopathic medicines"
tag="Quality Assurance"
textboxLayout="default"
animationType="slide-up"
items={[
{
id: "1", reverse: false,
media: (
<div className="w-full h-full bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
<span className="text-white text-2xl font-bold">Selection</span>
</div>
),
content: (
<>
<h3 className="text-2xl font-bold mb-2">Source Selection</h3>
<p className="text-base mb-3">
We carefully select the finest natural ingredients
</p>
<ul className="list-disc pl-5 space-y-1">
<li>Premium quality herbs</li>
<li>Organic sourcing</li>
<li>Sustainable practices</li>
</ul>
</>
),
},
{
id: "2", reverse: true,
media: (
<div className="w-full h-full bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center">
<span className="text-white text-2xl font-bold">Testing</span>
</div>
),
content: (
<>
<h3 className="text-2xl font-bold mb-2">Laboratory Testing</h3>
<p className="text-base mb-3">
Every batch undergoes rigorous testing
</p>
<ul className="list-disc pl-5 space-y-1">
<li>Purity verification</li>
<li>Potency testing</li>
<li>Safety certification</li>
</ul>
</>
),
},
{
id: "3", reverse: false,
media: (
<div className="w-full h-full bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center">
<span className="text-white text-2xl font-bold">Production</span>
</div>
),
content: (
<>
<h3 className="text-2xl font-bold mb-2">Careful Production</h3>
<p className="text-base mb-3">
Precision manufacturing ensures consistency
</p>
<ul className="list-disc pl-5 space-y-1">
<li>Precise dilution ratios</li>
<li>Controlled environment</li>
<li>Quality standards</li>
</ul>
</>
),
},
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}