Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -2,7 +2,6 @@
 
 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 FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
@@ -12,7 +11,8 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
 import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import { Activity, Award, Feather, Heart, Paintbrush, ShieldCheck, Sparkles, Wrench } from "lucide-react";
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import { Activity, Award, Feather, Heart, Paintbrush, ShieldCheck, Sparkles, Wrench, Quote } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -22,7 +22,7 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="mediumSmall"
         sizing="medium"
-        background="blurBottom"
+        background="fluid"
         cardStyle="solid"
         primaryButtonStyle="primary-glow"
         secondaryButtonStyle="solid"
@@ -45,9 +45,10 @@ export default function LandingPage() {
       ]}
       button={{
         text: "Request a Quote",        href: "#contact"}}
-      logoSrc="http://img.b2bpic.net/free-photo/biohazard-sign-ai-generated_268835-18690.jpg"
+      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780476716313-05mwh7j7.png"
       logoAlt="MPY Paint Jobs Logo"
       brandName="MPY Paint Jobs"
+      logoImageClassName="bg-transparent"
     />
   </div>
 
@@ -98,21 +99,16 @@ export default function LandingPage() {
   </div>
 
   <div id="about" data-section="about">
-      <AboutMetric
+      <TestimonialAboutCard
       useInvertedBackground={false}
+      tag="Our Promise"
       title="Crafted with Precision. Driven by Passion."
-      metrics={[
+      description="At MPY Paint Jobs, we believe every bike tells a story. Hear from our satisfied customers who have experienced the MPY difference and ride with unparalleled style."
-        {
+      subdescription="Their custom bikes are now personalized masterpieces, reflecting their unique vision and our dedication to excellence."
-          icon: Paintbrush,
+      icon={Quote}
-          label: "Custom Creations",          value: "1000+"},
+      imageSrc="http://img.b2bpic.net/free-photo/cheerful-cyclist-catching-his-breath_329181-8667.jpg?_wi=1"
-        {
+      imageAlt="Happy cyclist with a custom painted bike"
-          icon: Sparkles,
+      mediaAnimation="blur-reveal"
-          label: "Unique Designs",          value: "100%"},
-        {
-          icon: Activity,
-          label: "Happy Riders",          value: "500+"},
-      ]}
-      metricsAnimation="slide-up"
     />
   </div>
 
@@ -190,7 +186,7 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "t1",          name: "Alex P.",          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-cyclist-catching-his-breath_329181-8667.jpg",          imageAlt: "Alex P. with custom bike"},
+          id: "t1",          name: "Alex P.",          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-cyclist-catching-his-breath_329181-8667.jpg?_wi=2",          imageAlt: "Alex P. with custom bike"},
         {
           id: "t2",          name: "Sarah J.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-mechanic_1170-2354.jpg",          imageAlt: "Sarah J. with her custom bike"},
         {
@@ -268,7 +264,7 @@ export default function LandingPage() {
         name: "projectDetails",        placeholder: "Tell us about your project vision (e.g., bike type, style, colors, desired date)",        rows: 5,
         required: true,
       }}
-      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-repairing-bike_23-2148932598.jpg"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780476585715-xxiwthkq.jpg"
       imageAlt="Close up of bicycle frame in a workshop"
       mediaAnimation="blur-reveal"
       mediaPosition="right"
@@ -278,7 +274,7 @@ export default function LandingPage() {
 
   <div id="footer" data-section="footer">
       <FooterBaseCard
-      logoSrc="http://img.b2bpic.net/free-photo/biohazard-sign-ai-generated_268835-18690.jpg"
+      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EWBlOfpaA3C8pfIkwG9Yg6pp65/uploaded-1780476716313-05mwh7j7.png"
       logoAlt="MPY Paint Jobs Logo"
       logoText="MPY Paint Jobs"
       columns={[
@@ -316,6 +312,7 @@ export default function LandingPage() {
         },
       ]}
       copyrightText="© 2024 MPY Paint Jobs. All rights reserved."
+      logoImageClassName="bg-transparent"
     />
   </div>
       </ReactLenis>

src/app/styles/base.css

@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-dm-sans), sans-serif;
+  font-family: var(--font-montserrat), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #111111;
+  --background: #0a0a0a;
-  --card: #1A1A1A;
+  --card: #1a1a1a;
-  --foreground: #E0E0E0;
+  --foreground: #ffffff;
-  --primary-cta: #20B24B;
+  --primary-cta: #1f7cff;
-  --primary-cta-text: #FFFFFF;
+  --primary-cta-text: #ffffff;
-  --secondary-cta: #1A1A1A;
+  --secondary-cta: #010101;
-  --secondary-cta-text: #E0E0E0;
+  --secondary-cta-text: #ffffff;
-  --accent: #1E73D8;
+  --accent: #1f7cff;
-  --background-accent: #D8C42B;
+  --background-accent: #f96b2f;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);