Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -3,13 +3,13 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
+import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import { Coffee, Palette, Scissors } from "lucide-react";
+import { Palette, Scissors } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -29,14 +29,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
+        { name: "About", id: "about" },
-          name: "About",          id: "about"},
+        { name: "Services", id: "services" },
-        {
+        { name: "Reviews", id: "reviews" },
-          name: "Services",          id: "services"},
+        { name: "Contact", id: "contact" },
-        {
-          name: "Reviews",          id: "reviews"},
-        {
-          name: "Contact",          id: "contact"},
       ]}
       brandName="Ernesto's"
     />
@@ -46,158 +42,86 @@ export default function LandingPage() {
       <HeroOverlayTestimonial
       title="Ernesto's Hairstyling"
       description="Expert haircuts and coloring in a comfortable, neighborhood atmosphere. Serving Washington, DC with professional care since 1994."
-      testimonials={[
+      testimonials={[]}
-        {
+      buttons={[{ text: "Book Appointment", href: "#contact" }]}
-          name: "Jackson P.",          handle: "Washington, DC",          testimonial: "You can't get a better haircut for a better price anywhere. Comfortable and wonderful people.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-woman-talking-smartphone-armchair-office_23-2148042626.jpg?_wi=1",          imageAlt: "elegant hair salon interior"},
-        {
-          name: "Heidi M.",          handle: "Northwest, DC",          testimonial: "Ernesto is quick, methodical and gives an excellent cut at a fair price. Hard to find vibe!",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/adult-hairdresser-shaving-customers-beard-hair-salon_23-2148181971.jpg",          imageAlt: "professional barber at work"},
-        {
-          name: "Sarah L.",          handle: "Capitol Hill, DC",          testimonial: "The best neighborhood salon I've ever visited. Truly personal service.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-washing-woman-s-hair_23-2148940880.jpg?_wi=1",          imageAlt: "professional hair coloring service"},
-        {
-          name: "David W.",          handle: "Dupont Circle, DC",          testimonial: "Consistent, professional, and friendly. I wouldn't go anywhere else.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-cuts-hair-barbershop_1157-15500.jpg?_wi=1",          imageAlt: "precision hair trim"},
-        {
-          name: "Maria G.",          handle: "Georgetown, DC",          testimonial: "Exquisite coloring skills and such a warm, inviting environment.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/mirror-hairdressing-salon_23-2147670185.jpg?_wi=1",          imageAlt: "happy customer after hair service"},
-      ]}
-      buttons={[
-        {
-          text: "Book Appointment",          href: "#contact"},
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/smiling-african-american-woman-talking-smartphone-armchair-office_23-2148042626.jpg?_wi=2"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575478.jpg",          alt: "Customer 1"},
-        {
-          src: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186462.jpg",          alt: "Customer 2"},
-        {
-          src: "http://img.b2bpic.net/free-photo/excited-girlfriends-sharing-with-news_23-2147762524.jpg",          alt: "Customer 3"},
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-happy-young-man-bed_23-2147862652.jpg",          alt: "Customer 4"},
-        {
-          src: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230961.jpg",          alt: "Customer 5"},
-      ]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <TextSplitAbout
+      <TeamCardEleven
-      useInvertedBackground={false}
+        title="Our Stylists"
-      title="A Community Staple"
+        description="Meet the experts behind your perfect look. Ernesto and Adriana bring decades of professional passion to every client visit."
-      description={[
+        textboxLayout="split"
-        "Located in the heart of Washington, DC, Ernesto's has been a community favorite for decades. We pride ourselves on providing high-quality, professional services in a friendly, relaxed setting.",        "Whether you need a precise cut, expert coloring, or just a friendly conversation, our neighborhood salon is the place for you. We offer convenient access by metro or car, and always strive to make your visit a positive, refreshing experience."]}
+        useInvertedBackground={false}
-    />
+        animationType="slide-up"
+        groups={[
+          {
+            id: "team",            groupTitle: "The Team",            members: [
+              { id: "ernesto", title: "Ernesto", subtitle: "Lead Stylist", detail: "With over 30 years of experience, Ernesto specializes in precision cuts and classic styling." },
+              { id: "adriana", title: "Adriana", subtitle: "Color Expert", detail: "Adriana brings artistic flair to all coloring services, ensuring vibrant and healthy results." }
+            ]
+          }
+        ]}
+      />
   </div>
 
   <div id="services" data-section="services">
-      <FeatureCardTwentyFive
+      <FeatureCardTwentyNine
-      animationType="slide-up"
+        title="Our Services"
-      textboxLayout="split"
+        description="Professional hair care tailored to you."
-      useInvertedBackground={false}
+        textboxLayout="split"
-      features={[
+        gridVariant="uniform-all-items-equal"
-        {
+        animationType="slide-up"
-          title: "Expert Coloring",          description: "Customized color treatments using high-quality products for long-lasting vibrancy.",          icon: Palette,
+        useInvertedBackground={false}
-          mediaItems: [
+        features={[
-            {
+          { title: "Precision Cuts", description: "Tailored haircuts for every style.", imageSrc: "http://img.b2bpic.net/free-photo/man-cuts-hair-barbershop_1157-15500.jpg?_wi=1", titleIconSrc: "", buttonText: "Book Now", buttonHref: "#contact" },
-              imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-washing-woman-s-hair_23-2148940880.jpg?_wi=2",              imageAlt: "Coloring service"},
+          { title: "Expert Color", description: "High-quality professional color treatments.", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-washing-woman-s-hair_23-2148940880.jpg?_wi=1", titleIconSrc: "", buttonText: "Book Now", buttonHref: "#contact" },
-            {
+          { title: "Styling", description: "Professional blowouts and styling.", imageSrc: "http://img.b2bpic.net/free-photo/mirror-hairdressing-salon_23-2147670185.jpg?_wi=1", titleIconSrc: "", buttonText: "Book Now", buttonHref: "#contact" },
-              imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-washing-woman-s-hair_23-2148940880.jpg?_wi=3",              imageAlt: "Coloring service"},
+          { title: "Treatments", description: "Nourishing hair health treatments.", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230961.jpg?_wi=1", titleIconSrc: "", buttonText: "Book Now", buttonHref: "#contact" },
-          ],
+          { title: "Consultation", description: "Personalized style assessments.", imageSrc: "http://img.b2bpic.net/free-photo/adult-hairdresser-shaving-customers-beard-hair-salon_23-2148181971.jpg", titleIconSrc: "", buttonText: "Book Now", buttonHref: "#contact" },
-        },
+          { title: "Maintenance", description: "Keep your look fresh and vibrant.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-man-bed_23-2147862652.jpg", titleIconSrc: "", buttonText: "Book Now", buttonHref: "#contact" }
-        {
+        ]}
-          title: "Precision Cutting",          description: "Methodical, professional cuts adapted to your personal style and preferences.",          icon: Scissors,
+      />
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/man-cuts-hair-barbershop_1157-15500.jpg?_wi=2",              imageAlt: "Hair cutting"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/man-cuts-hair-barbershop_1157-15500.jpg?_wi=3",              imageAlt: "Hair cutting"},
-          ],
-        },
-        {
-          title: "Relaxed Atmosphere",          description: "A comfortable, neighborhood vibe that makes your salon visit a truly positive break.",          icon: Coffee,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/mirror-hairdressing-salon_23-2147670185.jpg?_wi=2",              imageAlt: "Salon vibe"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/mirror-hairdressing-salon_23-2147670185.jpg?_wi=3",              imageAlt: "Salon vibe"},
-          ],
-        },
-      ]}
-      title="Our Services"
-      description="Professional hair services tailored to your needs by our experienced staff."
-    />
   </div>
 
   <div id="reviews" data-section="reviews">
-      <TestimonialCardFifteen
+      <TestimonialCardTen
-      useInvertedBackground={false}
+        title="Customer Experiences"
-      testimonial="I have been going to Ernesto's for several years. The services are very professionally rendered and the shop is always very pleasant and clean. It is a community fixture."
+        description="See why our neighborhood loves us."
-      rating={5}
+        textboxLayout="split"
-      author="Lea N."
+        useInvertedBackground={false}
-      avatars={[
+        testimonials={[
-        {
+          { id: "1", title: "Excellent Service", quote: "Truly the best neighborhood salon.", name: "Sarah L.", role: "Local Resident" },
-          src: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575478.jpg",          alt: "Reviewer"},
+          { id: "2", title: "Professional", quote: "Ernesto is incredibly methodical and skilled.", name: "Heidi M.", role: "Local Resident" },
-        {
+          { id: "3", title: "Consistent", quote: "I wouldn't go anywhere else.", name: "David W.", role: "Local Resident" }
-          src: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186462.jpg",          alt: "Reviewer"},
+        ]}
-        {
+      />
-          src: "http://img.b2bpic.net/free-photo/excited-girlfriends-sharing-with-news_23-2147762524.jpg",          alt: "Reviewer"},
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-happy-young-man-bed_23-2147862652.jpg",          alt: "Reviewer"},
-        {
-          src: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230961.jpg",          alt: "Reviewer"},
-      ]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="slide-up"
-    />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={true}
-      background={{
+      background={{ variant: "sparkles-gradient" }}
-        variant: "plain"}}
+      tag="Ready to visit?"
-      tag="Visit Us"
       title="Book Your Appointment"
-      description="Experience our professional hairstyling today. Call us to schedule your visit or find out about our current services."
+      description="Call us at 202-686-0580 to schedule your next visit. We have dedicated parking available behind the building for your convenience."
-      buttons={[
+      buttons={[{ text: "Call 202-686-0580", href: "tel:+12026860580" }]}
-        {
-          text: "Call to Book",          href: "tel:+12025550199"},
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
-        {
+        { title: "Location", items: [{ label: "Washington, DC" }, { label: "Parking Available" }] },
-          title: "Ernesto's Hairstyling",          items: [
+        { title: "Contact", items: [{ label: "(202) 686-0580", href: "tel:+12026860580" }, { label: "Get Directions" }] },
-            {
+        { title: "Quick Links", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }, { label: "Reviews", href: "#reviews" }, { label: "Contact", href: "#contact" }] },
-              label: "Washington, DC",              href: "#"},
-            {
-              label: "Phone: (202) 555-0199",              href: "tel:+12025550199"},
-          ],
-        },
-        {
-          title: "Links",          items: [
-            {
-              label: "About",              href: "#about"},
-            {
-              label: "Services",              href: "#services"},
-            {
-              label: "Reviews",              href: "#reviews"},
-            {
-              label: "Contact",              href: "#contact"},
-          ],
-        },
       ]}
       bottomLeftText="© 2025 Ernesto's Hairstyling"
-      bottomRightText="Built with passion in Washington, DC"
+      bottomRightText="Serving DC Since 1994"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
+  --background: #f6f0e9;
-  --card: #dad6cd;
+  --card: #efe7dd;
-  --foreground: #2a2928;
+  --foreground: #2b180a;
-  --primary-cta: #2a2928;
+  --primary-cta: #2b180a;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #efe7dd;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
+  --accent: #94877c;
-  --background-accent: #c6b180;
+  --background-accent: #afa094;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);