Merge version_3 into main

Merge version_3 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 (
@@ -35,8 +39,12 @@ export default function LandingPage() {
           name: "Home",          id: "hero"},
         {
           name: "Features",          id: "features"},
+        {
+          name: "What You Get",          id: "what-customers-get"},
         {
           name: "Pricing",          id: "pricing"},
+        {
+          name: "Why it Matters",          id: "why-this-matters"},
         {
           name: "Testimonials",          id: "testimonials"},
         {
@@ -95,6 +103,42 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="what-customers-get" data-section="what-customers-get">
+    <FeatureCardOne
+      animationType="slide-up"
+      gridVariant="three-columns-all-equal-width"
+      useInvertedBackground={true}
+      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.",          icon: Brush
+        },
+        {
+          title: "Hosting",          description: "Reliable, fast, and secure hosting to keep your site online 24/7.",          icon: Server
+        },
+        {
+          title: "SSL Certificate",          description: "Essential security for your website, ensuring visitor data protection.",          icon: Lock
+        },
+        {
+          title: "Analytics",          description: "Track website performance and understand your audience with integrated analytics.",          icon: BarChart2
+        },
+        {
+          title: "Uptime Monitoring",          description: "Proactive monitoring to ensure your website is always available to customers.",          icon: Activity
+        },
+        {
+          title: "Mobile Optimization",          description: "Flawless display and functionality across all devices, from desktops to smartphones.",          icon: Smartphone
+        },
+        {
+          title: "Clean Professional Design",          description: "Modern, intuitive design that reflects your brand's professionalism.",          icon: Palette
+        },
+        {
+          title: "Simple Support",          description: "Dedicated, easy-to-reach support whenever you need assistance.",          icon: LifeBuoy
+        }
+      ]}
+    />
+  </div>
+
   <div id="pricing" data-section="pricing">
       <PricingCardNine
       animationType="slide-up"
@@ -184,6 +228,20 @@ export default function LandingPage() {
     />
   </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"
+      imageAlt="business owner looking at website on screen"
+      mediaPosition="right"
+      mediaAnimation="slide-up"
+      metricsAnimation="slide-up" 
+      metrics={[]}
+    />
+  </div>
+
   <div id="faq" data-section="faq">
       <FaqSplitMedia
       textboxLayout="split"
@@ -216,6 +274,21 @@ export default function LandingPage() {
     />
   </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"
@@ -237,6 +310,26 @@ export default function LandingPage() {
               label: "Hosting",              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;
-  --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1f3251;
-  --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #1c1c1c;
-  --accent: #15479c;
-  --background-accent: #a8cce8;
+  --background: #000000;
+  --card: #0c0c0c;
+  --foreground: #ffffff;
+  --primary-cta: #106EFB;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #000000;
+  --secondary-cta-text: #ffffff;
+  --accent: #535353;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);