Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -2,28 +2,29 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
+import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import TeamCardOne from '@/components/sections/team/TeamCardOne';
+import TeamCardTen from '@/components/sections/team/TeamCardTen';
-import TextAbout from '@/components/sections/about/TextAbout';
+import MediaAbout from '@/components/sections/about/MediaAbout';
-import { BookOpen, Briefcase, Droplet, History, MapPin, Settings, Users, Wrench } from "lucide-react";
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import { Truck, Package, Anchor, Zap, ShieldCheck, MapPin } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="directional-hover"
+        defaultButtonVariant="hover-magnetic"
         defaultTextAnimation="reveal-blur"
         borderRadius="soft"
         contentWidth="mediumLarge"
-        sizing="largeSmallSizeLargeTitles"
+        sizing="largeSizeMediumTitles"
-        background="fluid"
+        background="noise"
-        cardStyle="solid"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="shadow"
+        primaryButtonStyle="primary-glow"
         secondaryButtonStyle="glass"
-        headingFontWeight="bold"
+        headingFontWeight="extrabold"
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
@@ -32,107 +33,101 @@ export default function LandingPage() {
               { name: "Start", id: "hero" },
               { name: "Über uns", id: "about" },
               { name: "Leistungen", id: "services" },
-              { name: "Werkstatt", id: "workshop" },
+              { name: "Warum wir", id: "why-us" },
-              { name: "Team", id: "team" },
+              { name: "Testimonials", id: "testimonials" },
               { name: "Kontakt", id: "contact" },
             ]}
-            brandName="Autohaus Hunzinger"
+            brandName="Schwär Transporte GmbH"
           />
         </div>
 
         <div id="hero" data-section="hero">
-            <HeroSplitDualMedia
+            <HeroBillboardGallery
             background={{ variant: "gradient-bars" }}
