Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -4,15 +4,15 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import SplitAbout from '@/components/sections/about/SplitAbout';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import { Sparkles } from "lucide-react";
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 export default function LandingPage() {
   return (
@@ -77,7 +77,7 @@ export default function LandingPage() {
         {
           imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22303.jpg",          imageAlt: "Detailer polishing luxury car dashboard"},
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/man-holding-car-door-medium-shot_23-2149714260.jpg",          imageAlt: "Luxury car exterior waxing"},
+          imageSrc: "http://img.b2bpic.net/free-photo/man-holding-car-door-medium-shot_23-2149714260.jpg",          imageAlt: "Luxury car exterior waxing"}
       ]}
       autoplayDelay={4000}
       showDimOverlay={true}
@@ -101,7 +101,7 @@ export default function LandingPage() {
         {
           id: "f3",          title: "Leder & Polsterpflege",          author: "Fahrzeugpflege",          description: "Spezielle Reinigung und Pflege für Leder- und Stoffpolster, inklusive Geruchsneutralisierung.",          tags: [
             "Fahrzeug",            "Spezial"],
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-cancer-vacuuming-couch_23-2151056048.jpg",          imageAlt: "Car leather and upholstery cleaning"},
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-cancer-vacuuming-couch_23-2151056048.jpg",          imageAlt: "Car leather and upholstery cleaning"}
       ]}
       title="Unsere Dienstleistungen"
       description="Entdecken Sie unser umfassendes Angebot für die perfekte Pflege Ihres Fahrzeugs."
@@ -127,11 +127,12 @@ export default function LandingPage() {
         {
           title: "Tiefenreinigung",          description: "Eliminierung von Allergenen, Bakterien und Gerüchen aus der Tiefe des Gewebes."},
         {
-          title: "Frischer Duft",          description: "Verleihen Sie Ihren Polstern einen angenehmen, langanhaltenden Frischeduft."},
+          title: "Frischer Duft",          description: "Verleihen Sie Ihren Polstern einen angenehmen, langanhaltenden Frischeduft."}
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/man-doing-household-tasks_23-2151733227.jpg"
       imageAlt="Professional sofa and upholstery cleaning service"
       mediaAnimation="slide-up"
+      tagAnimation="slide-up"
     />
   </div>
 
@@ -148,11 +149,13 @@ export default function LandingPage() {
         {
           title: "Flexibel",          description: "Termine, die sich Ihrem Zeitplan anpassen. Einfach und unkompliziert."},
         {
-          title: "Zeitersparnis",          description: "Nutzen Sie Ihre Zeit für Wichtigeres, während wir uns um Ihr Fahrzeug kümmen."},
+          title: "Zeitersparnis",          description: "Nutzen Sie Ihre Zeit für Wichtigeres, während wir uns um Ihr Fahrzeug kümmen."}
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/man-polish-car-garage_1157-36576.jpg"
       imageAlt="PUREGLOSS mobile detailing van arriving at a client's location"
       mediaAnimation="slide-up"
+      tagAnimation="slide-up"
+      buttonAnimation="slide-up"
     />
   </div>
 
@@ -164,24 +167,19 @@ export default function LandingPage() {
       metrics={[
         {
           id: "m1",          value: "100%",          title: "Mobiler Service",          items: [
-            "Wir kommen direkt zu Ihnen",            "Bequem und flexibel"],
-        },
+            "Wir kommen direkt zu Ihnen",            "Bequem und flexibel"]},
         {
           id: "m2",          value: "Top",          title: "Professionelle Produkte",          items: [
-            "Hochwertige Pflegemittel",            "Schonend und effektiv"],
-        },
+            "Hochwertige Pflegemittel",            "Schonend und effektiv"]},
         {
           id: "m3",          value: "Fair",          title: "Faire Preise",          items: [
-            "Transparente Kosten",            "Keine versteckten Gebühren"],
-        },
+            "Transparente Kosten",            "Keine versteckten Gebühren"]},
         {
           id: "m4",          value: "Immer",          title: "Zuverlässigkeit",          items: [
-            "Pünktlich und gewissenhaft",            "Termineinhaltung garantiert"],
-        },
+            "Pünktlich und gewissenhaft",            "Termineinhaltung garantiert"]},
         {
           id: "m5",          value: "Ihre",          title: "Flexibilität",          items: [
-            "Termine nach Wunsch",            "Anpassung an Ihren Alltag"],
-        },
+            "Termine nach Wunsch",            "Anpassung an Ihren Alltag"]}
       ]}
       title="Warum PUREGLOSS wählen?"
       description="Entscheiden Sie sich für Qualität, Komfort und Service, der überzeugt."
@@ -198,11 +196,10 @@ export default function LandingPage() {
           id: "promo-june",          badge: "Exklusiv",          badgeIcon: Sparkles,
           price: "20% Rabatt",          subtitle: "auf alle Dienstleistungen",          buttons: [
             {
-              text: "Jetzt buchen",              href: "#contact"},
-          ],
+              text: "Jetzt buchen",              href: "#contact"}],
           features: [
-            "Gültig vom 01.06 bis 07.06",            "Für Neu- und Bestandskunden",            "Unverbindliche Beratung inklusive"],
-        },
+            "Gültig vom 01.06 bis 07.06",            "Für Neu- und Bestandskunden",            "Unverbindliche Beratung inklusive"]
+        }
       ]}
       title="Sonderangebot"
       description="Profitieren Sie jetzt von unserem exklusiven Angebot und lassen Sie Ihr Fahrzeug verwöhnen!"
