Update src/app/styles/variables.css

Merge version_3 into main

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
@@ -21,10 +21,10 @@ export default function LandingPage() {
         borderRadius="soft"
         contentWidth="mediumLarge"
         sizing="largeSmallSizeLargeTitles"
-        background="grid"
-        cardStyle="gradient-radial"
-        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="layered"
+        background="noise"
+        cardStyle="soft-shadow"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
         headingFontWeight="semibold"
     >
       <ReactLenis root>
@@ -32,88 +32,51 @@ export default function LandingPage() {
       <NavbarLayoutFloatingInline
       navItems={[
         {
-          name: "Home",
-          id: "#home",
-        },
+          name: "Home",          id: "#home"},
         {
-          name: "Services",
-          id: "#services",
-        },
+          name: "Services",          id: "#services"},
         {
-          name: "About Us",
-          id: "#about",
-        },
+          name: "About Us",          id: "#about"},
         {
-          name: "Testimonials",
-          id: "#testimonials",
-        },
+          name: "Testimonials",          id: "#testimonials"},
         {
-          name: "FAQ",
-          id: "#faq",
-        },
+          name: "FAQ",          id: "#faq"},
         {
-          name: "Contact",
-          id: "#contact",
-        },
+          name: "Contact",          id: "#contact"},
       ]}
-      logoSrc="http://img.b2bpic.net/free-vector/monocolor-minimalist-total-plumbing-logo-template_742173-19081.jpg"
-      logoAlt="Westside Plumbing & Rooter Logo"
-      brandName="Westside Plumbing & Rooter"
+      logoSrc="http://img.b2bpic.net/free-vector/barbershop-logo-template_23-2149303358.jpg"
+      logoAlt="Westside Barbershop Logo"
+      brandName="Westside Barbershop"
       button={{
-        text: "Get a Free Estimate",
-        href: "#contact",
-      }}
+        text: "Book an Appointment",        href: "#contact"}}
     />
   </div>
 
   <div id="home" data-section="home">
       <HeroBillboardRotatedCarousel
       background={{
-        variant: "rotated-rays-static-grid",
-      }}
-      title="Your Trusted Partner for Westside Plumbing & Rooter Services"
-      description="Expert plumbing solutions, dependable rooter services, and emergency repairs. We keep your water flowing smoothly and efficiently."
+        variant: "rotated-rays-static-grid"}}
+      title="Experience the Finest Cuts & Styles at Westside Barbershop"
+      description="Precision haircuts, classic shaves, and modern grooming services designed for the discerning gentleman. Step in for a fresh look."
       buttons={[
         {
-          text: "Schedule Service",
-          href: "#contact",
-        },
+          text: "Book Now",          href: "#contact"},
         {
-          text: "Emergency Service",
-          href: "#contact",
-        },
+          text: "View Services",          href: "#services"},
       ]}
       carouselItems={[
         {
-          id: "carousel-item-1",
-          imageSrc: "http://img.b2bpic.net/free-photo/manufacturer-teaching-new-employee-how-shape-wooden-bowl-disc-sander_482257-99053.jpg",
-          imageAlt: "Plumber fixing a leaky pipe",
-        },
+          id: "carousel-item-1",          imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-barber-wearing-stylish-apron-standing-next-red-leather-chair_141793-71822.jpg?_wi=1",          imageAlt: "Barber working on client's hair"},
         {
-          id: "carousel-item-2",
-          imageSrc: "http://img.b2bpic.net/free-photo/profile-man-touching-socket-wall-with-screwdriver_259150-58245.jpg",
-          imageAlt: "Professional drain cleaning service",
-        },
+          id: "carousel-item-2",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-barber-finishing-haircut-client_23-2151121014.jpg",          imageAlt: "Close-up of a finished haircut"},
         {
-          id: "carousel-item-3",
-          imageSrc: "http://img.b2bpic.net/free-photo/hands-preparing-machine-scanning_23-2149341559.jpg",
-          imageAlt: "Technician inspecting a water heater",
-        },
+          id: "carousel-item-3",          imageSrc: "http://img.b2bpic.net/free-photo/barber-shaving-customer-beard_23-2148906644.jpg?_wi=1",          imageAlt: "Traditional hot shave"},
         {
-          id: "carousel-item-4",
-          imageSrc: "http://img.b2bpic.net/free-photo/automatic-electronic-switch-control-water-pump-pressure-controller_627829-7493.jpg",
-          imageAlt: "Smiling plumber with professional tools",
-        },
+          id: "carousel-item-4",          imageSrc: "http://img.b2bpic.net/free-photo/fashionable-male-barber-with-haircut-posing_23-2148782343.jpg",          imageAlt: "Stylish barber with tools"},
         {
-          id: "carousel-item-5",
-          imageSrc: "http://img.b2bpic.net/free-photo/people-using-mobile-phone_53876-22973.jpg",
-          imageAlt: "Emergency plumbing situation",
-        },
+          id: "carousel-item-5",          imageSrc: "http://img.b2bpic.net/free-photo/stylish-male-client-getting-haircut-barbershop_23-2148782352.jpg",          imageAlt: "Client enjoying a haircut"},
         {
-          id: "carousel-item-6",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-washing-broccoli_23-2149722311.jpg",
-          imageAlt: "Modern bathroom plumbing fixtures",
-        },
+          id: "carousel-item-6",          imageSrc: "http://img.b2bpic.net/free-photo/male-barber-stylish-apron-glasses-looking-camera_141793-71816.jpg",          imageAlt: "Clean and modern barbershop interior"},
       ]}
     />
   </div>
