Merge version_1 into main

Merge version_1 into main

src/app/page.tsx

@@ -4,13 +4,11 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import ContactText from '@/components/sections/contact/ContactText';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import { Award, CheckCircle, Smile, Sparkles } from "lucide-react";
 
 export default function LandingPage() {
@@ -31,11 +29,14 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        { name: "Startseite", id: "hero" },
-        { name: "Leistungen", id: "services" },
-        { name: "Referenzen", id: "gallery" },
-        { name: "FAQ", id: "faq" },
-        { name: "Kontakt", id: "contact" },
+        {
+          name: "Startseite",          id: "hero"},
+        {
+          name: "Leistungen",          id: "services"},
+        {
+          name: "Kunden",          id: "testimonials"},
+        {
+          name: "Kontakt",          id: "contact"},
       ]}
       brandName="Icolor"
     />
@@ -43,14 +44,22 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitDualMedia
-      background={{ variant: "gradient-bars" }}
+      background={{
+        variant: "gradient-bars"}}
       title="Luxuriöse Räume mit Charakter."
-      description="Premium-Malerarbeiten für anspruchsvolle Privat- und Gewerbekunden in Goldbach & Aschaffenburg. Präzision und Qualität aus Meisterhand."
+      description="Premium-Malerarbeiten für anspruchsvolle Privat- und Gewerbekunden. Präzision, Zuverlässigkeit und hochwertige Oberflächen, die Eindruck machen."
       tag="Icolor Malerfachbetrieb e.K."
