Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,16 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
+import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TextAbout from '@/components/sections/about/TextAbout';
+import MediaAbout from '@/components/sections/about/MediaAbout';
-import { Award, CheckCircle, Star } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -19,8 +18,8 @@ export default function LandingPage() {
         defaultButtonVariant="hover-bubble"
         defaultTextAnimation="background-highlight"
         borderRadius="rounded"
-        contentWidth="small"
+        contentWidth="medium"
-        sizing="largeSmallSizeLargeTitles"
+        sizing="mediumLargeSizeLargeTitles"
         background="noise"
         cardStyle="solid"
         primaryButtonStyle="diagonal-gradient"
@@ -28,269 +27,115 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav">
-      <NavbarStyleFullscreen
+          <NavbarLayoutFloatingOverlay
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "hero" },
-          name: "Home",
+              { name: "About", id: "about" },
-          id: "hero",
+              { name: "Services", id: "features" },
-        },
+              { name: "Contact", id: "contact" },
-        {
+            ]}
-          name: "About",
+            brandName="All Around Roofing"
-          id: "about",
+          />
-        },
+        </div>
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="All Around Roofing"
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero">
-      <HeroLogo
+          <HeroSplitTestimonial
-      logoText="All Around Roofing, Siding & Gutter"
+            title="Quality Roofing, Siding & Gutter Services"
-      description="Expert craftsmanship for your home exterior. Professional, reliable, and durable solutions."
+            description="Expert craftsmanship for your home exterior. We provide professional, durable, and reliable solutions for every project."
-      buttons={[
+            background={{ variant: "sparkles-gradient" }}
-        {
+            testimonials={[
-          text: "Get a Quote",
+              { name: "John D.", handle: "@johndoe", testimonial: "They replaced my entire roof in two days. Outstanding work!", rating: 5 },
-          href: "#contact",
+              { 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"
-      imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-working-roof_23-2149343677.jpg"
+            mediaAnimation="slide-up"
-      imageAlt="Roofing installation service"
+            buttons={[{ text: "Get a Free Estimate", href: "#contact" }]}
-      showDimOverlay={true}
+          />
-    />
+        </div>
-  </div>
 
-  <div id="about" data-section="about">
+        <div id="about">
-      <TextAbout
+          <MediaAbout
-      useInvertedBackground={true}
+            title="Our Dedication to Excellence"
-      title="Your Trusted Home Exterior Experts"
+            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"
-  </div>
+            useInvertedBackground={true}
+          />
+        </div>
 
-  <div id="features" data-section="features">
+        <div id="features">
-      <FeatureCardNineteen
+          <FeatureCardThree
-      textboxLayout="default"
+            title="Comprehensive Exterior Services"
-      useInvertedBackground={false}
+            description="Specializing in durable roofing, siding, and seamless gutter installations."
-      features={[
+            gridVariant="three-columns-all-equal-width"
-        {
+            animationType="slide-up"
-          tag: "Expert",
+            textboxLayout="split"
-          title: "Roofing",
+            useInvertedBackground={false}
-          subtitle: "Full Roof Systems",
+            features={[
-          description: "High-quality roofing installation and repair using top-tier materials.",
+              { title: "Roofing", description: "High-grade material installation and repair.", imageSrc: "http://img.b2bpic.net/free-photo/roof-repair.jpg" },
-          imageSrc: "http://img.b2bpic.net/free-photo/long-shot-man-working-roof_23-2148748777.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" }
-        {
+            ]}
-          tag: "Detail",
+          />
-          title: "Siding",
+        </div>
-          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="metrics" data-section="metrics">
+        <div id="metrics">
-      <MetricCardOne
+          <MetricCardFourteen
-      animationType="slide-up"
+            title="Our Track Record"
-      textboxLayout="default"
+            tag="Proven Results"
-      gridVariant="uniform-all-items-equal"
+            metrics={[
-      useInvertedBackground={true}
+              { id: "1", value: "15+", description: "Years of Experience" },
-      metrics={[
+              { id: "2", value: "500+", description: "Happy Local Customers" },
-        {
+              { id: "3", value: "100%", description: "Quality Satisfaction" }
-          id: "m1",
+            ]}
-          value: "15+",
+            metricsAnimation="slide-up"
-          title: "Years Experience",
+            useInvertedBackground={true}
-          description: "Years serving local homeowners",
+          />
-          icon: Award,
+        </div>
-        },
-        {
-          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="testimonials" data-section="testimonials">
+        <div id="socialproof">
-      <TestimonialCardSixteen
+          <SocialProofOne 
-      animationType="slide-up"
+             names={["CertainTeed", "GAF", "Owens Corning", "James Hardie"]}
-      textboxLayout="default"
+             title="Premium Materials from Trusted Partners"
-      useInvertedBackground={false}
+             description="We use only the highest quality materials for long-lasting results."
-      testimonials={[
+             useInvertedBackground={false}
-        {
+             textboxLayout="default"
-          id: "t1",
+          />
-          name: "John Doe",
+        </div>
-          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="faq" data-section="faq">
+        <div id="faq">
-      <FaqSplitText
+          <FaqSplitMedia
-      useInvertedBackground={true}
+             title="Frequently Asked Questions"
-      faqs={[
+             description="Everything you need to know about our home exterior services."
-        {
+             faqs={[
-          id: "f1",
+               { id: "f1", title: "Do you provide free estimates?", content: "Yes, we always provide a no-cost, no-obligation estimate." },
-          title: "Do you offer free estimates?",
+               { id: "f2", title: "Is your team insured?", content: "Yes, we are fully licensed and bonded for your protection." }
-          content: "Yes, we provide free, no-obligation quotes for all our services.",
+             ]}
-        },
+             faqsAnimation="slide-up"
-        {
+             useInvertedBackground={true}
-          id: "f2",
+             textboxLayout="default"
-          title: "Are you licensed and insured?",
+          />
-          content: "We are fully licensed, bonded, and insured for your peace of mind.",
+        </div>
-        },
-        {
-          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="contact" data-section="contact">
+        <div id="contact">
-      <ContactText
+          <ContactCenter
-      useInvertedBackground={false}
+            tag="Contact Us"
-      background={{
+            title="Let's Start Your Next Project"
-        variant: "plain",
+            description="Get in touch for your free consultation and home estimate."
-      }}
+            background={{ variant: "sparkles-gradient" }}
-      text="Ready to transform your home exterior? Let's discuss your project today."
+            useInvertedBackground={false}
-      buttons={[
+          />
-        {
+        </div>
-          text: "Call Now",
-          href: "tel:5550123",
-        },
-      ]}
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer">
-      <FooterBaseCard
+          <FooterLogoEmphasis
-      logoText="All Around Roofing"
+            logoText="All Around Roofing"
-      columns={[
+            columns={[
-        {
+              { items: [{ label: "Services", href: "#features" }, { label: "Contact", href: "#contact" }] }
-          title: "Services",
+            ]}
-          items: [
+          />
-            {
+        </div>
-              label: "Roofing",
-              href: "#",
-            },
-            {
-              label: "Siding",
-              href: "#",
-            },
-            {
-              label: "Gutters",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "FAQ",
-              href: "#",
-            },
-            {
-              label: "Privacy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}