From 6daeebf8025bc9cd08be757c6fa3603a54804419 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 21 Apr 2026 21:52:24 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 430 ++++++++++++++---------------------------------
 1 file changed, 127 insertions(+), 303 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8524ef4..78ab4c6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -19,320 +19,144 @@ export default function LandingPage() {
         defaultButtonVariant="directional-hover"
         defaultTextAnimation="reveal-blur"
         borderRadius="pill"
+        contentWidth="medium"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Skyline Roofing Solutions"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "About", id: "about" },
+              { name: "Services", id: "features" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="Skyline Roofing Solutions"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardRotatedCarousel
-      background={{
-        variant: "rotated-rays-animated",
-      }}
-      title="Skyline Roofing Solutions"
-      description="Premium Roofing & Exterior Services in Mississauga"
-      buttons={[
-        {
-          text: "Get Your Free Quote — Call Now",
-          href: "tel:+18888602551",
-        },
-      ]}
-      carouselItems={[
-        {
-          id: "c1",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-with-helmet_23-2149343651.jpg",
-          imageAlt: "Roofing Project 1",
-        },
-        {
-          id: "c2",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-roof-texture-tiles-generative-al_169016-28456.jpg",
-          imageAlt: "Roofing Project 2",
-        },
-        {
-          id: "c3",
-          imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-smoking-roof_1321-1036.jpg",
-          imageAlt: "Roofing Project 3",
-        },
-        {
-          id: "c4",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24989.jpg",
-          imageAlt: "Roofing Project 4",
-        },
-        {
-          id: "c5",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-wooden-modern-house_23-2149343652.jpg",
-          imageAlt: "Roofing Project 5",
-        },
-        {
-          id: "c6",
-          imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-together-roof_23-2149343674.jpg",
-          imageAlt: "Roofing Project 6",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroBillboardRotatedCarousel
+            background={{ variant: "rotated-rays-animated" }}
+            title="Skyline Roofing Solutions"
+            description="Premium Roofing & Exterior Services in Mississauga"
+            buttons={[{ text: "Get Your Free Quote — Call Now", href: "tel:+18888602551" }]}
+            carouselItems={[
+              { id: "c1", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-with-helmet_23-2149343651.jpg", imageAlt: "Roofing Project 1" },
+              { id: "c2", imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-roof-texture-tiles-generative-al_169016-28456.jpg", imageAlt: "Roofing Project 2" },
+              { id: "c3", imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-smoking-roof_1321-1036.jpg", imageAlt: "Roofing Project 3" },
+              { id: "c4", imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24989.jpg", imageAlt: "Roofing Project 4" },
+              { id: "c5", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-wooden-modern-house_23-2149343652.jpg", imageAlt: "Roofing Project 5" },
+              { id: "c6", imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-together-roof_23-2149343674.jpg", imageAlt: "Roofing Project 6" },
+            ]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TextAbout
-      useInvertedBackground={true}
-      title="At Skyline Roofing Solutions, we endeavour to provide premium quality roofing and exterior services for your home or business."
-    />
-  </div>
+        <div id="about" data-section="about">
+          <TextAbout
+            useInvertedBackground={true}
+            title="At Skyline Roofing Solutions, we endeavour to provide premium quality roofing and exterior services for your home or business."
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardSix
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Residential Roofing",
-          description: "High-quality shingle and metal roof installations for homes.",
-          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-closeup-shot-black-fire-escape-stairs_181624-3131.jpg",
-          imageAlt: "Residential Roofing",
-        },
-        {
-          title: "Commercial Roofing",
-          description: "Durable and reliable roofing systems for commercial properties.",
-          imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-walking-metal-platform-doing-visual-inspection-industrial-food-storage-tanks-silos_342744-444.jpg",
-          imageAlt: "Commercial Roofing",
-        },
-        {
-          title: "Emergency Repairs",
-          description: "Fast response for leaks and storm damage remediation.",
-          imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343673.jpg",
-          imageAlt: "Emergency Repairs",
-        },
-      ]}
-      title="Our Roofing Services"
-      description="Comprehensive exterior solutions tailored to the needs of Mississauga residents and businesses."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardSix
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { title: "Residential Roofing", description: "High-quality shingle and metal roof installations for homes.", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-closeup-shot-black-fire-escape-stairs_181624-3131.jpg", imageAlt: "Residential Roofing" },
+              { title: "Commercial Roofing", description: "Durable and reliable roofing systems for commercial properties.", imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-walking-metal-platform-doing-visual-inspection-industrial-food-storage-tanks-silos_342744-444.jpg", imageAlt: "Commercial Roofing" },
+              { title: "Emergency Repairs", description: "Fast response for leaks and storm damage remediation.", imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343673.jpg", imageAlt: "Emergency Repairs" },
+            ]}
+            title="Our Roofing Services"
+            description="Comprehensive exterior solutions tailored to the needs of Mississauga residents and businesses."
+          />
+        </div>
 
-  <div id="benefits" data-section="benefits">
-      <MetricCardSeven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",
-          value: "100%",
-          title: "Satisfaction Guaranteed",
-          items: [
-            "Certified experts",
-            "Top materials",
-            "Safety first",
-          ],
-        },
-        {
-          id: "m2",
-          value: "24/7",
-          title: "Available Support",
-          items: [
-            "Always on call",
-            "Fast response",
-            "Clear communication",
-          ],
-        },
-        {
-          id: "m3",
-          value: "15+",
-          title: "Years Experience",
-          items: [
-            "Local expertise",
-            "Trusted team",
-            "Proven results",
-          ],
-        },
-      ]}
-      title="Why Choose Skyline"
-      description="Excellence and reliability in every project we undertake."
-    />
-  </div>
+        <div id="benefits" data-section="benefits">
+          <MetricCardSeven
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            metrics={[
+              { id: "m1", value: "100%", title: "Satisfaction Guaranteed", items: ["Certified experts", "Top materials", "Safety first"] },
+              { id: "m2", value: "24/7", title: "Available Support", items: ["Always on call", "Fast response", "Clear communication"] },
+              { id: "m3", value: "15+", title: "Years Experience", items: ["Local expertise", "Trusted team", "Proven results"] },
+            ]}
+            title="Why Choose Skyline"
+            description="Excellence and reliability in every project we undertake."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardOne
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="asymmetric-60-wide-40-narrow"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Sarah J.",
-          role: "Homeowner",
-          company: "Mississauga Resident",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-project-together_23-2148920574.jpg",
-        },
-        {
-          id: "t2",
-          name: "Mark D.",
-          role: "Property Manager",
-          company: "Commercial Client",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-lady-safety-helmet-standing-near-model-building_23-2148039866.jpg",
-        },
-        {
-          id: "t3",
-          name: "Emily R.",
-          role: "Homeowner",
-          company: "Mississauga Resident",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-experienced-carpenter-his-younger-employee_329181-15602.jpg",
-        },
-        {
-          id: "t4",
-          name: "David K.",
-          role: "Business Owner",
-          company: "Commercial Client",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-cute-clothes-reaching-plants-greenhouse_197531-12331.jpg",
-        },
-        {
-          id: "t5",
-          name: "Jessica M.",
-          role: "Homeowner",
-          company: "Mississauga Resident",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/concentrated-interracial-successful-coworkers-work-together-annual-economic-report_273609-18029.jpg",
-        },
-      ]}
-      title="Client Feedback"
-      description="Hear what our valued clients in Mississauga have to say about our premium roofing services."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardOne
+            animationType="slide-up"
+            textboxLayout="split"
+            gridVariant="asymmetric-60-wide-40-narrow"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "t1", name: "Sarah J.", role: "Homeowner", company: "Mississauga Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-project-together_23-2148920574.jpg" },
+              { id: "t2", name: "Mark D.", role: "Property Manager", company: "Commercial Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-lady-safety-helmet-standing-near-model-building_23-2148039866.jpg" },
+              { id: "t3", name: "Emily R.", role: "Homeowner", company: "Mississauga Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-experienced-carpenter-his-younger-employee_329181-15602.jpg" },
+              { id: "t4", name: "David K.", role: "Business Owner", company: "Commercial Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-cute-clothes-reaching-plants-greenhouse_197531-12331.jpg" },
+              { id: "t5", name: "Jessica M.", role: "Homeowner", company: "Mississauga Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/concentrated-interracial-successful-coworkers-work-together-annual-economic-report_273609-18029.jpg" },
+            ]}
+            title="Client Feedback"
+            description="Hear what our valued clients in Mississauga have to say about our premium roofing services."
+          />
+        </div>
 
-  <div id="proof" data-section="proof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={true}
-      names={[
-        "GAF Certified",
-        "Owens Corning",
-        "CertainTeed",
-        "IKO Roofing",
-        "Metal Sales",
-        "Velux Skylights",
-        "Atlas Roofing",
-      ]}
-      title="Certified Partners"
-      description="We partner with leading manufacturers to provide the best materials for your roof."
-    />
-  </div>
+        <div id="proof" data-section="proof">
+          <SocialProofOne
+            textboxLayout="default"
+            useInvertedBackground={true}
+            names={["GAF Certified", "Owens Corning", "CertainTeed", "IKO Roofing", "Metal Sales", "Velux Skylights", "Atlas Roofing"]}
+            title="Certified Partners"
+            description="We partner with leading manufacturers to provide the best materials for your roof."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "Do you offer free quotes?",
-          content: "Yes, we offer free, no-obligation quotes for all roofing projects.",
-        },
-        {
-          id: "f2",
-          title: "What areas do you serve?",
-          content: "We proudly serve Mississauga and surrounding areas.",
-        },
-        {
-          id: "f3",
-          title: "Is your work insured?",
-          content: "Yes, our team is fully licensed and insured for your peace of mind.",
-        },
-      ]}
-      title="Frequently Asked Questions"
-      description="Get answers to common roofing questions."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqDouble
+            textboxLayout="default"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "f1", title: "Do you offer free quotes?", content: "Yes, we offer free, no-obligation quotes for all roofing projects." },
+              { id: "f2", title: "What areas do you serve?", content: "We proudly serve Mississauga and surrounding areas." },
+              { id: "f3", title: "Is your work insured?", content: "Yes, our team is fully licensed and insured for your peace of mind." },
+            ]}
+            title="Frequently Asked Questions"
+            description="Get answers to common roofing questions."
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
-      tag="Contact Us"
-      title="Ready for Your Free Quote?"
-      description="Call us at +1 888-860-2551 or visit us at 6700 Century Ave, Mississauga, ON L5N 1V8."
-      buttons={[
-        {
-          text: "Call for Free Quote",
-          href: "tel:+18888602551",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            useInvertedBackground={true}
+            background={{ variant: "plain" }}
+            tag="Contact Us"
+            title="Ready for Your Free Quote?"
+            description="Call us at +1 888-860-2551 or visit us at 6700 Century Ave, Mississauga, ON L5N 1V8."
+            buttons={[{ text: "Call for Free Quote", href: "tel:+18888602551" }]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseReveal
-      logoText="Skyline Roofing Solutions"
-      columns={[
-        {
-          title: "Contact",
-          items: [
-            {
-              label: "+1 888-860-2551",
-              href: "tel:+18888602551",
-            },
-            {
-              label: "6700 Century Ave, Mississauga",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Services",
-              href: "#features",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Skyline Roofing Solutions"
+            columns={[
+              { title: "Contact", items: [{ label: "+1 888-860-2551", href: "tel:+18888602551" }, { label: "6700 Century Ave, Mississauga", href: "#" }] },
+              { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Services", href: "#features" }] },
+              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1