From cb07eebb40482d3cb5cdc1815a330e5a6f1b9c7a Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 20 May 2026 10:51:51 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 478 ++++++++++++++---------------------------------
 1 file changed, 143 insertions(+), 335 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f0faf59..7a5ef36 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -20,352 +20,160 @@ export default function LandingPage() {
         defaultButtonVariant="directional-hover"
         defaultTextAnimation="reveal-blur"
         borderRadius="rounded"
+        contentWidth="medium"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Products",
-          id: "products",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="IronClad Fencing"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "About", id: "about" },
+              { name: "Features", id: "features" },
+              { name: "Products", id: "products" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="IronClad Fencing"
+            button={{ text: "Get a Quote", href: "#contact" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroOverlay
-      title="Built to Last, Designed to Impress"
-      description="Professional residential and commercial fencing services. Quality craftsmanship, durable materials, and expert installation."
-      imageSrc="http://img.b2bpic.net/free-photo/old-haunted-house-empty-field_1127-3475.jpg"
-      showBlur={true}
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/pine-branches-white-wooden-fence_1372-71.jpg",
-          alt: "Pine branches and white wooden fence",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/peaceful-path-outdoors_1137-215.jpg",
-          alt: "Peaceful path outdoors",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-stylish-black-african-american-man-hat-sunglasses-against-fence_627829-3839.jpg",
-          alt: "Portrait of stylish black african american man",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/brown-wooden-bridge_417767-270.jpg",
-          alt: "Brown wooden bridge",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/fashion-bearded-hipster-posing-fence-style-diversity_482257-40662.jpg",
-          alt: "Fashion bearded hipster",
-        },
-      ]}
-      avatarText="Trusted by over 1,000+ happy homeowners"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroOverlay
+            title="Built to Last, Designed to Impress"
+            description="Professional residential and commercial fencing services. Quality craftsmanship, durable materials, and expert installation."
+            imageSrc="http://img.b2bpic.net/free-photo/old-haunted-house-empty-field_1127-3475.jpg"
+            showBlur={true}
+            avatars={[
+              { src: "http://img.b2bpic.net/free-photo/pine-branches-white-wooden-fence_1372-71.jpg", alt: "Pine branches and white wooden fence" },
+              { src: "http://img.b2bpic.net/free-photo/peaceful-path-outdoors_1137-215.jpg", alt: "Peaceful path outdoors" },
+              { src: "http://img.b2bpic.net/free-photo/portrait-stylish-black-african-american-man-hat-sunglasses-against-fence_627829-3839.jpg", alt: "Portrait of stylish black african american man" },
+              { src: "http://img.b2bpic.net/free-photo/brown-wooden-bridge_417767-270.jpg", alt: "Brown wooden bridge" },
+              { src: "http://img.b2bpic.net/free-photo/fashion-bearded-hipster-posing-fence-style-diversity_482257-40662.jpg", alt: "Fashion bearded hipster" },
+            ]}
+            avatarText="Trusted by over 1,000+ happy homeowners"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
-      useInvertedBackground={false}
-      heading={[
-        {
-          type: "text",
-          content: "Our Commitment to ",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/man-protective-gloves-is-painting-wooden-fence-bright-summer-day_613910-17104.jpg",
-          alt: "About our team",
-        },
-        {
-          type: "text",
-          content: " Quality & Security",
-        },
-      ]}
-    />
-  </div>
+        <div id="about" data-section="about">
+          <InlineImageSplitTextAbout
+            useInvertedBackground={false}
+            heading={[
+              { type: "text", content: "Our Commitment to " },
+              { type: "image", src: "http://img.b2bpic.net/free-photo/man-protective-gloves-is-painting-wooden-fence-bright-summer-day_613910-17104.jpg", alt: "About our team" },
+              { type: "text", content: " Quality & Security" },
+            ]}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwelve
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      features={[
-        {
-          id: "f1",
-          label: "Security",
-          title: "High-Strength Materials",
-          items: [
-            "Reinforced iron structures",
-            "Weather-resistant coatings",
-            "Tamper-proof designs",
-          ],
-        },
-        {
-          id: "f2",
-          label: "Aesthetics",
-          title: "Custom Designs",
-          items: [
-            "Modern horizontal slats",
-            "Classic ornamental styles",
-            "Tailored picket designs",
-          ],
-        },
-        {
-          id: "f3",
-          label: "Service",
-          title: "Expert Installation",
-          items: [
-            "Precision ground leveling",
-            "Quick turnaround time",
-            "Site cleanup included",
-          ],
-        },
-      ]}
-      title="Why Choose IronClad?"
-      description="Premium service for every boundary requirement."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardTwelve
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            features={[
+              { id: "f1", label: "Security", title: "High-Strength Materials", items: ["Reinforced iron structures", "Weather-resistant coatings", "Tamper-proof designs"] },
+              { id: "f2", label: "Aesthetics", title: "Custom Designs", items: ["Modern horizontal slats", "Classic ornamental styles", "Tailored picket designs"] },
+              { id: "f3", label: "Service", title: "Expert Installation", items: ["Precision ground leveling", "Quick turnaround time", "Site cleanup included"] },
+            ]}
+            title="Why Choose IronClad?"
+            description="Premium service for every boundary requirement."
+          />
+        </div>
 
