Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,14 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 import TextAbout from '@/components/sections/about/TextAbout';
+import { Calendar } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -29,18 +30,12 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",          id: "hero"},
+        { name: "About", id: "about" },
-        {
+        { name: "Services", id: "services" },
-          name: "About",          id: "about"},
+        { name: "Reviews", id: "reviews" },
-        {
+        { name: "Gallery", id: "gallery" },
-          name: "Services",          id: "services"},
+        { name: "Contact", id: "contact" },
-        {
-          name: "Reviews",          id: "reviews"},
-        {
-          name: "Gallery",          id: "gallery"},
-        {
-          name: "Contact",          id: "contact"},
       ]}
       brandName="Apex Cuts"
     />
@@ -48,39 +43,13 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboard
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars"}}
       title="Precision Cuts. Modern Style."
       description="Premium barber experience with modern fades, beard trims, and styling."
       buttons={[
-        {
+        { text: "Book Appointment", href: "#contact" },
-          text: "Book Appointment",          href: "#contact"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94799.jpg"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/barber-styling-hair-customer-with-mousse_23-2147778801.jpg",          alt: "Barber styling hair of customer with mousse"},
-        {
-          src: "http://img.b2bpic.net/free-photo/barber-shaves-bearded-man-vintage-atmosphere_1153-8495.jpg",          alt: "Barber shaves a bearded man in vintage atmosphere"},
-        {
-          src: "http://img.b2bpic.net/free-photo/developer-worried-by-conscious-artificial-intelligence-dooming-humanity-closeup_482257-93603.jpg",          alt: "Developer worried by conscious artificial intelligence dooming humanity closeup"},
-        {
-          src: "http://img.b2bpic.net/free-photo/barber-shaves-bearded-man-vintage-atmosphere_1153-8501.jpg",          alt: "Barber shaves a bearded man in vintage atmosphere"},
-        {
-          src: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94799.jpg",          alt: "Barber styling hair of customer with mousse"},
-      ]}
-      marqueeItems={[
-        {
-          type: "text",          text: "PRECISION FADES"},
-        {
-          type: "text",          text: "MODERN GROOMING"},
-        {
-          type: "text",          text: "LUXURY EXPERIENCE"},
-        {
-          type: "text",          text: "EXPERT STYLE"},
-        {
-          type: "text",          text: "SHARP LINES"},
-      ]}
     />
   </div>
 
@@ -98,28 +67,16 @@ export default function LandingPage() {
       useInvertedBackground={false}
       plans={[
         {
-          id: "s1",          name: "Skin Fade",          price: "$45",          features: [
+          id: "s1", name: "Skin Fade", price: "$45", features: ["Precision Taper", "Blade Work", "Hot Towel"],
-            "Precision Taper",            "Blade Work",            "Hot Towel"],
+          buttons: [{ text: "Select" }],
-          buttons: [
-            {
-              text: "Select"},
-          ],
         },
         {
-          id: "s2",          name: "Beard Trim",          price: "$30",          features: [
+          id: "s2", name: "Beard Trim", price: "$30", features: ["Shape & Line Up", "Beard Oil", "Razor Edge"],
-            "Shape & Line Up",            "Beard Oil",            "Razor Edge"],
+          buttons: [{ text: "Select" }],
-          buttons: [
-            {
-              text: "Select"},
-          ],
         },
         {
-          id: "s3",          name: "Full Service",          price: "$75",          features: [
+          id: "s3", name: "Full Service", price: "$75", features: ["Haircut & Beard", "Facial Treatment", "Style Consult"],
-            "Haircut & Beard",            "Facial Treatment",            "Style Consult"],
+          buttons: [{ text: "Select" }],
-          buttons: [
-            {
-              text: "Select"},
-          ],
         },
       ]}
       title="Our Services"
@@ -133,21 +90,8 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       testimonials={[
-        {
+        { id: "t1", name: "James L.", handle: "@jamesl", testimonial: "The best fade I have ever had. Professional, clean, and exact.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-businessman-model-dressed-elegant-light-blue-suit-white_158538-11397.jpg" },
-          id: "t1",          name: "James L.",          handle: "@jamesl",          testimonial: "The best fade I have ever had. Professional, clean, and exact.",          rating: 5,
+        { id: "t2", name: "Mark D.", handle: "@markd", testimonial: "Apex Cuts is my new go-to. Luxury treatment every single time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/profile-image-fashionable-young-hipster-guy-with-trendy-hairstyle-thick-ginger-beard_343059-3602.jpg" },
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-businessman-model-dressed-elegant-light-blue-suit-white_158538-11397.jpg"},
-        {
-          id: "t2",          name: "Mark D.",          handle: "@markd",          testimonial: "Apex Cuts is my new go-to. Luxury treatment every single time.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/profile-image-fashionable-young-hipster-guy-with-trendy-hairstyle-thick-ginger-beard_343059-3602.jpg"},
-        {
-          id: "t3",          name: "Robert S.",          handle: "@roberts",          testimonial: "Excellent service and great atmosphere. Highly recommended.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-walks-around-city_1321-4646.jpg"},
-        {
-          id: "t4",          name: "Kevin B.",          handle: "@kevinb",          testimonial: "Precision work. They really understand modern style.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-redhead-model-man-flannel-shirt-gray-background_613910-4140.jpg"},
-        {
-          id: "t5",          name: "Chris P.",          handle: "@chrisp",          testimonial: "Professional beard trim, top quality oil and service.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-traveler-male-dressed-fleece-shirt-wild-park-background_613910-12816.jpg"},
       ]}
       showRating={true}
       title="Customer Stories"
@@ -162,58 +106,42 @@ export default function LandingPage() {
       animationType="slide-up"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "p1", name: "Sharp Fade", price: "", variant: "Cut", imageSrc: "http://img.b2bpic.net/free-photo/indian-stylish-man-black-traditional-clothes-with-white-scarf-posed-outdoor-sitting-bench_627829-12682.jpg" },
-          id: "p1",          name: "Sharp Fade",          price: "",          variant: "Cut",          imageSrc: "http://img.b2bpic.net/free-photo/indian-stylish-man-black-traditional-clothes-with-white-scarf-posed-outdoor-sitting-bench_627829-12682.jpg"},
+        { id: "p2", name: "Beard Groom", price: "", variant: "Trim", imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-near-blurred-stylist_23-2147778876.jpg" },
-        {
+        { id: "p3", name: "Modern Style", price: "", variant: "Styling", imageSrc: "http://img.b2bpic.net/free-photo/close-up-barber-combing-moustache-client_23-2147778838.jpg" },
-          id: "p2",          name: "Beard Groom",          price: "",          variant: "Trim",          imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-near-blurred-stylist_23-2147778876.jpg"},
+        { id: "p4", name: "Shop Interior", price: "", variant: "Vibe", imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-with-before-hair-wash-hairdressers-salon_613910-14545.jpg" },
-        {
-          id: "p3",          name: "Modern Style",          price: "",          variant: "Styling",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-barber-combing-moustache-client_23-2147778838.jpg"},
-        {
-          id: "p4",          name: "Shop Interior",          price: "",          variant: "Vibe",          imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-with-before-hair-wash-hairdressers-salon_613910-14545.jpg"},
-        {
-          id: "p5",          name: "Precision Fade",          price: "",          variant: "Cut",          imageSrc: "http://img.b2bpic.net/free-photo/special-clean-up-after-shaving-process_23-2148298348.jpg"},
-        {
-          id: "p6",          name: "Detailed Trim",          price: "",          variant: "Beard",          imageSrc: "http://img.b2bpic.net/free-photo/half-face-portrait-bearded-man_23-2148176661.jpg"},
       ]}
-      title="Our Work"
+      title="Gallery"
-      description="Visual mastery in every cut."
+      description="Our visual mastery in every cut."
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactCTA
-      useInvertedBackground={true}
+      tag="Book Now"
-      background={{
+      tagIcon={Calendar}
-        variant: "radial-gradient"}}
+      title="Ready for a fresh look?"
-      text="Book your experience at Apex Cuts today. Located at 123 Groom St, City Center. Call us at (555) 123-4567. Open Tue-Sun."
+      description="Secure your spot at Apex Cuts. Whether it's a fade, beard trim, or full service, we are ready to help you look your best."
+      background={{ variant: "plain" }}
+      useInvertedBackground={false}
+      buttons={[
+        { text: "Book Online", href: "#" },
+        { text: "Call (555) 123-4567", href: "tel:5551234567" }
+      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterSimple
+      <FooterBaseReveal
+      logoText="Apex Cuts"
       columns={[
-        {
+        { title: "Services", items: [{ label: "Skin Fades", href: "#" }, { label: "Beard Grooming", href: "#" }] },
-          title: "Apex Cuts",          items: [
+        { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] }
-            {
-              label: "About Us",              href: "#about"},
-            {
-              label: "Services",              href: "#services"},
-          ],
-        },
-        {
-          title: "Contact",          items: [
-            {
-              label: "(555) 123-4567",              href: "tel:5551234567"},
-            {
-              label: "Instagram",              href: "#"},
-          ],
-        },
       ]}
-      bottomLeftText="© 2024 Apex Cuts. All rights reserved."
+      copyrightText="© 2024 Apex Cuts. All rights reserved."
-      bottomRightText="Privacy Policy"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -12,13 +12,13 @@
 
   --background: #0a0a0a;
   --card: #1a1a1a;
-  --foreground: #ffffffe6;
+  --foreground: #f5f5f5;
-  --primary-cta: #e6e6e6;
+  --primary-cta: #ffdf7d;
   --primary-cta-text: #0a0a0a;
   --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffffffe6;
-  --accent: #737373;
+  --accent: #b8860b;
-  --background-accent: #737373;
+  --background-accent: #8b6914;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);