Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -5,7 +5,7 @@ import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
@@ -32,26 +32,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "Services", id: "services" },
-          id: "hero",
+        { name: "Prices", id: "pricing" },
-        },
+        { name: "Team", id: "team" },
-        {
+        { name: "Contact", id: "contact" },
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Prices",
-          id: "pricing",
-        },
-        {
-          name: "Team",
-          id: "team",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="CHiC Salon"
     />
@@ -61,37 +46,14 @@ export default function LandingPage() {
       <HeroCarouselLogo
       logoText="CHiC Salon Erfurt"
       description="Experience the ultimate grooming journey in the heart of Erfurt. Precision cuts and traditional shaves."
-      buttons={[
+      buttons={[{ text: "Book Now", href: "#contact" }]}
-        {
-          text: "Book Now",
-          href: "#contact",
-        },
-      ]}
       slides={[
-        {
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kpupdf&_wi=1", imageAlt: "Barber shop atmosphere" },
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kpupdf&_wi=1",
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vmq5sq", imageAlt: "Barber shop atmosphere" },
-          imageAlt: "Barber shop atmosphere",
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=28ys7j", imageAlt: "Barber shop atmosphere" },
-        },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ui5fap", imageAlt: "Barber shop atmosphere" },
-        {
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qgd5pm", imageAlt: "Barber shop atmosphere" },
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vmq5sq",
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nzsh4o", imageAlt: "Barber shop atmosphere" },
-          imageAlt: "Barber shop atmosphere",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=28ys7j",
-          imageAlt: "Barber shop atmosphere",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ui5fap",
-          imageAlt: "Barber shop atmosphere",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qgd5pm",
-          imageAlt: "Barber shop atmosphere",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nzsh4o",
-          imageAlt: "Barber shop atmosphere",
-        },
       ]}
     />
   </div>
@@ -102,14 +64,8 @@ export default function LandingPage() {
       title="Mastery in Grooming"
       description="We blend traditional artistry with modern precision to provide unique grooming experiences."
       metrics={[
-        {
+        { value: "10+", title: "Years Experience" },
-          value: "10+",
+        { value: "5000+", title: "Happy Clients" },
-          title: "Years Experience",
-        },
-        {
-          value: "5000+",
-          title: "Happy Clients",
-        },
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1thwt6&_wi=1"
       imageAlt="Barber tools"
@@ -124,21 +80,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
+        { icon: Scissors, title: "Precision Cuts", description: "Customized haircuts for your lifestyle." },
-          icon: Scissors,
+        { icon: Sparkles, title: "Beard Grooming", description: "Hot towel treatment and beard shaping." },
-          title: "Precision Cuts",
+        { icon: Award, title: "Traditional Shave", description: "Premium straight razor shave experience." },
-          description: "Customized haircuts for your lifestyle.",
-        },
-        {
-          icon: Sparkles,
-          title: "Beard Grooming",
-          description: "Hot towel treatment and beard shaping.",
-        },
-        {
-          icon: Award,
-          title: "Traditional Shave",
-          description: "Premium straight razor shave experience.",
-        },
       ]}
       title="Our Signature Services"
       description="From classic shaves to contemporary style transformations."
@@ -151,57 +95,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       plans={[
-        {
+        { id: "basic", title: "Basic Cut", price: "35€", period: "Session", features: ["Haircut", "Consultation", "Styling"], button: { text: "Book", href: "#contact" }, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gn3k65&_wi=1" },
-          id: "basic",
+        { id: "pro", title: "Grooming Combo", price: "60€", period: "Session", features: ["Haircut", "Beard Trim", "Hot Towel"], button: { text: "Book", href: "#contact" }, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kpupdf&_wi=2" },
-          title: "Basic Cut",
+        { id: "premium", title: "Full Experience", price: "85€", period: "Session", features: ["Haircut", "Beard Trim", "Face Treatment"], button: { text: "Book", href: "#contact" }, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1thwt6&_wi=2" },
-          price: "35€",
-          period: "Session",
-          features: [
-            "Haircut",
-            "Consultation",
-            "Styling",
-          ],
-          button: {
-            text: "Book",
-            href: "#contact",
-          },
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gn3k65&_wi=1",
-          imageAlt: "grooming services icons",
-        },
-        {
-          id: "pro",
-          title: "Grooming Combo",
-          price: "60€",
-          period: "Session",
-          features: [
-            "Haircut",
-            "Beard Trim",
-            "Hot Towel",
-          ],
-          button: {
-            text: "Book",
-            href: "#contact",
-          },
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kpupdf&_wi=2",
-          imageAlt: "grooming services icons",
-        },
-        {
-          id: "premium",
-          title: "Full Experience",
-          price: "85€",
-          period: "Session",
-          features: [
-            "Haircut",
-            "Beard Trim",
-            "Face Treatment",
-          ],
-          button: {
-            text: "Book",
-            href: "#contact",
-          },
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1thwt6&_wi=2",
-          imageAlt: "grooming services icons",
-        },
       ]}
       title="Pricing Packages"
       description="Transparent pricing for high-quality service."
@@ -215,27 +111,9 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       members={[
-        {
+        { id: "m1", name: "Marc", role: "Head Barber", description: "Senior stylist with 10 years experience.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4pwczp&_wi=1" },
-          id: "m1",
+        { id: "m2", name: "Leon", role: "Barber", description: "Expert in modern fades.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c5vd6n" },
-          name: "Marc",
+        { id: "m3", name: "Sarah", role: "Barber", description: "Specialist in beard treatments.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zhyi31" },
-          role: "Head Barber",
-          description: "Senior stylist with 10 years experience.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4pwczp&_wi=1",
-        },
-        {
-          id: "m2",
-          name: "Leon",
-          role: "Barber",
-          description: "Expert in modern fades.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c5vd6n",
-        },
-        {
-          id: "m3",
-          name: "Sarah",
-          role: "Barber",
-          description: "Specialist in beard treatments.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zhyi31",
-        },
       ]}
       title="Meet Our Barbers"
       description="Expert hands shaping your look."
@@ -248,51 +126,11 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       testimonials={[
-        {
+        { id: "1", name: "Hans M.", handle: "@hans", testimonial: "Best service in Erfurt, very professional.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kpupdf&_wi=3" },
-          id: "1",
+        { id: "2", name: "Lucas P.", handle: "@lucas", testimonial: "Great attention to detail.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1thwt6&_wi=3" },
-          name: "Hans M.",
+        { id: "3", name: "Stefan W.", handle: "@stefan", testimonial: "CHiC Salon knows their craft.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gn3k65&_wi=2" },
-          handle: "@hans",
+        { id: "4", name: "Jan D.", handle: "@jan", testimonial: "The hot towel shave is a must-try.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4pwczp&_wi=2" },
-          testimonial: "Best service in Erfurt, very professional.",
+        { id: "5", name: "Thomas K.", handle: "@thomas", testimonial: "Consistent quality every single time.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=o6bmjl&_wi=1" },
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kpupdf&_wi=3",
-          imageAlt: "luxurious barber shop interior",
-        },
-        {
-          id: "2",
-          name: "Lucas P.",
-          handle: "@lucas",
-          testimonial: "Great attention to detail.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1thwt6&_wi=3",
-          imageAlt: "luxurious barber shop interior",
-        },
-        {
-          id: "3",
-          name: "Stefan W.",
-          handle: "@stefan",
-          testimonial: "CHiC Salon knows their craft.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gn3k65&_wi=2",
-          imageAlt: "luxurious barber shop interior",
-        },
-        {
-          id: "4",
-          name: "Jan D.",
-          handle: "@jan",
-          testimonial: "The hot towel shave is a must-try.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4pwczp&_wi=2",
-          imageAlt: "luxurious barber shop interior",
-        },
-        {
-          id: "5",
-          name: "Thomas K.",
-          handle: "@thomas",
-          testimonial: "Consistent quality every single time.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=o6bmjl&_wi=1",
-          imageAlt: "luxurious barber shop interior",
-        },
       ]}
       showRating={true}
       title="What Our Clients Say"
@@ -305,21 +143,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       faqs={[
-        {
+        { id: "q1", title: "Do I need an appointment?", content: "Yes, we recommend booking online." },
-          id: "q1",
+        { id: "q2", title: "Where are you located?", content: "Central Erfurt, details below." },
-          title: "Do I need an appointment?",
+        { id: "q3", title: "Do you accept walk-ins?", content: "Subject to availability." },
-          content: "Yes, we recommend booking online.",
-        },
-        {
-          id: "q2",
-          title: "Where are you located?",
-          content: "Central Erfurt, details below.",
-        },
-        {
-          id: "q3",
-          title: "Do you accept walk-ins?",
-          content: "Subject to availability.",
-        },
       ]}
       title="Frequent Questions"
       description="Everything you need to know about our salon."
@@ -333,53 +159,29 @@ export default function LandingPage() {
       title="Book Your Visit"
       description="Get in touch and let's define your new look."
       inputs={[
-        {
+        { name: "name", type: "text", placeholder: "Your Name" },
-          name: "name",
+        { name: "email", type: "email", placeholder: "Your Email" },
-          type: "text",
-          placeholder: "Your Name",
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Your Email",
-        },
       ]}
-      textarea={{
+      textarea={{ name: "msg", placeholder: "Appointment Request" }}
-        name: "msg",
-        placeholder: "Appointment Request",
-      }}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=o6bmjl&_wi=2"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
+      <FooterMedia
       logoText="CHiC Salon"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kpupdf&_wi=1"
       columns={[
         {
-          title: "Links",
+          title: "Links",          items: [
-          items: [
+            { label: "About", href: "#services" },
-            {
+            { label: "Prices", href: "#pricing" },
-              label: "About",
-              href: "#services",
-            },
-            {
-              label: "Prices",
-              href: "#pricing",
-            },
           ],
         },
         {
-          title: "Contact",
+          title: "Contact",          items: [
-          items: [
+            { label: "Erfurt, Germany", href: "#" },
-            {
+            { label: "0361-12345", href: "tel:036112345" },
-              label: "Erfurt, Germany",
-              href: "#",
-            },
-            {
-              label: "0361-12345",
-              href: "tel:036112345",
-            },
           ],
         },
       ]}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
+  --background: #121212;
-  --card: #dad6cd;
+  --card: #1a1a1a;
-  --foreground: #2a2928;
+  --foreground: #e5e5e5;
-  --primary-cta: #2a2928;
+  --primary-cta: #c5a059;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #2a2a2a;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
+  --accent: #c5a059;
-  --background-accent: #c6b180;
+  --background-accent: #2a2928;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);