Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -12,6 +12,10 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import ContactText from '@/components/sections/contact/ContactText';
+import { Brush, Server, Lock, BarChart2, Activity, Smartphone, Palette, LifeBuoy } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -32,25 +36,19 @@ export default function LandingPage() {
       <NavbarLayoutFloatingOverlay
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "hero"},
-          id: "hero",
-        },
         {
-          name: "Features",
+          name: "Features",          id: "features"},
-          id: "features",
-        },
         {
-          name: "Pricing",
+          name: "What You Get",          id: "what-customers-get"},
-          id: "pricing",
-        },
         {
-          name: "Testimonials",
+          name: "Pricing",          id: "pricing"},
-          id: "testimonials",
-        },
         {
-          name: "Contact",
+          name: "Why it Matters",          id: "why-this-matters"},
-          id: "contact",
+        {
-        },
+          name: "Testimonials",          id: "testimonials"},
+        {
+          name: "Contact",          id: "contact"},
       ]}
       brandName="AgencyBuilder"
     />
@@ -62,35 +60,21 @@ export default function LandingPage() {
       description="We build high-converting websites for service companies. Get a professional site for your roofing, HVAC, or construction business today."
       buttons={[
         {
-          text: "Get Started",
+          text: "Get Started",          href: "#contact"},
-          href: "#contact",
-        },
       ]}
       slides={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/programer-coding-laptop-sitting-down-desk-with-computer-screens-parsing-code-software-agency-software-developer-compiling-algorithms-with-cloud-programers-working-background_482257-43993.jpg?_wi=1",
+          imageSrc: "http://img.b2bpic.net/free-photo/programer-coding-laptop-sitting-down-desk-with-computer-screens-parsing-code-software-agency-software-developer-compiling-algorithms-with-cloud-programers-working-background_482257-43993.jpg?_wi=1",          imageAlt: "professional web development services"},
-          imageAlt: "professional web development services",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-pastel-vintage-gradient-white-pastel-background-used-variety-design-tasks-is-beautiful-blur-background_1258-82992.jpg?_wi=1",
+          imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-pastel-vintage-gradient-white-pastel-background-used-variety-design-tasks-is-beautiful-blur-background_1258-82992.jpg?_wi=1",          imageAlt: "website building tools screen"},
-          imageAlt: "website building tools screen",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913289.jpg?_wi=1",
+          imageSrc: "http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913289.jpg?_wi=1",          imageAlt: "digital agency office computer"},
-          imageAlt: "digital agency office computer",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/production-manufacture-process-chart-diagram_53876-120646.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/production-manufacture-process-chart-diagram_53876-120646.jpg",          imageAlt: "web studio office workspace"},
-          imageAlt: "web studio office workspace",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/architectural-designer-works-digital-home-design-project_482257-119491.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/architectural-designer-works-digital-home-design-project_482257-119491.jpg",          imageAlt: "modern website dev agency"},
-          imageAlt: "modern website dev agency",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/management-verifying-task-progress_482257-80309.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/management-verifying-task-progress_482257-80309.jpg",          imageAlt: "creative web agency laptop"},
-          imageAlt: "creative web agency laptop",
-        },
       ]}
     />
   </div>
@@ -102,35 +86,60 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "f1",
+          id: "f1",          title: "Lightning Fast",          descriptions: [
-          title: "Lightning Fast",
+            "Optimized code for maximum speed."],
-          descriptions: [
+          imageSrc: "http://img.b2bpic.net/free-vector/programming-background-design_1223-79.jpg"},
-            "Optimized code for maximum speed.",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-vector/programming-background-design_1223-79.jpg",
-        },
         {
-          id: "f2",
+          id: "f2",          title: "Mobile Responsive",          descriptions: [
-          title: "Mobile Responsive",
+            "Perfect display on all devices."],
-          descriptions: [
+          imageSrc: "http://img.b2bpic.net/free-photo/closeup-hands-using-mobile-phone-computer-laptop-black-marble-table_53876-41688.jpg"},
-            "Perfect display on all devices.",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-hands-using-mobile-phone-computer-laptop-black-marble-table_53876-41688.jpg",
-        },
         {
-          id: "f3",
+          id: "f3",          title: "Secure & Reliable",          descriptions: [
-          title: "Secure & Reliable",
+            "Industry standard security included."],
-          descriptions: [
+          imageSrc: "http://img.b2bpic.net/free-photo/virus-detected-alert-hacking-piracy-risk-shield-concept_53876-133656.jpg"},
-            "Industry standard security included.",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/virus-detected-alert-hacking-piracy-risk-shield-concept_53876-133656.jpg",
-        },
       ]}
       title="Why Choose Our Websites?"
       description="Professional solutions designed to grow your service business."
     />
   </div>
 