-      buttons={[{ text: "Angebot anfragen", href: "#contact" }]}
+      buttons={[
+        {
+          text: "Angebot anfragen",          href: "#contact"},
+        {
+          text: "Referenzen",          href: "#services"},
+      ]}
       mediaItems={[
-        { imageSrc: "http://img.b2bpic.net/free-photo/young-male-working-wood-engraving-workshop_23-2149185460.jpg?_wi=1", imageAlt: "Luxuriöse Innenraumgestaltung" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/young-male-working-wood-engraving-workshop_23-2149185460.jpg?_wi=2", imageAlt: "Hochwertiges Malerhandwerk" }
+        {
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C4ogs6lql7dbZd08yfGVqL37nH/uploaded-1775655049455-vedlku5j.png",          imageAlt: "Luxuriöse Innenraumgestaltung"},
+        {
+          imageSrc: "http://img.b2bpic.net/free-photo/young-male-working-wood-engraving-workshop_23-2149185460.jpg?_wi=2",          imageAlt: "Hochwertiges Malerhandwerk"}
       ]}
       mediaAnimation="blur-reveal"
       rating={5}
@@ -59,76 +68,124 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="journey" data-section="journey">
+  <div id="services" data-section="services">
+      <FeatureCardOne
+      animationType="slide-up"
+      textboxLayout="split"
+      gridVariant="uniform-all-items-equal"
+      useInvertedBackground={false}
+      features={[
+        {
+          title: "Innenraumgestaltung",          description: "Exklusive Konzepte für exklusive Wohnräume.",          imageSrc: "http://img.b2bpic.net/free-photo/young-male-working-wood-engraving-workshop_23-2149185460.jpg?_wi=3"},
+        {
+          title: "Fassaden & Werterhalt",          description: "Langlebiger Schutz für Ihre Immobilie.",          imageSrc: "http://img.b2bpic.net/free-photo/young-male-working-wood-engraving-workshop_23-2149185460.jpg?_wi=4"},
+        {
+          title: "Designtechniken",          description: "Moderne Spachtel- und Dekortechniken.",          imageSrc: "http://img.b2bpic.net/free-photo/young-male-working-wood-engraving-workshop_23-2149185460.jpg?_wi=5"},
+        {
+          title: "Tapezierarbeiten",          description: "Perfekte Oberflächen für jedes Design.",          imageSrc: "http://img.b2bpic.net/free-photo/young-male-working-wood-engraving-workshop_23-2149185460.jpg?_wi=6"},
+        {
+          title: "Sanierung",          description: "Zuverlässige Hilfe nach Schadenfällen.",          imageSrc: "http://img.b2bpic.net/free-photo/young-male-working-wood-engraving-workshop_23-2149185460.jpg?_wi=7"},
+        {
+          title: "Gewerbeflächen",          description: "Professionelle Gestaltung für Ihr Business.",          imageSrc: "http://img.b2bpic.net/free-photo/young-male-working-wood-engraving-workshop_23-2149185460.jpg?_wi=8"},
+      ]}
+      title="Alles aus einer Meisterhand"
+      description="Exklusive Leistungen für anspruchsvolle Projekte."
+    />
+  </div>
+
+  <div id="testimonials" data-section="testimonials">
+      <TestimonialCardFifteen
+      useInvertedBackground={true}
+      testimonial="Aus der Not geholfen, top zuverlässig, freundlich und einfach stark in der Umsetzung."
+      rating={5}
+      author="Spider Girl"
+      avatars={[
+        {
+          src: "http://img.b2bpic.net/free-photo/portrait-man-drinking-coffee-construction-side_329181-3771.jpg",          alt: "Kunde 1"},
+        {
+          src: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg",          alt: "Kunde 2"},
+        {
+          src: "http://img.b2bpic.net/free-photo/real-estate-fancy-font-concept_53876-124940.jpg",          alt: "Kunde 3"},
+        {
+          src: "http://img.b2bpic.net/free-photo/people-exchanging-goods-barter-event_23-2150208157.jpg",          alt: "Kunde 4"},
+        {
+          src: "http://img.b2bpic.net/free-photo/portrait-man-working-office_23-2150771045.jpg",          alt: "Kunde 5"},
+      ]}
+      ratingAnimation="slide-up"
+      avatarsAnimation="slide-up"
+    />
+  </div>
+
+  <div id="metric" data-section="metric">
       <MetricCardOne
       animationType="slide-up"
       textboxLayout="default"
       gridVariant="uniform-all-items-equal"
-      useInvertedBackground={true}
-      title="Unser 4-Schritte Prozess"
-      description="Von der ersten Beratung bis zur perfekten Übergabe."
+      useInvertedBackground={false}
+      title="Erfolge in Zahlen"
+      description="Qualität, die überzeugt und messbare Ergebnisse liefert."
       metrics={[
-        { id: "1", value: "01", title: "Beratung", description: "Vor-Ort-Besichtigung & Analyse.", icon: Sparkles },
-        { id: "2", value: "02", title: "Konzept", description: "Farb- & Materialberatung.", icon: Sparkles },
-        { id: "3", value: "03", title: "Umsetzung", description: "Präzise, saubere Ausführung.", icon: Sparkles },
-        { id: "4", value: "04", title: "Abnahme", description: "Glückliche Kunden garantiert.", icon: Sparkles },
+        {
+          id: "1",          value: "15+",          title: "Jahre Erfahrung",          description: "Handwerk aus Meisterhand.",          icon: Award,
+        },
+        {
+          id: "2",          value: "500+",          title: "Projekte",          description: "Erfolgreich umgesetzte Wohnräume.",          icon: CheckCircle,
+        },
+        {
+          id: "3",          value: "100%",          title: "Zufriedenheit",          description: "Weil Perfektion unser Standard ist.",          icon: Smile,
+        },
       ]}
     />
   </div>
 
-  <div id="gallery" data-section="gallery">
-    <FeatureCardOne
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
-      title="Vorher-Nachher Galerie"
-      description="Überzeugen Sie sich selbst von unseren Verwandlungen."
-      features={[
-        { title: "Wohnzimmer", description: "Von vergilbt zu modernem Glanz.", imageSrc: "http://img.b2bpic.net/free-photo/young-male-working-wood-engraving-workshop_23-2149185460.jpg?_wi=3" },
-        { title: "Fassade", description: "Wetterfester Schutz & Frische Optik.", imageSrc: "http://img.b2bpic.net/free-photo/young-male-working-wood-engraving-workshop_23-2149185460.jpg?_wi=4" }
-      ]}
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      title="Häufige Fragen"
-      description="Alles, was Sie über Icolor wissen müssen."
-      faqs={[
-        { id: "1", title: "Wo sind Sie tätig?", content: "Wir sind spezialisiert auf Goldbach, Aschaffenburg und Umgebung." },
-        { id: "2", title: "Wie schnell geht das?", content: "Wir planen zeitnah nach Ihren Terminvorgaben." },
-      ]}
-      faqsAnimation="slide-up"
-      textboxLayout="split"
-      imageSrc="http://img.b2bpic.net/free-photo/young-male-working-wood-engraving-workshop_23-2149185460.jpg?_wi=7"
-    />
-  </div>
-
   <div id="contact" data-section="contact">
       <ContactSplitForm
-      title="Premium-Angebot sichern"
-      description="Nur begrenzte Kapazitäten für diesen Monat verfügbar. Kontaktieren Sie uns jetzt!"
+      useInvertedBackground={false}
+      title="Machen Sie aus Wänden ein Statement."
+      description="Ideal für Eigentümer, Architekten und Unternehmen, die Wert auf höchste Qualität legen."
       inputs={[
-        { name: "name", type: "text", placeholder: "Ihr Name", required: true },
-        { name: "email", type: "email", placeholder: "Ihre E-Mail", required: true },
+        {
+          name: "name",          type: "text",          placeholder: "Ihr Name",          required: true,
+        },
+        {
+          name: "email",          type: "email",          placeholder: "Ihre E-Mail",          required: true,
+        },
       ]}
-      textarea={{ name: "message", placeholder: "Beschreiben Sie Ihr Projekt", rows: 4, required: true }}
+      textarea={{
+        name: "message",        placeholder: "Ihre Nachricht",        rows: 4,
+        required: true,
+      }}
       imageSrc="http://img.b2bpic.net/free-photo/young-male-working-wood-engraving-workshop_23-2149185460.jpg?_wi=9"
+      imageAlt="Kontaktformular Hintergrund"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterSimple
+      <FooterLogoEmphasis
       columns={[
-        { title: "Standort", items: [{ label: "Goldbach & Aschaffenburg" }] },
-        { title: "Kontakt", items: [{ label: "info@icolor-maler.de" }, { label: "06021 123456" }] },
-        { title: "Rechtliches", items: [{ label: "Impressum" }, { label: "Datenschutz" }] }
+        {
+          items: [
+            {
+              label: "Leistungen",              href: "#services"},
+            {
+              label: "Über uns",              href: "#"},
+            {
+              label: "Kontakt",              href: "#contact"},
+          ],
+        },
+        {
+          items: [
+            {
+              label: "Datenschutz",              href: "#"},
+            {
+              label: "Impressum",              href: "#"},
+          ],
+        },
       ]}
-      bottomLeftText="© 2024 Icolor Malerfachbetrieb e.K. Ruslan Ismayilov"
-      bottomRightText="Meisterbetrieb"
+      logoText="Icolor Malerfachbetrieb"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #f5f5f5;
-  --primary-cta: #ffdf7d;
+  --background: #f5f4ef;
+  --card: #dad6cd;
+  --foreground: #2a2928;
+  --primary-cta: #2a2928;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #ecebea;
   --secondary-cta-text: #2a2928;
-  --accent: #b8860b;
-  --background-accent: #8b6914;
+  --accent: #ffffff;
+  --background-accent: #c6b180;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);