211 lines
8.7 KiB
TypeScript
211 lines
8.7 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import { Calendar, CheckCircle, Code, MessageSquare, Monitor, Palette, Smartphone, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="noise"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Domů", id: "hero"},
|
|
{
|
|
name: "Služby", id: "services"},
|
|
{
|
|
name: "Výhody", id: "why-us"},
|
|
{
|
|
name: "Kontakt", id: "contact"},
|
|
]}
|
|
brandName="Snapsite"
|
|
button={{
|
|
text: "Chci web", href: "#contact"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
title="Získejte moderní web, který přivádí zákazníky"
|
|
description="Profesionální webdesign na míru pro vaše podnikání. Rychle, přehledně a s důrazem na výsledek."
|
|
testimonials={[
|
|
{
|
|
name: "Petr Novák", handle: "@podnikatel", testimonial: "Skvělá spolupráce, web předčil moje očekávání.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1t3i1k&_wi=1", imageAlt: "web design background illustration"},
|
|
{
|
|
name: "Jana Svobodová", handle: "@marketing", testimonial: "Profesionální přístup a bleskové dodání.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qdcggg&_wi=1", imageAlt: "web design background illustration"},
|
|
{
|
|
name: "Martin Dvořák", handle: "@startup", testimonial: "Konečně web, který vypadá moderně a prodává.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=drevs3&_wi=1", imageAlt: "web design background illustration"},
|
|
{
|
|
name: "Lucie Černá", handle: "@design", testimonial: "Výborná komunikace a cit pro detail.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=p3b969", imageAlt: "web design background illustration"},
|
|
{
|
|
name: "Tomáš Marek", handle: "@tech", testimonial: "Rychlost, jakou web vytvořili, je neuvěřitelná.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3t56yt&_wi=1", imageAlt: "web design background illustration"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Chci nezávaznou nabídku", href: "#contact"},
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1t3i1k&_wi=2"
|
|
avatars={[
|
|
{
|
|
src: "asset://hero-avatar-1", alt: "Client 1"},
|
|
{
|
|
src: "asset://hero-avatar-2", alt: "Client 2"},
|
|
{
|
|
src: "asset://hero-avatar-3", alt: "Client 3"},
|
|
{
|
|
src: "asset://hero-avatar-4", alt: "Client 4"},
|
|
{
|
|
src: "asset://hero-avatar-5", alt: "Client 5"},
|
|
]}
|
|
marqueeItems={[
|
|
{
|
|
type: "text", text: "Responsivní design"},
|
|
{
|
|
type: "text", text: "SEO optimalizace"},
|
|
{
|
|
type: "text", text: "Rychlost načítání"},
|
|
{
|
|
type: "text", text: "Intuitivní UX"},
|
|
{
|
|
type: "text", text: "Bezpečnostní standardy"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyFive
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Tvorba webu na míru", description: "Web navržený přesně podle vašich potřeb.", icon: Monitor,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qdcggg&_wi=2"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3t56yt&_wi=2"},
|
|
],
|
|
},
|
|
{
|
|
title: "Rychlé dodání", description: "Váš nový web může běžet už do dvou týdnů.", icon: Zap,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=drevs3&_wi=2"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=45zjoi"},
|
|
],
|
|
},
|
|
{
|
|
title: "Moderní mobilní design", description: "Perfektní zobrazení na všech zařízeních.", icon: Smartphone,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zp30br"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1t3i1k&_wi=3"},
|
|
],
|
|
},
|
|
]}
|
|
title="Naše služby"
|
|
description="Vše co potřebujete pro úspěšný start online."
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-us" data-section="why-us">
|
|
<MetricCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "1", value: "Férová cena", title: "Transparentnost", description: "Žádné skryté poplatky, jasná kalkulace.", icon: CheckCircle,
|
|
},
|
|
{
|
|
id: "2", value: "Komunikace", title: "Jednoduchost", description: "Domluvíme se lidsky a srozumitelně.", icon: MessageSquare,
|
|
},
|
|
{
|
|
id: "3", value: "2 týdny", title: "Rychlost", description: "Dodržujeme stanovené termíny.", icon: Calendar,
|
|
},
|
|
]}
|
|
title="Proč si vybrat nás"
|
|
description="Naše hodnoty, na kterých stavíme každý web."
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
title="Zkušený tým pro vaše digitální sny"
|
|
description="Naším cílem je přeměnit vaši vizi v digitální realitu prostřednictvím špičkového designu a čistého kódu."
|
|
imageSrc="asset://about-section-img"
|
|
mediaAnimation="slide-up"
|
|
bulletPoints={[
|
|
{
|
|
title: "Kreativní přístup", description: "Navrhujeme weby, které vás odliší od konkurence.", icon: Palette,
|
|
},
|
|
{
|
|
title: "Technologická zdatnost", description: "Používáme nejmodernější nástroje pro rychlost a výkon.", icon: Code,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
tag="Kontaktujte nás"
|
|
title="Máte zájem o spolupráci?"
|
|
description="Pošlete nám svou poptávku a my se vám ozveme zpět."
|
|
buttons={[
|
|
{
|
|
text: "Odeslat poptávku", href: "#"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Snapsite"
|
|
leftLink={{
|
|
text: "snapsite@gmail.com", href: "mailto:snapsite@gmail.com"}}
|
|
rightLink={{
|
|
text: "© 2024 Snapsite", href: "#"}}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|