Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -4,12 +4,13 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import { Rocket, TrendingUp, Users } from "lucide-react";
+import { Rocket, TrendingUp, Users, Mail } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -30,25 +31,15 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "home"},
-          id: "home",
-        },
         {
-          name: "About",
+          name: "About",          id: "about"},
-          id: "about",
-        },
         {
-          name: "Features",
+          name: "Features",          id: "features"},
-          id: "features",
-        },
         {
-          name: "Testimonials",
+          name: "Testimonials",          id: "testimonials"},
-          id: "testimonials",
-        },
         {
-          name: "Contact",
+          name: "Contact",          id: "contact"},
-          id: "contact",
-        },
       ]}
       brandName="SublimeSites"
     />
@@ -58,45 +49,26 @@ export default function LandingPage() {
       <HeroBillboardTestimonial
       useInvertedBackground={false}
       background={{
-        variant: "gradient-bars",
+        variant: "gradient-bars"}}
-      }}
       title="Professional Websites Built for Small Business"
       description="We design and launch beautiful, conversion-focused websites that help local businesses attract customers online. No jargon, no surprises—just results."
       testimonials={[
         {
-          name: "Alice Miller",
+          name: "Alice Miller",          handle: "@alice_local",          testimonial: "SublimeSites made it so easy. My business has doubled its inquiries in just two months!",          rating: 5,
-          handle: "@alice_local",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/professional-portrait-of-a-middle-aged-s-1774557344916-d13f0286.png"},
-          testimonial: "SublimeSites made it so easy. My business has doubled its inquiries in just two months!",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/professional-portrait-of-a-middle-aged-s-1774557344916-d13f0286.png",
-        },
         {
-          name: "Bob Sanders",
+          name: "Bob Sanders",          handle: "@bobs_retail",          testimonial: "I feared the technical side, but they handled everything. Professional and reliable.",          rating: 5,
-          handle: "@bobs_retail",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/professional-portrait-of-a-young-retail--1774557344540-a4b1ede6.png"},
-          testimonial: "I feared the technical side, but they handled everything. Professional and reliable.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/professional-portrait-of-a-young-retail--1774557344540-a4b1ede6.png",
-        },
         {
-          name: "Carol Davis",
+          name: "Carol Davis",          handle: "@carol_flowers",          testimonial: "Affordable and quick. The best investment I’ve made for my shop this year.",          rating: 5,
-          handle: "@carol_flowers",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/professional-portrait-of-a-local-busines-1774557345029-252e35b5.png"},
-          testimonial: "Affordable and quick. The best investment I’ve made for my shop this year.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/professional-portrait-of-a-local-busines-1774557345029-252e35b5.png",
-        },
         {
-          name: "David Wilson",
+          name: "David Wilson",          handle: "@david_services",          testimonial: "Clear communication, beautiful design, and actual results. Highly recommend.",          rating: 5,
-          handle: "@david_services",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/professional-portrait-of-a-local-boutiqu-1774557344804-1a35c7a9.png"},
-          testimonial: "Clear communication, beautiful design, and actual results. Highly recommend.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/professional-portrait-of-a-local-boutiqu-1774557344804-1a35c7a9.png",
-        },
       ]}
       buttons={[
         {
-          text: "Start Your Website Today",
+          text: "Start Your Website Today",          href: "#contact"},
-          href: "#contact",
-        },
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/a-clean-professional-modern-dashboard-or-1774557346032-d2d2b219.png"
     />
@@ -109,19 +81,13 @@ export default function LandingPage() {
       metrics={[
         {
           icon: Rocket,
-          label: "Projects Launched",
+          label: "Projects Launched",          value: "150+"},
-          value: "150+",
-        },
         {
           icon: Users,
-          label: "Happy Clients",
+          label: "Happy Clients",          value: "120+"},
-          value: "120+",
-        },
         {
           icon: TrendingUp,
-          label: "Revenue Growth",
+          label: "Revenue Growth",          value: "40%"},
-          value: "40%",
-        },
       ]}
       metricsAnimation="slide-up"
     />
@@ -135,36 +101,24 @@ export default function LandingPage() {
       features={[
         {
           id: 1,
-          title: "Mobile Responsive Design",
+          title: "Mobile Responsive Design",          description: "Ensure your site looks perfect on every screen, from phones to desktops.",          phoneOne: {
-          description: "Ensure your site looks perfect on every screen, from phones to desktops.",
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/mobile-phone-showing-a-responsive-small--1774557344886-7b6abc97.png?_wi=1"},
-          phoneOne: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/mobile-phone-showing-a-responsive-small--1774557344886-7b6abc97.png?_wi=1",
-          },
           phoneTwo: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/mobile-phone-showing-a-sleek-portfolio-p-1774557345013-18472d92.png?_wi=1",
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/mobile-phone-showing-a-sleek-portfolio-p-1774557345013-18472d92.png?_wi=1"},
-          },
         },
         {
           id: 2,
-          title: "Conversion Focused",
+          title: "Conversion Focused",          description: "Optimized layouts designed to turn visitors into paying customers efficiently.",          phoneOne: {
-          description: "Optimized layouts designed to turn visitors into paying customers efficiently.",
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/mobile-phone-showing-a-responsive-small--1774557344886-7b6abc97.png?_wi=2"},
-          phoneOne: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/mobile-phone-showing-a-responsive-small--1774557344886-7b6abc97.png?_wi=2",
-          },
           phoneTwo: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/mobile-phone-showing-a-sleek-portfolio-p-1774557345013-18472d92.png?_wi=2",
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/mobile-phone-showing-a-sleek-portfolio-p-1774557345013-18472d92.png?_wi=2"},
-          },
         },
         {
           id: 3,
-          title: "Managed Hosting",
+          title: "Managed Hosting",          description: "Blazing fast and secure hosting so you can focus on running your business.",          phoneOne: {
-          description: "Blazing fast and secure hosting so you can focus on running your business.",
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/mobile-phone-showing-a-responsive-small--1774557344886-7b6abc97.png?_wi=3"},
-          phoneOne: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/mobile-phone-showing-a-responsive-small--1774557344886-7b6abc97.png?_wi=3",
-          },
           phoneTwo: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/mobile-phone-showing-a-sleek-portfolio-p-1774557345013-18472d92.png?_wi=3",
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/mobile-phone-showing-a-sleek-portfolio-p-1774557345013-18472d92.png?_wi=3"},
-          },
         },
       ]}
       showStepNumbers={true}
