355 lines
20 KiB
TypeScript
355 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import { Eye, HelpCircle, MessageCircle } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="noise"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Domů", id: "#home"},
|
|
{
|
|
name: "O nás", id: "#about"},
|
|
{
|
|
name: "Služby", id: "#features"},
|
|
{
|
|
name: "Brýle", id: "#products"},
|
|
{
|
|
name: "Ceník", id: "#pricing"},
|
|
{
|
|
name: "Recenze", id: "#testimonials"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Kontakt", id: "#contact"},
|
|
]}
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=o6u86r"
|
|
logoAlt="Logo JoyOptik Brno"
|
|
brandName="JoyOptik Brno"
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroSplitKpi
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
imagePosition="right"
|
|
title="Vidět svět jasně. Váš zrak, naše radost."
|
|
description="V JoyOptik Brno se zaměřujeme na individuální péči o váš zrak. Od komplexního vyšetření po výběr stylových brýlí a kontaktních čoček s důrazem na vaše pohodlí a jedinečný styl."
|
|
kpis={[
|
|
{
|
|
value: "15+", label: "Let praxe"},
|
|
{
|
|
value: "5000+", label: "Spokojených klientů"},
|
|
{
|
|
value: "100%", label: "Individuální přístup"},
|
|
]}
|
|
enableKpiAnimation={true}
|
|
tag="JoyOptik Brno"
|
|
buttons={[
|
|
{
|
|
text: "Objednat se", href: "#contact"},
|
|
{
|
|
text: "Prohlédnout kolekce", href: "#products"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/portrait-thoughtful-woman-with-glasses-brain-generating-solutions-some-situations_158595-7998.jpg"
|
|
imageAlt="Žena si zkouší brýle v moderní optice"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/man-looking-new-glasses-optometrist_23-2148196763.jpg", alt: "Man looking for new glasses at optometrist"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/stylish-feminine-young-female-student-optician-store-making-glamorous-face-showing-v-sign-while-taking-selfie-new-pair-trendy-sunglasses_176420-3482.jpg", alt: "Stylish feminine young female student in optician store making glamorous face and showing v sign while taking selfie in new pair of trendy sunglasses"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/man-looking-new-glasses-optometrist_23-2148196696.jpg", alt: "Man looking for new glasses at optometrist"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/attractive-woman-went-shopping-alone-making-selfie-while-trying-new-stylish-sunglasses-optician-shop-sending-photo-friend_176420-3477.jpg", alt: "Attractive woman went on shopping alone, making selfie while trying on new stylish sunglasses in optician shop, sending photo to friend"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-redhead-female-sunglasses-drinks-coffee-cafe-street_613910-10412.jpg", alt: "Portrait of redhead female in sunglasses, drinks coffee in a cafe on a street."},
|
|
]}
|
|
avatarText="Přes 5000 spokojených klientů"
|
|
marqueeItems={[
|
|
{
|
|
type: "text-icon", text: "Precizní vyšetření", icon: Eye,
|
|
},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/glasses-with-slightly-rounded-frame_23-2150670746.jpg", alt: "Glasses with slightly rounded frame"},
|
|
{
|
|
type: "text-icon", text: "Stylové brýle", icon: Eye,
|
|
},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/black-glasses_93675-130909.jpg", alt: "Black glasses"},
|
|
{
|
|
type: "text-icon", text: "Odborné poradenství", icon: MessageCircle,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
useInvertedBackground={false}
|
|
tag="O Nás"
|
|
title="Individuální přístup a moderní optika pro celou rodinu."
|
|
buttons={[
|
|
{
|
|
text: "Zjistit více", href: "#"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyFive
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Komplexní vyšetření zraku", description: "Používáme nejmodernější diagnostické přístroje pro přesné a detailní vyšetření vašeho zraku.", icon: Eye,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/devices-ready-patient-consultation_23-2149230006.jpg", imageAlt: "Moderní vybavení pro vyšetření zraku"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/patient-ophthalmologist-s-office_23-2150917658.jpg", imageAlt: "Moderní vybavení pro vyšetření zraku"},
|
|
]
|
|
},
|
|
{
|
|
title: "Stylový výběr brýlí", description: "Nabízíme široký sortiment dioptrických i slunečních brýlí od světových značek. Pomůžeme vám najít ty pravé.", icon: Eye,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/back-view-woman-checking-sunglasses_23-2148273139.jpg", imageAlt: "Výběr stylových brýlí"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/glasses-always-is-enough-side-portrait-good-looking-modern-woman-transparent-glasses-looking-stand-with-eyewear-picking-from-variety-frames-wanting-buy-something-new_176420-6726.jpg", imageAlt: "Výběr stylových brýlí"},
|
|
]
|
|
},
|
|
{
|
|
title: "Kontaktní čočky a poradenství", description: "Poskytujeme kontaktní čočky všech typů a odborné poradenství pro jejich správné používání a péči.", icon: HelpCircle,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-case-contact-lenses-with-tweezers_23-2148429637.jpg", imageAlt: "Kontaktní čočky a poradenství"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-contact-lenses-case-with-copy-space-tweezers_23-2148429652.jpg", imageAlt: "Kontaktní čočky a poradenství"},
|
|
]
|
|
},
|
|
]}
|
|
title="Naše klíčové služby"
|
|
description="Nabízíme širokou škálu služeb pro dokonalý zrak a komfort s využitím nejmodernějších technologií a osobního poradenství."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1", name: "Elegantní rám Classic", price: "5 490 Kč", variant: "Černá matná", imageSrc: "http://img.b2bpic.net/free-photo/close-up-worker-with-black-glasses-short-hair_1149-92.jpg", imageAlt: "Elegantní černé brýle"},
|
|
{
|
|
id: "p2", name: "Retro kruhové", price: "3 990 Kč", variant: "Zlatá / Stříbrná", imageSrc: "http://img.b2bpic.net/free-photo/colored-transparent-sunglasses-still-life_23-2150163153.jpg", imageAlt: "Retro kruhové brýle"},
|
|
{
|
|
id: "p3", name: "Fashion Statement", price: "6 800 Kč", variant: "Modrá / Hnědá", imageSrc: "http://img.b2bpic.net/free-photo/yellow-purple-border-frame-isolated-white-background_23-2148191213.jpg", imageAlt: "Módní brýle s barevným rámem"},
|
|
{
|
|
id: "p4", name: "Minimalist Clear", price: "4 200 Kč", variant: "Transparentní", imageSrc: "http://img.b2bpic.net/free-photo/black-eyeglass-white-paper-attach-with-two-bulldog-clips-marble-backdrop_23-2148061548.jpg", imageAlt: "Minimalistické průhledné brýle"},
|
|
{
|
|
id: "p5", name: "Dámské Cat Eye", price: "5 100 Kč", variant: "Černá lesklá", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-fashionable-brunette-woman-stylish-sunglasses-pink-t-shirt_273443-4079.jpg", imageAlt: "Dámské brýle Cat Eye"},
|
|
{
|
|
id: "p6", name: "Sportovní odolné", price: "3 200 Kč", variant: "Černá / Šedá", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-nice-dark-skinned-man-black-clothes-stylish-sunglasses-handsome-man-looking-thoughtful-sad-sitting-alone-with-music-lonely-pensive-mood-urban-landscape_273609-1225.jpg", imageAlt: "Sportovní brýle"},
|
|
]}
|
|
title="Kolekce stylových brýlí"
|
|
description="Objevte naši exkluzivní nabídku dioptrických i slunečních brýlí od předních světových značek."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "standard", title: "Standardní balíček", price: "850 Kč", period: "/ vyšetření", features: [
|
|
"Kompletní vyšetření zraku", "Měření dioptrií", "Kontrola očního tlaku", "Základní poradenství"],
|
|
button: {
|
|
text: "Objednat standard", href: "#contact"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/lens-eyesight-checkup_23-2150801420.jpg", imageAlt: "Standardní vyšetření zraku"},
|
|
{
|
|
id: "premium", title: "Premium balíček", price: "1 490 Kč", period: "/ vyšetření", features: [
|
|
"Vše ze Standard balíčku", "Pokročilá diagnostika sítnice", "Digitální mapování rohovky", "Personalizovaný plán péče", "10% sleva na brýle"],
|
|
button: {
|
|
text: "Objednat premium", href: "#contact"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/face-recognition-personal-identification-collage_23-2150165577.jpg", imageAlt: "Pokročilé vyšetření zraku"},
|
|
{
|
|
id: "kids", title: "Dětský balíček", price: "690 Kč", period: "/ vyšetření", features: [
|
|
"Vyšetření zraku dětí (hravou formou)", "Test barevného vidění", "Prevence očních vad", "Poradenství pro rodiče"],
|
|
button: {
|
|
text: "Objednat pro děti", href: "#contact"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-people-watching-movie-cinema_23-2151024820.jpg", imageAlt: "Dětské vyšetření zraku"},
|
|
]}
|
|
title="Balíčky péče o zrak"
|
|
description="Vyberte si ideální balíček pro komplexní péči o váš zrak a zdraví očí s našimi profesionálními službami."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "15+", title: "Let zkušeností", description: "Bohaté zkušenosti v oboru oční optiky a péče o zrak.", imageSrc: "http://img.b2bpic.net/free-photo/worn-wooden-texture-with-rough-surface_23-2148394750.jpg", imageAlt: "Ikona s historickým zobrazením času"},
|
|
{
|
|
id: "m2", value: "5000+", title: "Spokojených klientů", description: "Tisíce zákazníků se k nám pravidelně vrací pro svou oční péči.", imageSrc: "http://img.b2bpic.net/free-photo/friends-drinking-tailgate-party_53876-132076.jpg", imageAlt: "Ikona se skupinou lidí"},
|
|
{
|
|
id: "m3", value: "99%", title: "Míra spokojenosti", description: "Vysoká spokojenost klientů je pro nás prioritou a motivací.", imageSrc: "http://img.b2bpic.net/free-photo/world-smile-day-emojis_23-2149024489.jpg", imageAlt: "Ikona s pěti hvězdičkami"},
|
|
]}
|
|
title="Naše úspěchy v číslech"
|
|
description="Důvěřují nám tisíce spokojených klientů, kteří se spoléhají na naše profesionální služby a péči."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "Jana Nováková", handle: "@jananovak", testimonial: "Vždy se sem ráda vracím! Profesionální přístup, široký výběr brýlí a paní optička je naprosto úžasná. Díky nim vidím perfektně a ještě vypadám skvěle.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-asian-creative-girl-sitting-with-digital-tablet-drawing-with-graphic-pen-smiling-doodling_1258-199127.jpg", imageAlt: "Foto Jany Novákové"},
|
|
{
|
|
id: "t2", name: "Petr Svoboda", handle: "@svobodap", testimonial: "Potřeboval jsem nové multifokální brýle a v JoyOptik mi skvěle poradili. Vyšetření bylo precizní a výběr rámů ohromný. Vřele doporučuji každému.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-talking-phone_23-2148230757.jpg", imageAlt: "Foto Petra Svobody"},
|
|
{
|
|
id: "t3", name: "Kateřina Dvořáková", handle: "@katerina.d", testimonial: "Fantastická zkušenost od začátku do konce. Ochotný personál, moderní vybavení a výsledkem jsou brýle, které mi dokonale sedí. Již nikdy jinam!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/make-up-artist-work-her-beauty-visage-studio-salon-woman-applying-by-professional-make-up-master-beauty-club-concept_627829-9058.jpg", imageAlt: "Foto Kateřiny Dvořákové"},
|
|
{
|
|
id: "t4", name: "Miroslav Urban", handle: "@urbanmir", testimonial: "Byl jsem překvapen kvalitou služeb. Rychlé objednání, podrobné vyšetření a na výběr mají opravdu krásné a kvalitní brýle. Za mě plný počet hvězd.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-elegant-aged-man_1098-15370.jpg", imageAlt: "Foto Miroslava Urbana"},
|
|
{
|
|
id: "t5", name: "Eva Králová", handle: "@eva.kr", testimonial: "Skvělé ceny a ještě lepší servis. Potřebovala jsem upravit brýle a bylo to hotové za pár minut. Milý a vstřícný personál. Děkuji!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-happy-beautiful-young-woman-clapping-looks-pleased-smiling-applause-you_1258-203152.jpg", imageAlt: "Foto Evy Králové"},
|
|
]}
|
|
showRating={true}
|
|
title="Co o nás říkají naši klienti"
|
|
description="Přečtěte si autentické recenze od lidí, kteří nám svěřili svůj zrak a styl."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "Je nutné se na vyšetření zraku objednat?", content: "Ano, pro zajištění individuální péče a minimální čekací doby je doporučujeme se předem objednat telefonicky nebo online."},
|
|
{
|
|
id: "q2", title: "Jak dlouho trvá vyšetření zraku?", content: "Komplexní vyšetření zraku obvykle trvá 30 až 45 minut, v závislosti na vašich potřebách a složitosti případu."},
|
|
{
|
|
id: "q3", title: "Můžu si u vás nechat opravit brýle, které jsem si koupil jinde?", content: "Ano, provádíme drobné opravy a úpravy brýlí zakoupených i jinde. Zastavte se u nás a domluvíme se na řešení."},
|
|
]}
|
|
sideTitle="Často kladené otázky"
|
|
sideDescription="Máte dotazy ohledně vyšetření, brýlí nebo kontaktních čoček? Zde najdete odpovědi na ty nejčastější."
|
|
buttons={[
|
|
{
|
|
text: "Další otázky", href: "#"},
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
textPosition="left"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
tag="Kontakt"
|
|
title="Objednejte se ještě dnes!"
|
|
description="Náš tým je připraven vám pomoci s výběrem dokonalých brýlí nebo s komplexním vyšetřením zraku."
|
|
buttons={[
|
|
{
|
|
text: "Objednat se online", href: "#"},
|
|
{
|
|
text: "Zavolat nám", href: "tel:+420123456789"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=o6u86r"
|
|
logoAlt="Logo JoyOptik Brno"
|
|
logoText="JoyOptik Brno"
|
|
columns={[
|
|
{
|
|
title: "Služby", items: [
|
|
{
|
|
label: "Vyšetření zraku", href: "#features"},
|
|
{
|
|
label: "Výběr brýlí", href: "#features"},
|
|
{
|
|
label: "Kontaktní čočky", href: "#features"},
|
|
{
|
|
label: "Opravy brýlí", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Produkty", items: [
|
|
{
|
|
label: "Dioptrické brýle", href: "#products"},
|
|
{
|
|
label: "Sluneční brýle", href: "#products"},
|
|
{
|
|
label: "Dětské brýle", href: "#products"},
|
|
{
|
|
label: "Příslušenství", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Kontakt", items: [
|
|
{
|
|
label: "Objednání", href: "#contact"},
|
|
{
|
|
label: "Naše pobočky", href: "#contact"},
|
|
{
|
|
label: "Otevírací doba", href: "#contact"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 JoyOptik Brno | Všechna práva vyhrazena."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|