Update src/app/page.tsx

Merge version_5 into main

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
 import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
@@ -9,9 +10,8 @@ import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNinete
 import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Scissors, Calendar, Star, Clock, User, Award } from 'lucide-react';
+import { Scissors, Calendar, Award } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -38,11 +38,24 @@ export default function LandingPage() {
             { name: "FAQ", id: "faq" }
           ]}
           button={{
-            text: "Book Now",            href: "contact"
+            text: "Book Now",            href: "#contact"
           }}
         />
       </div>
 
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Bookings"
+          title="Book Your Appointment"
+          description="Use the calendar below to secure your spot with your preferred barber."
+          tagIcon={Calendar}
+          background={{ variant: "sparkles-gradient" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Your name or email"
+          buttonText="Reserve Now"
+        />
+      </div>
+
       <div id="hero" data-section="hero">
         <HeroBillboardCarousel
           title="Precision Grooming & Style"
@@ -51,8 +64,8 @@ export default function LandingPage() {
           tagIcon={Scissors}
           background={{ variant: "plain" }}
           buttons={[
-            { text: "Book with Your Barber", href: "contact" },
+            { text: "Book with Your Barber", href: "#contact" },
-            { text: "View Services", href: "cuts" }
+            { text: "View Services", href: "#cuts" }
           ]}
           buttonAnimation="slide-up"
           mediaItems={[
@@ -73,10 +86,11 @@ export default function LandingPage() {
             { value: "15+", title: "Years Experience" },
             { value: "10k+", title: "Happy Clients" }
           ]}
-          imageSrc="http://img.b2bpic.net/free-photo/medium-shot-hairdresser-washing-man-s-hair_23-2150665396.jpg"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CwVNjbVLmrqoXZ4wNOFBZ2c4u3/tmp/black-woman-hair-dresser-braiding-black--1777333282373-e3f6b864.png"
           imageAlt="Expert barber at work"
           mediaAnimation="slide-up"
           metricsAnimation="slide-up"
+          useInvertedBackground={false}
         />
       </div>
 
@@ -94,6 +108,7 @@ export default function LandingPage() {
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
         />
       </div>
 
@@ -108,6 +123,7 @@ export default function LandingPage() {
             { tag: "Beard", title: "Beard Design", subtitle: "Expert shaping", description: "Sculpted beard care for the modern man.", imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-6221.jpg" }
           ]}
           textboxLayout="default"
+          useInvertedBackground={false}
         />
       </div>
 
@@ -124,6 +140,7 @@ export default function LandingPage() {
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
         />
       </div>
 
@@ -139,6 +156,7 @@ export default function LandingPage() {
           ]}
           animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
         />
       </div>
 
@@ -155,18 +173,7 @@ export default function LandingPage() {
           imageSrc="http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table_627829-6196.jpg"
           faqsAnimation="slide-up"
           textboxLayout="default"
-        />
+          useInvertedBackground={false}
-      </div>
-
-      <div id="contact" data-section="contact">
-        <ContactCenter
-          tag="Bookings"
-          title="Book Your Appointment"
-          description="Use the calendar below to secure your spot with your preferred barber."
-          tagIcon={Calendar}
-          background={{ variant: "sparkles-gradient" }}
-          inputPlaceholder="Your name or email"
-          buttonText="Reserve Now"
         />
       </div>
 
@@ -176,10 +183,10 @@ export default function LandingPage() {
           columns={[
             { title: "Visit", items: [{ label: "Location", href: "#" }, { label: "Directions", href: "#" }] },
             { title: "Services", items: [{ label: "Cuts", href: "#" }, { label: "Shaves", href: "#" }] },
-            { title: "Business", items: [{ label: "Book Now", href: "#" }, { label: "Contact", href: "#" }] }
+            { title: "Business", items: [{ label: "Book Now", href: "#contact" }, { label: "Contact", href: "#" }] }
           ]}
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #080000;
+  --background: #0a0a0a;
-  --card: #dba844;
+  --card: #1a1a1a;
-  --foreground: #ffe6e6;
+  --foreground: #f5f5f5;
-  --primary-cta: #ff7a7a;
+  --primary-cta: #ffdf7d;
-  --primary-cta-text: #080000;
+  --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1e0909;
+  --secondary-cta: #1a1a1a;
-  --secondary-cta-text: #ffe6e6;
+  --secondary-cta-text: #ffffff;
-  --accent: #7b4242;
+  --accent: #b8860b;
-  --background-accent: #65292c;
+  --background-accent: #8b6914;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);