@@ -121,24 +84,18 @@ export default function LandingPage() {
   <div id="about" data-section="about">
       <MetricSplitMediaAbout
       useInvertedBackground={false}
-      title="Over 20 Years of Trusted Local Plumbing"
-      description="At Westside Plumbing & Rooter, we pride ourselves on delivering top-quality plumbing and rooter services across the Westside. Our experienced technicians are dedicated to providing fast, reliable, and affordable solutions for residential and commercial clients."
+      title="Crafting Styles for Over 20 Years in Westside"
+      description="Westside Barbershop is more than just a place for a haircut; it's a community staple where tradition meets modern style. Our master barbers are dedicated to providing precision cuts, classic shaves, and an unparalleled grooming experience for every client."
       metrics={[
         {
-          value: "20+",
-          title: "Years of Experience",
-        },
+          value: "20+",          title: "Years of Expertise"},
         {
-          value: "10K+",
-          title: "Projects Completed",
-        },
+          value: "5K+",          title: "Satisfied Clients"},
         {
-          value: "5-Star",
-          title: "Average Rating",
-        },
+          value: "Master Barbers",          title: "Highly Skilled Team"},
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/pleased-young-male-builder-wearing-uniform-safety-helmet-showing-two-pink_141793-74761.jpg"
-      imageAlt="Experienced plumber giving a thumbs up"
+      imageSrc="http://img.b2bpic.net/free-photo/barber-shaving-customer-beard_23-2148906644.jpg?_wi=2"
+      imageAlt="Barber giving a classic shave"
       mediaAnimation="slide-up"
       metricsAnimation="slide-up"
     />
@@ -151,56 +108,32 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         {
-          id: "drain-cleaning",
-          label: "Drain Cleaning",
-          title: "Clog-Free Drains Guaranteed",
-          items: [
-            "Advanced Rooter Technology",
-            "Sewer Line Clearing",
-            "Video Camera Inspections",
-          ],
+          id: "haircuts",          label: "Haircuts",          title: "Precision Haircuts & Styling",          items: [
+            "Classic & Modern Cuts",            "Fades & Tapers",            "Consultation & Style Advice"],
           buttons: [
             {
-              text: "Learn More",
-              href: "#contact",
-            },
+              text: "Learn More",              href: "#contact"},
           ],
         },
         {
-          id: "water-heater",
-          label: "Water Heater Services",
-          title: "Hot Water When You Need It",
-          items: [
-            "Installation & Replacement",
-            "Repair & Maintenance",
-            "Tankless Water Heater Experts",
-          ],
+          id: "beard-grooming",          label: "Beard Grooming",          title: "Expert Beard Trims & Styling",          items: [
+            "Beard Shaping & Trim",            "Hot Towel Treatment",            "Beard Oil Application"],
           buttons: [
             {
-              text: "Learn More",
-              href: "#contact",
-            },
+              text: "Learn More",              href: "#contact"},
           ],
         },
         {
-          id: "leak-detection",
-          label: "Leak Detection & Repair",
-          title: "Stop Leaks Before They Cost You",
-          items: [
-            "Precise Electronic Detection",
-            "Slab Leak Repair",
-            "Pipe Repair & Repiping",
-          ],
+          id: "hot-shaves",          label: "Hot Shaves",          title: "Luxurious Hot Towel Shaves",          items: [
+            "Traditional Razor Shave",            "Pre-Shave Prep & Post-Shave Balm",            "Relaxing Experience"],
           buttons: [
             {
-              text: "Learn More",
-              href: "#contact",
-            },
+              text: "Learn More",              href: "#contact"},
           ],
         },
       ]}
