Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,15 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
+import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import { Instagram, MapPin, Phone } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -31,21 +32,13 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "Home",
-          id: "hero",
-        },
+          name: "Home",          id: "hero"},
         {
-          name: "About",
-          id: "about",
-        },
+          name: "About",          id: "about"},
         {
-          name: "Services",
-          id: "features",
-        },
+          name: "Services",          id: "features"},
         {
-          name: "Contact",
-          id: "contact",
-        },
+          name: "Contact",          id: "contact"},
       ]}
       brandName="Barbershop 23"
     />
@@ -57,35 +50,21 @@ export default function LandingPage() {
       description="Experience professional grooming in a modern, welcoming environment. Exceptional cuts, sharp shaves, and top-tier service."
       buttons={[
         {
-          text: "Book Appointment",
-          href: "#contact",
-        },
+          text: "Book Your Session Now",          href: "#contact"},
       ]}
       slides={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/full-body-portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18655.jpg",
-          imageAlt: "barbershop interior modern",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/full-body-portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18655.jpg",          imageAlt: "barbershop interior modern"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205862.jpg",
-          imageAlt: "barbershop interior modern",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205862.jpg",          imageAlt: "barbershop interior modern"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185639.jpg",
-          imageAlt: "barbershop interior modern",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185639.jpg",          imageAlt: "barbershop interior modern"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94764.jpg",
-          imageAlt: "barbershop interior modern",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94764.jpg",          imageAlt: "barbershop interior modern"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186474.jpg",
-          imageAlt: "barbershop interior modern",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186474.jpg",          imageAlt: "barbershop interior modern"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/brown-vintage-leather-chairs-stylish-barber-shop_627829-6188.jpg",
-          imageAlt: "barbershop interior modern",
-        },
+          imageSrc: "http://img.b2bpic.net/free-photo/brown-vintage-leather-chairs-stylish-barber-shop_627829-6188.jpg",          imageAlt: "barbershop interior modern"},
       ]}
     />
   </div>
@@ -107,26 +86,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "f1",
-          title: "Precision Haircut",
-          description: "Expert cutting techniques tailored to your head shape and hair texture.",
-          tag: "Essential",
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-having-drink-barbershop_23-2147736963.jpg",
-        },
+          id: "f1",          title: "Precision Haircut",          description: "Expert cutting techniques tailored to your head shape and hair texture.",          tag: "Essential",          imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-having-drink-barbershop_23-2147736963.jpg"},
         {
-          id: "f2",
-          title: "Traditional Shave",
-          description: "Hot towel treatment and precision straight-razor shave for a smooth finish.",
-          tag: "Signature",
-          imageSrc: "http://img.b2bpic.net/free-photo/cat-s-gentle-paw_23-2151943824.jpg",
-        },
+          id: "f2",          title: "Traditional Shave",          description: "Hot towel treatment and precision straight-razor shave for a smooth finish.",          tag: "Signature",          imageSrc: "http://img.b2bpic.net/free-photo/cat-s-gentle-paw_23-2151943824.jpg"},
         {
-          id: "f3",
-          title: "Beard Design",
-          description: "Sculpting and defining your beard to perfectly complement your facial structure.",
-          tag: "Styling",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg",
-        },
+          id: "f3",          title: "Beard Design",          description: "Sculpting and defining your beard to perfectly complement your facial structure.",          tag: "Styling",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg"},
       ]}
       title="Our Services"
       description="Precision grooming tailored to your unique look."