-  <div id="products" data-section="products">
-      <ProductCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          brand: "ProSeries",
-          name: "Modern Aluminum Fence",
-          price: "$1,200",
-          rating: 5,
-          reviewCount: "24",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-japanese-garden_23-2149359734.jpg",
-        },
-        {
-          id: "p2",
-          brand: "ClassicWood",
-          name: "Cedar Wood Privacy Fence",
-          price: "$1,500",
-          rating: 4,
-          reviewCount: "18",
-          imageSrc: "http://img.b2bpic.net/free-photo/light-brown-wood-grain-texture_84443-73018.jpg",
-        },
-        {
-          id: "p3",
-          brand: "VinylMax",
-          name: "White Vinyl Privacy Panel",
-          price: "$900",
-          rating: 5,
-          reviewCount: "31",
-          imageSrc: "http://img.b2bpic.net/free-photo/wood-wall-text-background_1249-222.jpg",
-        },
-        {
-          id: "p4",
-          brand: "EliteIron",
-          name: "Wrought Iron Luxury Gate",
-          price: "$2,100",
-          rating: 5,
-          reviewCount: "12",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-modern-door_23-2151977064.jpg",
-        },
-        {
-          id: "p5",
-          brand: "SecureSteel",
-          name: "Heavy Duty Steel Perimeter",
-          price: "$1,800",
-          rating: 4,
-          reviewCount: "9",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-wooden-fence-lush-green-hedge-garden-landscape_626616-510.jpg",
-        },
-        {
-          id: "p6",
-          brand: "ModernSlat",
-          name: "Horizontal Wood Privacy Slat",
-          price: "$1,350",
-          rating: 5,
-          reviewCount: "22",
-          imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-japanese-building-with-fence_23-2149301121.jpg",
-        },
-      ]}
-      title="Our Fence Collections"
-      description="Browse our diverse range of fencing solutions tailored for your property."
-    />
-  </div>
+        <div id="products" data-section="products">
+          <ProductCardTwo
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="uniform-all-items-equal"
+            useInvertedBackground={false}
+            products={[
+              { id: "p1", brand: "ProSeries", name: "Modern Aluminum Fence", price: "$1,200", rating: 5, reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-japanese-garden_23-2149359734.jpg" },
+              { id: "p2", brand: "ClassicWood", name: "Cedar Wood Privacy Fence", price: "$1,500", rating: 4, reviewCount: "18", imageSrc: "http://img.b2bpic.net/free-photo/light-brown-wood-grain-texture_84443-73018.jpg" },
+              { id: "p3", brand: "VinylMax", name: "White Vinyl Privacy Panel", price: "$900", rating: 5, reviewCount: "31", imageSrc: "http://img.b2bpic.net/free-photo/wood-wall-text-background_1249-222.jpg" },
+              { id: "p4", brand: "EliteIron", name: "Wrought Iron Luxury Gate", price: "$2,100", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-modern-door_23-2151977064.jpg" },
+              { id: "p5", brand: "SecureSteel", name: "Heavy Duty Steel Perimeter", price: "$1,800", rating: 4, reviewCount: "9", imageSrc: "http://img.b2bpic.net/free-photo/modern-wooden-fence-lush-green-hedge-garden-landscape_626616-510.jpg" },
+              { id: "p6", brand: "ModernSlat", name: "Horizontal Wood Privacy Slat", price: "$1,350", rating: 5, reviewCount: "22", imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-japanese-building-with-fence_23-2149301121.jpg" },
+            ]}
+            title="Our Fence Collections"
+            description="Browse our diverse range of fencing solutions tailored for your property."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",
-          title: "Projects Completed",
-          value: "1,200+",
-          icon: CheckCircle,
-        },
-        {
-          id: "m2",
-          title: "Happy Clients",
-          value: "950+",
-          icon: Award,
-        },
-        {
-          id: "m3",
-          title: "Years of Experience",
-          value: "15+",
-          icon: Shield,
-        },
-      ]}
-      title="By The Numbers"
-      description="Proven results for homes and businesses."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            metrics={[
+              { id: "m1", title: "Projects Completed", value: "1,200+", icon: CheckCircle },
+              { id: "m2", title: "Happy Clients", value: "950+", icon: Award },
+              { id: "m3", title: "Years of Experience", value: "15+", icon: Shield },
+            ]}
+            title="By The Numbers"
+            description="Proven results for homes and businesses."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
-      useInvertedBackground={false}
-      testimonial="The quality of the fence is unmatched. Our backyard feels private and secure now. The team was incredibly professional during installation."
-      rating={5}
-      author="Mark R."
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-happy-young-man-pointing-camera_1262-3266.jpg",
-          alt: "Customer 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/woman-carring-bunny_23-2148568698.jpg",
-          alt: "Customer 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/woman-gathering-beets-from-farm_23-2150454966.jpg",
-          alt: "Customer 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/couple-cutting-grass-with-lawn-mover-back-yard-male-black-apron-family-working-home_1157-41441.jpg",
-          alt: "Customer 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/view-romantic-interracial-couple-hold-hands-walk-rural-setting_273609-18073.jpg",
-          alt: "Customer 5",
-        },
-      ]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="slide-up"
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardFifteen
+            useInvertedBackground={false}
+            testimonial="The quality of the fence is unmatched. Our backyard feels private and secure now. The team was incredibly professional during installation."
+            rating={5}
+            author="Mark R."
+            avatars={[
+              { src: "http://img.b2bpic.net/free-photo/portrait-happy-young-man-pointing-camera_1262-3266.jpg", alt: "Customer 1" },
+              { src: "http://img.b2bpic.net/free-photo/woman-carring-bunny_23-2148568698.jpg", alt: "Customer 2" },
+              { src: "http://img.b2bpic.net/free-photo/woman-gathering-beets-from-farm_23-2150454966.jpg", alt: "Customer 3" },
+              { src: "http://img.b2bpic.net/free-photo/couple-cutting-grass-with-lawn-mover-back-yard-male-black-apron-family-working-home_1157-41441.jpg", alt: "Customer 4" },
+              { src: "http://img.b2bpic.net/free-photo/view-romantic-interracial-couple-hold-hands-walk-rural-setting_273609-18073.jpg", alt: "Customer 5" },
+            ]}
+            ratingAnimation="slide-up"
+            avatarsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="default"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "q1",
-          title: "How long does installation take?",
-          content: "Most residential projects are completed within 2-3 days, depending on scale.",
-        },
-        {
-          id: "q2",
-          title: "Do you handle local permits?",
-          content: "Yes, we handle all necessary paperwork for your local zoning requirements.",
-        },
-        {
-          id: "q3",
-          title: "Are your materials weather resistant?",
-          content: "We only use high-grade, treated materials built to withstand all local weather conditions.",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/closeup-shot-wooden-criss-cross-fence-with-blurred_181624-16317.jpg"
-      mediaAnimation="slide-up"
-      title="Frequently Asked Questions"
-      description="Answers to common concerns about our fence installation process."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            textboxLayout="default"
+            useInvertedBackground={true}
+            faqs={[
+              { id: "q1", title: "How long does installation take?", content: "Most residential projects are completed within 2-3 days, depending on scale." },
+              { id: "q2", title: "Do you handle local permits?", content: "Yes, we handle all necessary paperwork for your local zoning requirements." },
+              { id: "q3", title: "Are your materials weather resistant?", content: "We only use high-grade, treated materials built to withstand all local weather conditions." },
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/closeup-shot-wooden-criss-cross-fence-with-blurred_181624-16317.jpg"
+            mediaAnimation="slide-up"
+            title="Frequently Asked Questions"
+            description="Answers to common concerns about our fence installation process."
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "rotated-rays-animated",
-      }}
-      text="Ready to secure your property? Get a free estimate today."
-      buttons={[
-        {
-          text: "Get a Quote",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactText
+            useInvertedBackground={false}
+            background={{ variant: "rotated-rays-animated" }}
+            text="Ready to secure your property? Get a free estimate today."
+            buttons={[{ text: "Get a Quote", href: "#" }]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Residential",
-              href: "#products",
-            },
-            {
-              label: "Commercial",
-              href: "#products",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="IronClad Fencing"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Careers", href: "#" }] },
+              { title: "Services", items: [{ label: "Residential", href: "#products" }, { label: "Commercial", href: "#products" }] },
+              { title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "Privacy Policy", href: "#" }] },
+            ]}
+            logoText="IronClad Fencing"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );