Update src/app/page.tsx

Merge version_9 into main

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { useState } from "react";
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
@@ -14,6 +15,15 @@ import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCar
 import { Calendar, Clock, Smile, Star, UserPlus, Users } from "lucide-react";
 
 export default function LandingPage() {
+  const [showAppointmentModal, setShowAppointmentModal] = useState(false);
+  const [formData, setFormData] = useState({ service: "", time: "" });
+
+  const handleSendAppointment = () => {
+    const message = `Appointment Request: ${formData.service} at ${formData.time}`;
+    window.location.href = `sms:4808933256?body=${encodeURIComponent(message)}`;
+    setShowAppointmentModal(false);
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -23,34 +33,19 @@ export default function LandingPage() {
         sizing="medium"
         background="fluid"
         cardStyle="glass-depth"
-        primaryButtonStyle="double-inset"
-        secondaryButtonStyle="glass"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="solid"
         headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Home",
-          id: "#hero",
-        },
-        {
-          name: "About",
-          id: "#about",
-        },
-        {
-          name: "Services",
-          id: "#services",
-        },
-        {
-          name: "Reviews",
-          id: "#reviews",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
+        { name: "Home", id: "#hero" },
+        { name: "About", id: "#about" },
+        { name: "Services", id: "#services" },
+        { name: "Reviews", id: "#reviews" },
+        { name: "Contact", id: "#contact" },
       ]}
       brandName="Ahwatukee Barbers"
     />
@@ -58,46 +53,45 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
       logoText="Ahwatukee Barbers"
       description="Family-run, friendly neighborhood barbershop in Phoenix, AZ. Quality cuts, classic shaves, and grooming for all ages."
       buttons={[
-        {
-          text: "Book Now",
-          href: "#contact",
-        },
-        {
-          text: "Get Directions",
-          href: "https://maps.google.com",
-        },
+        { text: "Book Appointment", onClick: () => setShowAppointmentModal(true) },
+        { text: "Get Directions", href: "https://maps.google.com" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/high-angle-cane-antique-store_23-2149640760.jpg"
       mediaAnimation="slide-up"
     />
   </div>
 
+  {showAppointmentModal && (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
+      <div className="bg-white p-8 rounded-2xl w-full max-w-sm shadow-xl">
+        <h2 className="text-xl font-bold mb-4">Select Appointment</h2>
+        <select className="w-full p-3 mb-4 border rounded" onChange={(e) => setFormData({...formData, service: e.target.value})}>
+          <option value="">Choose Service</option>
+          <option value="Basic Haircut">Basic Haircut</option>
+          <option value="Shave">Shave</option>
+          <option value="Haircut and Beard Trim">Haircut & Beard Trim</option>
+        </select>
+        <input type="text" placeholder="Time (e.g. 10:00 AM)" className="w-full p-3 mb-4 border rounded" onChange={(e) => setFormData({...formData, time: e.target.value})} />
+        <div className="flex gap-2">
+          <button onClick={() => setShowAppointmentModal(false)} className="flex-1 py-2 border rounded">Cancel</button>
+          <button onClick={handleSendAppointment} className="flex-1 py-2 bg-blue-600 text-white rounded">Text Shop</button>
+        </div>
+      </div>
+    </div>
+  )}
+
   <div id="about" data-section="about">
       <AboutMetric
       useInvertedBackground={true}
       title="A Community Staple"
       metrics={[
-        {
-          icon: Star,
-          label: "Google Rating",
-          value: "4.5",
-        },
-        {
-          icon: Users,
-          label: "Friendly Staff",
-          value: "Pro",
-        },
-        {
-          icon: Clock,
-          label: "Est. Years",
-          value: "10+",
-        },
+        { icon: Star, label: "Google Rating", value: "4.5" },
+        { icon: Users, label: "Friendly Staff", value: "Pro" },
+        { icon: Clock, label: "Est. Years", value: "10+" },
       ]}
       metricsAnimation="slide-up"
     />
@@ -110,27 +104,9 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       features={[
-        {
-          title: "Precision Cuts",
-          description: "Tailored haircuts for men and boys.",
-          imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7331.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg",
-          buttonText: "Learn More",
-        },
-        {
-          title: "Beard Grooming",
-          description: "Expert beard trims and shaping.",
-          imageSrc: "http://img.b2bpic.net/free-photo/mature-man-barber-shop-close-up_23-2148465213.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/crop-barber-combing-beard-man_23-2147737053.jpg",
-          buttonText: "Learn More",
-        },
-        {
-          title: "Classic Shaves",
-          description: "Experience our signature hot towel shave.",
-          imageSrc: "http://img.b2bpic.net/free-photo/blue-razor-foam-shaving-brush-white-folded-napkin-against-wooden-surface_23-2148088540.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-hairdresser-massaging-young-customer-s-face-wrapped-towel-barbershop_181624-53211.jpg",
-          buttonText: "Learn More",
-        },
+        { title: "Precision Cuts", description: "Tailored haircuts for men and boys.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7331.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg", buttonText: "Learn More" },
+        { title: "Beard Grooming", description: "Expert beard trims and shaping.", imageSrc: "http://img.b2bpic.net/free-photo/mature-man-barber-shop-close-up_23-2148465213.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/crop-barber-combing-beard-man_23-2147737053.jpg", buttonText: "Learn More" },
+        { title: "Classic Shaves", description: "Experience our signature hot towel shave.", imageSrc: "http://img.b2bpic.net/free-photo/blue-razor-foam-shaving-brush-white-folded-napkin-against-wooden-surface_23-2148088540.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-hairdresser-massaging-young-customer-s-face-wrapped-towel-barbershop_181624-53211.jpg", buttonText: "Learn More" },
       ]}
       title="Professional Grooming"
       description="We specialize in modern and classic styles for the whole family."
@@ -143,41 +119,11 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       testimonials={[
-        {
-          id: "1",
-          name: "John D.",
-          handle: "@john",
-          testimonial: "Best shop in Ahwatukee, friendly staff!",
-          imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-using-dryer-beard-senior-client_23-2148181879.jpg",
-        },
-        {
-          id: "2",
-          name: "Sarah M.",
-          handle: "@sarah",
-          testimonial: "Great experience, good for the kids.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-posing-tropical-location-background-palm-trees-greenery_1321-1421.jpg",
-        },
-        {
-          id: "3",
-          name: "Mike R.",
-          handle: "@mike",
-          testimonial: "Old school vibes, modern precision.",
-          imageSrc: "http://img.b2bpic.net/free-photo/child-getting-haircut-salon_23-2150462519.jpg",
-        },
-        {
-          id: "4",
-          name: "David L.",
-          handle: "@david",
-          testimonial: "Quick, clean, and always welcoming.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-modern-man_23-2147986065.jpg",
-        },
-        {
-          id: "5",
-          name: "Emily K.",
-          handle: "@emily",
-          testimonial: "Finally found a barber I love.",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-brushed-salon_23-2148817182.jpg",
-        },
+        { id: "1", name: "John D.", handle: "@john", testimonial: "Best shop in Ahwatukee, friendly staff!", imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-using-dryer-beard-senior-client_23-2148181879.jpg" },
+        { id: "2", name: "Sarah M.", handle: "@sarah", testimonial: "Great experience, good for the kids.", imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-posing-tropical-location-background-palm-trees-greenery_1321-1421.jpg" },
+        { id: "3", name: "Mike R.", handle: "@mike", testimonial: "Old school vibes, modern precision.", imageSrc: "http://img.b2bpic.net/free-photo/child-getting-haircut-salon_23-2150462519.jpg" },
+        { id: "4", name: "David L.", handle: "@david", testimonial: "Quick, clean, and always welcoming.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-modern-man_23-2147986065.jpg" },
+        { id: "5", name: "Emily K.", handle: "@emily", testimonial: "Finally found a barber I love.", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-brushed-salon_23-2148817182.jpg" },
       ]}
       title="Customer Reviews"
       description="See why Phoenix trusts our shop."
@@ -191,27 +137,9 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",
-          value: "100%",
-          title: "Walk-ins",
-          description: "Always welcome.",
-          icon: UserPlus,
-        },
-        {
-          id: "m2",
-          value: "Family",
-          title: "Atmosphere",
-          description: "Friendly for kids.",
-          icon: Smile,
-        },
-        {
-          id: "m3",
-          value: "Daily",
-          title: "Service",
-          description: "Reliable hours.",
-          icon: Calendar,
-        },
+        { id: "m1", value: "100%", title: "Walk-ins", description: "Always welcome.", icon: UserPlus },
+        { id: "m2", value: "Family", title: "Atmosphere", description: "Friendly for kids.", icon: Smile },
+        { id: "m3", value: "Daily", title: "Service", description: "Reliable hours.", icon: Calendar },
       ]}
       title="Shop Highlights"
       description="Experience the quality and service that sets us apart in Phoenix."
@@ -222,21 +150,9 @@ export default function LandingPage() {
       <FaqSplitText
       useInvertedBackground={true}
       faqs={[
-        {
-          id: "f1",
-          title: "Do you accept walk-ins?",
-          content: "Yes, we prioritize walk-ins!",
-        },
-        {
-          id: "f2",
-          title: "Are you family friendly?",
-          content: "We love serving families and kids.",
-        },
-        {
-          id: "f3",
-          title: "Where are you located?",
-          content: "12020 S Warner Elliot Loop #118.",
-        },
+        { id: "f1", title: "Do you accept walk-ins?", content: "Yes, we prioritize walk-ins!" },
+        { id: "f2", title: "Are you family friendly?", content: "We love serving families and kids." },
+        { id: "f3", title: "Where are you located?", content: "12020 S Warner Elliot Loop #118." },
       ]}
       sideTitle="Shop FAQ"
       faqsAnimation="slide-up"
@@ -246,9 +162,7 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCenter
       useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
       tag="Visit Us"
       title="Ready for a cut?"
       description="Come see us at Equestrian Centre today."
@@ -260,28 +174,12 @@ export default function LandingPage() {
       imageSrc="http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185640.jpg"
       logoText="Ahwatukee Barbers"
       columns={[
-        {
-          title: "Visit",
-          items: [
-            {
-              label: "12020 S Warner Elliot Loop",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Connect",
-          items: [
-            {
-              label: "(480) 893-3256",
-              href: "tel:4808933256",
-            },
-          ],
-        },
+        { title: "Visit", items: [{ label: "12020 S Warner Elliot Loop", href: "#" }] },
+        { title: "Connect", items: [{ label: "(480) 893-3256", href: "tel:4808933256" }] },
       ]}
     />
   </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;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --background: #060000;
+  --card: #1d0d0d;
+  --foreground: #ffe6e6;
+  --primary-cta: #ff3d4a;
+  --primary-cta-text: #f7f6f7;
+  --secondary-cta: #1f0a0a;
+  --secondary-cta-text: #0c1325;
+  --accent: #7b2d2d;
+  --background-accent: #b8111f;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);