Merge version_2 into main #2
443
src/app/page.tsx
443
src/app/page.tsx
@@ -5,343 +5,142 @@ import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import { Box, Truck, Wrench } from "lucide-react";
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import { Box, Truck, Wrench, CheckCircle } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
background="aurora"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="normal"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Start",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Über uns",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Referenzen",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Kontakt",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="UmzugProfi"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="UmzugProfi"
|
||||
navItems={[
|
||||
{ name: "Start", id: "hero" },
|
||||
{ name: "Über uns", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Feedback", id: "testimonials" },
|
||||
{ name: "Kontakt", id: "contact" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlayTestimonial
|
||||
title="Ihr zuverlässiger Partner für den Umzug"
|
||||
description="Wir machen Ihren Umzug stressfrei, schnell und sicher. Von der Planung bis zum Einzug in Ihr neues Zuhause – wir kümmern uns um alles."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Markus S.",
|
||||
handle: "Privatkunde",
|
||||
testimonial: "Der Umzug war extrem professionell und schnell. Alles kam heil an!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-delivery-men-job-concept_23-2148684735.jpg?_wi=1",
|
||||
imageAlt: "professional moving team packing boxes",
|
||||
},
|
||||
{
|
||||
name: "Sarah L.",
|
||||
handle: "Büroumzug",
|
||||
testimonial: "Reibungsloser Ablauf, sehr freundliches Team. Nur zu empfehlen.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delivery-person-getting-parcel-ready-delivery_23-2149371907.jpg",
|
||||
imageAlt: "smiling moving crew team portrait",
|
||||
},
|
||||
{
|
||||
name: "Thomas K.",
|
||||
handle: "Privatkunde",
|
||||
testimonial: "Preis-Leistungs-Verhältnis stimmt einfach. Sehr kompetent.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/husband-wife-moving-new-apartment-together-unpacking-furniture-decorate-household-enjoying-relocation-after-buying-first-house-start-new-beginnings-celebrate-life-event_482257-49831.jpg",
|
||||
imageAlt: "packing service cardboard boxes fragile",
|
||||
},
|
||||
{
|
||||
name: "Julia M.",
|
||||
handle: "Privatkunde",
|
||||
testimonial: "Die Jungs haben alles perfekt geschützt. Danke!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-worker-loading-cardboard-boxes-delivery-van-communicating-with-his-colleague_637285-1268.jpg",
|
||||
imageAlt: "truck transportation professional service",
|
||||
},
|
||||
{
|
||||
name: "Peter D.",
|
||||
handle: "Büroumzug",
|
||||
testimonial: "Top Service! Pünktlich und absolut organisiert.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/creative-artisan-job-workshop_23-2148970793.jpg",
|
||||
imageAlt: "furniture assembly disassembly professional",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Jetzt anfragen",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-delivery-men-job-concept_23-2148684735.jpg?_wi=2"
|
||||
imageAlt="Professionelles Umzugsteam"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-married-couple-moving-into-new-flat-unpacking-things-sitting-floor-taking-houseplant-from-open-boxes_74855-10005.jpg",
|
||||
alt: "Markus S.",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-businesswoman-holding-box-personal-belongings-about-leave-office-after-quitting-job_93675-134491.jpg",
|
||||
alt: "Sarah L.",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-carrying-box_23-2149392095.jpg",
|
||||
alt: "Thomas K.",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-couple-holding-shopping-bags_23-2148683795.jpg",
|
||||
alt: "Julia M.",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-smart-colleague-designers-discussing-work_23-2148180681.jpg",
|
||||
alt: "Peter D.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
title="Ihr Partner für einen reibungslosen Umzug"
|
||||
description="Stressfrei, sicher und schnell ans neue Ziel. Professionelles Team für Ihren privaten oder geschäftlichen Standortwechsel."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
kpis={[
|
||||
{ value: "10+", label: "Jahre Erfahrung" },
|
||||
{ value: "500+", label: "Erfolgreiche Umzüge" },
|
||||
{ value: "100%", label: "Kundenzufriedenheit" }
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="https://img.b2bpic.net/free-photo/front-view-delivery-men-job-concept_23-2148684735.jpg"
|
||||
buttons={[{ text: "Angebot einholen", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Erfahrung, die zählt"
|
||||
description={[
|
||||
"Seit über 10 Jahren unterstützen wir Privat- und Geschäftskunden bei ihrem Standortwechsel. Unser Ziel ist ein entspannter Umzug für Sie.",
|
||||
"Unser Team besteht aus geschulten Profis, die wissen, worauf es ankommt – sorgsamer Umgang mit Ihrem Hab und Gut ist bei uns Standard.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
title="Erfahrung, die zählt"
|
||||
description="Seit über einem Jahrzehnt begleiten wir Menschen und Unternehmen in ihr neues Zuhause. Unser Fokus liegt auf Sorgfalt, Pünktlichkeit und einem entspannten Umzugserlebnis für Sie."
|
||||
bulletPoints={[
|
||||
{ title: "Sorgsamer Umgang", description: "Ihr Hab und Gut ist bei uns in besten Händen.", icon: CheckCircle },
|
||||
{ title: "Geschultes Team", description: "Unsere Profis wissen genau, worauf es bei Möbeln ankommt.", icon: CheckCircle },
|
||||
{ title: "Termintreue", description: "Wir halten uns strikt an Ihre Zeitpläne.", icon: CheckCircle }
|
||||
]}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/husband-wife-moving-new-apartment-together-unpacking-furniture-decorate-household-enjoying-relocation-after-buying-first-house-start-new-beginnings-celebrate-life-event_482257-49831.jpg"
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="blur-reveal"
|
||||
textboxLayout="split"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
icon: Box,
|
||||
title: "Einpackservice",
|
||||
description: "Wir verpacken Ihre Gegenstände sicher und fachgerecht.",
|
||||
},
|
||||
{
|
||||
icon: Truck,
|
||||
title: "Transport",
|
||||
description: "Sicherer Transport mit modernem Fuhrpark.",
|
||||
},
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "Montage",
|
||||
description: "Wir demontieren und montieren Ihre Möbel fachmännisch.",
|
||||
},
|
||||
]}
|
||||
title="Unsere Services"
|
||||
description="Alles aus einer Hand für einen reibungslosen Umzug."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
title="Unsere Leistungen"
|
||||
description="Alles aus einer Hand – maßgeschneidert auf Ihre Bedürfnisse."
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ icon: Box, title: "Einpackservice", description: "Wir verpacken Ihre Gegenstände sicher und stoßfest." },
|
||||
{ icon: Truck, title: "Transport", description: "Moderner Fuhrpark für sichere Logistik auf jedem Weg." },
|
||||
{ icon: Wrench, title: "Montage", description: "Fachgerechte Demontage und Montage Ihrer Möbel." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Markus S.",
|
||||
date: "10.03.2024",
|
||||
title: "Sehr zufrieden",
|
||||
quote: "Die Jungs waren pünktlich und vorsichtig.",
|
||||
tag: "Privat",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/happy-married-couple-moving-into-new-flat-unpacking-things-sitting-floor-taking-houseplant-from-open-boxes_74855-10005.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-married-couple-moving-into-new-flat-unpacking-things-sitting-floor-taking-houseplant-from-open-boxes_74855-10005.jpg",
|
||||
imageAlt: "happy client smiling moving home",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah L.",
|
||||
date: "15.03.2024",
|
||||
title: "Hervorragend",
|
||||
quote: "Büroumzug ohne Komplikationen.",
|
||||
tag: "Gewerbe",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-holding-box-personal-belongings-about-leave-office-after-quitting-job_93675-134491.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-holding-box-personal-belongings-about-leave-office-after-quitting-job_93675-134491.jpg",
|
||||
imageAlt: "satisfied business relocation client",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Thomas K.",
|
||||
date: "20.03.2024",
|
||||
title: "Guter Preis",
|
||||
quote: "Fairer Preis für tolle Leistung.",
|
||||
tag: "Privat",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-carrying-box_23-2149392095.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-carrying-box_23-2149392095.jpg",
|
||||
imageAlt: "happy family relocation process",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Julia M.",
|
||||
date: "22.03.2024",
|
||||
title: "Schnell",
|
||||
quote: "Haben den Umzug in Rekordzeit geschafft.",
|
||||
tag: "Privat",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-couple-holding-shopping-bags_23-2148683795.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-couple-holding-shopping-bags_23-2148683795.jpg",
|
||||
imageAlt: "happy senior citizen moving help",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Peter D.",
|
||||
date: "25.03.2024",
|
||||
title: "Super Team",
|
||||
quote: "Sehr freundlich und sehr umsichtig.",
|
||||
tag: "Gewerbe",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/smiling-smart-colleague-designers-discussing-work_23-2148180681.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-smart-colleague-designers-discussing-work_23-2148180681.jpg",
|
||||
imageAlt: "successful office relocation manager",
|
||||
},
|
||||
]}
|
||||
title="Unsere Kundenstimmen"
|
||||
description="Vertrauen ist die Basis unseres Erfolgs."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
title="Das sagen unsere Kunden"
|
||||
description="Zufriedene Kunden sind unser größtes Lob."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Markus S.", date: "2024-03-10", title: "Top professionell", quote: "Super schnell und extrem sorgfältig mit unseren Antiquitäten.", tag: "Privat", avatarSrc: "https://i.pravatar.cc/150?u=1", imageSrc: "https://img.b2bpic.net/free-photo/front-view-delivery-men-job-concept_23-2148684735.jpg" },
|
||||
{ id: "2", name: "Sarah L.", date: "2024-03-15", title: "Entspannt umgezogen", quote: "Danke an das Team für den reibungslosen Ablauf!", tag: "Gewerbe", avatarSrc: "https://i.pravatar.cc/150?u=2", imageSrc: "https://img.b2bpic.net/free-photo/delivery-person-getting-parcel-ready-delivery_23-2149371907.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Wie wird der Preis berechnet?",
|
||||
content: "Wir berechnen den Preis basierend auf Volumen, Entfernung und Schwierigkeit.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Sind meine Sachen versichert?",
|
||||
content: "Ja, Ihr gesamtes Hab und Gut ist während des Transports versichert.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Wie früh muss ich buchen?",
|
||||
content: "Je früher, desto besser – idealerweise 4-6 Wochen vor dem Umzug.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/couple-sealing-box_23-2147782395.jpg"
|
||||
title="Häufige Fragen"
|
||||
description="Antworten auf Ihre wichtigsten Fragen."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
title="Häufige Fragen"
|
||||
description="Hier finden Sie Antworten zu Ihrem Umzugsprojekt."
|
||||
faqs={[
|
||||
{ id: "f1", title: "Versicherungsschutz?", content: "Selbstverständlich ist Ihre Fracht bei uns umfassend versichert." },
|
||||
{ id: "f2", title: "Wie planen wir?", content: "Wir besichtigen vorab den Aufwand und erstellen ein festes Angebot." },
|
||||
{ id: "f3", title: "Montage inklusive?", content: "Ja, wir bieten als Komplettanbieter auch Möbelmontagen an." }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
faqsAnimation="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Kontaktieren Sie uns"
|
||||
description="Fordern Sie Ihr unverbindliches Angebot an."
|
||||
inputs={[
|
||||
{
|
||||
name: "Name",
|
||||
type: "text",
|
||||
placeholder: "Ihr Name",
|
||||
},
|
||||
{
|
||||
name: "Email",
|
||||
type: "email",
|
||||
placeholder: "Ihre E-Mail",
|
||||
},
|
||||
{
|
||||
name: "Telefon",
|
||||
type: "tel",
|
||||
placeholder: "Ihre Telefonnummer",
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Erzählen Sie uns von Ihrem Umzug",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-businesswoman-holding-box-personal-belongings-about-leave-office-after-quitting-job_93675-134425.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Jetzt anfragen"
|
||||
description="Hinterlassen Sie uns Ihre Nachricht und erhalten Sie ein unverbindliches Angebot."
|
||||
inputs={[
|
||||
{ name: "Name", type: "text", placeholder: "Ihr Name", required: true },
|
||||
{ name: "Email", type: "email", placeholder: "E-Mail Adresse", required: true },
|
||||
]}
|
||||
textarea={{ name: "nachricht", placeholder: "Was dürfen wir für Sie bewegen?" }}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/young-worker-loading-cardboard-boxes-delivery-van-communicating-with-his-colleague_637285-1268.jpg"
|
||||
useInvertedBackground={false}
|
||||
mediaPosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="UmzugProfi"
|
||||
columns={[
|
||||
{
|
||||
title: "Unternehmen",
|
||||
items: [
|
||||
{
|
||||
label: "Über uns",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Kontakt",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Privatumzug",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Büroumzug",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Rechtliches",
|
||||
items: [
|
||||
{
|
||||
label: "Datenschutz",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Impressum",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="UmzugProfi"
|
||||
columns={[
|
||||
{ items: [{ label: "Home", href: "#hero" }, { label: "About", href: "#about" }] },
|
||||
{ items: [{ label: "Kontakt", href: "#contact" }, { label: "Service", href: "#features" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user