+  <div id="what-customers-get" data-section="what-customers-get">
+    <FeatureCardOne
+      animationType="slide-up"
+      gridVariant="three-columns-all-equal-width"
+      useInvertedBackground={true}
+      textboxLayout="default"
+      title="What Our Customers Get"
+      description="Comprehensive web solutions designed for growth and peace of mind."
+      features={[
+        {
+          title: "Website Build",          description: "A custom-designed, high-converting website tailored to your business.",          imageSrc: "http://img.b2bpic.net/free-photo/programer-coding-laptop-sitting-down-desk-with-computer-screens-parsing-code-software-agency-software-developer-compiling-algorithms-with-cloud-programers-working-background_482257-43993.jpg",          imageAlt: "website development agency"
+        },
+        {
+          title: "Hosting",          description: "Reliable, fast, and secure hosting to keep your site online 24/7.",          imageSrc: "http://img.b2bpic.net/free-photo/data-center-server-room-fiber-optic-cables-blazing-fast-connection-technologies_188544-23963.jpg",          imageAlt: "server racks for website hosting"
+        },
+        {
+          title: "SSL Certificate",          description: "Essential security for your website, ensuring visitor data protection.",          imageSrc: "http://img.b2bpic.net/free-photo/padlock-internet-security-concept_53876-28952.jpg",          imageAlt: "padlock for SSL security"
+        },
+        {
+          title: "Analytics",          description: "Track website performance and understand your audience with integrated analytics.",          imageSrc: "http://img.b2bpic.net/free-photo/business-graph-financial-analysis_53876-13233.jpg",          imageAlt: "analytics dashboard with charts"
+        },
+        {
+          title: "Uptime Monitoring",          description: "Proactive monitoring to ensure your website is always available to customers.",          imageSrc: "http://img.b2bpic.net/free-photo/young-man-desk-with-laptop-watching-stock-market-data-online_1268-16479.jpg",          imageAlt: "monitor showing website uptime"
+        },
+        {
+          title: "Mobile Optimization",          description: "Flawless display and functionality across all devices, from desktops to smartphones.",          imageSrc: "http://img.b2bpic.net/free-photo/various-devices-set_23-2148127027.jpg",          imageAlt: "various devices showing responsive website"
+        },
+        {
+          title: "Clean Professional Design",          description: "Modern, intuitive design that reflects your brand's professionalism.",          imageSrc: "http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913289.jpg?_wi=1",          imageAlt: "modern clean website design"
+        },
+        {
+          title: "Simple Support",          description: "Dedicated, easy-to-reach support whenever you need assistance.",          imageSrc: "http://img.b2bpic.net/free-photo/young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-isolated-purple-background_141793-84945.jpg",          imageAlt: "customer support representative"
+        }
+      ]}
+    />
+  </div>
+
   <div id="pricing" data-section="pricing">
       <PricingCardNine
       animationType="slide-up"