@@ -140,45 +104,20 @@ export default function LandingPage() {
       useInvertedBackground={true}
       testimonials={[
         {
-          id: "1",
-          name: "Alex R.",
-          handle: "@alexr",
-          testimonial: "Best haircut I've had in years. Asatur knows his craft.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-using-tablet-celebrating-success-outdoor-cafe_1262-18867.jpg",
-        },
+          id: "1",          name: "Alex R.",          handle: "@alexr",          testimonial: "Best haircut I've had in years. Asatur knows his craft.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-using-tablet-celebrating-success-outdoor-cafe_1262-18867.jpg"},
         {
-          id: "2",
-          name: "Mark S.",
-          handle: "@marks",
-          testimonial: "Professional, clean, and quick. Highly recommended.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/pretty-student-girl-with-gathered-hair-make-up-relaxing-home-after-lectures-university-attractive-cheerful-young-woman-blue-dress-sitting-comfortable-couch-with-joyful-relaxed-smile_343059-2102.jpg",
-        },
+          id: "2",          name: "Mark S.",          handle: "@marks",          testimonial: "Professional, clean, and quick. Highly recommended.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/pretty-student-girl-with-gathered-hair-make-up-relaxing-home-after-lectures-university-attractive-cheerful-young-woman-blue-dress-sitting-comfortable-couch-with-joyful-relaxed-smile_343059-2102.jpg"},
         {
-          id: "3",
-          name: "Jordan P.",
-          handle: "@jordanp",
-          testimonial: "Consistent, high-quality work every single visit.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/excited-joyful-beautiful-woman-gesturing-with-hand_74855-2753.jpg",
-        },
+          id: "3",          name: "Jordan P.",          handle: "@jordanp",          testimonial: "Consistent, high-quality work every single visit.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/excited-joyful-beautiful-woman-gesturing-with-hand_74855-2753.jpg"},
         {
-          id: "4",
-          name: "Chris T.",
-          handle: "@christ",
-          testimonial: "Great atmosphere. The shop is modern and welcoming.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-drag-queen-indoors_23-2149556820.jpg",
-        },
+          id: "4",          name: "Chris T.",          handle: "@christ",          testimonial: "Great atmosphere. The shop is modern and welcoming.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-drag-queen-indoors_23-2149556820.jpg"},
         {
-          id: "5",
-          name: "Sam K.",
-          handle: "@samk",
-          testimonial: "Solid attention to detail. 5 stars.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-male-with-long-hair-dark-background_613910-1758.jpg",
-        },
+          id: "5",          name: "Sam K.",          handle: "@samk",          testimonial: "Solid attention to detail. 5 stars.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-male-with-long-hair-dark-background_613910-1758.jpg"},
       ]}
       showRating={true}
       title="What Our Clients Say"
@@ -193,102 +132,54 @@ export default function LandingPage() {
       tag="Results"
       metrics={[
         {
-          id: "m1",
-          value: "1000+",
-          description: "Satisfied Clients",
-        },
+          id: "m1",          value: "1000+",          description: "Satisfied Clients"},
         {
-          id: "m2",
-          value: "10+",
-          description: "Years Experience",
-        },
+          id: "m2",          value: "10+",          description: "Years Experience"},
         {
-          id: "m3",
-          value: "4.9",
-          description: "Average Rating",
-        },
+          id: "m3",          value: "4.9",          description: "Average Rating"},
       ]}
       metricsAnimation="slide-up"
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={true}
+      <FaqSplitText
       faqs={[
         {
-          id: "q1",
-          title: "Do I need an appointment?",
-          content: "Booking online or via phone is recommended to ensure your preferred time.",
-        },
+          id: "q1",          title: "Do I need an appointment?",          content: "Booking online or via phone is recommended to ensure your preferred time."},
         {
-          id: "q2",
-          title: "Where are you located?",
-          content: "We are centrally located. Check our Google Maps link for the exact address.",
-        },
+          id: "q2",          title: "Where are you located?",          content: "We are centrally located. Check our Google Maps link for the exact address."},
         {
-          id: "q3",
-          title: "Do you offer beard shaves?",
-          content: "Yes, we specialize in both hair cutting and professional straight-razor shaves.",
-        },
+          id: "q3",          title: "Do you offer beard shaves?",          content: "Yes, we specialize in both hair cutting and professional straight-razor shaves."},
       ]}
-      title="Frequently Asked"
-      description="Have questions? We have answers."
+      sideTitle="Frequently Asked"
+      sideDescription="Have questions? We have answers."
       faqsAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/barber-talking-with-client-reception-desk_23-2148181957.jpg"
+      useInvertedBackground={true}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{
-        variant: "animated-grid",
-      }}
-      tag="Visit Us"
+      <ContactCenter
+      tag="Contact"
       title="Book Your Appointment"
       description="Ready for your next fresh look? Reach out today."
-      imageSrc="http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286009.jpg"
-      mediaAnimation="slide-up"
+      background={{ variant: "sparkles-gradient" }}
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        {
-          title: "Barbershop 23",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Services",
-              href: "#features",
-            },
-          ],
-        },
-        {
-          title: "Contact",
-          items: [
-            {
-              label: "Book Now",
-              href: "#contact",
-            },
-            {
-              label: "Google Maps",
-              href: "https://maps.app.goo.gl/LT51PVfq6cvSmFHr9?g_st=ac",
-            },
-          ],
-        },
+      <FooterCard
+      logoText="Barbershop 23"
+      socialLinks={[
+        { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+        { icon: MapPin, href: "https://maps.app.goo.gl/LT51PVfq6cvSmFHr9?g_st=ac", ariaLabel: "Location" },
+        { icon: Phone, href: "#", ariaLabel: "Phone" }
       ]}
-      bottomLeftText="© 2024 Barbershop 23 by Asatur"
-      bottomRightText="All rights reserved."
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

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