-      title="Our Comprehensive Plumbing & Rooter Services"
-      description="From routine maintenance to emergency interventions, we offer a full spectrum of services to keep your plumbing system in perfect working order."
+      title="Our Premium Barbershop Services"
+      description="From classic cuts to modern styles, beard grooming, and luxurious hot shaves, we offer a full range of services to refine your look."
     />
   </div>
 
@@ -211,67 +144,31 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
-          name: "Sarah Johnson",
-          role: "Homeowner",
-          company: "Westside Resident",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-successful-senior-woman-holding-gadget_1262-5251.jpg",
-          imageAlt: "Sarah Johnson, a happy Westside homeowner",
-        },
+          id: "1",          name: "Alex M.",          role: "Regular Client",          company: "Westside Local",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-bearded-man-barber-shop_23-2149591965.jpg",          imageAlt: "Alex M., a regular client"},
         {
-          id: "2",
-          name: "Michael Chen",
-          role: "Small Business Owner",
-          company: "Local Cafe",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-tattooed-people_23-2149667347.jpg",
-          imageAlt: "Michael Chen, owner of a local cafe",
-        },
+          id: "2",          name: "Ben L.",          role: "Entrepreneur",          company: "Tech Startup",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/guy-with-perfect-hairstyle-looking-away_171337-14282.jpg",          imageAlt: "Ben L., an entrepreneur"},
         {
-          id: "3",
-          name: "Emily Rodriguez",
-          role: "Property Manager",
-          company: "Westside Properties Inc.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/couple-drinking-looking-each-other_23-2147742601.jpg",
-          imageAlt: "Emily Rodriguez, Property Manager",
-        },
+          id: "3",          name: "Chris T.",          role: "Artist",          company: "Local Gallery",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/man-looking-mirror-barber-shop_23-2149591942.jpg",          imageAlt: "Chris T., an artist"},
         {
-          id: "4",
-          name: "David Kim",
-          role: "Contractor",
-          company: "Kim Construction",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/serious-beautiful-middle-aged-business-woman_1262-3072.jpg",
-          imageAlt: "David Kim, local contractor",
-        },
+          id: "4",          name: "Daniel P.",          role: "Student",          company: "UCLA",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-brunette-girl-denim-jacket-holds-hand-face_176474-12445.jpg",          imageAlt: "Daniel P., a student"},
         {
-          id: "5",
-          name: "Jessica Lee",
-          role: "Realtor",
-          company: "Westside Estates",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-handsome-smiling-man-casual-outfit-sitting-table-working-laptop_285396-1831.jpg",
-          imageAlt: "Jessica Lee, a realtor from Westside Estates",
-        },
+          id: "5",          name: "Ethan R.",          role: "Professional",          company: "Finance Firm",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-modern-haircut-barbershop_23-2149791404.jpg",          imageAlt: "Ethan R., a professional"},
       ]}
       kpiItems={[
         {
-          value: "99%",
-          label: "Customer Satisfaction",
-        },
+          value: "5-Star",          label: "Average Rating"},
         {
-          value: "24/7",
-          label: "Emergency Availability",
-        },
+          value: "99%",          label: "Client Satisfaction"},
         {
-          value: "Fast",
-          label: "Response Time",
-        },
+          value: "Stylish",          label: "Transformations Daily"},
       ]}
-      title="What Our Happy Customers Say"
-      description="Hear directly from Westside residents and businesses who trust us with their plumbing and rooter needs."
+      title="What Our Clients Say About Their Westside Barbershop Experience"
+      description="Hear from gentlemen who leave our chairs feeling confident and looking their best."
     />
   </div>
 
