Update src/app/page.tsx

Merge version_17 into main

src/app/page.tsx

@@ -2,13 +2,13 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 
 export default function LandingPage() {
   return (
@@ -88,41 +88,35 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonial" data-section="testimonial">
-      <TestimonialCardOne
-      animationType="slide-up"
+      <TestimonialCardTwo
+      animationType="blur-reveal"
       textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
       useInvertedBackground={true}
       title="Client Reviews"
-      description="Rate your experience and let us know how we did."
-      buttons={[{ text: "Leave a Review", href: "#contact" }]}
+      description="What our community has to say about the Migo experience."
       testimonials={[]}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplitForm
-      useInvertedBackground={false}
-      title="Schedule Your Visit (512-504-6134)"
+      <ContactSplit
+      tag="Book Now"
+      title="Schedule Your Visit"
       description="Ready to get fresh? Reach out and let's get you on the schedule."
-      inputs={[
-        { name: "name", type: "text", placeholder: "Your Name", required: true },
-        { name: "email", type: "email", placeholder: "Your Email", required: true },
-      ]}
-      textarea={{
-        name: "message",        placeholder: "Which service do you need? (Or leave us a review!)",        required: true,
-      }}
+      background={{ variant: "cell-wave" }}
+      useInvertedBackground={false}
+      mediaPosition="right"
       imageSrc="http://img.b2bpic.net/free-photo/tools-from-barbershop-wooden-background_1303-10377.jpg"
-      mediaAnimation="slide-up"
-      videoSrc="https://www.w3schools.com/howto/img_video.mp4?_wi=3"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterBase
+      columns={[
+        { title: "Navigation", items: [{ label: "Home", href: "#home" }, { label: "Pricing", href: "#pricing" }] },
+        { title: "Connect", items: [{ label: "Instagram", href: "https://instagram.com" }, { label: "Terms", href: "#" }] }
+      ]}
       logoText="FlawLikeMigo"
-      leftLink={{ text: "Instagram", href: "https://instagram.com" }}
-      rightLink={{ text: "Terms of Service", href: "#" }}
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #1a1a1a;
-  --primary-cta: #15479c;
+  --background: #010912;
+  --card: #152840;
+  --foreground: #e6f0ff;
+  --primary-cta: #cee7ff;
   --primary-cta-text: #f5f4f0;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #0e1a29;
   --secondary-cta-text: #1a1a1a;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --accent: #3f5c79;
+  --background-accent: #004a93;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);