Merge version_4 into main #4
216
src/app/page.tsx
216
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 { CheckCircle, Clock, MessageCircle, DollarSign, Zap, ShieldCheck, Wrench, Truck } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -17,124 +17,122 @@ 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."
|
||||
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"
|
||||
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"
|
||||
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: CheckCircle, 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."
|
||||
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"
|
||||
/>
|
||||
</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: "Navigácia", items: [{ label: "Domov", href: "#hero" }, { label: "Služby", href: "#services" }] },
|
||||
{ title: "Podpora", items: [{ label: "Kontakt", href: "#contact" }, { label: "Zavolať", href: "tel:+421000000000" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user