@@ -282,32 +179,14 @@ export default function LandingPage() {
       useInvertedBackground={true}
       metrics={[
         {
-          id: "years-in-business",
-          value: "20+",
-          title: "Years in Business",
-          description: "Decades of experience serving the Westside community with dedication.",
-          imageSrc: "http://img.b2bpic.net/free-photo/desk-with-boss-day-calendar_23-2148636860.jpg",
-          imageAlt: "Calendar with years of experience",
-        },
+          id: "years-crafting-styles",          value: "20+",          title: "Years Crafting Styles",          description: "Over two decades of dedication to the art of barbering.",          imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-stylish-black-apron-gloves-holding-barber-scissors_176474-12499.jpg",          imageAlt: "Barber holding scissors and comb"},
         {
-          id: "completed-projects",
-          value: "10,000+",
-          title: "Completed Projects",
-          description: "Successfully resolved plumbing issues for thousands of satisfied clients.",
-          imageSrc: "http://img.b2bpic.net/free-photo/small-business-staff-members-organizing-shipments-checking-stock_482257-131423.jpg",
-          imageAlt: "Completed projects list",
-        },
+          id: "happy-clients",          value: "5,000+",          title: "Happy Clients",          description: "Thousands of satisfied customers walk out with a fresh look every year.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-pleased-attractive-male-barber-holds-scissors-comb-ready-haircut-guy_273609-3286.jpg",          imageAlt: "Pleased barber with scissors and comb"},
         {
-          id: "certified-plumbers",
-          value: "Certified",
-          title: "Expert Plumbers",
-          description: "Our team consists of highly trained and fully certified plumbing professionals.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-female-standing-worker-uniform-looking-sad-front-view_176474-34533.jpg",
-          imageAlt: "Plumbing certification badge",
-        },
+          id: "master-barbers",          value: "Master",          title: "Master Barbers",          description: "Our team consists of highly trained and fully certified barbering professionals.",          imageSrc: "http://img.b2bpic.net/free-photo/stylish-male-barber-with-trendy-haircut-posing-against-dark-wall-and-looking-away-camera_273609-3386.jpg",          imageAlt: "Stylish male barber"},
       ]}
-      title="Our Commitment to Quality & Service"
-      description="Proudly serving the Westside community with dedication and excellence. Our numbers speak for themselves."
+      title="Westside Barbershop by the Numbers"
+      description="See why our clients trust us for their grooming needs. Quality, experience, and satisfaction are at the heart of what we do."
     />
   </div>
 
@@ -317,23 +196,18 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "faq-1",
-          title: "What areas do you serve?",
-          content: "We proudly serve the entire Westside area, including [list specific neighborhoods/cities, e.g., Santa Monica, Venice, Culver City, Beverly Hills] and surrounding communities.",
-        },
+          id: "faq-1",          title: "What services do you offer?",          content: "We offer a full range of services including men's haircuts, beard trims, hot shaves, and styling. Check our Services section for more details."},
         {
-          id: "faq-2",
-          title: "Do you offer emergency plumbing services?",
-          content: "Yes, we understand that plumbing emergencies don't wait. We offer 24/7 emergency services for urgent repairs like burst pipes, major leaks, and severe clogs.",
-        },
+          id: "faq-2",          title: "How can I book an appointment?",          content: "You can book an appointment directly through our website using the online booking system in the Contact section, or by calling us at (555) 123-4567 during business hours."},
         {
-          id: "faq-3",
-          title: "How much does your service cost?",
-          content: "Our pricing varies depending on the type and complexity of the service. We provide transparent, upfront pricing with no hidden fees after a thorough assessment. Contact us for a free estimate!",
-        },
+          id: "faq-3",          title: "Do you accept walk-ins?",          content: "While appointments are recommended to ensure availability, we do accept walk-ins based on our schedule. Feel free to call ahead to check current wait times."},
+        {
+          id: "faq-4",          title: "What are your operating hours?",          content: "We are open Tuesday to Saturday, from 9:00 AM to 7:00 PM. Closed on Sundays and Mondays."},
+        {
+          id: "faq-5",          title: "Where are you located?",          content: "Westside Barbershop is located at 123 Main Street, Westside, CA. We look forward to seeing you!"},
       ]}
-      title="Frequently Asked Questions"
-      description="Find quick answers to common questions about our plumbing and rooter services."
+      title="Your Questions, Answered"
+      description="Find quick answers to common questions about Westside Barbershop's services, appointments, and policies."
       faqsAnimation="slide-up"
     />
   </div>
