Update src/app/page.tsx

Merge version_3 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 (
@@ -29,26 +30,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "Home", id: "home" },
-          name: "Home",
+        { name: "About", id: "about" },
-          id: "home",
+        { name: "Features", id: "features" },
-        },
+        { name: "Testimonials", id: "testimonials" },
-        {
+        { name: "Contact", id: "contact" },
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="SublimeSites"
     />
@@ -57,47 +43,14 @@ export default function LandingPage() {
   <div id="home" data-section="home">
       <HeroBillboardTestimonial
       useInvertedBackground={false}
-      background={{
+      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", handle: "@alice_local", 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: "Alice Miller",
+        { name: "Bob Sanders", handle: "@bobs_retail", 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" },
-          handle: "@alice_local",
-          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",
-          handle: "@bobs_retail",
-          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",
-          handle: "@carol_flowers",
-          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",
-          handle: "@david_services",
-          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",
-          href: "#contact",
-        },
       ]}
+      buttons={[{ text: "Start Your Website Today", href: "#contact" }]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaEWGRl2gIwPr3jQBoIYDvkgZh/a-clean-professional-modern-dashboard-or-1774557346032-d2d2b219.png"
     />
   </div>
@@ -107,21 +60,9 @@ export default function LandingPage() {
       useInvertedBackground={true}
       title="Built for Growth"
       metrics={[
-        {
+        { icon: Rocket, label: "Projects Launched", value: "150+" },
-          icon: Rocket,
+        { icon: Users, label: "Happy Clients", value: "120+" },
-          label: "Projects Launched",
+        { icon: TrendingUp, label: "Revenue Growth", value: "40%" },
-          value: "150+",
-        },
-        {
-          icon: Users,
-          label: "Happy Clients",
-          value: "120+",
-        },
-        {
-          icon: TrendingUp,
-          label: "Revenue Growth",
-          value: "40%",
-        },
       ]}
       metricsAnimation="slide-up"
     />
@@ -133,39 +74,8 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
+        { id: 1, title: "Mobile Responsive Design", description: "Ensure your site looks perfect on every screen, from phones to desktops.", 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" } },
-          id: 1,
+        { id: 2, title: "Conversion Focused", description: "Optimized layouts designed to turn visitors into paying customers efficiently.", 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" } },
-          title: "Mobile Responsive Design",
-          description: "Ensure your site looks perfect on every screen, from phones to desktops.",
-          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",
-          },
-        },
-        {
-          id: 2,
-          title: "Conversion Focused",
-          description: "Optimized layouts designed to turn visitors into paying customers efficiently.",
-          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",
-          },
-        },
-        {
-          id: 3,
-          title: "Managed Hosting",
-          description: "Blazing fast and secure hosting so you can focus on running your business.",
-          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",
-          },
-        },
       ]}
       showStepNumbers={true}
       title="Everything Your Business Needs"
@@ -179,38 +89,8 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       testimonials={[
-        {
+        { id: "1", name: "Alice Miller", 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: "1",
+        { id: "2", name: "Bob Sanders", 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" },
-          name: "Alice Miller",
-          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",
-          name: "Bob Sanders",
-          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",
-          name: "Carol Davis",
-          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",
-          name: "David Wilson",
-          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,64 +99,22 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplitForm
+      <ContactCTA
-      useInvertedBackground={false}
+        tag="Get In Touch"
-      title="Let's Build Your Site"
+        tagIcon={Mail}
-      description="Ready to get started? Reach out today to receive a free consultation and proposal."
+        title="Contact Us"
-      inputs={[
+        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" }]}
-          name: "name",
+        background={{ variant: "plain" }}
-          type: "text",
+        useInvertedBackground={false}
-          placeholder: "Your Name",
+      />
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email Address",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        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"
-      mediaAnimation="slide-up"
-    />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBase
       columns={[
-        {
+        { title: "SublimeSites", items: [{ label: "About Us", href: "#about" }, { label: "Services", href: "#features" }] },
-          title: "SublimeSites",
+        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Services",
-              href: "#features",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
       ]}
       logoText="SublimeSites"
       copyrightText="© 2025 | SublimeSites"

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);