Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+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 Home() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "#about" },
+    { name: "Features", id: "#features" },
+    { name: "Contact", id: "#contact" },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingOverlay
+          navItems={navItems}
+          brandName="Homeopathy"
+          button={{
+            text: "Get Started",            href: "#contact"
+          }}
+        />
+
+        <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"
+            mediaAnimation="slide-up"
+            buttons={[{ text: "Explore Products", href: "#features" }]}
+          />
+        </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}
+            mediaAnimation="slide-up"
+            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="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?_wi=1",                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?_wi=1",                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?_wi=2",                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?_wi=2",                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?_wi=3",                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?_wi=3",                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="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>
+  );
+}