247 lines
16 KiB
TypeScript
247 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import { Award, Sparkles, Users, Wrench, Settings, Car, Shield, Wind, ClipboardCheck, CheckCircle } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Szolgáltatások", id: "#services"},
|
|
{
|
|
name: "Rólunk", id: "#why-us"},
|
|
{
|
|
name: "Kapcsolat", id: "#contact"},
|
|
]}
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zitw6z"
|
|
logoAlt="MŰHELY NEVE logója"
|
|
brandName="MŰHELY NEVE"
|
|
button={{
|
|
text: "[TELEFONSZÁM]", href: "tel:[TELEFONSZÁM]"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="MŰHELY NEVE"
|
|
description="Gyors átfutás, átlátható árak, profi csapat."
|
|
buttons={[
|
|
{
|
|
text: "Időpontfoglalás", href: "#contact"},
|
|
{
|
|
text: "Szolgáltatásaink", href: "#services"},
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/greyscale-shot-dark-tunnel-room-with-window_181624-20284.jpg", imageAlt: "Mechanikus dolgozik egy luxusautó motorján, közelkép"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-woman-posing-dramatic-light_23-2149085798.jpg", imageAlt: "Modern autószerviz belső tere, tiszta és rendezett"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/car-mechanic-using-digital-tablet-while-repairing-analyzing-engine-auto-repair-shop_637285-4307.jpg", imageAlt: "Autószerelő tablettel végez diagnosztikát, háttérben emelőn álló autó"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-examining-car_107420-95949.jpg", imageAlt: "Gumicsere egy autó keréktárcsáján, precíz munka"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/brunette-businesswoman-inside-car_23-2148142430.jpg", imageAlt: "Autó klímaberendezésének ellenőrzése, szervizelés"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-people-talking-about-repairs_23-2150171242.jpg", imageAlt: "Teljes körű járművizsgálat a műszaki vizsga előtt"},
|
|
]}
|
|
showDimOverlay={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="trust-bar" data-section="trust-bar">
|
|
<MetricCardThree
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="scale-rotate"
|
|
metrics={[
|
|
{
|
|
id: "metric-1", icon: Sparkles,
|
|
title: "Tapasztalat", value: "15+ év"},
|
|
{
|
|
id: "metric-2", icon: Users,
|
|
title: "Elégedett Ügyfelek", value: "2000+"},
|
|
{
|
|
id: "metric-3", icon: Award,
|
|
title: "Garancia", value: "Javításainkra"},
|
|
]}
|
|
title="Miért minket válassz?"
|
|
description="Több mint egy évtizedes tapasztalattal és több ezer elégedett ügyféllel a hátunk mögött garantáljuk a minőséget és a megbízhatóságot."
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentySix
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Motor diagnosztika", description: "Pontos hibafeltárás a legmodernebb eszközökkel a motor optimális működéséért.", imageSrc: "http://img.b2bpic.net/free-photo/female-mechanic-using-laptop_1170-1249.jpg", imageAlt: "Motor diagnosztika", buttonIcon: Wrench,
|
|
},
|
|
{
|
|
title: "Olajcsere", description: "Rendszeres olajcsere prémium kenőanyagokkal az autó motorjának élettartamáért.", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-pouring-oil-lubricant-into-car-engine_1170-1676.jpg", imageAlt: "Olajcsere", buttonIcon: Settings,
|
|
},
|
|
{
|
|
title: "Fék szerviz", description: "Alapos fékrendszer-ellenőrzés és javítás a maximális biztonság érdekében.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-woman-talking_23-2150171275.jpg", imageAlt: "Fék szerviz", buttonIcon: Car,
|
|
},
|
|
{
|
|
title: "Gumiabroncs szerelés", description: "Professzionális gumiabroncs-szerelés, centírozás és tárolás.", imageSrc: "http://img.b2bpic.net/free-photo/brutal-mechanic-fixing-hubcap-car-wheel_7502-4419.jpg", imageAlt: "Gumiabroncs szerelés", buttonIcon: Shield,
|
|
},
|
|
{
|
|
title: "Klíma szerviz", description: "Klímatöltés, tisztítás és javítás a kellemes utazásért.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-fixing-car_23-2148514922.jpg", imageAlt: "Klíma szerviz", buttonIcon: Wind,
|
|
},
|
|
{
|
|
title: "Műszaki vizsga előkészítés", description: "Teljes körű átvizsgálás és felkészítés a sikeres műszaki vizsgára.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-checking-car_23-2150171235.jpg", imageAlt: "Műszaki vizsga előkészítés", buttonIcon: ClipboardCheck,
|
|
},
|
|
]}
|
|
title="Teljes körű autószerviz szolgáltatások"
|
|
description="A MŰHELY NEVE-nél minden autótípusra kiterjedő, megbízható megoldásokat kínálunk. Szakértő csapatunk modern felszereléssel várja Önt."
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-us" data-section="why-us">
|
|
<FeatureCardTwentySix
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Szakértő csapat", description: "Magasan képzett, tapasztalt szakemberekkel dolgozunk, akik garanciát jelentenek a minőségi munkára.", buttonIcon: CheckCircle,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-woman-talking_23-2150171273.jpg", imageAlt: "Mechanikus magyaráz egy ügyfélnek"},
|
|
{
|
|
title: "Modern technológia", description: "A legújabb diagnosztikai és javítóeszközöket használjuk, hogy autója a legjobb kezekben legyen.", buttonIcon: CheckCircle,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-working-with-wires-workshop_23-2147897983.jpg", imageAlt: "Fejlett diagnosztikai berendezések"},
|
|
{
|
|
title: "Átlátható árak", description: "Nincsenek rejtett költségek. Előre tájékoztatjuk Önt a javítás várható díjáról.", buttonIcon: CheckCircle,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/dental-tools-equipment-dental-chart-white-background_1232-4431.jpg", imageAlt: "Átlátható számla és autókulcsok"},
|
|
{
|
|
title: "Gyors átfutás", description: "Tudjuk, milyen fontos az idő, ezért igyekszünk a lehető leggyorsabban elvégezni a javításokat.", buttonIcon: CheckCircle,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/female-mechanic-repairing-car_1170-1223.jpg", imageAlt: "Szerelő gyorsan dolgozik az autón"},
|
|
]}
|
|
title="Miért válassza a MŰHELY NEVE-t?"
|
|
description="Válasszon minket a gondtalan autózásért. Elkötelezettek vagyunk a minőség, a gyorsaság és az ügyfélközpontúság iránt. Az alábbi előnyökkel várjuk:"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Nagy Eszter", date: "2024. április 15.", title: "Kiváló és gyors szolgáltatás!", quote: "Nagyon elégedett vagyok a MŰHELY NEVE-vel. Az olajcserét és a fékellenőrzést is rekordidő alatt végezték el, profi hozzáállással. Csak ajánlani tudom!", tag: "Olajcsere", avatarSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1702.jpg", avatarAlt: "Nagy Eszter", imageSrc: "http://img.b2bpic.net/free-photo/old-parked-car-with-backlights_23-2148703178.jpg", imageAlt: "Autó a szerviz előtt"},
|
|
{
|
|
id: "2", name: "Kiss Péter", date: "2024. március 20.", title: "Teljesen megbízható!", quote: "A motor diagnosztika során pontosan feltárták a hibát és gyorsan orvosolták. Már több alkalommal voltam itt, és mindig kifogástalan munkát végeznek. Hálás vagyok a segítségükért!", tag: "Motor Diagnosztika", avatarSrc: "http://img.b2bpic.net/free-photo/happy-businessman-having-conversation-with-his-partner-workplace_23-2147899787.jpg", avatarAlt: "Kiss Péter", imageSrc: "http://img.b2bpic.net/free-photo/muscular-mechanic-dressed-denim-shirt-posing-near-car-garage_613910-5929.jpg", imageAlt: "Autó a szerelőműhelyben"},
|
|
{
|
|
id: "3", name: "Szabó Anna", date: "2024. február 10.", title: "Professzionális és kedves", quote: "A gumicserét és a klímatöltést is náluk végeztettem. Nemcsak gyorsak és hatékonyak voltak, hanem a kommunikáció is kiváló volt. Köszönöm a kedves fogadtatást és a profi munkát!", tag: "Klíma szerviz", avatarSrc: "http://img.b2bpic.net/free-photo/customers-showroom-completing-credit-application-purchasing-new-car_482257-124090.jpg", avatarAlt: "Szabó Anna", imageSrc: "http://img.b2bpic.net/free-photo/serviceman-showing-customer-car-changes_482257-76110.jpg", imageAlt: "Szerelő és ügyfél kezet fog"},
|
|
{
|
|
id: "4", name: "Tóth Gábor", date: "2024. január 5.", title: "A legjobb a városban!", quote: "Évek óta a MŰHELY NEVE-hez hordom az autómat, és sosem csalódtam. A műszaki vizsga előkészítést is precízen végezték, az autó átment gond nélkül. A legjobb autószerviz [VÁROS]-ban!", tag: "Műszaki vizsga", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-jolly-car-dealership-agent-hired-respond-client-inquiries_482257-118268.jpg", avatarAlt: "Tóth Gábor", imageSrc: "http://img.b2bpic.net/free-photo/repairmen-inspecting-vehicle-transmission_23-2147897939.jpg", imageAlt: "Autó emelőn"},
|
|
{
|
|
id: "5", name: "Kovács Orsolya", date: "2023. december 1.", title: "Minőség és megbízhatóság", quote: "Nem szeretem a meglepetéseket, és a MŰHELY NEVE-nél mindig átláthatóak az árak és a munkafolyamatok. Kiváló minőségű alkatrészekkel dolgoznak, teljes bizalommal ajánlom őket!", tag: "Fék szerviz", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-relaxing-home_23-2150307056.jpg", avatarAlt: "Kovács Orsolya", imageSrc: "http://img.b2bpic.net/free-photo/mechanics-examining-car-engine_1170-1357.jpg", imageAlt: "Tisztított motorháztető"},
|
|
]}
|
|
title="Ügyfeleink mondták rólunk"
|
|
description="Elégedett ügyfeleink visszajelzései a legjobb bizonyíték szolgáltatásaink minőségére és megbízhatóságára."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "Milyen márkájú autókat szervizelnek?", content: "A MŰHELY NEVE minden márkájú és típusú személygépkocsi szervizelését és javítását vállalja, legyen szó európai, ázsiai vagy amerikai gyártmányról."},
|
|
{
|
|
id: "faq-2", title: "Mennyi időt vesz igénybe egy olajcsere?", content: "Egy standard olajcsere általában 30-60 percet vesz igénybe, előzetes időpontfoglalás esetén akár azonnal elvégezhető."},
|
|
{
|
|
id: "faq-3", title: "Kell-e előzetesen időpontot foglalnom?", content: "Igen, a gyors és hatékony ügyintézés érdekében javasoljuk az online vagy telefonos időpontfoglalást. Vészhelyzet esetén természetesen igyekszünk azonnal segíteni."},
|
|
]}
|
|
sideTitle="Gyakran Ismételt Kérdések"
|
|
sideDescription="Itt találja a leggyakoribb kérdéseket és válaszokat az autószervizeléssel és szolgáltatásainkkal kapcsolatban."
|
|
faqsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Időpontfoglalás"
|
|
title="Foglaljon időpontot még ma!"
|
|
description="Ne halogassa autója karbantartását! Vegye fel velünk a kapcsolatot még ma, és foglaljon időpontot online, gyorsan és egyszerűen."
|
|
buttonText="Időpont foglalása"
|
|
inputPlaceholder="Email címe"
|
|
termsText="Az időpontfoglalással elfogadja feltételeinket."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/mechanic-using-touchscreen-device_1170-1579.jpg"
|
|
imageAlt="Sötét autószerviz belső tér"
|
|
logoText="MŰHELY NEVE"
|
|
columns={[
|
|
{
|
|
title: "Szolgáltatások", items: [
|
|
{
|
|
label: "Motor Diagnosztika", href: "#services"},
|
|
{
|
|
label: "Olajcsere", href: "#services"},
|
|
{
|
|
label: "Fék szerviz", href: "#services"},
|
|
{
|
|
label: "Klíma szerviz", href: "#services"},
|
|
],
|
|
},
|
|
{
|
|
title: "Rólunk", items: [
|
|
{
|
|
label: "Miért mi?", href: "#why-us"},
|
|
{
|
|
label: "Ügyfélvélemények", href: "#testimonials"},
|
|
{
|
|
label: "GY.I.K.", href: "#faq"},
|
|
],
|
|
},
|
|
{
|
|
title: "Kapcsolat", items: [
|
|
{
|
|
label: "[VÁROS], Hungary", href: "#"},
|
|
{
|
|
label: "[TELEFONSZÁM]", href: "tel:[TELEFONSZÁM]"},
|
|
{
|
|
label: "Nyitva tartás: H-P 8:00-17:00", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 MŰHELY NEVE. Minden jog fenntartva."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|