@@ -343,95 +217,68 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       names={[
-        "Westside Builders Alliance",
-        "Property Management Solutions",
-        "AquaTech Fixtures",
-        "Community Homeowners Group",
-        "Commercial Contractors Inc.",
-        "Green Living Initiatives",
-        "SafeHome Insurance",
-      ]}
-      title="Trusted by Westside Homes & Businesses"
-      description="We're proud to serve a diverse range of residential and commercial clients and partner with leading brands in plumbing fixtures and local associations."
+        "Westside Community Collective",        "Local Business Network",        "Style & Grooming Co.",        "Barber's Guild West",        "Fresh Cuts Magazine",        "Urban Style Blog",        "Gentlemen's Choice Products"]}
+      title="Trusted by the Westside Community"
+      description="Proudly serving a diverse clientele and partnering with local businesses and style brands."
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
+      <ContactSplit
       useInvertedBackground={false}
       background={{
-        variant: "sparkles-gradient",
-      }}
-      tag="Contact Us"
-      title="Need Expert Plumbing Service? Call Westside Today!"
-      description="Whether it's an emergency repair or scheduled maintenance, our team is ready to provide prompt and professional service. Get a free estimate now."
-      buttons={[
-        {
-          text: "Request a Quote",
-          href: "#contact",
-        },
-        {
-          text: "Call Us: (555) 123-4567",
-          href: "tel:+15551234567",
-        },
-      ]}
+        variant: "sparkles-gradient"}}
+      tag="Book Your Style"
+      title="Ready for a Fresh Look? Contact Westside Barbershop!"
+      description="Visit us at 123 Main Street, Westside, CA. Call us at (555) 123-4567 for appointments or emergencies. Book your next haircut or shave online below. We are here to help you look your best!"
+      imageSrc="http://img.b2bpic.net/free-photo/handsome-young-barber-wearing-stylish-apron-standing-next-red-leather-chair_141793-71822.jpg?_wi=2"
+      imageAlt="Barber standing in barbershop"
+      mediaPosition="right"
+      inputPlaceholder="Your Email"
+      buttonText="Send Message"
+      termsText="By sending this message, you agree to our Privacy Policy."
+      onSubmit={(email: string) => alert(`Contact form submitted with email: ${email}`)}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
-      logoSrc="http://img.b2bpic.net/free-vector/monocolor-minimalist-total-plumbing-logo-template_742173-19081.jpg"
-      logoAlt="Westside Plumbing & Rooter Logo"
+      logoSrc="http://img.b2bpic.net/free-vector/barbershop-logo-template_23-2149303358.jpg"
+      logoAlt="Westside Barbershop Logo"
       columns={[
         {
           items: [
             {
-              label: "Home",
-              href: "#home",
-            },
+              label: "Home",              href: "#home"},
             {
-              label: "About Us",
-              href: "#about",
-            },
+              label: "About Us",              href: "#about"},
             {
-              label: "Services",
-              href: "#services",
-            },
+              label: "Services",              href: "#services"},
           ],
         },
         {
           items: [
             {
-              label: "Testimonials",
-              href: "#testimonials",
-            },
+              label: "Booking",              href: "#contact"},
             {
-              label: "FAQ",
-              href: "#faq",
-            },
+              label: "FAQ",              href: "#faq"},
             {
-              label: "Contact",
-              href: "#contact",
-            },
+              label: "Contact",              href: "#contact"},
           ],
         },
         {
           items: [
             {
-              label: "Privacy Policy",
-              href: "#",
-            },
+              label: "Privacy Policy",              href: "#"},
             {
-              label: "Terms of Service",
-              href: "#",
-            },
+              label: "Terms of Service",              href: "#"},
           ],
         },
       ]}
-      logoText="Westside Plumbing & Rooter"
+      logoText="Westside Barbershop"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #120a00e6;
-  --primary-cta: #E34400;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #120a00e6;
-  --accent: #e2e2e2;
-  --background-accent: #E34400;
+  --background: #f5f4f0;
+  --card: #ffffff;
+  --foreground: #1a1a1a;
+  --primary-cta: #2c2c2c;
+  --primary-cta-text: #f5f4f0;
+  --secondary-cta: #f5f4f0;
+  --secondary-cta-text: #1a1a1a;
+  --accent: #8a8a8a;
+  --background-accent: #e8e6e1;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);