@@ -138,75 +147,32 @@ export default function LandingPage() {
       useInvertedBackground={false}
       plans={[
         {
-          id: "p1",
+          id: "p1",          title: "Build: Entry Plan",          price: "$499",          period: "one-time",          features: [
-          title: "Entry Plan",
+            "Custom Design",            "Mobile Responsive",            "Speed Optimized"],
-          price: "$499",
-          period: "one-time",
-          features: [
-            "Custom Design",
-            "Mobile Responsive",
-            "Speed Optimized",
-          ],
           button: {
-            text: "Select Plan",
+            text: "Select Build",            href: "#contact"},
-            href: "#contact",
+          imageSrc: "http://img.b2bpic.net/free-photo/human-face-with-music-note-design-3d-rendered-illustration_460848-11274.jpg",          imageAlt: "minimalist logo construction company"},
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/human-face-with-music-note-design-3d-rendered-illustration_460848-11274.jpg",
-          imageAlt: "minimalist logo construction company",
-        },
         {
-          id: "p2",
+          id: "p2",          title: "Build: Budget Plan",          price: "$249",          period: "one-time",          features: [
-          title: "Hosting 1",
+            "Basic Design",            "Mobile Friendly"],
-          price: "$24",
-          period: "/mo",
-          features: [
-            "Fast Hosting",
-            "SSL Included",
-            "Maintenance",
-          ],
           button: {
-            text: "Select Plan",
+            text: "Select Build",            href: "#contact"},
-            href: "#contact",
+          imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-pastel-vintage-gradient-white-pastel-background-used-variety-design-tasks-is-beautiful-blur-background_1258-82992.jpg?_wi=2",          imageAlt: "minimalist logo construction company"},
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/programer-coding-laptop-sitting-down-desk-with-computer-screens-parsing-code-software-agency-software-developer-compiling-algorithms-with-cloud-programers-working-background_482257-43993.jpg?_wi=2",
-          imageAlt: "minimalist logo construction company",
-        },
         {
-          id: "p3",
+          id: "p3",          title: "Hosting: Standard",          price: "$24",          period: "/mo",          features: [
-          title: "Budget Plan",
+            "Fast Hosting",            "SSL Included",            "Maintenance"],
-          price: "$249",
-          period: "one-time",
-          features: [
-            "Basic Design",
-            "Mobile Friendly",
-          ],
           button: {
-            text: "Select Plan",
+            text: "Select Hosting",            href: "#contact"},
-            href: "#contact",
+          imageSrc: "http://img.b2bpic.net/free-photo/programer-coding-laptop-sitting-down-desk-with-computer-screens-parsing-code-software-agency-software-developer-compiling-algorithms-with-cloud-programers-working-background_482257-43993.jpg?_wi=2",          imageAlt: "minimalist logo construction company"},
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-pastel-vintage-gradient-white-pastel-background-used-variety-design-tasks-is-beautiful-blur-background_1258-82992.jpg?_wi=2",
-          imageAlt: "minimalist logo construction company",
-        },
         {
-          id: "p4",
+          id: "p4",          title: "Hosting: Managed",          price: "$49",          period: "/mo",          features: [
-          title: "Hosting 2",
+            "Managed Hosting",            "Priority Support",            "Backups"],
-          price: "$49",
-          period: "/mo",
-          features: [
-            "Managed Hosting",
-            "Priority Support",
-            "Backups",
-          ],
           button: {
-            text: "Select Plan",
+            text: "Select Hosting",            href: "#contact"},
-            href: "#contact",
+          imageSrc: "http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913289.jpg?_wi=2",          imageAlt: "minimalist logo construction company"},
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913289.jpg?_wi=2",
-          imageAlt: "minimalist logo construction company",
-        },
       ]}
       title="Simple Pricing"
-      description="Choose the best plan for your business needs."
+      description="Choose a build project and a hosting plan for your business needs."
     />
   </div>
 
@@ -218,20 +184,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       metrics={[
         {
-          id: "m1",
+          id: "m1",          value: "100+",          description: "Websites Delivered"},
-          value: "100+",
-          description: "Websites Delivered",
-        },
         {
-          id: "m2",
+          id: "m2",          value: "99.9%",          description: "Uptime Guaranteed"},
-          value: "99.9%",
-          description: "Uptime Guaranteed",
-        },
         {
-          id: "m3",
+          id: "m3",          value: "24/7",          description: "Support Available"},
-          value: "24/7",
-          description: "Support Available",
-        },
       ]}
       title="Our Impact"
       description="Numbers that drive growth for our clients."
@@ -243,14 +200,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "RoofCo",
+        "RoofCo",        "HVAC Pros",        "FixIt Fast",        "Modern Plumbing",        "Elite Construction",        "Green Lawn",        "Top Paint"]}
-        "HVAC Pros",
-        "FixIt Fast",
-        "Modern Plumbing",
-        "Elite Construction",
-        "Green Lawn",
-        "Top Paint",
-      ]}
       title="Trusted by Pros"
       description="Industry leaders trust our web solutions."
     />
@@ -264,51 +214,45 @@ export default function LandingPage() {
       author="John Doe, Roofing Pro"
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/positive-confident-business-coach-posing-training-room_74855-3026.jpg",
+          src: "http://img.b2bpic.net/free-photo/positive-confident-business-coach-posing-training-room_74855-3026.jpg",          alt: "professional business owner portrait"},
-          alt: "professional business owner portrait",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg",
+          src: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg",          alt: "hvac service business owner"},
-          alt: "hvac service business owner",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/closeup-focus-shot-handsome-adult-man-sitting-pier_181624-30113.jpg",
+          src: "http://img.b2bpic.net/free-photo/closeup-focus-shot-handsome-adult-man-sitting-pier_181624-30113.jpg",          alt: "happy roofing company owner"},
-          alt: "happy roofing company owner",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/elegant-smiling-man-typing-computer_23-2147580170.jpg",
+          src: "http://img.b2bpic.net/free-photo/elegant-smiling-man-typing-computer_23-2147580170.jpg",          alt: "portrait of business professional"},
-          alt: "portrait of business professional",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-isolated-purple-background_141793-84945.jpg",
+          src: "http://img.b2bpic.net/free-photo/young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-isolated-purple-background_141793-84945.jpg",          alt: "professional business owner portrait"},
-          alt: "professional business owner portrait",
-        },
       ]}
       ratingAnimation="slide-up"
       avatarsAnimation="slide-up"
     />
   </div>
 
