Merge version_9 into main

Merge version_9 into main

src/app/page.tsx

@@ -3,13 +3,13 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import { CheckCircle, Clock, MessageCircle, DollarSign } from "lucide-react";
+import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import { Zap, ShieldCheck, Wrench, Truck } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -17,125 +17,132 @@ export default function LandingPage() {
         defaultButtonVariant="icon-arrow"
         defaultTextAnimation="background-highlight"
         borderRadius="soft"
-        contentWidth="small"
+        contentWidth="medium"
         sizing="medium"
         background="floatingGradient"
-        cardStyle="inset"
+        cardStyle="glass-elevated"
         primaryButtonStyle="primary-glow"
         secondaryButtonStyle="radial-glow"
         headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        { name: "Domov", id: "hero" },
-        { name: "Prečo my", id: "why-us" },
-        { name: "Služby", id: "services" },
-        { name: "Recenzie", id: "testimonials" },
-        { name: "Kontakt", id: "contact" },
-      ]}
-      brandName="APR-Autodiely"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Domov", id: "hero" },
+              { name: "Prečo my", id: "why-us" },
+              { name: "Služby", id: "services" },
+              { name: "Recenzie", id: "testimonials" },
+              { name: "Kontakt", id: "contact" },
+            ]}
+            brandName="APR-Autodiely"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardCarousel
-      background={{ variant: "gradient-bars" }}
-      title="Autodiely, ktoré potrebujete – rýchlo a bez problémov"
-      description="Nemáme na sklade? Nevadí. Zabezpečíme. Vždy za férovú cenu."
-      buttons={[
-        { text: "Zavolať a objednať diel", href: "#contact" },
-        { text: "Opýtať sa na dostupnosť", href: "#contact" },
-      ]}
-      mediaItems={[
-        { imageSrc: "https://img.b2bpic.net/free-photo/mechanic-working-car-service_23-2148705600.jpg", imageAlt: "Autodiely expert" },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroCarouselLogo
+            logoText="APR-Autodiely"
+            description="Vaša prvá voľba pre kvalitné náhradné diely. Rýchlosť, odbornosť a férový prístup v každom detaile."
+            buttons={[
+              { text: "Zobraziť ponuku", href: "#services" },
+              { text: "Kontaktovať", href: "#contact" },
+            ]}
+            slides={[
+              { imageSrc: "https://img.b2bpic.net/free-photo/mechanic-working-car-service_23-2148705600.jpg", imageAlt: "Autodiely" },
+              { imageSrc: "https://img.b2bpic.net/free-photo/mechanic-checking-car-engine_23-2148705624.jpg", imageAlt: "Diagnostika" },
+            ]}
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="bento-grid"
-      useInvertedBackground={false}
-      metrics={[
-        { id: "r1", value: "Rýchle", title: "Dodanie", description: "Dodanie bez zbytočného čakania", icon: Clock },
-        { id: "r2", value: "Skvelé", title: "Ceny", description: "Kvalita bez predraženia", icon: DollarSign },
-        { id: "r3", value: "Odborné", title: "Poradenstvo", description: "Presne vieme, čo auto potrebuje", icon: CheckCircle },
-        { id: "r4", value: "Osobný", title: "Prístup", description: "Individuálny prístup ku každému", icon: MessageCircle },
-      ]}
-      title="Vždy spoľahlivý partner"
-      description="Naša kvalita je podložená spokojnosťou zákazníkov."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardTwo
+            animationType="slide-up"
+            gridVariant="uniform-all-items-equal"
+            title="Naše hodnoty v číslach"
+            description="Dlhoročné skúsenosti podložené spokojnosťou našich zákazníkov."
+            textboxLayout="split"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "m1", value: "15+", description: "Rokov na trhu" },
+              { id: "m2", value: "100%", description: "Odborný prístup" },
+              { id: "m3", value: "24h", description: "Expresné vybavenie" },
+              { id: "m4", value: "5k+", description: "Spokojných vodičov" },
+            ]}
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
-      useInvertedBackground={true}
-      testimonial="Keď diel nemajú, objednajú ho. A za výbornú cenu. Skvelý prístup, rýchle dodanie."
-      rating={5}
-      author="Spokojný zákazník"
-      avatars={[]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="slide-up"
-    />
-  </div>
+        <div id="why-us" data-section="why-us">
+          <FeatureBorderGlow
+            title="Prečo si vybrať práve nás"
+            description="Sme viac než len predajcovia, sme partneri pre vaše auto."
+            useInvertedBackground={false}
+            animationType="slide-up"
+            textboxLayout="default"
+            features={[
+              { icon: Zap, title: "Blesková dostupnosť", description: "Ak diel nemáme, zoženieme ho v najkratšom možnom čase." },
+              { icon: ShieldCheck, title: "Kvalitné diely", description: "Ponúkame len overené komponenty s certifikáciou." },
+              { icon: Wrench, title: "Odborné poradenstvo", description: "Naši experti vám vždy poradia to najlepšie riešenie." },
+              { icon: Truck, title: "Pohodlná doprava", description: "Možnosť osobného odberu alebo zaslania priamo k vám." },
+            ]}
+          />
+        </div>
 
-  <div id="why-us" data-section="why-us">
-      <FeatureCardSeven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        { title: "Odbornosť", description: "Presne vieme, čo vaše auto potrebuje", imageSrc: "https://img.b2bpic.net/free-photo/mechanic-checking-car-engine_23-2148705624.jpg" },
-        { title: "Rýchlosť", description: "Dodanie bez zbytočného čakania", imageSrc: "https://img.b2bpic.net/free-photo/fast-delivery-concept_23-2149176689.jpg" },
-        { title: "Férové ceny", description: "Kvalita bez predraženia", imageSrc: "https://img.b2bpic.net/free-photo/price-tag-concept_23-2149176689.jpg" },
-      ]}
-      title="Prečo zákazníci chodia k nám"
-      description="Sme lídrom v oblasti predaja autodielov v regióne."
-    />
-  </div>
+        <div id="services" data-section="services">
+          <FeatureBorderGlow
+            title="Služby na mieru"
+            description="Komplexná starostlivosť o vaše vozidlo pod jednou strechou."
+            useInvertedBackground={true}
+            animationType="slide-up"
+            textboxLayout="default"
+            features={[
+              { icon: Wrench, title: "Podvozkové časti", description: "Brzdy, ramená, tlmiče skladom aj na objednávku." },
+              { icon: Zap, title: "Motorové oleje a filtre", description: "Široký sortiment pre všetky značky osobných áut." },
+              { icon: Truck, title: "Dodávkové diely", description: "Špeciálne diely pre úžitkové vozidlá a dodávky." },
+              { icon: Zap, title: "Diagnostika", description: "Poradenstvo pri výbere správneho dielu pre vaše VIN." },
+            ]}
+          />
+        </div>
 