@@ -227,7 +224,7 @@ export default function LandingPage() {
         {
           id: "before-after-5",          name: "Matte Lackierung Vorher/Nachher",          price: "Perfektion",          imageSrc: "http://img.b2bpic.net/free-photo/black-car-garage_417767-26.jpg",          imageAlt: "Deep black matte car paint restored after detailing"},
         {
-          id: "before-after-6",          name: "Lederpflege Vorher/Nachher",          price: "Eleganz",          imageSrc: "http://img.b2bpic.net/free-photo/woman-coffee-phone-car-business_1303-1959.jpg",          imageAlt: "Supple and restored car leather seats after conditioning"},
+          id: "before-after-6",          name: "Lederpflege Vorher/Nachher",          price: "Eleganz",          imageSrc: "http://img.b2bpic.net/free-photo/woman-coffee-phone-car-business_1303-1959.jpg",          imageAlt: "Supple and restored car leather seats after conditioning"}
       ]}
       title="Unsere Transformationen"
       description="Sehen Sie selbst, welche beeindruckenden Ergebnisse wir mit unserer professionellen Pflege erzielen."
@@ -235,13 +232,9 @@ export default function LandingPage() {
   </div>
 
   <div id="faq" data-section="faq">
-    <FaqSplitMedia
+    <FaqDouble
       textboxLayout="default"
       useInvertedBackground={false}
-      mediaPosition="left"
-      imageSrc="http://img.b2bpic.net/free-photo/young-woman-having-online-therapy-session_23-2151609149.jpg"
-      imageAlt="A woman thinking about questions and answers, representing FAQ"
-      mediaAnimation="slide-up"
       title="Häufig gestellte Fragen (FAQ)"
       description="Finden Sie hier Antworten auf die am häufigsten gestellten Fragen zu unseren Dienstleistungen, Preisen und unserem mobilen Service."
       faqsAnimation="slide-up"
@@ -281,24 +274,20 @@ export default function LandingPage() {
         variant: "sparkles-gradient"}}
       tag="Kontaktieren Sie uns"
       title="Ihre Anfrage ist uns wichtig"
-      description="Kontaktieren Sie uns noch heute für eine individuelle Beratung oder um einen Termin zu vereinbaren. Wir freuen uns darauf, von Ihnen zu hören!
-    Telefon: +49 123 456789
-    WhatsApp: +49 123 456789
-    Instagram: @puregloss_detailing
-    E-Mail: info@puregloss-detailing.de"
-      imageSrc="http://img.b2bpic.net/free-photo/modern-empty-room_23-2150528587.jpg"
-      imageAlt="Luxury car interior with a professional detailing contact form"
+      description="Kontaktieren Sie uns noch heute für eine individuelle Beratung oder um einen Termin zu vereinbaren. Wir freuen uns darauf, von Ihnen zu hören!\n    Telefon: +49 123 456789\n    WhatsApp: +49 123 456789\n    Instagram: @puregloss_detailing\n    E-Mail: info@puregloss-detailing.de"
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Exi6xjmnxJkVY6uh7ko2ehc9fk/uploaded-1781129042699-2bsrr3y7.png"
+      imageAlt="Luxurious car interior representing a contact point for a detailing service"
       mediaAnimation="slide-up"
       mediaPosition="right"
       inputPlaceholder="Ihre E-Mail Adresse"
       buttonText="Anfrage senden"
       termsText="Mit dem Absenden erklären Sie sich mit unseren Datenschutzbestimmungen einverstanden."
+      tagAnimation="slide-up"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
-      logoText="PUREGLOSS Mobile Detailing"
+      <FooterSimple
       columns={[
         {
           title: "PUREGLOSS",          items: [
@@ -309,8 +298,8 @@ export default function LandingPage() {
             {
               label: "FAQ",              href: "#faq"},
             {
-              label: "Kontakt",              href: "#contact"},
-          ],
+              label: "Kontakt",              href: "#contact"}
+          ]
         },
         {
           title: "Servicebereich",          items: [
@@ -319,8 +308,8 @@ export default function LandingPage() {
             {
               label: "Bonn",              href: "#mobileservice"},
             {
-              label: "Köln & Umgebung",              href: "#mobileservice"},
-          ],
+              label: "Köln & Umgebung",              href: "#mobileservice"}
+          ]
         },
         {
           title: "Social Media",          items: [
@@ -329,19 +318,20 @@ export default function LandingPage() {
             {
               label: "Instagram",              href: "https://instagram.com/puregloss_detailing"},
             {
-              label: "E-Mail",              href: "mailto:info@puregloss-detailing.de"},
-          ],
+              label: "E-Mail",              href: "mailto:info@puregloss-detailing.de"}
+          ]
         },
         {
           title: "Rechtliches",          items: [
             {
               label: "Impressum",              href: "#"},
             {
-              label: "Datenschutz",              href: "#"},
-          ],
-        },
+              label: "Datenschutz",              href: "#"}
+          ]
+        }
       ]}
-      copyrightText="© 2024 PUREGLOSS Mobile Detailing. Alle Rechte vorbehalten."
+      bottomLeftText="© 2024 PUREGLOSS Mobile Detailing. Alle Rechte vorbehalten."
+      bottomRightText=""
     />
   </div>
       </ReactLenis>

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-open-sans), sans-serif;
+  font-family: var(--font-dm-sans), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-open-sans), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
 }

src/app/styles/variables.css

@@ -10,13 +10,13 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0A0A0A;
-  --card: #1A1A1A;
-  --foreground: #F5F5F5;
+  --background: #121212;
+  --card: #2C3539;
+  --foreground: #ffffff;
   --primary-cta: #B79B5D;
-  --primary-cta-text: #0A0A0A;
-  --secondary-cta: #2C3539;
-  --secondary-cta-text: #F5F5F5;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #36454F;
+  --secondary-cta-text: #ffffff;
   --accent: #B79B5D;
   --background-accent: #36454F;