From 4997dfdb404378454482f0ff4864580637251794 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 11 May 2026 20:59:13 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 432 +++++++++++++++--------------------------------
 1 file changed, 140 insertions(+), 292 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index dd271db..211e6f1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,307 +29,155 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Projects",
-          id: "products",
-        },
-        {
-          name: "FAQ",
-          id: "faq",
-        },
-      ]}
-      brandName="Commercial Roofers Inc"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "About", id: "about" },
+              { name: "Services", id: "features" },
+              { name: "Projects", id: "products" },
+              { name: "FAQ", id: "faq" },
+            ]}
+            brandName="Commercial Roofers Inc"
+            button={{ text: "Get Quote", href: "#contact" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplit
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Professional Commercial Roofing Services"
-      description="Protect your assets with industry-leading commercial roofing solutions. From installations to emergency repairs, we have you covered."
-      buttons={[
-        {
-          text: "Get a Free Quote",
-          href: "#contact",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/skateboard-rink-view_23-2148937901.jpg"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/asian-couple-standing-together-against-new-modern-building-look-sky_627829-1322.jpg",
-          alt: "Asian couple standing together against new modern building",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/modern-brick-building-skyline_23-2148252768.jpg",
-          alt: "Modern brick building skyline",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/view-stone-building-with-large-windows_23-2148252828.jpg",
-          alt: "View of stone building with large windows",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/low-angle-artistic-architectural-design_23-2148252774.jpg",
-          alt: "Low angle artistic architectural design",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
-          alt: "Smiling businessman standing at airport",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Certified Expertise",
-        },
-        {
-          type: "text",
-          text: "24/7 Emergency Support",
-        },
-        {
-          type: "text",
-          text: "Safety First Protocol",
-        },
-        {
-          type: "text",
-          text: "Quality Guaranteed",
-        },
-        {
-          type: "text",
-          text: "Sustainable Solutions",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroSplit
+            background={{ variant: "gradient-bars" }}
+            title="Professional Commercial Roofing Services"
+            description="Protect your assets with industry-leading commercial roofing solutions. From installations to emergency repairs, we have you covered."
+            buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/skateboard-rink-view_23-2148937901.jpg"
+            mediaAnimation="slide-up"
+            avatars={[
+              { src: "http://img.b2bpic.net/free-photo/asian-couple-standing-together-against-new-modern-building-look-sky_627829-1322.jpg", alt: "Asian couple standing together against new modern building" },
+              { src: "http://img.b2bpic.net/free-photo/modern-brick-building-skyline_23-2148252768.jpg", alt: "Modern brick building skyline" },
+              { src: "http://img.b2bpic.net/free-photo/view-stone-building-with-large-windows_23-2148252828.jpg", alt: "View of stone building with large windows" },
+              { src: "http://img.b2bpic.net/free-photo/low-angle-artistic-architectural-design_23-2148252774.jpg", alt: "Low angle artistic architectural design" },
+              { src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", alt: "Smiling businessman standing at airport" },
+            ]}
+            marqueeItems={[
+              { type: "text", text: "Certified Expertise" },
+              { type: "text", text: "24/7 Emergency Support" },
+              { type: "text", text: "Safety First Protocol" },
+              { type: "text", text: "Quality Guaranteed" },
+              { type: "text", text: "Sustainable Solutions" },
+            ]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TestimonialAboutCard
-      useInvertedBackground={true}
-      tag="Our Commitment"
-      title="Decades of Roofing Excellence"
-      description="Commercial Roofers Inc has been delivering top-tier roofing services for over 20 years, ensuring durability and performance for every project we undertake."
-      subdescription="We treat every roof as our own, maintaining strict safety and quality standards at every site."
-      icon={Shield}
-      imageSrc="http://img.b2bpic.net/free-photo/conversation-engineers_1098-15478.jpg"
-      mediaAnimation="blur-reveal"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <TestimonialAboutCard
+            useInvertedBackground={true}
+            tag="Our Commitment"
+            title="Decades of Roofing Excellence"
+            description="Commercial Roofers Inc has been delivering top-tier roofing services for over 20 years, ensuring durability and performance for every project we undertake."
+            subdescription="We treat every roof as our own, maintaining strict safety and quality standards at every site."
+            icon={Shield}
+            imageSrc="http://img.b2bpic.net/free-photo/conversation-engineers_1098-15478.jpg"
+            mediaAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardEight
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Expert Installation",
-          description: "Highly trained crew focused on precision and speed.",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-stadium_1127-110.jpg",
-        },
-        {
-          title: "Durable Materials",
-          description: "Using industry-grade roofing components for long-lasting results.",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-roof-together_23-2149343670.jpg",
-        },
-        {
-          title: "Routine Maintenance",
-          description: "Preventive services to extend your roof lifespan significantly.",
-          imageSrc: "http://img.b2bpic.net/free-photo/south-asian-agronomist-farmer-looking-diagram-papers-farm-agriculture-production-concept_627829-7300.jpg",
-        },
-      ]}
-      title="Why Choose Us?"
-      description="We offer comprehensive services tailored to your commercial infrastructure needs."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardEight
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              { title: "Expert Installation", description: "Highly trained crew focused on precision and speed.", imageSrc: "http://img.b2bpic.net/free-photo/modern-stadium_1127-110.jpg" },
+              { title: "Durable Materials", description: "Using industry-grade roofing components for long-lasting results.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-roof-together_23-2149343670.jpg" },
+              { title: "Routine Maintenance", description: "Preventive services to extend your roof lifespan significantly.", imageSrc: "http://img.b2bpic.net/free-photo/south-asian-agronomist-farmer-looking-diagram-papers-farm-agriculture-production-concept_627829-7300.jpg" },
+            ]}
+            title="Why Choose Us?"
+            description="We offer comprehensive services tailored to your commercial infrastructure needs."
+          />
+        </div>
 
-  <div id="products" data-section="products">
-      <ProductCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "p1",
-          name: "Office Complex Roof",
-          price: "Custom Quote",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-working-roof-full-shot_23-2149343662.jpg",
-        },
-        {
-          id: "p2",
-          name: "Warehouse Retrofit",
-          price: "Custom Quote",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-front-view_23-2148748780.jpg",
-        },
-        {
-          id: "p3",
-          name: "Industrial Park Site",
-          price: "Custom Quote",
-          imageSrc: "http://img.b2bpic.net/free-photo/hand-woven-geometric-denim-area-rug-wooden-floor_169016-48743.jpg",
-        },
-        {
-          id: "p4",
-          name: "Commercial Plaza",
-          price: "Custom Quote",
-          imageSrc: "http://img.b2bpic.net/free-photo/engineer-working-with-airplane_1098-12552.jpg",
-        },
-        {
-          id: "p5",
-          name: "Distribution Center",
-          price: "Custom Quote",
-          imageSrc: "http://img.b2bpic.net/free-photo/building-with-metallic-bars-wooden-ceiling_250224-285.jpg",
-        },
-        {
-          id: "p6",
-          name: "Retail Storefront",
-          price: "Custom Quote",
-          imageSrc: "http://img.b2bpic.net/free-photo/gray-brown-concrete-modern-building-shot-from-low-angle_181624-3502.jpg",
-        },
-      ]}
-      title="Project Portfolio"
-      description="Recent installations and renovations demonstrating our commitment to quality."
-    />
-  </div>
+        <div id="products" data-section="products">
+          <ProductCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="four-items-2x2-equal-grid"
+            useInvertedBackground={true}
+            products={[
+              { id: "p1", name: "Office Complex Roof", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/man-with-helmet-working-roof-full-shot_23-2149343662.jpg" },
+              { id: "p2", name: "Warehouse Retrofit", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-front-view_23-2148748780.jpg" },
+              { id: "p3", name: "Industrial Park Site", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/hand-woven-geometric-denim-area-rug-wooden-floor_169016-48743.jpg" },
+              { id: "p4", name: "Commercial Plaza", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/engineer-working-with-airplane_1098-12552.jpg" },
+              { id: "p5", name: "Distribution Center", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/building-with-metallic-bars-wooden-ceiling_250224-285.jpg" },
+              { id: "p6", name: "Retail Storefront", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/gray-brown-concrete-modern-building-shot-from-low-angle_181624-3502.jpg" },
+            ]}
+            title="Project Portfolio"
+            description="Recent installations and renovations demonstrating our commitment to quality."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardThree
-      animationType="depth-3d"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          icon: Award,
-          title: "Years Experience",
-          value: "20+",
-        },
-        {
-          id: "m2",
-          icon: CheckCircle,
-          title: "Projects Completed",
-          value: "500+",
-        },
-        {
-          id: "m3",
-          icon: Smile,
-          title: "Happy Clients",
-          value: "450+",
-        },
-      ]}
-      title="Our Impact"
-      description="Numbers speak to our commitment and reliability in the roofing industry."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardThree
+            animationType="depth-3d"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "m1", icon: Award, title: "Years Experience", value: "20+" },
+              { id: "m2", icon: CheckCircle, title: "Projects Completed", value: "500+" },
+              { id: "m3", icon: Smile, title: "Happy Clients", value: "450+" },
+            ]}
+            title="Our Impact"
+            description="Numbers speak to our commitment and reliability in the roofing industry."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "1",
-          name: "John Doe",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",
-        },
-        {
-          id: "2",
-          name: "Jane Smith",
-          imageSrc: "http://img.b2bpic.net/free-photo/successful-man-pointing-camera-with-finger_1262-3118.jpg",
-        },
-        {
-          id: "3",
-          name: "Mark Wilson",
-          imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",
-        },
-        {
-          id: "4",
-          name: "Lisa Brown",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12324.jpg",
-        },
-        {
-          id: "5",
-          name: "Alex Taylor",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-black-auto-mechanic-workshop_637285-9406.jpg",
-        },
-      ]}
-      cardTitle="Client Feedback"
-      cardTag="Reliable Service"
-      cardAnimation="slide-up"
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardTwelve
+            useInvertedBackground={true}
+            testimonials={[
+              { id: "1", name: "John Doe", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg" },
+              { id: "2", name: "Jane Smith", imageSrc: "http://img.b2bpic.net/free-photo/successful-man-pointing-camera-with-finger_1262-3118.jpg" },
+              { id: "3", name: "Mark Wilson", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg" },
+              { id: "4", name: "Lisa Brown", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12324.jpg" },
+              { id: "5", name: "Alex Taylor", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-black-auto-mechanic-workshop_637285-9406.jpg" },
+            ]}
+            cardTitle="Client Feedback"
+            cardTag="Reliable Service"
+            cardAnimation="slide-up"
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "Do you provide warranties?",
-          content: "Yes, all our roofing projects come with comprehensive material and workmanship warranties.",
-        },
-        {
-          id: "f2",
-          title: "How long does a roof install take?",
-          content: "Timeline varies by scope, but we maintain efficient schedules for minimal business disruption.",
-        },
-        {
-          id: "f3",
-          title: "Can I get an emergency repair?",
-          content: "We offer 24/7 support for urgent commercial roofing needs to protect your interior assets.",
-        },
-      ]}
-      title="Frequently Asked Questions"
-      description="Have questions about our roofing solutions? Find answers below."
-      faqsAnimation="blur-reveal"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqDouble
+            textboxLayout="default"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "f1", title: "Do you provide warranties?", content: "Yes, all our roofing projects come with comprehensive material and workmanship warranties." },
+              { id: "f2", title: "How long does a roof install take?", content: "Timeline varies by scope, but we maintain efficient schedules for minimal business disruption." },
+              { id: "f3", title: "Can I get an emergency repair?", content: "We offer 24/7 support for urgent commercial roofing needs to protect your interior assets." },
+            ]}
+            title="Frequently Asked Questions"
+            description="Have questions about our roofing solutions? Find answers below."
+            faqsAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={true}
-      background={{
-        variant: "rotated-rays-animated",
-      }}
-      text="Ready to secure your commercial roof? Contact us today for a free consultation."
-      buttons={[
-        {
-          text: "Contact Us Now",
-          href: "mailto:info@commercialroofers.com",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactText
+            useInvertedBackground={true}
+            background={{ variant: "rotated-rays-animated" }}
+            text="Ready to secure your commercial roof? Contact us today for a free consultation."
+            buttons={[{ text: "Contact Us Now", href: "mailto:info@commercialroofers.com" }]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="Commercial Roofers Inc"
-      copyrightText="© 2025 Commercial Roofers Inc. All rights reserved."
-      socialLinks={[
-        {
-          icon: Twitter,
-          href: "#",
-          ariaLabel: "Twitter",
-        },
-        {
-          icon: Linkedin,
-          href: "#",
-          ariaLabel: "LinkedIn",
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="Commercial Roofers Inc"
+            copyrightText="© 2025 Commercial Roofers Inc. All rights reserved."
+            socialLinks={[
+              { icon: Twitter, href: "#", ariaLabel: "Twitter" },
+              { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );