Merge version_1 into main #6
@@ -11,8 +11,8 @@ import { Playfair_Display, Inter } from "next/font/google";
|
||||
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Dein Handwerker Köln | Sascha Nix | Premium-Handwerk',
|
||||
description: 'Ihr zuverlässiger Handwerker in Köln & Umgebung. Persönlich, transparent und gewissenhaft – von Renovierung bis Reparatur.',
|
||||
title: 'Webild - Modular Component Registry',
|
||||
description: 'Build faster with our modular component registry for modern web development.',
|
||||
openGraph: {
|
||||
"title": "Dein Handwerker Köln",
|
||||
"description": "Premium-Handwerksservice mit Sascha Nix.",
|
||||
|
||||
214
src/app/page.tsx
214
src/app/page.tsx
@@ -1,148 +1,90 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { Star, Wrench } from "lucide-react";
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import { Shield, ArrowRight, Star, Zap, CheckCircle } from 'lucide-react';
|
||||
|
||||
export default function LandingPage() {
|
||||
export default function Page() {
|
||||
const navItems = [{ name: "Home", id: "/" }];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
brandName="Dein Handwerker Köln"
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Über Sascha", id: "about" },
|
||||
{ name: "Leistungen", id: "features" },
|
||||
{ name: "Kontakt", id: "contact" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="DEIN HANDWERKER KÖLN"
|
||||
description="Handwerk mit Herz. Perfektion im Detail."
|
||||
buttons={[{ text: "JETZT ANFRAGEN", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/closeup-process-making-handmade-gingerbread_169016-19964.jpg"
|
||||
showDimOverlay={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="SASCHA NIX"
|
||||
description={[
|
||||
"Ihr Handwerker in Köln. Ich gebe nicht auf, bis eine Lösung gefunden ist.", "→ Zuverlässig & pünktlich", "→ Faire, transparente Preise", "→ Sauber & gewissenhaft", "→ Persönlicher Ansprechpartner"
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
title="WAS ICH FÜR SIE TUN KANN"
|
||||
description="Individuelle Lösungen für Ihr Zuhause."
|
||||
features={[
|
||||
{
|
||||
title: "RENOVIERUNG", description: "Komplettrenovierung Wände, Böden, Türen.", icon: Wrench,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-process-making-handmade-gingerbread_169016-19964.jpg", imageAlt: "Renovierung" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-process-making-handmade-gingerbread_169016-19964.jpg", imageAlt: "Renovierung detail" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "MONTAGE", description: "Möbel, Küchen, Regale, Herd.", icon: Star,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-worker-wearing-vest_23-2149366621.jpg", imageAlt: "Montage" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-worker-wearing-vest_23-2149366621.jpg", imageAlt: "Montage detail" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "REPARATUR", description: "Schnelle Hilfe im ganzen Haus.", icon: Wrench,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/skilled-cabinet-maker-working-small-workshop_1163-3132.jpg", imageAlt: "Reparatur" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/skilled-cabinet-maker-working-small-workshop_1163-3132.jpg", imageAlt: "Reparatur detail" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
cardTitle="DAS SAGEN MEINE KUNDEN"
|
||||
cardAnimation="slide-up"
|
||||
cardTag="Referenzen"
|
||||
testimonials={[
|
||||
{ id: "1", name: "Guido H.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-worker-wearing-vest_23-2149366621.jpg" },
|
||||
{ id: "2", name: "Stefano R.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-worker-wearing-vest_23-2149366621.jpg" },
|
||||
{ id: "3", name: "Alexandra D.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-worker-wearing-vest_23-2149366621.jpg" },
|
||||
{ id: "4", name: "Markus W.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-worker-wearing-vest_23-2149366621.jpg" },
|
||||
{ id: "5", name: "Sabine K.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-worker-wearing-vest_23-2149366621.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={true}
|
||||
title="Warum Dein Handwerker Köln?"
|
||||
tag="Expertise"
|
||||
metricsAnimation="slide-up"
|
||||
metrics={[
|
||||
{ id: "1", value: "01", description: "DIREKTE KOMMUNIKATION" },
|
||||
{ id: "2", value: "02", description: "FAIRE PREISE" },
|
||||
{ id: "3", value: "03", description: "SAUBER & GRÜNDLICH" },
|
||||
{ id: "4", value: "04", description: "PROBLEMLÖSER" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
title="BEREIT FÜR IHR PROJEKT?"
|
||||
description="Schildern Sie mir kurz Ihr Anliegen – ich melde mich zeitnah bei Ihnen."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/skilled-cabinet-maker-working-small-workshop_1163-3132.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
tag="Kontakt"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="DEIN HANDWERKER KÖLN"
|
||||
leftLink={{ text: "Impressum", href: "#" }}
|
||||
rightLink={{ text: "Datenschutz", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
<ThemeProvider>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen navItems={navItems} />
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Webild"
|
||||
description="Build faster with our modular component registry."
|
||||
buttons={[{ text: "Get Started", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="About Us"
|
||||
description={["We provide high-quality components for modern web development."]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFive
|
||||
title="Features"
|
||||
description="Our core features help you scale."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Fast",
|
||||
description: "Optimized performance.",
|
||||
icon: Zap,
|
||||
mediaItems: [{ imageSrc: "/placeholder.jpg" }, { imageSrc: "/placeholder.jpg" }]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
title="Our Impact"
|
||||
tag="Growth"
|
||||
metrics={[{ id: "1", value: "100+", description: "Components" }]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardTwelve
|
||||
testimonials={[{ id: "1", name: "User One", imageSrc: "/placeholder.jpg" }]}
|
||||
cardTitle="What users say"
|
||||
cardTag="Testimonials"
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Contact"
|
||||
title="Let's Connect"
|
||||
description="Get in touch for more information."
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Webild"
|
||||
leftLink={{ text: "Privacy", href: "#" }}
|
||||
rightLink={{ text: "Terms", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user