Switch to version 2: modified src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactText from '@/components/sections/contact/ContactText';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
@@ -30,10 +30,14 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        { name: "Home", id: "hero" },
-        { name: "Features", id: "features" },
-        { name: "Services", id: "services" },
-        { name: "Contact", id: "contact" },
+        {
+          name: "Home",          id: "hero"},
+        {
+          name: "Features",          id: "features"},
+        {
+          name: "Services",          id: "services"},
+        {
+          name: "Contact",          id: "contact"},
       ]}
       brandName="EstimatePro"
     />
@@ -41,25 +45,33 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardScroll
-      background={{ variant: "gradient-bars" }}
+      background={{
+        variant: "gradient-bars"}}
       title="Precision Estimating for Elite Builders"
       description="Unlock accurate project costs and maximize your margins with our industry-leading construction estimating services."
-      buttons={[{ text: "Get Your Estimate", href: "#contact" }]}
+      buttons={[
+        {
+          text: "Get Your Estimate",          href: "#contact"},
+      ]}
       imageSrc="http://img.b2bpic.net/free-photo/builder-man-taking-notes-mini-notebook-white-t-shirt-helmet-looking-busy-front-view_176474-9981.jpg"
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardTwentyOne
-      title="Types of Contractors We Serve"
-      description="From general contractors to specialized trades, we provide precise estimates for every sector of the construction industry."
-      accordionItems={[
-        { id: "c1", title: "General Contractors", content: "Residential and commercial primary contractors." },
-        { id: "c2", title: "Electrical Contractors", content: "Full electrical systems and low voltage wiring." },
-        { id: "c3", title: "Plumbing Contractors", content: "Residential and industrial pipe systems." }
+      <FeatureCardMedia
+      animationType="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={false}
+      features={[
+        {
+          id: "f1",          title: "Accurate Takeoffs",          description: "Minimize material waste with our precision-engineered quantity takeoffs.",          tag: "Precision",          imageSrc: "http://img.b2bpic.net/free-photo/man-holding-smartphone-with-apartment-buildings-hologram_23-2149369107.jpg"},
+        {
+          id: "f2",          title: "Real-time Costing",          description: "Stay updated with current market rates for labor and materials globally.",          tag: "Insight",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-measuring-tools-still-life_23-2150440965.jpg"},
+        {
+          id: "f3",          title: "Expert Collaboration",          description: "Our team works seamlessly with your architects and contractors.",          tag: "Team",          imageSrc: "http://img.b2bpic.net/free-photo/team-business-people-group-architect-engineers-international-partners_1157-48546.jpg"},
       ]}
-      mediaAnimation="blur-reveal"
-      imageSrc="http://img.b2bpic.net/free-photo/group-construction-workers-wearing-safety-vests-hard-hats-standing-construction-site_1150-18451.jpg"
+      title="Why Professional Estimators Choose Us"
+      description="We bridge the gap between architectural vision and profitable project execution."
     />
   </div>
 
@@ -70,9 +82,24 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={true}
       products={[
-        { id: "p1", brand: "BuildPro", name: "Residential Renovation", price: "Custom Quote", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/construction-plans-architectural-project_1232-2918.jpg" },
-        { id: "p2", brand: "BuildPro", name: "Commercial Buildout", price: "Custom Quote", rating: 5, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/hands-engineer-working-blueprint-construction-concept-engineering-tools-vintage-tone-retro-filter-effect-soft-focus-selective-focus_1418-481.jpg" },
-        { id: "p3", brand: "BuildPro", name: "Luxury Home Build", price: "Custom Quote", rating: 5, reviewCount: "45", imageSrc: "http://img.b2bpic.net/free-photo/scenery-designers-work_23-2149741804.jpg" }
+        {
+          id: "p1",          brand: "BuildPro",          name: "Residential Renovation",          price: "Custom Quote",          rating: 5,
+          reviewCount: "120",          imageSrc: "http://img.b2bpic.net/free-photo/construction-plans-architectural-project_1232-2918.jpg"},
+        {
+          id: "p2",          brand: "BuildPro",          name: "Commercial Buildout",          price: "Custom Quote",          rating: 5,
+          reviewCount: "85",          imageSrc: "http://img.b2bpic.net/free-photo/hands-engineer-working-blueprint-construction-concept-engineering-tools-vintage-tone-retro-filter-effect-soft-focus-selective-focus_1418-481.jpg"},
+        {
+          id: "p3",          brand: "BuildPro",          name: "Luxury Home Build",          price: "Custom Quote",          rating: 5,
+          reviewCount: "45",          imageSrc: "http://img.b2bpic.net/free-photo/scenery-designers-work_23-2149741804.jpg"},
+        {
+          id: "p4",          brand: "BuildPro",          name: "Landscape Estimates",          price: "Custom Quote",          rating: 5,
+          reviewCount: "30",          imageSrc: "http://img.b2bpic.net/free-photo/construction-site_53876-16234.jpg"},
+        {
+          id: "p5",          brand: "BuildPro",          name: "Industrial Projects",          price: "Custom Quote",          rating: 5,
+          reviewCount: "60",          imageSrc: "http://img.b2bpic.net/free-photo/architectural-blueprints_1359-425.jpg"},
+        {
+          id: "p6",          brand: "BuildPro",          name: "Sustainable Development",          price: "Custom Quote",          rating: 5,
+          reviewCount: "25",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-teamwork-project_23-2148894074.jpg"},
       ]}
       title="Our Specialized Estimating Services"
       description="From residential luxury homes to massive industrial developments."
@@ -85,9 +112,12 @@ export default function LandingPage() {
       title="Proven Results That Build Success"
       tag="Our Impact"
       metrics={[
-        { id: "m1", value: "$500M+", description: "Worth of Projects Estimated" },
-        { id: "m2", value: "1,200+", description: "Happy Contractors" },
-        { id: "m3", value: "99.8%", description: "Estimate Accuracy" }
+        {
+          id: "m1",          value: "$500M+",          description: "Worth of Projects Estimated"},
+        {
+          id: "m2",          value: "1,200+",          description: "Happy Contractors"},
+        {
+          id: "m3",          value: "99.8%",          description: "Estimate Accuracy"},
       ]}
       metricsAnimation="slide-up"
     />
@@ -98,9 +128,12 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       faqs={[
-        { id: "q1", title: "How fast do you return estimates?", content: "Most residential projects are returned within 48-72 hours." },
-        { id: "q2", title: "Can you handle large projects?", content: "Yes, we specialize in large industrial and commercial scale builds." },
-        { id: "q3", title: "Is your data secure?", content: "We maintain strict data privacy standards for all your project blueprints." }
+        {
+          id: "q1",          title: "How fast do you return estimates?",          content: "Most residential projects are returned within 48-72 hours."},
+        {
+          id: "q2",          title: "Can you handle large projects?",          content: "Yes, we specialize in large industrial and commercial scale builds."},
+        {
+          id: "q3",          title: "Is your data secure?",          content: "We maintain strict data privacy standards for all your project blueprints."},
       ]}
       mediaAnimation="blur-reveal"
       title="Common Questions About Estimating"
@@ -117,8 +150,16 @@ export default function LandingPage() {
       rating={5}
       author="Marcus Thorne, Principal Builder"
       avatars={[
-        { src: "http://img.b2bpic.net/free-photo/portrait-young-builder-orange-work-clothes-yellow-hardhat-with-pencil-ear-dreamily-looking-camera-with-scaffolding-background_574295-1578.jpg", alt: "Marcus Thorne" },
-        { src: "http://img.b2bpic.net/free-photo/construction-team-work_23-2151962521.jpg", alt: "Sarah J." }
+        {
+          src: "http://img.b2bpic.net/free-photo/portrait-young-builder-orange-work-clothes-yellow-hardhat-with-pencil-ear-dreamily-looking-camera-with-scaffolding-background_574295-1578.jpg",          alt: "Marcus Thorne"},
+        {
+          src: "http://img.b2bpic.net/free-photo/construction-team-work_23-2151962521.jpg",          alt: "Sarah J."},
+        {
+          src: "http://img.b2bpic.net/free-photo/smiley-architect-holding-his-plans_23-2148242980.jpg",          alt: "David B."},
+        {
+          src: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-helmet_23-2148921381.jpg",          alt: "Elena R."},
+        {
+          src: "http://img.b2bpic.net/free-photo/proud-male-contractor-enjoying-day-work-checking-blueprints-construction-new-house_662251-497.jpg",          alt: "Jim W."},
       ]}
       ratingAnimation="blur-reveal"
       avatarsAnimation="blur-reveal"
@@ -128,17 +169,23 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={true}
-      background={{ variant: "sparkles-gradient" }}
+      background={{
+        variant: "sparkles-gradient"}}
       text="Ready to streamline your construction bidding process? Start your first estimate today."
-      buttons={[{ text: "Contact Estimators", href: "mailto:hello@estimatepro.com" }]}
+      buttons={[
+        {
+          text: "Contact Estimators",          href: "mailto:hello@estimatepro.com"},
+      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="EstimatePro"
-      leftLink={{ text: "Privacy Policy", href: "#" }}
-      rightLink={{ text: "Terms of Service", href: "#" }}
+      leftLink={{
+        text: "Privacy Policy",        href: "#"}}
+      rightLink={{
+        text: "Terms of Service",        href: "#"}}
     />
   </div>
       </ReactLenis>