Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -15,28 +15,24 @@ export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="background-highlight"
-        borderRadius="soft"
-        contentWidth="small"
-        sizing="largeSmallSizeLargeTitles"
-        background="floatingGradient"
-        cardStyle="glass-depth"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="largeSizeMediumTitles"
+        background="none"
+        cardStyle="outline"
         primaryButtonStyle="flat"
-        secondaryButtonStyle="layered"
+        secondaryButtonStyle="solid"
         headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Services",          id: "services"},
-        {
-          name: "About",          id: "about"},
-        {
-          name: "Reviews",          id: "reviews"},
-        {
-          name: "Contact",          id: "booking"},
+        { name: "Services", id: "services" },
+        { name: "About", id: "about" },
+        { name: "Reviews", id: "reviews" },
+        { name: "Contact", id: "booking" },
       ]}
       brandName="Master Fade"
     />
@@ -44,128 +40,40 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardTestimonial
-      background={{
-        variant: "radial-gradient"}}
+      background={{ variant: "radial-gradient" }}
       title="Master Fade Barbershop"
       description="Cloverdale, Perth — Est. in Excellence. Walk-in and experience master-level grooming at Perth's premier barbershop."
       testimonials={[
-        {
-          name: "David K.",          handle: "@davidk",          testimonial: "Best barbershop in Perth hands down. The atmosphere is unreal.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151500999.jpg?_wi=1",          imageAlt: "luxury barbershop interior dark aesthetic"},
-        {
-          name: "Michael S.",          handle: "@mikes",          testimonial: "Incredible fade, amazing service. This place is something special.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-cutting-client-s-hair_23-2148940859.jpg?_wi=1",          imageAlt: "barber cutting hair with scissors"},
-        {
-          name: "James R.",          handle: "@jamr",          testimonial: "Armando really listens to what you want and delivers every single time.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-razor-blade_23-2151102215.jpg?_wi=1",          imageAlt: "beard trim and shape"},
-        {
-          name: "Robert B.",          handle: "@robb",          testimonial: "Won't go anywhere else for my cuts. Elite work.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-cuts-his-beard-barbershop_1157-16152.jpg?_wi=1",          imageAlt: "full groom barber package"},
-        {
-          name: "Chris P.",          handle: "@chrisp",          testimonial: "Always professional, clean, and fast. The gold standard.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table_627829-6236.jpg?_wi=1",          imageAlt: "barbershop interior design gold"},
-      ]}
-      tag="Cloverdale, Perth"
-      buttons={[
-        {
-          text: "Book an Appointment",          href: "#booking"},
-        {
-          text: "View Services",          href: "#services"},
+        { name: "David K.", handle: "@davidk", testimonial: "Best barbershop in Perth hands down.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151500999.jpg?_wi=1", imageAlt: "luxury barbershop" },
+        { name: "Michael S.", handle: "@mikes", testimonial: "Incredible fade, amazing service.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-cutting-client-s-hair_23-2148940859.jpg?_wi=1", imageAlt: "barber cutting hair" }
       ]}
+      tag="Luxury Grooming"
+      buttons={[{ text: "Book Appointment", href: "#booking" }]}
       imageSrc="http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151500999.jpg?_wi=2"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-trimmer-showing-index-finger-number-one-being-amazed-standing-blue-wall_141793-96707.jpg",          alt: "Client 1"},
-        {
-          src: "http://img.b2bpic.net/free-photo/european-brutal-man-with-beard-cut-barbershop_343596-4697.jpg",          alt: "Client 2"},
-        {
-          src: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286080.jpg",          alt: "Client 3"},
-        {
-          src: "http://img.b2bpic.net/free-photo/experienced-tattoo-artist-front-his-studio_23-2149479271.jpg",          alt: "Client 4"},
-        {
-          src: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286016.jpg",          alt: "Client 5"},
-      ]}
-      marqueeItems={[
-        {
-          type: "text-icon",          text: "Precision Cuts",          icon: Scissors,
-        },
-        {
-          type: "text-icon",          text: "Hot Towel Shaves",          icon: Waves,
-        },
-        {
-          type: "text-icon",          text: "Master Barbers",          icon: Crown,
-        },
-        {
-          type: "text-icon",          text: "Premium Grooming",          icon: Sparkles,
-        },
-        {
-          type: "text-icon",          text: "Cloverdale Perth",          icon: MapPin,
-        },
-      ]}
     />
   </div>
 
   <div id="services" data-section="services">
       <FeatureCardTen
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
-          title: "Signature Fade",          description: "Precision skin fades, taper fades, and drop fades executed with surgical accuracy.",          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/man-cutting-client-s-hair_23-2148940859.jpg?_wi=2",            imageAlt: "happy client after haircut"
-          },
-          items: [
-            {
-              text: "Precision Cutting",              icon: Scissors,
-            },
-            {
-              text: "Sharp Fades",              icon: Sparkles,
-            },
-          ],
-          reverse: false,
-        },
-        {
-          title: "Beard Trim & Shape",          description: "Clean lines, shaped edges, and a hot towel finish for your beard.",          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-razor-blade_23-2151102215.jpg?_wi=2",            imageAlt: "happy client after haircut"
-          },
-          items: [
-            {
-              text: "Hot Towel Finish",              icon: Waves,
-            },
-            {
-              text: "Sharp Lines",              icon: Scissors,
-            },
-          ],
-          reverse: true,
-        },
-        {
-          title: "Full Groom Package",          description: "Cut, beard, hot towel, and styling. The complete master-level experience.",          media: {
-            imageSrc: "http://img.b2bpic.net/free-photo/man-cuts-his-beard-barbershop_1157-16152.jpg?_wi=2",            imageAlt: "happy client after haircut"
-          },
-          items: [
-            {
-              text: "Signature Cut",              icon: Crown,
-            },
-            {
-              text: "Beard Care",              icon: Sparkles,
-            },
-          ],
-          reverse: false,
-        },
+        { title: "Signature Fade", description: "Precision skin and taper fades.", media: { imageSrc: "http://img.b2bpic.net/free-photo/man-cutting-client-s-hair_23-2148940859.jpg?_wi=2" }, items: [{ icon: Scissors, text: "Precision" }], reverse: false },
+        { title: "Beard Trim", description: "Clean lines and hot towel.", media: { imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-razor-blade_23-2151102215.jpg?_wi=2" }, items: [{ icon: Waves, text: "Grooming" }], reverse: true }
       ]}
       title="Our Services"
