From b16699d97b5d6d2ab972a168b8ae2cd1d23571ea Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 8 May 2026 19:41:40 +0000
Subject: [PATCH 1/4] Update src/app/about/page.tsx

---
 src/app/about/page.tsx | 90 ++++++++++++++++++++++++++----------------
 1 file changed, 56 insertions(+), 34 deletions(-)

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 84139e6..5f1b149 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -6,44 +6,66 @@ import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatin
 import AboutMetric from "@/components/sections/about/AboutMetric";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Zap, Users, Award, TrendingUp } from "lucide-react";
+import { Zap, Users, Award } from "lucide-react";
 
 export default function AboutPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Work", id: "work" },
-            { name: "Services", id: "services" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          button={{ text: "Get Started", href: "/contact" }}
-        />
-        <AboutMetric
-          title="About Our Agency"
-          metrics={[
-            { icon: Award, label: "Industry Experience", value: "8+ Years" },
-            { icon: Users, label: "Happy Clients", value: "100+" },
-            { icon: Zap, label: "Projects Completed", value: "250+" },
-          ]}
-          metricsAnimation="slide-up"
-          useInvertedBackground={false}
-        />
-        <ContactCTA
-          tag="Work With Us"
-          title="Let's Create Something Great"
-          description="We are always looking for new challenges. Contact us to start your next project."
-          buttons={[{ text: "Get in Touch", href: "/contact" }]}
-        />
-        <FooterBase
-          logoText="Webild"
-          columns={[
-            { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Shop", id: "/shop" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            button={{ text: "Get Started", href: "/contact" }}
+          />
+        </div>
+        <div id="about" data-section="about">
+          <AboutMetric
+            title="About Our Agency"
+            metrics={[
+              { id: "1", icon: Award, label: "Industry Experience", value: "8+ Years" },
+              { id: "2", icon: Users, label: "Happy Clients", value: "100+" },
+              { id: "3", icon: Zap, label: "Projects Completed", value: "250+" },
+            ]}
+            metricsAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="cta" data-section="cta">
+          <ContactCTA
+            tag="Work With Us"
+            title="Let's Create Something Great"
+            description="We are always looking for new challenges. Contact us to start your next project."
+            buttons={[{ text: "Get in Touch", href: "/contact" }]}
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            logoText="Webild"
+            columns={[
+              { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }
+            ]}
+            copyrightText="© 2026 | Webild"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1


From a6931f3001df5408d2cd2d583d0593ec5e7680a5 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 8 May 2026 19:41:40 +0000
Subject: [PATCH 2/4] Update src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 71 +++++++++++++++++++++++++---------------
 1 file changed, 45 insertions(+), 26 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 2527def..3d778d2 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -8,33 +8,52 @@ import FooterBase from "@/components/sections/footer/FooterBase";
 
 export default function ContactPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Work", id: "work" },
-            { name: "Services", id: "services" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          button={{ text: "Get Started", href: "/contact" }}
-        />
-        <ContactSplitForm
-          title="Contact Us"
-          description="Have a project in mind? We'd love to hear from you."
-          inputs={[
-            { name: "name", type: "text", placeholder: "Your Name", required: true },
-            { name: "email", type: "email", placeholder: "Your Email", required: true }
-          ]}
-          textarea={{ name: "message", placeholder: "Tell us about your project" }}
-        />
-        <FooterBase
-          logoText="Webild"
-          columns={[
-            { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Shop", id: "/shop" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            button={{ text: "Get Started", href: "/contact" }}
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            title="Contact Us"
+            description="Have a project in mind? We'd love to hear from you."
+            inputs={[
+              { name: "name", type: "text", placeholder: "Your Name", required: true },
+              { name: "email", type: "email", placeholder: "Your Email", required: true }
+            ]}
+            textarea={{ name: "message", placeholder: "Tell us about your project" }}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            logoText="Webild"
+            columns={[
+              { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }
+            ]}
+            copyrightText="© 2026 | Webild"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1


From 7ae9530340e1e392ac2ca91035167d5aee7dd711 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 8 May 2026 19:41:41 +0000
Subject: [PATCH 3/4] Update src/app/page.tsx

---
 src/app/page.tsx | 268 +++++++++++++++++++++++------------------------
 1 file changed, 134 insertions(+), 134 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5e3a809..87db6c9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,14 +6,10 @@ import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatin
 import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
 import FeatureBento from "@/components/sections/feature/FeatureBento";
 import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
-import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
-import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
-import TeamCardFive from "@/components/sections/team/TeamCardFive";
-import FaqBase from "@/components/sections/faq/FaqBase";
+import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
-import { Sparkles, Search, ArrowUpRight, Monitor, Shield, Zap, Puzzle, TrendingUp, Lock, Phone, MessageCircle, BookOpen, Tv, Camera, Music, Settings, Award, Users } from "lucide-react";
+import { Sparkles, Search, ArrowUpRight } from "lucide-react";
 
 export default function ShoeStorePage() {
   return (
@@ -23,138 +19,142 @@ export default function ShoeStorePage() {
       borderRadius="pill"
       contentWidth="medium"
       sizing="medium"
-      background="none"
+      background="circleGradient"
       cardStyle="glass-elevated"
-      primaryButtonStyle="metallic"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="medium"
+      headingFontWeight="normal"
     >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="SoleStride"
-          navItems={[
-            { name: "Home", id: "hero" },
-            { name: "Products", id: "products" },
-            { name: "About", id: "about" },
-            { name: "Contact", id: "contact" },
-          ]}
-          button={{ text: "Shop Now", href: "#products" }}
-        />
-        <HeroSplitDoubleCarousel
-          title="Step Into the Future"
-          description="Premium footwear designed for performance, comfort, and unmatched style. Elevate every step with SoleStride."
-          tag="New Collection 2026"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          background={{ variant: "canvas-reveal" }}
-          buttons={[
-            { text: "Explore Collection", href: "#products" },
-            { text: "Contact Us", href: "#contact" },
-          ]}
-          buttonAnimation="slide-up"
-          carouselPosition="right"
-          leftCarouselItems={[
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Running Shoes" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "Lifestyle Sneakers" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp", imageAlt: "Performance Trainers" },
-          ]}
-          rightCarouselItems={[
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "Casual Loafers" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp", imageAlt: "High-top Boots" },
-          ]}
-          carouselItemClassName="!aspect-[4/5]"
-        />
-        <FeatureBento
-          title="Why SoleStride?"
-          description="Experience the perfect blend of innovation and craftsmanship."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-          buttons={[{ text: "Learn More", href: "#about" }]}
-          buttonAnimation="slide-up"
-          features={[
-            {
-              title: "Eco-Friendly Materials",              description: "Crafted from sustainable, high-quality recycled materials for the planet.",              bentoComponent: "marquee",              centerIcon: Search,
-              variant: "text",              texts: ["Organic", "Recycled", "Durable", "Lightweight", "Sustainable", "Breathable", "Vegan", "Ethical"],
-            },
-            {
-              title: "Ergonomic Design",              description: "Designed to provide ultimate support for long-distance wear.",              bentoComponent: "media-stack",              items: [
-                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp", imageAlt: "Ergonomic soul" },
-                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp", imageAlt: "Arch support" },
-              ],
-            },
-            {
-              title: "Global Delivery",              description: "Fast shipping to over 50 countries worldwide.",              bentoComponent: "media-stack",              items: [
-                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Global reach" },
-                { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "Fast shipping" },
-              ],
-            },
-          ]}
-        />
-        <FeatureCardTwentySix
-          title="Top Picks"
-          description="Our best-selling collection for this season."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          buttons={[{ text: "View Store", href: "#products" }]}
-          buttonAnimation="slide-up"
-          cardClassName="!h-auto aspect-video"
-          features={[
-            {
-              title: "Urban Runner",              description: "Perfect for daily city life",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp",              imageAlt: "Urban Runner",              buttonIcon: ArrowUpRight,
-              buttonHref: "#"},
-            {
-              title: "Summit Trekker",              description: "Conquer every mountain",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp",              imageAlt: "Summit Trekker",              buttonIcon: ArrowUpRight,
-              buttonHref: "#"},
-            {
-              title: "Elite Court",              description: "Performance tennis gear",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp",              imageAlt: "Elite Court",              buttonIcon: ArrowUpRight,
-              buttonHref: "#"},
-          ]}
-        />
-        <TestimonialCardFifteen
-          testimonial="SoleStride sneakers are the most comfortable pair I've ever owned. Perfect for both office wear and weekend adventures."
-          rating={5}
-          author="— Alex Johnson, Avid Runner"
-          avatars={[
-            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", alt: "Alex" },
-          ]}
-          ratingAnimation="slide-up"
-          avatarsAnimation="slide-up"
-          useInvertedBackground={false}
-        />
-        <ContactCTA
-          tag="Contact"
-          title="Got Questions?"
-          description="We're here to help you find the perfect pair. Send us a message today."
-          background={{ variant: "rotated-rays-animated" }}
-          buttons={[
-            { text: "Get in touch", href: "#contact" },
-          ]}
-          buttonAnimation="slide-up"
-          useInvertedBackground={false}
-        />
-        <FooterBase
-          logoText="SoleStride"
-          copyrightText="© 2026 | SoleStride"
-          columns={[
-            {
-              title: "Menu",              items: [
-                { label: "Home", href: "#hero" },
-                { label: "Products", href: "#products" },
-                { label: "About", href: "#about" },
-                { label: "Contact", href: "#contact" },
-              ],
-            },
-            {
-              title: "Shop",              items: [
-                { label: "Running", href: "#" },
-                { label: "Casual", href: "#" },
-                { label: "Formal", href: "#" },
-              ],
-            },
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="SoleStride"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Shop", id: "/shop" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            button={{ text: "Shop Now", href: "/shop" }}
+          />
+        </div>
+        <div id="hero" data-section="hero">
+          <HeroSplitDoubleCarousel
+            title="Step Into the Future"
+            description="Premium footwear designed for performance, comfort, and unmatched style. Elevate every step with SoleStride."
+            tag="New Collection 2026"
+            tagIcon={Sparkles}
+            tagAnimation="slide-up"
+            background={{ variant: "canvas-reveal" }}
+            buttons={[
+              { text: "Explore Collection", href: "/shop" },
+              { text: "Contact Us", href: "/contact" },
+            ]}
+            buttonAnimation="slide-up"
+            carouselPosition="right"
+            leftCarouselItems={[
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Running Shoes" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "Lifestyle Sneakers" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp", imageAlt: "Performance Trainers" },
+            ]}
+            rightCarouselItems={[
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "Casual Loafers" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp", imageAlt: "High-top Boots" },
+              { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Extra Item 3" },
+            ]}
+            carouselItemClassName="!aspect-[4/5]"
+          />
+        </div>
+        <div id="features" data-section="features">
+          <FeatureBento
+            title="Why SoleStride?"
+            description="Experience the perfect blend of innovation and craftsmanship."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            animationType="slide-up"
+            buttons={[{ text: "Learn More", href: "/about" }]}
+            buttonAnimation="slide-up"
+            features={[
+              {
+                title: "Eco-Friendly Materials",                description: "Crafted from sustainable, high-quality recycled materials for the planet.",                bentoComponent: "marquee",                centerIcon: Search,
+                variant: "text",                texts: ["Organic", "Recycled", "Durable", "Lightweight", "Sustainable", "Breathable", "Vegan", "Ethical"],
+              },
+              {
+                title: "Ergonomic Design",                description: "Designed to provide ultimate support for long-distance wear.",                bentoComponent: "media-stack",                items: [
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp", imageAlt: "Ergonomic soul" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp", imageAlt: "Arch support" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp", imageAlt: "Extra Item 3" },
+                ],
+              },
+              {
+                title: "Global Delivery",                description: "Fast shipping to over 50 countries worldwide.",                bentoComponent: "media-stack",                items: [
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Global reach" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "Fast shipping" },
+                  { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Extra Item 3" },
+                ],
+              },
+            ]}
+          />
+        </div>
+        <div id="picks" data-section="picks">
+          <FeatureCardTwentySix
+            title="Top Picks"
+            description="Our best-selling collection for this season."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            buttons={[{ text: "View Store", href: "/shop" }]}
+            buttonAnimation="slide-up"
+            cardClassName="!h-auto aspect-video"
+            features={[
+              {
+                title: "Urban Runner",                description: "Perfect for daily city life",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp",                imageAlt: "Urban Runner",                buttonIcon: ArrowUpRight,
+                buttonHref: "/shop"},
+              {
+                title: "Summit Trekker",                description: "Conquer every mountain",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp",                imageAlt: "Summit Trekker",                buttonIcon: ArrowUpRight,
+                buttonHref: "/shop"},
+              {
+                title: "Elite Court",                description: "Performance tennis gear",                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp",                imageAlt: "Elite Court",                buttonIcon: ArrowUpRight,
+                buttonHref: "/shop"},
+            ]}
+          />
+        </div>
+        <div id="testimonial" data-section="testimonial">
+          <TestimonialCardFifteen
+            testimonial="SoleStride sneakers are the most comfortable pair I've ever owned. Perfect for both office wear and weekend adventures."
+            rating={5}
+            author="— Alex Johnson, Avid Runner"
+            avatars={[
+              { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", alt: "Alex" },
+            ]}
+            ratingAnimation="slide-up"
+            avatarsAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            logoText="SoleStride"
+            copyrightText="© 2026 | SoleStride"
+            columns={[
+              {
+                title: "Menu",                items: [
+                  { label: "Home", href: "/" },
+                  { label: "Shop", href: "/shop" },
+                  { label: "About", href: "/about" },
+                  { label: "Contact", href: "/contact" },
+                ],
+              },
+              {
+                title: "Shop",                items: [
+                  { label: "Running", href: "/shop" },
+                  { label: "Casual", href: "/shop" },
+                  { label: "Formal", href: "/shop" },
+                ],
+              },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1


From 06975ea817d8fb617d9be44a9380fb1d750b2bbe Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 8 May 2026 19:41:41 +0000
Subject: [PATCH 4/4] Update src/app/shop/page.tsx

---
 src/app/shop/page.tsx | 67 ++++++++++++++++++++++++-------------------
 1 file changed, 37 insertions(+), 30 deletions(-)

diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index dc24a15..d5d5a00 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -14,40 +14,47 @@ export default function ShopPage() {
       borderRadius="pill"
       contentWidth="medium"
       sizing="medium"
-      background="none"
+      background="circleGradient"
       cardStyle="glass-elevated"
-      primaryButtonStyle="metallic"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="medium"
+      headingFontWeight="normal"
     >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Work", id: "work" },
-            { name: "Services", id: "services" },
-            { name: "About", id: "about" },
-            { name: "Shop", id: "shop" },
-            { name: "Contact", id: "contact" },
-          ]}
-          button={{ text: "Get Started", href: "/#contact" }}
-        />
-        <ProductCardThree
-          title="Our Products"
-          description="Explore our curated collection of digital assets and tools."
-          textboxLayout="default"
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          products={[
-            { id: "1", name: "Design System Kit", price: "$99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp" },
-            { id: "2", name: "UI Components Pack", price: "$49", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp" },
-            { id: "3", name: "Agency Template", price: "$129", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp" },
-          ]}
-        />
-        <FooterBase
-          logoText="Webild"
-          copyrightText="© 2026 | Webild"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Shop", id: "/shop" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            button={{ text: "Get Started", href: "/contact" }}
+          />
+        </div>
+        <div id="products" data-section="products">
+          <ProductCardThree
+            title="Our Products"
+            description="Explore our curated collection of digital assets and tools."
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            products={[
+              { id: "1", name: "Design System Kit", price: "$99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp" },
+              { id: "2", name: "UI Components Pack", price: "$49", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp" },
+              { id: "3", name: "Agency Template", price: "$129", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp" },
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            logoText="Webild"
+            columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
+            copyrightText="© 2026 | Webild"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1