-            title="Autohaus Hunzinger: Familienunternehmen durch und durch!"
+            title="Logistik auf höchstem Niveau"
-            description="Ihr verlässlicher Partner in Seefelden seit 1936. Der Service macht's – bei uns steht der Mensch und sein Fahrzeug im Mittelpunkt."
+            description="Schwär Transporte GmbH – Ihr zuverlässiger Partner in Heitersheim für professionelle Transport- und Logistiklösungen."
-            tag="Seit 1936 für Sie da"
+            tag="Vertrauen in Bewegung"
             mediaItems={[
-              {
+              { imageSrc: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8317d?q=80&w=1600", imageAlt: "Transport Truck" },
-                imageSrc: "http://img.b2bpic.net/free-photo/man-woman-together-car-dealership_23-2148333023.jpg?_wi=1",                imageAlt: "Autohaus Hunzinger Außenansicht"},
+              { imageSrc: "https://images.unsplash.com/photo-1601584115197-04cca0da3123?q=80&w=1600", imageAlt: "Logistik Lager" },
-              {
+              { imageSrc: "https://images.unsplash.com/photo-1566576721346-d4bd3b235083?q=80&w=1600", imageAlt: "Transport Logistik" }
-                imageSrc: "http://img.b2bpic.net/free-photo/portrait-salesman-car-dealership_23-2148130113.jpg",                imageAlt: "Moderner Showroom"},
             ]}
-            mediaAnimation="slide-up"
+            buttons={[{ text: "Angebot anfordern", href: "#contact" }]}
-            rating={5}
-            ratingText="Top-Service seit Generationen"
-            tagIcon={History}
           />
         </div>
 
         <div id="about" data-section="about">
-            <TextAbout
+            <MediaAbout
             useInvertedBackground={true}
-            tag="Unsere Geschichte"
+            tag="Über uns"
-            title="Tradition, die verpflichtet"
+            title="Tradition trifft auf Moderne"
-            tagIcon={BookOpen}
+            description="Seit Jahren stehen wir für Präzision, Zuverlässigkeit und erstklassigen Service. Als Heitersheimer Unternehmen kennen wir die Anforderungen des Marktes genau und liefern effiziente Lösungen für Ihre Waren."
+            imageSrc="https://images.unsplash.com/photo-1578574577315-3f2081e7d472?q=80&w=1200"
+            imageAlt="Team Schwär Transporte"
           />
         </div>
 
         <div id="services" data-section="services">
-            <FeatureHoverPattern
+            <FeatureCardMedia
             animationType="slide-up"
             textboxLayout="split"
+            title="Unsere Leistungen"
+            description="Vielseitige Logistiklösungen für unterschiedlichste Branchen."
             useInvertedBackground={false}
             features={[
-              { icon: Briefcase, title: "Fahrzeugverkauf & Beratung", description: "Persönlich, ehrlich und ganz ohne Druck. Wir finden Ihr Wunschfahrzeug." },
+              { id: "1", title: "Nationale Transporte", description: "Sichere Lieferung innerhalb Deutschlands.", tag: "Transport", imageSrc: "https://images.unsplash.com/photo-1616466727546-2487e9742c38?q=80&w=800" },
-              { icon: Wrench, title: "Werkstatt & Reparatur", description: "Ob Inspektion oder Autocheck – wir bringen Ihr Fahrzeug wieder in Form." },
+              { id: "2", title: "Lagerlogistik", description: "Optimale Lagerung Ihrer Waren unter besten Bedingungen.", tag: "Logistik", imageSrc: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8317d?q=80&w=800" },
-              { icon: Droplet, title: "Karosserie & Lackiererei", description: "Präzise Karosserieinstandsetzung und professionelle Lackierung für perfekten Glanz." },
+              { id: "3", title: "Spezialtransporte", description: "Wir befördern auch anspruchsvolle Güter sicher ans Ziel.", tag: "Service", imageSrc: "https://images.unsplash.com/photo-1594993440797-2856f62b4759?q=80&w=800" }
-              { icon: Users, title: "Kunden- & Fahrzeugpflege", description: "Wir setzen auf langfristige Beziehungen und eine umfassende Betreuung Ihres Autos." },
             ]}
-            title="Unsere Leistungen"
-            description="Von der fundierten Beratung bis hin zur fachmännischen Karosserieinstandsetzung."
           />
         </div>
 
-        <div id="workshop" data-section="workshop">
+        <div id="why-us" data-section="why-us">
-            <TextAbout
+            <FeatureCardMedia
-            useInvertedBackground={true}
+            animationType="blur-reveal"
-            tag="Fachwissen & Präzision"
-            title="Die Werkstatt: Das Herz unseres Betriebes"
-            tagIcon={Settings}
-          />
-        </div>
-
-        <div id="team" data-section="team">
-            <TeamCardOne
-            animationType="slide-up"
             textboxLayout="split"
-            gridVariant="four-items-2x2-equal-grid"
+            title="Warum Schwär Transporte?"
-            useInvertedBackground={false}
+            description="Der Unterschied liegt in der Qualität und dem Engagement."
-            members={[
+            useInvertedBackground={true}
-              { id: "1", name: "Sonja Hunzinger", role: "Geschäftsführung", imageSrc: "http://img.b2bpic.net/free-photo/bike-creation-workshop_23-2148866661.jpg", imageAlt: "Sonja Hunzinger" },
+            features={[
-              { id: "2", name: "Gerd Hunzinger", role: "Geschäftsführung", imageSrc: "http://img.b2bpic.net/free-photo/man-woman-together-car-dealership_23-2148333023.jpg?_wi=2", imageAlt: "Gerd Hunzinger" },
+              { id: "p1", title: "Zuverlässigkeit", description: "Termintreue ist unser Markenzeichen.", tag: "Pünktlichkeit", imageSrc: "https://images.unsplash.com/photo-1574676508933-5c20c02741d4?q=80&w=800" },
-              { id: "3", name: "Werkstatt-Team", role: "35 qualifizierte Mitarbeiter", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-holding-tire-tire-repair-garage-replacement-winter-summer-tires_146671-18338.jpg", imageAlt: "Werkstatt-Team" },
+              { id: "p2", title: "Fachkompetenz", description: "Erfahrene Fahrer und logistisches Know-how.", tag: "Expertise", imageSrc: "https://images.unsplash.com/photo-1521791136064-7986c2920216?q=80&w=800" }
-              { id: "4", name: "Kundenservice", role: "Ihr persönlicher Ansprechpartner", imageSrc: "http://img.b2bpic.net/free-photo/car-repair-maintenance-theme-mechanic-uniform-working-auto-service_627829-3951.jpg", imageAlt: "Kundenservice" },
             ]}
-            title="35 Experten für Ihr Auto"
+          />
-            description="Geführt von Sonja und Gerd Hunzinger in dritter Generation."
+        </div>
+
+        <div id="testimonials" data-section="testimonials">
+            <TestimonialCardFifteen
+            testimonial="Die Zusammenarbeit mit Schwär Transporte verläuft immer absolut reibungslos. Sehr kompetente Ansprechpartner und eine perfekte Abwicklung."
+            rating={5}
+            author="Andreas M., Produktionsleiter"
+            avatars={[{ src: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=200", alt: "Customer" }]}
+            ratingAnimation="slide-up"
+            avatarsAnimation="opacity"
+            useInvertedBackground={false}
           />
         </div>
 
         <div id="contact" data-section="contact">
-            <ContactCenter
+            <ContactSplit
-            useInvertedBackground={true}
-            background={{ variant: "gradient-bars" }}
             tag="Kontakt"
-            title="Besuchen Sie uns in Seefelden"
+            title="Sprechen wir über Ihr Logistikprojekt"
-            description="Direkt an der B3. Wir freuen uns auf Ihren Besuch!"
+            description="Wir erstellen Ihnen gerne ein maßgeschneidertes Angebot für Ihre Anforderungen."
-            tagIcon={MapPin}
+            mediaPosition="right"
+            imageSrc="https://images.unsplash.com/photo-1589939706844-3230a1030e2f?q=80&w=1200"
+            background={{ variant: "gradient-bars" }}
+            useInvertedBackground={true}
           />
         </div>
 
         <div id="footer" data-section="footer">
-            <FooterBase
+            <FooterLogoReveal
-            columns={[
+            logoText="Schwär Transporte"
-              { title: "Navigation", items: [{ label: "Start", href: "#hero" }, { label: "Über uns", href: "#about" }, { label: "Leistungen", href: "#services" }, { label: "Kontakt", href: "#contact" }] },
+            leftLink={{ text: "Impressum", href: "#" }}
-              { title: "Kontakt", items: [{ label: "Seefelden, an der B3", href: "#" }, { label: "Telefon: 01234/56789", href: "tel:+49123456789" }] },
+            rightLink={{ text: "Datenschutz", href: "#" }}
-              { title: "Rechtliches", items: [{ label: "Impressum", href: "#" }, { label: "Datenschutz", href: "#" }] },
-            ]}
-            logoText="Autohaus Hunzinger"
-            copyrightText="© 1936 – 2025 Autohaus Hunzinger"
           />
         </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

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