-  <div id="services" data-section="services">
-      <FeatureCardSeven
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      features={[
-        { title: "Autodiely pre všetky značky", description: "Od olejov cez filtre až po brzdy.", imageSrc: "https://img.b2bpic.net/free-photo/car-parts-workshop_23-2149176689.jpg" },
-        { title: "Diely na objednávku", description: "Nemáme na sklade? Zabezpečíme pre vás akýkoľvek diel.", imageSrc: "https://img.b2bpic.net/free-photo/delivery-service_23-2149176689.jpg" },
-      ]}
-      title="Čo u nás vybavíte"
-      description="Komplexné riešenia pre váš vozový park."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardFive
+            title="Čo hovoria naši zákazníci"
+            description="Tisíce spokojných klientov sa vracajú kvôli nášmu férovému prístupu."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "t1", name: "Peter M.", date: "Pred 2 týždňami", title: "Pravidelný zákazník", quote: "Najlepšie ceny v regióne a vždy ochotne poradia. Odporúčam každému.", tag: "Top služby", avatarSrc: "https://img.b2bpic.net/free-photo/man-portrait_23-2148705600.jpg" },
+              { id: "t2", name: "Jana K.", date: "Pred mesiacom", title: "Spokojná vodička", quote: "Rýchle dodanie dielu, ktorý som inde nemohla zohnať. Ďakujem!", tag: "Rýchlosť", avatarSrc: "https://img.b2bpic.net/free-photo/woman-portrait_23-2148705624.jpg" },
+            ]}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplitForm
-      title="Stačí zavolať"
-      description="Žiadne zdĺhavé hľadanie dielov. Zavolajte nám – poradíme, nájdeme a objednáme."
-      inputs={[
-        { name: "name", type: "text", placeholder: "Vaše meno" },
-        { name: "phone", type: "tel", placeholder: "Telefónne číslo" },
-      ]}
-      textarea={{ name: "message", placeholder: "Čo potrebujete zohnať?" }}
-      imageSrc="https://img.b2bpic.net/free-photo/phone-call-customer-service_23-2148842600.jpg"
-      useInvertedBackground={false}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            title="Potrebujete konkrétny diel?"
+            description="Napíšte nám alebo zavolajte. Na základe VIN čísla obratom zistíme cenu a dostupnosť."
+            inputs={[
+              { name: "name", type: "text", placeholder: "Vaše meno" },
+              { name: "phone", type: "tel", placeholder: "Telefón" },
+              { name: "vin", type: "text", placeholder: "VIN číslo vozidla (nepovinné)" },
+            ]}
+            textarea={{ name: "message", placeholder: "Aký diel hľadáte?" }}
+            imageSrc="https://img.b2bpic.net/free-photo/car-parts-workshop_23-2149176689.jpg"
+            useInvertedBackground={false}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="APR-Autodiely"
-      columns={[
-        { title: "Služby", items: [{ label: "Autodiely", href: "#services" }, { label: "Objednávky", href: "#contact" }] },
-        { title: "Kontakt", items: [{ label: "Zavolať", href: "tel:+421000000000" }] }
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="APR-Autodiely"
+            columns={[
+              { title: "Informácie", items: [{ label: "O nás", href: "#" }, { label: "Obchodné podmienky", href: "#" }] },
+              { title: "Služby", items: [{ label: "Diagnostika", href: "#services" }, { label: "Doprava", href: "#services" }] },
+              { title: "Kontakt", items: [{ label: "Email: info@apr-autodiely.sk", href: "mailto:info@apr-autodiely.sk" }, { label: "Tel: +421 900 000 000", href: "tel:+421900000000" }] },
+            ]}
+            copyrightText="© 2025 APR-Autodiely. Všetky práva vyhradené."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #FFFFFF;
-  --card: #E5E7EB;
-  --foreground: #0F172A;
-  --primary-cta: #2563EB;
-  --primary-cta-text: #111111;
-  --secondary-cta: #FFFFFF;
-  --secondary-cta-text: #F5F1EA;
-  --accent: #2563EB;
-  --background-accent: #E5E7EB;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000612e6;
+  --primary-cta: #15479c;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #f9f9f9;
+  --secondary-cta-text: #000612e6;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);