@@ -180,37 +134,17 @@ export default function LandingPage() {
       useInvertedBackground={true}
       testimonials={[
         {
-          id: "1",
+          id: "1",          name: "Alice Miller",          handle: "@alice",          testimonial: "Amazing work and incredible communication throughout the process.",          rating: 5,
-          name: "Alice Miller",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/blurred-abstract-office-interior-profess-1774557344345-b5f232ef.png"},
-          handle: "@alice",
-          testimonial: "Amazing work and incredible communication throughout the process.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/blurred-abstract-office-interior-profess-1774557344345-b5f232ef.png",
-        },
         {
-          id: "2",
+          id: "2",          name: "Bob Sanders",          handle: "@bob",          testimonial: "Professional, efficient, and truly understood what my business needed to grow.",          rating: 5,
-          name: "Bob Sanders",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/blurred-minimalist-design-studio-interio-1774557344849-978670a3.png"},
-          handle: "@bob",
-          testimonial: "Professional, efficient, and truly understood what my business needed to grow.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/blurred-minimalist-design-studio-interio-1774557344849-978670a3.png",
-        },
         {
-          id: "3",
+          id: "3",          name: "Carol Davis",          handle: "@carol",          testimonial: "I finally have an online store that actually works and looks great.",          rating: 5,
-          name: "Carol Davis",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/abstract-geometric-shapes-with-soft-grad-1774557344065-7fc94538.png"},
-          handle: "@carol",
-          testimonial: "I finally have an online store that actually works and looks great.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/abstract-geometric-shapes-with-soft-grad-1774557344065-7fc94538.png",
-        },
         {
-          id: "4",
+          id: "4",          name: "David Wilson",          handle: "@david",          testimonial: "The best investment I have made in my business in years.",          rating: 5,
-          name: "David Wilson",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/clean-workspace-table-with-laptop-and-co-1774557344268-de8db8fb.png"},
-          handle: "@david",
-          testimonial: "The best investment I have made in my business in years.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/clean-workspace-table-with-laptop-and-co-1774557344268-de8db8fb.png",
-        },
       ]}
       showRating={true}
       title="Loved by Business Owners"
@@ -219,28 +153,29 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
+      <ContactCTA
+        tag="Get In Touch"
+        tagIcon={Mail}
+        title="Contact Us"
+        description="Have questions or want to start your project? Reach out to us at sublimesites1@gmail.com and let's get building."
+        buttons={[{ text: "Email Us", href: "mailto:sublimesites1@gmail.com" }]}
+        background={{ variant: "plain" }}
+        useInvertedBackground={false}
+      />
       <ContactSplitForm
       useInvertedBackground={false}
       title="Let's Build Your Site"
       description="Ready to get started? Reach out today to receive a free consultation and proposal."
       inputs={[
         {
-          name: "name",
+          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
         },
         {
-          name: "email",
+          name: "email",          type: "email",          placeholder: "Email Address",          required: true,
-          type: "email",
-          placeholder: "Email Address",
-          required: true,
         },
       ]}
       textarea={{
-        name: "message",
+        name: "message",        placeholder: "Tell us about your business...",        rows: 4,
-        placeholder: "Tell us about your business...",
-        rows: 4,
         required: true,
       }}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/a-friendly-modern-agency-office-interior-1774557345128-c04c681a.png"
@@ -252,29 +187,19 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         {
-          title: "SublimeSites",
+          title: "SublimeSites",          items: [
-          items: [
             {
-              label: "About Us",
+              label: "About Us",              href: "#about"},
-              href: "#about",
-            },
             {
-              label: "Services",
+              label: "Services",              href: "#features"},
-              href: "#features",
-            },
           ],
         },
         {
-          title: "Legal",
+          title: "Legal",          items: [
-          items: [
             {
-              label: "Privacy Policy",
+              label: "Privacy Policy",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Terms of Service",
+              label: "Terms of Service",              href: "#"},
-              href: "#",
-            },
           ],
         },
       ]}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #fbfbf8;
-  --card: #f9f9f9;
+  --card: #f0eade;
-  --foreground: #000612e6;
+  --foreground: #1a1a1a;
-  --primary-cta: #15479c;
+  --primary-cta: #4a7c9f;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #f0eade;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
+  --accent: #b8c9d4;
-  --background-accent: #c4c4c4;
+  --background-accent: #d6d0c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);