+  <div id="why-this-matters" data-section="why-this-matters">
+    <MetricSplitMediaAbout
+      useInvertedBackground={false}
+      title="Why a Strong Website Matters for Your Small Business"
+      description="In today's digital age, your website is often the first impression potential customers have of your business. A professional, high-performing website isn't just an online brochure; it's a powerful tool for lead generation, brand building, and customer engagement. It establishes credibility, showcases your services, and provides an accessible platform for customers to learn about you 24/7. Don't let an outdated or non-existent website hold your business back."
+      imageSrc="http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913289.jpg?_wi=2"
+      imageAlt="business owner looking at website on screen"
+      mediaAnimation="slide-up"
+      metricsAnimation="slide-up" 
+      metrics={[]}
+    />
+  </div>
+
   <div id="faq" data-section="faq">
       <FaqSplitMedia
       textboxLayout="split"
       useInvertedBackground={false}
       faqs={[
         {
-          id: "q1",
+          id: "q1",          title: "How fast is delivery?",          content: "Usually within 7-10 business days."},
-          title: "How fast is delivery?",
-          content: "Usually within 7-10 business days.",
-        },
         {
-          id: "q2",
+          id: "q2",          title: "Can I edit the site?",          content: "Yes, we provide easy editing tools."},
-          title: "Can I edit the site?",
-          content: "Yes, we provide easy editing tools.",
-        },
         {
-          id: "q3",
+          id: "q3",          title: "What about hosting?",          content: "We offer reliable hosting for your site."},
-          title: "What about hosting?",
-          content: "We offer reliable hosting for your site.",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/close-up-customer-support-worker-wearing-headset-following-call-script_482257-125782.jpg"
       title="Common Questions"
@@ -323,45 +267,69 @@ export default function LandingPage() {
       <ContactCenter
       useInvertedBackground={false}
       background={{
-        variant: "radial-gradient",
+        variant: "radial-gradient"}}
-      }}
       tag="Contact Us"
       title="Ready to Start?"
       description="Send us a message and we'll be in touch shortly."
     />
   </div>
 
+  <div id="final-cta" data-section="final-cta">
+    <ContactText
+      background={{
+        variant: "sparkles-gradient"}}
+      text="Ready to make your business look professional online?"
+      buttons={[
+        {
+          text: "Start for $97/month",          href: "#contact"
+        }
+      ]}
+      animationType="entrance-slide"
+      useInvertedBackground={false}
+    />
+  </div>
+
   <div id="footer" data-section="footer">
       <FooterMedia
       imageSrc="http://img.b2bpic.net/free-photo/focused-software-developer-writing-code-laptop-looking-multiple-screens-with-programming-language-is-interrupted-by-colleague-coder-asking-advice-programmers-doing-online-cloud-computing_482257-33386.jpg"
       logoText="AgencyBuilder"
       columns={[
         {
-          title: "Company",
+          title: "Company",          items: [
-          items: [
             {
-              label: "About",
+              label: "About",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Careers",
+              label: "Careers",              href: "#"},
-              href: "#",
-            },
           ],
         },
         {
-          title: "Services",
+          title: "Services",          items: [
-          items: [
             {
-              label: "Web Design",
+              label: "Web Design",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Hosting",
+              label: "Hosting",              href: "#"},
-              href: "#",
-            },
           ],
         },
+        {
+          title: "Solutions",          items: [
+            {
+              label: "What You Get",              href: "#what-customers-get"
+            },
+            {
+              label: "Why it Matters",              href: "#why-this-matters"
+            }
+          ]
+        },
+        {
+          title: "Support",          items: [
+            {
+              label: "FAQ",              href: "#faq"
+            },
+            {
+              label: "Contact",              href: "#contact"
+            }
+          ]
+        }
       ]}
       imageAlt="professional web development services"
     />

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
+  --background: #000000;
-  --card: #ffffff;
+  --card: #0c0c0c;
-  --foreground: #1c1c1c;
+  --foreground: #ffffff;
-  --primary-cta: #1f3251;
+  --primary-cta: #106EFB;
-  --primary-cta-text: #f5f5f5;
+  --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #000000;
-  --secondary-cta-text: #1c1c1c;
+  --secondary-cta-text: #ffffff;
-  --accent: #15479c;
+  --accent: #535353;
-  --background-accent: #a8cce8;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);