Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -3,15 +3,13 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqBase from '@/components/sections/faq/FaqBase';
+import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
-import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import AboutMetric from '@/components/sections/about/AboutMetric';
-import MediaAbout from '@/components/sections/about/MediaAbout';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import { Award, CheckCircle, Shield } from "lucide-react";
 
 export default function LandingPage() {
@@ -29,191 +27,106 @@ export default function LandingPage() {
         headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
+            <NavbarStyleFullscreen
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "hero" },
-          name: "Home",          id: "hero"},
+              { name: "Services", id: "services" },
-        {
+              { name: "Portfolio", id: "portfolio" },
-          name: "About",          id: "about"},
+              { name: "Testimonials", id: "testimonials" },
-        {
+              { name: "Contact", id: "contact" },
-          name: "Services",          id: "features"},
+            ]}
-        {
+            brandName="A D White Builders"
-          name: "Portfolio",          id: "portfolio"},
+          />
-        {
+        </div>
-          name: "Contact",          id: "contact"},
-      ]}
-      brandName="A D White Builders"
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroBillboardScroll
+          <HeroBillboardTestimonial
-      title="Quality Builders You Can Trust"
+            title="Excellence in Construction"
-      description="A D White Builders Ltd provides exceptional residential and commercial construction services, delivered with craftsmanship and integrity."
+            description="Craftsmanship, integrity, and durable building solutions for residential and commercial projects."
-      imageSrc="http://img.b2bpic.net/free-photo/young-man-civil-engineer-safety-hat_185193-109882.jpg?_wi=2"
+            background={{ variant: "plain" }}
-      background={{ variant: "plain" }}
+            testimonials={[
-    />
+              { name: "John D.", handle: "@johnd", testimonial: "The highest quality work I have seen in years.", rating: 5 },
-  </div>
+              { name: "Sarah M.", handle: "@sarahm", testimonial: "Reliable and professional throughout the entire process.", rating: 5 }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/young-man-civil-engineer-safety-hat_185193-109882.jpg?_wi=2"
+          />
+        </div>
 
-  <div id="about" data-section="about">
+        <div id="about" data-section="about">
-      <MediaAbout
+          <AboutMetric
-      useInvertedBackground={false}
+            title="Why Choose Us"
-      title="Decades of Building Excellence"
+            metrics={[
-      description="We are committed to delivering top-tier construction services. Our team prioritizes safety, durability, and customer satisfaction in every project we undertake."
+              { icon: Shield, label: "Licensed & Insured", value: "100%" },
-      imageSrc="http://img.b2bpic.net/free-photo/collaboration-two-carpenters-building_329181-15699.jpg?_wi=2"
+              { icon: Award, label: "Years of Excellence", value: "20+" },
-    />
+              { icon: CheckCircle, label: "Satisfied Clients", value: "500+" }
-  </div>
+            ]}
+            metricsAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="features" data-section="features">
+        <div id="services" data-section="services">
-      <FeatureCardTwentyThree
+          <FeatureCardEight
-      animationType="slide-up"
+            title="Our Specialized Services"
-      textboxLayout="default"
+            description="Expert construction services tailored to your specific needs."
-      useInvertedBackground={false}
+            textboxLayout="default"
-      features={[
+            useInvertedBackground={false}
-        {
+            features={Array(8).fill({ title: "General Contracting", description: "High quality build services for all property types.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-equipment-used-apartment-renovation_23-2149278635.jpg?_wi=2" })}
-          id: "f1",          title: "Residential Builds",          tags: [
+          />
-            "Construction",            "Custom"],
+        </div>
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-equipment-used-apartment-renovation_23-2149278635.jpg?_wi=2"},
-        {
-          id: "f2",          title: "Commercial Maintenance",          tags: [
-            "Commercial",            "Maintenance"],
-          imageSrc: "http://img.b2bpic.net/free-photo/workers-using-hvac-manifold-indicators_482257-92534.jpg?_wi=2"},
-        {
-          id: "f3",          title: "Home Renovations",          tags: [
-            "Renovation",            "Home"],
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-interior-shot-modern-house-with-white-relaxing-walls-furniture-technology_181624-3828.jpg?_wi=2"},
-      ]}
-      title="Our Professional Services"
-      description="From custom homes to commercial renovations, we provide comprehensive building solutions."
-    />
-  </div>
 
-  <div id="portfolio" data-section="portfolio">
+        <div id="portfolio" data-section="portfolio">
-      <ProductCardFour
+          <ProductCardOne
-      animationType="slide-up"
+            title="Project Gallery"
-      textboxLayout="default"
+            description="Browse through our recent successful projects."
-      gridVariant="four-items-2x2-equal-grid"
+            gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={false}
+            animationType="slide-up"
-      products={[
+            textboxLayout="default"
-        {
+            useInvertedBackground={false}
-          id: "p1",          name: "Modern Facade",          price: "View Project",          variant: "Build",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-modern-building-modern-architecture_181624-21692.jpg"},
+            products={[
-        {
+              { id: "p1", name: "Custom Home Build", price: "$500k", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-modern-building-modern-architecture_181624-21692.jpg" },
-          id: "p2",          name: "Interior Kitchen",          price: "View Project",          variant: "Renovation",          imageSrc: "http://img.b2bpic.net/free-photo/furniture-delivery-service-concept_53876-24834.jpg"},
+              { id: "p2", name: "Commercial Office Fit-out", price: "$200k", imageSrc: "http://img.b2bpic.net/free-photo/workers-using-hvac-manifold-indicators_482257-92534.jpg?_wi=2" },
-        {
+              { id: "p3", name: "Kitchen Renovation", price: "$45k", imageSrc: "http://img.b2bpic.net/free-photo/furniture-delivery-service-concept_53876-24834.jpg" },
-          id: "p3",          name: "Garden Patio",          price: "View Project",          variant: "Landscape",          imageSrc: "http://img.b2bpic.net/free-photo/doors-opening-beautiful-natural-view_23-2150083752.jpg"},
+              { id: "p4", name: "Exterior Landscaping", price: "$15k", imageSrc: "http://img.b2bpic.net/free-photo/doors-opening-beautiful-natural-view_23-2150083752.jpg" }
-        {
+            ]}
-          id: "p4",          name: "Luxury Exterior",          price: "View Project",          variant: "Build",          imageSrc: "http://img.b2bpic.net/free-photo/modern-white-building-low-angle-shot_181624-454.jpg"},
+          />
-        {
+        </div>
-          id: "p5",          name: "Bedroom Remodel",          price: "View Project",          variant: "Interior",          imageSrc: "http://img.b2bpic.net/free-photo/cozy-bedroom-interior-with-pink-accents_23-2152001392.jpg"},
-        {
-          id: "p6",          name: "Modern Bathroom",          price: "View Project",          variant: "Plumbing",          imageSrc: "http://img.b2bpic.net/free-photo/sanitary-technician-working-with-sink_23-2147772219.jpg"},
-      ]}
-      title="Recent Projects"
-      description="See our high-quality work in action."
-    />
-  </div>
 
-  <div id="metrics" data-section="metrics">
+        <div id="testimonials" data-section="testimonials">
-      <MetricCardOne
+           <TestimonialCardFifteen
-      animationType="slide-up"
+            testimonial="The team at A D White Builders transformed our vision into reality. Exceptional workmanship!"
-      textboxLayout="default"
+            author="Sarah Miller"
-      gridVariant="uniform-all-items-equal"
+            rating={5}
-      useInvertedBackground={false}
+            ratingAnimation="blur-reveal"
-      metrics={[
+            avatarsAnimation="slide-up"
-        {
+            useInvertedBackground={false}
-          id: "m1",          value: "20+",          title: "Years Experience",          description: "Dedicated industry service.",          icon: Shield,
+            avatars={[{ src: "https://avatar.vercel.sh/sarah", alt: "Sarah Miller" }]}
-        },
+           />
-        {
+        </div>
-          id: "m2",          value: "500+",          title: "Projects Completed",          description: "Quality builds finalized.",          icon: CheckCircle,
-        },
-        {
-          id: "m3",          value: "98%",          title: "Client Satisfaction",          description: "Reliable partner feedback.",          icon: Award,
-        },
-      ]}
-      title="Our Impact"
-      description="Delivering excellence through numbers."
-    />
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="contact" data-section="contact">
-      <TestimonialCardSix
+          <ContactSplit
-      animationType="slide-up"
+            tag="Get In Touch"
-      textboxLayout="default"
+            title="Contact Us"
-      useInvertedBackground={false}
+            description="Have a project in mind? We're ready to help. Note: A $70 site visit fee applies to all initial consultations."
-      testimonials={[
+            background={{ variant: "plain" }}
-        {
+            useInvertedBackground={false}
-          id: "t1",          name: "Sarah Miller",          handle: "@sarah",          testimonial: "Fantastic building quality, highly recommended.",          imageSrc: "http://img.b2bpic.net/free-photo/real-estate-excited-asian-senior-woman-looking-happy-lucky-winning-apartment-showing-paper-house_1258-147381.jpg"},
+            mediaAnimation="slide-up"
-        {
+            imageSrc="http://img.b2bpic.net/free-photo/portrait-smiling-young-architect-man-showing-thumb-up-gesture-looking-camera_23-2148203957.jpg"
-          id: "t2",          name: "Tom Baker",          handle: "@tombaker",          testimonial: "Professional, reliable, and finished on time.",          imageSrc: "http://img.b2bpic.net/free-photo/man-with-clipboard-explaining-strategy_23-2147808102.jpg"},
+          />
-        {
+        </div>
-          id: "t3",          name: "Anna Green",          handle: "@annag",          testimonial: "The best construction partner we have had.",          imageSrc: "http://img.b2bpic.net/free-photo/well-done-satisfied-businessman-suit-showing-thumbs-up-approval-like-agree-recommend-good_1258-162950.jpg"},
-        {
-          id: "t4",          name: "Mark Wilson",          handle: "@markw",          testimonial: "Everything was built to perfection.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-manual-worker-warehouse_329181-12798.jpg"},
-        {
-          id: "t5",          name: "Claire Evans",          handle: "@claire",          testimonial: "Professional service from start to finish.",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-shaking-hands_23-2148920604.jpg"},
-        {
-          id: "t6",          name: "David Scott",          handle: "@david",          testimonial: "Top class workmanship and friendly team.",          imageSrc: "http://img.b2bpic.net/free-photo/smiley-old-man-with-helmet-showing-approval_23-2148269393.jpg"},
-      ]}
-      title="Client Feedback"
-      description="What our clients say about us."
-    />
-  </div>
 
-  <div id="faq" data-section="faq">
+        <div id="footer" data-section="footer">
-      <FaqBase
+          <FooterBaseReveal
-      textboxLayout="default"
+            logoText="A D White Builders Ltd"
-      useInvertedBackground={false}
+            columns={[
-      faqs={[
+              { title: "Services", items: [{ label: "Home Building", href: "#" }, { label: "Commercial", href: "#" }] },
-        {
+              { title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#contact" }] },
-          id: "q1",          title: "Do you handle custom designs?",          content: "Yes, we specialize in custom build projects from design through completion."},
+              { title: "Accreditation", items: [{ label: "Master Builders", href: "#" }, { label: "ISO Certified", href: "#" }] }
-        {
+            ]}
-          id: "q2",          title: "Are you fully licensed and insured?",          content: "Yes, we are fully licensed and insured for all residential and commercial works."},
+          />
-        {
+        </div>
-          id: "q3",          title: "How long do projects typically take?",          content: "Project timelines vary depending on scope and complexity; we provide estimates upfront."},
-      ]}
-      title="Frequently Asked Questions"
-      description="Common questions regarding our services."
-      faqsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{
-        variant: "plain"}}
-      tag="Contact Us"
-      title="Let's Build Together"
-      description="Contact us today for a free estimate on your project."
-      mediaAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/portrait-smiling-young-architect-man-showing-thumb-up-gesture-looking-camera_23-2148203957.jpg"
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "About",              href: "#about"},
-            {
-              label: "Services",              href: "#features"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Contact",              href: "#contact"},
-            {
-              label: "Privacy Policy",              href: "#"},
-          ],
-        },
-      ]}
-      logoText="A D White Builders Ltd"
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #f5f5f5;
-  --card: #f9f9f9;
+  --card: #ffffff;
-  --foreground: #000612e6;
+  --foreground: #1c1c1c;
-  --primary-cta: #15479c;
+  --primary-cta: #0a7039;
-  --primary-cta-text: #ffffff;
+  --primary-cta-text: #f5f5f5;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #ffffff;
-  --secondary-cta-text: #000612e6;
+  --secondary-cta-text: #1c1c1c;
-  --accent: #e2e2e2;
+  --accent: #1c1c1c;
-  --background-accent: #c4c4c4;
+  --background-accent: #a8d9be;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);