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

---
 src/app/page.tsx | 280 ++++++++++++++++++-----------------------------
 1 file changed, 108 insertions(+), 172 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 21da260..3a4eebb 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,16 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import TextAbout from '@/components/sections/about/TextAbout';
-import { Award, CheckCircle, Star } from "lucide-react";
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import { ShieldCheck, Zap, Droplets, Star } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -19,8 +19,8 @@ export default function LandingPage() {
         defaultButtonVariant="hover-bubble"
         defaultTextAnimation="background-highlight"
         borderRadius="rounded"
-        contentWidth="small"
-        sizing="largeSmallSizeLargeTitles"
+        contentWidth="medium"
+        sizing="mediumLargeSizeLargeTitles"
         background="noise"
         cardStyle="solid"
         primaryButtonStyle="diagonal-gradient"
@@ -28,174 +28,110 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "About",          id: "about"},
-        {
-          name: "Services",          id: "features"},
-        {
-          name: "Contact",          id: "contact"},
-      ]}
-      brandName="All Around Roofing"
-    />
-  </div>
+        <div id="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "About", id: "about" },
+              { name: "Services", id: "features" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="All Around Roofing"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogo
-      logoText="All Around Roofing, Siding & Gutter"
-      description="Expert craftsmanship for your home exterior. Professional, reliable, and durable solutions."
-      buttons={[
-        {
-          text: "Get a Quote",          href: "#contact"},
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-working-roof_23-2149343677.jpg"
-      imageAlt="Roofing installation service"
-      showDimOverlay={true}
-    />
-  </div>
+        <div id="hero">
+          <HeroSplitTestimonial
+            title="Quality Roofing, Siding & Gutter Services"
+            description="Expert craftsmanship for your home exterior. We provide professional, durable, and reliable solutions for every project."
+            background={{ variant: "sparkles-gradient" }}
+            testimonials={[
+              { name: "John D.", handle: "@johndoe", testimonial: "They replaced my entire roof in two days. Outstanding work!", rating: 5 },
+              { name: "Sarah M.", handle: "@sarahm", testimonial: "Best gutter service in town. Very professional and tidy.", rating: 5 }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-working-roof_23-2149343677.jpg"
+            mediaAnimation="slide-up"
+            buttons={[{ text: "Get a Free Estimate", href: "#contact" }]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TextAbout
-      title="About Our Company"
-      useInvertedBackground={true}
-      />
-  </div>
+        <div id="about">
+          <MediaAbout
+            title="Our Dedication to Excellence"
+            description="With over 15 years of experience, All Around Roofing delivers high-quality exterior renovations. We treat your home as if it were our own."
+            imageSrc="http://img.b2bpic.net/free-photo/exterior-house-view.jpg"
+            useInvertedBackground={true}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardNineteen
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          tag: "Expert",          title: "Roofing",          subtitle: "Full Roof Systems",          description: "High-quality roofing installation and repair using top-tier materials.",          imageSrc: "http://img.b2bpic.net/free-photo/long-shot-man-working-roof_23-2148748777.jpg"},
-        {
-          tag: "Detail",          title: "Siding",          subtitle: "Exterior Cladding",          description: "Durable and stylish siding solutions to protect and beautify your home.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-peson-with-their-frinds_23-2149290153.jpg"},
-        {
-          tag: "Drainage",          title: "Gutters",          subtitle: "System Maintenance",          description: "Professional gutter cleaning, repair, and new seamless gutter installations.",          imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721545.jpg"},
-      ]}
-      title="Our Services"
-      description="We specialize in complete exterior restoration and maintenance."
-    />
-  </div>
+        <div id="features">
+          <FeatureCardThree
+            title="Comprehensive Exterior Services"
+            description="Specializing in durable roofing, siding, and seamless gutter installations."
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              { title: "Roofing", description: "High-grade material installation and repair.", imageSrc: "http://img.b2bpic.net/free-photo/roof-repair.jpg" },
+              { title: "Siding", description: "Stylish and protective cladding solutions.", imageSrc: "http://img.b2bpic.net/free-photo/siding-installation.jpg" },
+              { title: "Gutters", description: "Seamless gutter systems for water management.", imageSrc: "http://img.b2bpic.net/free-photo/gutter-work.jpg" }
+            ]}
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "m1",          value: "15+",          title: "Years Experience",          description: "Years serving local homeowners",          icon: Award,
-        },
-        {
-          id: "m2",          value: "500+",          title: "Projects Completed",          description: "Successfully finished exterior jobs",          icon: CheckCircle,
-        },
-        {
-          id: "m3",          value: "100%",          title: "Customer Satisfaction",          description: "Dedication to your total happiness",          icon: Star,
-        },
-      ]}
-      title="Our Impact"
-      description="Numbers that demonstrate our commitment to quality service."
-    />
-  </div>
+        <div id="metrics">
+          <MetricCardFourteen
+            title="Our Track Record"
+            tag="Proven Results"
+            metrics={[
+              { id: "1", value: "15+", description: "Years of Experience" },
+              { id: "2", value: "500+", description: "Happy Local Customers" },
+              { id: "3", value: "100%", description: "Quality Satisfaction" }
+            ]}
+            useInvertedBackground={true}
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",          name: "John Doe",          role: "Homeowner",          company: "Local Customer",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/middle-age-greyhaired-woman-smiling-confident-drinking-coffee-new-home_839833-34774.jpg"},
-        {
-          id: "t2",          name: "Jane Smith",          role: "Resident",          company: "Local Customer",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/business-person-planning-alternative-energies_23-2149205445.jpg"},
-        {
-          id: "t3",          name: "Mike Johnson",          role: "Property Owner",          company: "Local Customer",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/businessman-showing-thumbs-up-sign_93675-133117.jpg"},
-        {
-          id: "t4",          name: "Emily Davis",          role: "Homeowner",          company: "Local Customer",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/collaboration-two-carpenters-building_329181-15617.jpg"},
-        {
-          id: "t5",          name: "Chris Wilson",          role: "Resident",          company: "Local Customer",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/interior-designer-home-owner-discussing-ideas-renovation_74855-2946.jpg"},
-      ]}
-      kpiItems={[
-        {
-          value: "4.9/5",          label: "Avg Rating"},
-        {
-          value: "98%",          label: "Retention"},
-        {
-          value: "12+",          label: "Daily Help"},
-      ]}
-      title="Client Success Stories"
-      description="Hear from our happy customers."
-    />
-  </div>
+        <div id="socialproof">
+          <SocialProofOne 
+             names={["CertainTeed", "GAF", "Owens Corning", "James Hardie"]}
+             title="Premium Materials from Trusted Partners"
+             description="We use only the highest quality materials for long-lasting results."
+             useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitText
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "f1",          title: "Do you offer free estimates?",          content: "Yes, we provide free, no-obligation quotes for all our services."},
-        {
-          id: "f2",          title: "Are you licensed and insured?",          content: "We are fully licensed, bonded, and insured for your peace of mind."},
-        {
-          id: "f3",          title: "How long does a typical roof take?",          content: "Most residential roof replacements take 1-3 days depending on size."},
-      ]}
-      sideTitle="Common Questions"
-      sideDescription="Get answers about our service processes."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq">
+          <FaqSplitMedia
+             title="Frequently Asked Questions"
+             description="Everything you need to know about our home exterior services."
+             faqs={[
+               { id: "f1", title: "Do you provide free estimates?", content: "Yes, we always provide a no-cost, no-obligation estimate." },
+               { id: "f2", title: "Is your team insured?", content: "Yes, we are fully licensed and bonded for your protection." }
+             ]}
+             faqsAnimation="slide-up"
+             useInvertedBackground={true}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "plain"}}
-      text="Ready to transform your home exterior? Let's discuss your project today."
-      buttons={[
-        {
-          text: "Call Now",          href: "tel:5550123"},
-      ]}
-    />
-  </div>
+        <div id="contact">
+          <ContactCenter
+            tag="Contact Us"
+            title="Let's Start Your Next Project"
+            description="Get in touch for your free consultation and home estimate."
+            background={{ variant: "sparkles-gradient" }}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="All Around Roofing"
-      columns={[
-        {
-          title: "Services",          items: [
-            {
-              label: "Roofing",              href: "#"},
-            {
-              label: "Siding",              href: "#"},
-            {
-              label: "Gutters",              href: "#"},
-          ],
-        },
-        {
-          title: "Support",          items: [
-            {
-              label: "Contact",              href: "#contact"},
-            {
-              label: "FAQ",              href: "#"},
-            {
-              label: "Privacy",              href: "#"},
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer">
+          <FooterLogoEmphasis
+            logoText="All Around Roofing"
+            columns={[
+              { items: [{ label: "Services", href: "#features" }, { label: "Contact", href: "#contact" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );