Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -3,16 +3,15 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
-import FooterCard from '@/components/sections/footer/FooterCard';
-import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import { ThumbsUp, Trash2, Truck } from "lucide-react";
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
+import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import SplitAbout from '@/components/sections/about/SplitAbout';
 
 export default function LandingPage() {
   return (
@@ -20,341 +19,156 @@ export default function LandingPage() {
         defaultButtonVariant="icon-arrow"
         defaultTextAnimation="entrance-slide"
         borderRadius="rounded"
-        contentWidth="small"
-        sizing="largeSmall"
+        contentWidth="medium"
+        sizing="largeSizeMediumTitles"
         background="noise"
-        cardStyle="solid"
-        primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="solid"
-        headingFontWeight="bold"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
+      <NavbarStyleApple
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Leistungen",
-          id: "features",
-        },
-        {
-          name: "Preise",
-          id: "pricing",
-        },
-        {
-          name: "Kontakt",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "Leistungen", id: "features" },
+        { name: "Preise", id: "pricing" },
+        { name: "Kontakt", id: "contact" },
       ]}
       brandName="Trageprofi"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplitKpi
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Ihr Trageprofi in Baden-Baden"
+      <HeroLogoBillboard
+      background={{ variant: "sparkles-gradient" }}
+      logoText="Ihr Trageprofi"
       description="Zuverlässige Entrümpelungen & Umzüge mit Handschlag-Qualität. Wir erledigen das für Sie – schnell, sicher und fair."
-      kpis={[
-        {
-          value: "100%",
-          label: "Kundenzufriedenheit",
-        },
-        {
-          value: "24/7",
-          label: "Erreichbar",
-        },
-        {
-          value: "15+",
-          label: "Jahre Erfahrung",
-        },
-      ]}
-      enableKpiAnimation={true}
       buttons={[
-        {
-          text: "Jetzt Angebot anfordern",
-          href: "#contact",
-        },
+        { text: "Angebot anfordern", href: "#contact" },
+        { text: "Mehr erfahren", href: "#about" }
       ]}
+      buttonAnimation="slide-up"
       imageSrc="http://img.b2bpic.net/free-photo/front-view-delivery-man-with-packagaes_23-2148684738.jpg"
-      imageAlt="Trageprofi Team Baden-Baden"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/man-woman-with-boxes_23-2147694381.jpg",
-          alt: "Man and woman with boxes",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-delivery-man-with-boxes_23-2149035950.jpg",
-          alt: "Close up delivery man with boxes",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/person-presenting-their-job-resignation_23-2149445185.jpg",
-          alt: "Person presenting their job resignation",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/front-view-smiley-man-holding-boxes_23-2148273279.jpg",
-          alt: "Front view smiley man holding boxes",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/front-view-delivery-man-with-packagaes_23-2148684738.jpg",
-          alt: "moving company team professional",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Entrümpelung",
-        },
-        {
-          type: "text",
-          text: "Umzugsservice",
-        },
-        {
-          type: "text",
-          text: "Besenrein",
-        },
-        {
-          type: "text",
-          text: "Baden-Baden",
-        },
-        {
-          type: "text",
-          text: "Diskrete Abwicklung",
-        },
-      ]}
+      mediaAnimation="blur-reveal"
     />
   </div>
 
   <div id="about" data-section="about">
-      <TextSplitAbout
+      <SplitAbout
       useInvertedBackground={false}
       title="Warum Trageprofi?"
-      description={[
-        "Wir verstehen, dass ein Umzug oder eine Entrümpelung oft stressig ist. In Baden-Baden sind wir als Trageprofi Ihre erste Adresse für fachgerechte Unterstützung.",
-        "Unsere Experten arbeiten diskret, schnell und räumen auf, als wäre es ihr eigenes Zuhause.",
-      ]}
-      buttons={[
-        {
-          text: "Über uns erfahren",
-          href: "#contact",
-        },
+      description="Wir verstehen, dass ein Umzug oder eine Entrümpelung oft stressig ist. In Baden-Baden sind wir als Trageprofi Ihre erste Adresse für fachgerechte Unterstützung. Unsere Experten arbeiten diskret, schnell und räumen auf, als wäre es ihr eigenes Zuhause."
+      textboxLayout="split"
+      bulletPoints={[
+        { title: "Diskretion", description: "Fachgerechte Abwicklung ohne viel Aufsehen." },
+        { title: "Geschwindigkeit", description: "Wir arbeiten effizient und termintreu." },
+        { title: "Qualität", description: "Sauberkeit ist unser Standard." }
       ]}
+      buttons={[{ text: "Jetzt Kontakt aufnehmen", href: "#contact" }]}
+      buttonAnimation="slide-up"
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardOne
+      <FeatureCardTwentyFour
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
-      features={[
-        {
-          title: "Entrümpelung",
-          description: "Von der Garage bis zum Dachboden – wir machen Platz.",
-          imageSrc: "http://img.b2bpic.net/free-photo/courier-doing-jobs-logistics_23-2149229211.jpg",
-        },
-        {
-          title: "Umzüge",
-          description: "Sicherer Transport von Möbeln und Hab und Gut.",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working_23-2148902557.jpg",
-        },
-        {
-          title: "Fachgerechte Entsorgung",
-          description: "Umweltbewusste Trennung und Entsorgung aller Materialien.",
-          imageSrc: "http://img.b2bpic.net/free-photo/sustainable-development-goals-still-life_23-2150196655.jpg",
-        },
-      ]}
       title="Unsere Leistungen"
       description="Wir packen an, wo Sie Entlastung brauchen."
+      features={[
+        { id: "f1", title: "Entrümpelung", author: "Professionell", description: "Von der Garage bis zum Dachboden – wir machen Platz.", tags: ["Privat", "Gewerbe"], imageSrc: "http://img.b2bpic.net/free-photo/courier-doing-jobs-logistics_23-2149229211.jpg" },
+        { id: "f2", title: "Umzüge", author: "Sicher", description: "Sicherer Transport von Möbeln und Hab und Gut.", tags: ["Nah", "Fern"], imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working_23-2148902557.jpg" },
+        { id: "f3", title: "Entsorgung", author: "Umweltbewusst", description: "Fachgerechte Trennung und Entsorgung aller Materialien.", tags: ["Eco"], imageSrc: "http://img.b2bpic.net/free-photo/sustainable-development-goals-still-life_23-2150196655.jpg" },
+      ]}
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardOne
+      <MetricCardTwo
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          value: "500+",
-          title: "Umzüge",
-          description: "Glückliche Kunden in Baden-Baden",
-          icon: Truck,
-        },
-        {
-          id: "m2",
-          value: "1200+",
-          title: "Entrümpelungen",
-          description: "Besenrein und sauber",
-          icon: Trash2,
-        },
-        {
-          id: "m3",
-          value: "98%",
-          title: "Weiterempfehlung",
-          description: "Durch unsere Qualität überzeugt",
-          icon: ThumbsUp,
-        },
-      ]}
+      gridVariant="bento-grid"
+      useInvertedBackground={true}
       title="Erfahrung, die zählt"
       description="Erfolgreich abgewickelte Projekte in unserer Region."
+      metrics={[
+        { id: "m1", value: "500+", description: "Glückliche Umzugskunden" },
+        { id: "m2", value: "1200+", description: "Besenreine Entrümpelungen" },
+        { id: "m3", value: "98%", description: "Weiterempfehlungsrate" },
+      ]}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
+      <TestimonialCardSix
+      animationType="blur-reveal"
+      title="Stimmen unserer Kunden"
+      description="Erfahrungsberichte aus der Region."
+      textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",
-          name: "Familie Müller",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-married-people-moving-rented-apartment-flat-starting-new-beginnings-future-feeling-positive-about-relocation-household-carrying-carton-containers-packages_482257-42552.jpg",
-        },
-        {
-          id: "2",
-          name: "Herr Schmidt",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-family-moving-into-new-home_23-2149196337.jpg",
-        },
-        {
-          id: "3",
-          name: "Frau Fischer",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-woman-decorating-new-living-room_329181-243.jpg",
-        },
-        {
-          id: "4",
-          name: "Max B.",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-latin-woman-unpacking-things-her-new-apartment-opening-carton-box_74855-10209.jpg",
-        },
-        {
-          id: "5",
-          name: "Anja K.",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-couple-carrying-cardboard-boxes-new-home_329181-145.jpg",
-        },
+        { id: "1", name: "Familie Müller", handle: "@kunden", testimonial: "Hervorragender Service, sehr schnell!" },
+        { id: "2", name: "Herr Schmidt", handle: "@kunden", testimonial: "Alles bestens gelaufen, sehr ordentlich." },
+        { id: "3", name: "Frau Fischer", handle: "@kunden", testimonial: "Vielen Dank für die schnelle Hilfe." },
       ]}
-      cardTitle="Stimmen unserer Kunden"
-      cardTag="Erfahrungsberichte"
-      cardAnimation="blur-reveal"
     />
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardTwo
+      <PricingCardThree
       animationType="slide-up"
-      textboxLayout="default"
+      textboxLayout="split"
       useInvertedBackground={false}
+      title="Transparente Preise"
+      description="Passende Pakete für jede Anforderung."
       plans={[
-        {
-          id: "basic",
-          badge: "Small",
-          price: "ab 299€",
-          subtitle: "Kleine Entrümpelung",
-          buttons: [
-            {
-              text: "Buchen",
-              href: "#contact",
-            },
-          ],
-          features: [
-            "1-2 Räume",
-            "Bis zu 2 Tonnen",
-            "Besenrein",
-          ],
-        },
-        {
-          id: "standard",
-          badge: "Standard",
-          price: "ab 599€",
-          subtitle: "Kompletter Umzug",
-          buttons: [
-            {
-              text: "Buchen",
-              href: "#contact",
-            },
-          ],
-          features: [
-            "3 Zimmer Wohnung",
-            "Inkl. Transport",
-            "Versicherung inklusive",
-          ],
-        },
-        {
-          id: "premium",
-          badge: "Full Service",
-          price: "Individuell",
-          subtitle: "Sorglos Paket",
-          buttons: [
-            {
-              text: "Beratung",
-              href: "#contact",
-            },
-          ],
-          features: [
-            "Kompletthaus",
-            "Entrümpelung & Reinigung",
-            "Priority Service",
-          ],
-        },
+        { id: "basic", name: "Small", price: "Anfrage", features: ["1-2 Räume", "Bis 2 Tonnen", "Besenrein"], buttons: [{ text: "Buchen", href: "#contact" }] },
+        { id: "standard", name: "Standard", price: "Anfrage", features: ["3 Zimmer Wohnung", "Inkl. Transport", "Versicherung inkl."], buttons: [{ text: "Buchen", href: "#contact" }] },
+        { id: "premium", name: "Full Service", price: "Anfrage", features: ["Kompletthaus", "Entrümpelung & Reinigung", "Priority"], buttons: [{ text: "Beratung", href: "#contact" }] },
       ]}
-      title="Faire Preise"
-      description="Transparente Kosten ohne versteckte Gebühren."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",
-          title: "Wie schnell sind Termine möglich?",
-          content: "Meist innerhalb von 48 Stunden.",
-        },
-        {
-          id: "q2",
-          title: "Sind Sie versichert?",
-          content: "Selbstverständlich ist jeder Auftrag voll versichert.",
-        },
-        {
-          id: "q3",
-          title: "Bieten Sie auch Reinigung an?",
-          content: "Auf Wunsch bieten wir besenreine Übergabe.",
-        },
-      ]}
-      title="Häufige Fragen"
-      description="Alles was Sie wissen müssen."
+      <FaqSplitMedia
+      textboxLayout="split"
+      useInvertedBackground={true}
       faqsAnimation="blur-reveal"
+      title="Häufige Fragen"
+      description="Hier finden Sie Antworten auf die wichtigsten Fragen."
+      faqs={[
+        { id: "q1", title: "Wie schnell sind Termine möglich?", content: "Meist innerhalb von 48 Stunden." },
+        { id: "q2", title: "Sind Sie versichert?", content: "Selbstverständlich ist jeder Auftrag voll versichert." },
+        { id: "q3", title: "Bieten Sie auch Reinigung an?", content: "Auf Wunsch bieten wir besenreine Übergabe." },
+      ]}
+      imageSrc="http://img.b2bpic.net/free-photo/young-family-moving-into-new-home_23-2149196337.jpg"
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars",
-      }}
+      background={{ variant: "sparkles-gradient" }}
       tag="Kontakt"
-      title="Jetzt Angebot anfordern"
+      title="Bereit für Ihren Umzug?"
       description="Schreiben Sie uns oder rufen Sie an – wir melden uns umgehend bei Ihnen."
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterCard
+      <FooterBaseCard
       logoText="Trageprofi"
+      columns={[
+        { title: "Unternehmen", items: [{ label: "Über uns", href: "#" }, { label: "Kontakt", href: "#contact" }] },
+        { title: "Leistungen", items: [{ label: "Umzüge", href: "#features" }, { label: "Entrümpelung", href: "#features" }] }
+      ]}
       copyrightText="© 2025 Trageprofi Baden-Baden"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-libre-baskerville), serif;
+  font-family: var(--font-montserrat), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #106EFB;
+  --background: #f0f4f8;
+  --card: #ffffff;
+  --foreground: #1a2b3c;
+  --primary-cta: #0056b3;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #e9ecef;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #106EFB;
+  --accent: #d1d9e6;
+  --background-accent: #f8f9fa;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);