Files
b79aa4e0-cb4c-4fff-b7d8-759…/src/app/page.tsx
2026-03-31 13:12:44 +00:00

150 lines
6.7 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import { Award, Calendar, CheckCircle, Headphones, MapPin, ShieldCheck, Users, Wrench } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="compact"
sizing="largeSmallSizeLargeTitles"
background="fluid"
cardStyle="gradient-radial"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "Úvod", id: "hero" },
{ name: "O nás", id: "about" },
{ name: "Služby", id: "services" },
{ name: "Reference", id: "gallery" },
{ name: "Kontakt", id: "contact" },
]}
brandName="Top KOVODĚL"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboardSplit
background={{ variant: "radial-gradient" }}
logoText="Top KOVODĚL"
description="Kompletní montáže, rekonstrukce a servis pro rodinné domy, byty i průmyslové objekty. Uherský Brod a okolí."
buttons={[{ text: "Naše služby", href: "#services" }]}
layoutOrder="default"
imageSrc="http://img.b2bpic.net/free-photo/plumber-holding-hammer_1368-6308.jpg"
mediaAnimation="opacity"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Tradice od roku 1994"
metrics={[
{ icon: Calendar, label: "Rok založení", value: "1994" },
{ icon: Award, label: "Zkušenosti", value: "30+ let" },
{ icon: CheckCircle, label: "Servis", value: "Certifikovaný" },
{ icon: MapPin, label: "Lokalita", value: "Uherský Brod" },
]}
metricsAnimation="slide-up"
/>
</div>
<div id="services" data-section="services">
<FeatureCardNine
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
features={[
{ id: 1, title: "Topení", description: "Kompletní návrhy a montáže vytápění.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/modern-autonomous-heating-system-boiler-room-copy-space_169016-53751.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-bathroom-interior_23-2151995354.jpg" } },
{ id: 2, title: "Voda a kanalizace", description: "Rozvody vody a odpadů.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721548.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/modern-autonomous-heating-system-boiler-room-copy-space_169016-53751.jpg" } },
{ id: 3, title: "Plynoinstalace", description: "Bezpečná montáž a servis plynu.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-bathroom-interior_23-2151995354.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721548.jpg" } },
{ id: 4, title: "Solární systémy", description: "Efektivní využití obnovitelné energie.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/modern-autonomous-heating-system-boiler-room-copy-space_169016-53751.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-bathroom-interior_23-2151995354.jpg" } },
]}
showStepNumbers={false}
title="Naše odborné služby"
description="Zajišťujeme kompletní realizace a servis technických zařízení budov."
/>
</div>
<div id="trust" data-section="trust">
<MetricCardThree
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{ id: "m1", icon: ShieldCheck, title: "Záruka kvality", value: "30 let" },
{ id: "m2", icon: Users, title: "Partneři", value: "Protherm" },
{ id: "m3", icon: Wrench, title: "Realizace", value: "Vlastní" },
{ id: "m4", icon: Headphones, title: "Servis", value: "Odborný" },
]}
title="Proč si vybrat nás"
description="Kvalita podložená třemi dekádami praxe."
/>
</div>
<div id="gallery" data-section="gallery">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{ id: "p1", name: "Kotelny", price: "Realizace", imageSrc: "http://img.b2bpic.net/free-photo/modern-autonomous-heating-system-boiler-room-copy-space_169016-53751.jpg" },
{ id: "p2", name: "Rekonstrukce", price: "Koupelny", imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-bathroom-interior_23-2151995354.jpg" },
{ id: "p3", name: "Podlahové topení", price: "Instalace", imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721548.jpg" },
]}
title="Naše realizace"
description="Ukázky precizní práce v regionu Zlín."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{ variant: "plain" }}
tag="Kontakt"
title="Jsme zde pro Vás"
description="Kontaktujte nás pro nezávaznou poptávku."
imageSrc="http://img.b2bpic.net/free-photo/plumber-holding-hammer_1368-6308.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/plumber-holding-hammer_1368-6308.jpg"
columns={[
{
title: "Kontakt", items: [
{ label: "Kučerovo nám. 2474, Uherský Brod", href: "#" },
{ label: "572 630 536", href: "tel:+420572630536" },
{ label: "info@topkovodel.cz", href: "mailto:info@topkovodel.cz" },
],
},
]}
logoText="Top KOVODĚL"
copyrightText="© 2025 Top KOVODĚL, spol. s r.o."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}