-      description="Expert grooming services tailored to your style."
+      description="Minimalist grooming standards."
     />
   </div>
 
   <div id="about" data-section="about">
       <TestimonialAboutCard
       useInvertedBackground={false}
-      tag="Our Story"
+      tag="Craftsmanship"
       title="Where Craft Meets Character"
-      description="Master Fade Barbershop in Cloverdale isn't just a haircut — it's an experience. Every detail from the gold chairs to our design is intentional."
-      subdescription="Armando and the team bring skill, passion, and personality to every client. Walk-ins are always welcome, 7 days a week."
+      description="Master Fade in Cloverdale focuses on refined, minimalist barbering."
+      subdescription="Every cut is curated for your style."
       icon={Scissors}
       imageSrc="http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table_627829-6236.jpg?_wi=2"
       mediaAnimation="blur-reveal"
@@ -174,74 +82,38 @@ export default function LandingPage() {
 
   <div id="reviews" data-section="reviews">
       <TestimonialCardTwo
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",          name: "David K.",          role: "Google Client",          testimonial: "Best barbershop in Perth hands down. The atmosphere is elite.",          imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-trimmer-showing-index-finger-number-one-being-amazed-standing-blue-wall_141793-96707.jpg"},
-        {
-          id: "2",          name: "Michael S.",          role: "Google Client",          testimonial: "Incredible fade, amazing service. This place is something special.",          imageSrc: "http://img.b2bpic.net/free-photo/european-brutal-man-with-beard-cut-barbershop_343596-4697.jpg"},
-        {
-          id: "3",          name: "James R.",          role: "Google Client",          testimonial: "Armando really listens to what you want and delivers every single time.",          imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286080.jpg"},
-        {
-          id: "4",          name: "Robert B.",          role: "Google Client",          testimonial: "Won't go anywhere else for my cuts. Everything is perfect.",          imageSrc: "http://img.b2bpic.net/free-photo/experienced-tattoo-artist-front-his-studio_23-2149479271.jpg"},
-        {
-          id: "5",          name: "Chris P.",          role: "Google Client",          testimonial: "Always professional, clean, and fast. The gold standard in Perth.",          imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286016.jpg"},
+        { id: "1", name: "David K.", role: "Client", testimonial: "Pure luxury." },
+        { id: "2", name: "Michael S.", role: "Client", testimonial: "Perfect precision." }
       ]}
-      title="What Our Clients Say"
-      description="Join over 1,700 satisfied customers who have experienced our service."
+      title="Client Feedback"
+      description="Excellence in every detail."
     />
   </div>
 
   <div id="booking" data-section="booking">
       <ContactSplitForm
       useInvertedBackground={false}
-      title="Visit Our Shop"
-      description="Walk in anytime — no appointment necessary. We're open 7 days a week in Cloverdale."
+      title="Visit Us"
+      description="Located in the heart of Cloverdale."
       inputs={[
-        {
-          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
-        },
-        {
-          name: "phone",          type: "tel",          placeholder: "Your Phone",          required: true,
-        },
+        { name: "name", type: "text", placeholder: "Name", required: true },
+        { name: "email", type: "email", placeholder: "Email", required: true }
       ]}
-      buttonText="Check Hours"
       imageSrc="http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table_627829-6236.jpg?_wi=3"
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Services",              href: "#services"},
-            {
-              label: "About Us",              href: "#about"},
-            {
-              label: "Reviews",              href: "#reviews"},
-            {
-              label: "Contact",              href: "#booking"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Instagram",              href: "#"},
-            {
-              label: "Facebook",              href: "#"},
-            {
-              label: "Google Maps",              href: "#"},
-          ],
-        },
-      ]}
+      columns={[{ items: [{ label: "Home", href: "#" }, { label: "Book", href: "#booking" }] }]}
       logoText="Master Fade"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0A0A0A;
-  --card: #111111;
-  --foreground: #F5F0E8;
-  --primary-cta: #C9A84C;
+  --background: #FAFAFA;
+  --card: #F5F5F5;
+  --foreground: #1A1A1A;
+  --primary-cta: #000000;
   --primary-cta-text: #0A0A0A;
-  --secondary-cta: #1A1A1A;
+  --secondary-cta: #E5E5E5;
   --secondary-cta-text: #F5F0E8;
-  --accent: #8B6914;
-  --background-accent: #1A1A1A;
+  --accent: #A3A3A3;
+  --background-accent: #E5E5E5;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);