259 lines
13 KiB
TypeScript
259 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||
import { Wrench } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="hover-bubble"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="rounded"
|
||
contentWidth="smallMedium"
|
||
sizing="mediumLargeSizeMediumTitles"
|
||
background="floatingGradient"
|
||
cardStyle="glass-elevated"
|
||
primaryButtonStyle="gradient"
|
||
secondaryButtonStyle="layered"
|
||
headingFontWeight="semibold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingOverlay
|
||
navItems={[
|
||
{
|
||
name: "Home", id: "#hero"},
|
||
{
|
||
name: "About Us", id: "#about"},
|
||
{
|
||
name: "Services", id: "#services"},
|
||
{
|
||
name: "Testimonials", id: "#testimonials"},
|
||
{
|
||
name: "FAQ", id: "#faq"},
|
||
{
|
||
name: "Contact", id: "#contact"},
|
||
]}
|
||
brandName="ALI Express Service"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardGallery
|
||
background={{
|
||
variant: "rotated-rays-static"}}
|
||
title="Ihr Kompetenter Partner für Fahrzeugservice in Graz"
|
||
description="Mit langjähriger Erfahrung, fachlichem Know-how und einem hohen Anspruch an Qualität bieten wir zuverlässige Lösungen für Fahrzeuge aller Marken."
|
||
mediaItems={[
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-set-metal-wrenches_23-2148428304.jpg", imageAlt: "Mechanic fixing a car engine"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-showing-customer-problem-with-car_1170-1423.jpg", imageAlt: "Technician inspecting a car suspension"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193567.jpg", imageAlt: "Car body work in a painting booth"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881509.jpg", imageAlt: "Oil change service with car on a lift"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-fixing-car-tyre_1170-1664.jpg", imageAlt: "Tire fitting service and wheel balancing"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-preparing-check-list_1170-1310.jpg", imageAlt: "Mechanic using diagnostic computer on a car"},
|
||
]}
|
||
mediaAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<TestimonialAboutCard
|
||
useInvertedBackground={false}
|
||
tag="Über uns"
|
||
title="Ihr zuverlässiger Partner für Fahrzeugservice und Reparaturen in Graz"
|
||
description="Mit langjähriger Erfahrung, modernster Technik und einem hochqualifizierten Team bieten wir umfassende Lösungen für die Wartung, Reparatur und Pflege Ihres Fahrzeugs. Vertrauen Sie auf Kompetenz und erstklassigen Service."
|
||
subdescription="Unser Ziel ist es, jedes Fahrzeug schnell, professionell und zu fairen Preisen wieder in einen technisch und optisch einwandfreien Zustand zu bringen. Dabei setzen wir auf sorgfältige Diagnosen, transparente Beratung und höchste Qualitätsstandards."
|
||
icon={Wrench}
|
||
imageSrc="http://img.b2bpic.net/free-photo/male-female-mechanics-working-shop-car_23-2150170032.jpg"
|
||
imageAlt="Team of professional mechanics in a workshop"
|
||
mediaAnimation="opacity"
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardNine
|
||
animationType="scale-rotate"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
features={[
|
||
{
|
||
title: "Diagnose, Motor & Getriebe", description: "Präzise Fahrzeugdiagnose, fachkundige Motorreparaturen, Getriebereparaturen und spezialisierte Elektrik- und Elektronikreparaturen.", phoneOne: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/female-mechanic-using-diagnostic-tool_1170-1528.jpg", imageAlt: "Car dashboard diagnostics"},
|
||
phoneTwo: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/hands-mechanic-using-diagnostic-tool_1170-1146.jpg", imageAlt: "Mechanic performing engine check"}
|
||
},
|
||
{
|
||
title: "Karosserie & Unfallinstandsetzung", description: "Professionelle Karosseriearbeiten, schnelle Unfallinstandsetzung und effizienter Klimaservice für Ihren Fahrkomfort.", phoneOne: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-car-service-mechanics-repairing-car_23-2148327563.jpg", imageAlt: "Car body repair process"},
|
||
phoneTwo: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/service-worker-painting-car-auto-service_23-2149487001.jpg", imageAlt: "Car being painted in booth"}
|
||
},
|
||
{
|
||
title: "Wartung, Reifen & Fahrwerk", description: "Umfassende Fahrzeugwartung, Öl- und Filterwechsel, Reifenservice, Fahrwerksreparaturen und Pickerl-Vorbereitung (Begutachtung nach §57a).", phoneOne: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-male-mechanic-changing-car-wheels_23-2148327513.jpg", imageAlt: "Car on hydraulic lift"},
|
||
phoneTwo: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-mechanic-showing-ok-gesture-with-his-thumb-while-holding-wrench_146671-19719.jpg", imageAlt: "Mechanic holding new car tire"}
|
||
},
|
||
]}
|
||
showStepNumbers={true}
|
||
title="Umfassende Fahrzeugdienstleistungen in Graz"
|
||
description="Von präziser Diagnose bis zur fachgerechten Reparatur – wir bieten ein breites Spektrum an Services für alle Fahrzeugtypen."
|
||
/>
|
||
</div>
|
||
|
||
<div id="metrics" data-section="metrics">
|
||
<MetricCardSeven
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
metrics={[
|
||
{
|
||
id: "experience", value: "10+", title: "Jahre Erfahrung", items: [
|
||
"Fahrzeugreparatur", "Unfallinstandsetzung", "Regelmäßige Wartung"],
|
||
},
|
||
{
|
||
id: "customers", value: "500+", title: "Zufriedene Kunden", items: [
|
||
"Persönliche Betreuung", "Transparente Beratung", "Faire Preise"],
|
||
},
|
||
{
|
||
id: "brands", value: "Alle", title: "Marken", items: [
|
||
"Unabhängiger Service", "Original-Ersatzteile", "Garantieerhalt"],
|
||
},
|
||
]}
|
||
title="Warum ALI Express Service?"
|
||
description="Unsere Erfahrung spricht für sich. Wir sind stolz auf unsere Erfolge und die Zufriedenheit unserer Kunden."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardSixteen
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Anna Schmidt", role: "Kundin", company: "Privatkunde", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/woman-happy-just-bought-her-new-car_1303-29677.jpg", imageAlt: "Smiling woman giving positive feedback"},
|
||
{
|
||
id: "2", name: "Max Huber", role: "Fahrzeugflottenmanager", company: "Logistik GmbH", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/black-mechanic-his-manager-working-touchpad-auto-repair-shop_637285-8672.jpg", imageAlt: "Happy man giving thumbs up for car service"},
|
||
{
|
||
id: "3", name: "Lisa Müller", role: "Selbstständige", company: "Kreativstudio", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/front-vie-car-service-employee-with-clipboard_23-2148327567.jpg", imageAlt: "Woman technician smiling with satisfied customer"},
|
||
{
|
||
id: "4", name: "Familie Wagner", role: "Kunden", company: "Privatkunde", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/happy-mechanic-greeting-his-customers-auto-repair-shop_637285-11563.jpg", imageAlt: "Family happy with their car service"},
|
||
{
|
||
id: "5", name: "Dr. Klaus Berger", role: "Arzt", company: "Praxis Dr. Berger", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-car-mechanic-auto-repair-shop-looking-camera_637285-7794.jpg", imageAlt: "Businessman satisfied with car repair"},
|
||
]}
|
||
kpiItems={[
|
||
{
|
||
value: "99%", label: "Kundenzufriedenheit"},
|
||
{
|
||
value: "100%", label: "Termintreue"},
|
||
{
|
||
value: "Top", label: "Bewertung"},
|
||
]}
|
||
title="Kundenstimmen"
|
||
description="Hören Sie, was unsere zufriedenen Kunden über ihre Erfahrungen bei ALI Express Service sagen."
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqSplitText
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{
|
||
id: "q1", title: "Welche Fahrzeugmarken reparieren Sie?", content: "Wir reparieren und warten Fahrzeuge aller Marken und Modelle. Unser erfahrenes Team verfügt über das nötige Know-how und die Ausrüstung für alle gängigen Hersteller."},
|
||
{
|
||
id: "q2", title: "Muss ich einen Termin vereinbaren?", content: "Für die meisten Dienstleistungen empfehlen wir eine Terminvereinbarung, um Wartezeiten zu vermeiden. Bei kleineren Reparaturen oder dringenden Anliegen können Sie uns auch spontan besuchen."},
|
||
{
|
||
id: "q3", title: "Bieten Sie auch Karosseriearbeiten nach Unfällen an?", content: "Ja, wir sind spezialisiert auf Karosserie- und Unfallinstandsetzung. Wir kümmern uns um die gesamte Abwicklung, von der Schadensbegutachtung bis zur Reparatur."},
|
||
]}
|
||
sideTitle="Häufig gestellte Fragen"
|
||
sideDescription="Finden Sie schnelle Antworten auf die am häufigsten gestellten Fragen zu unseren Dienstleistungen und Abläufen."
|
||
faqsAnimation="blur-reveal"
|
||
textPosition="left"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplit
|
||
useInvertedBackground={true}
|
||
background={{
|
||
variant: "plain"}}
|
||
tag="Kontakt"
|
||
title="Kontaktieren Sie uns oder besuchen Sie uns in Graz"
|
||
description="Wir freuen uns auf Ihre Nachricht und sind gerne für Sie da. Finden Sie uns auf der Karte und kommen Sie persönlich vorbei!"
|
||
imageSrc="http://img.b2bpic.net/free-photo/full-shot-happy-partners-meeting_23-2149338600.jpg"
|
||
imageAlt="Exterior of ALI Express Service workshop"
|
||
mediaAnimation="opacity"
|
||
mediaPosition="right"
|
||
inputPlaceholder="Ihre E-Mail-Adresse"
|
||
buttonText="Nachricht senden"
|
||
termsText="Mit dem Absenden der Nachricht stimmen Sie unseren Datenschutzbestimmungen zu."
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBase
|
||
columns={[
|
||
{
|
||
title: "Services", items: [
|
||
{
|
||
label: "Fahrzeugreparaturen", href: "#services"},
|
||
{
|
||
label: "Karosseriearbeiten", href: "#services"},
|
||
{
|
||
label: "Wartung", href: "#services"},
|
||
{
|
||
label: "Reifenservice", href: "#services"},
|
||
],
|
||
},
|
||
{
|
||
title: "Unternehmen", items: [
|
||
{
|
||
label: "Über uns", href: "#about"},
|
||
{
|
||
label: "Kundenstimmen", href: "#testimonials"},
|
||
{
|
||
label: "FAQ", href: "#faq"},
|
||
],
|
||
},
|
||
{
|
||
title: "Kontakt", items: [
|
||
{
|
||
label: "Steinfeldgasse 69, 8020 Graz", href: "https://www.google.com/maps/search/Steinfeldgasse+69,+8020+Graz"},
|
||
{
|
||
label: "+43 664 99179080", href: "tel:+4366499179080"},
|
||
{
|
||
label: "info@aliexpressservice.at", href: "mailto:info@aliexpressservice.at"},
|
||
],
|
||
},
|
||
]}
|
||
logoText="ALI Express Service"
|
||
copyrightText="© 2024 ALI Express Service | Alle Rechte vorbehalten."
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|