bender/f61be1db-087b-49aa-92e0-b316014a5f6e
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-12 15:59:04 +00:00
parent d22728c823
commit 7e52c80933
1 changed files with 81 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/app/page.tsx
View File

@@ -2,35 +2,35 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter'; import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqBase from '@/components/sections/faq/FaqBase'; import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight'; import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterMedia from '@/components/sections/footer/FooterMedia'; import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial'; import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MediaAbout from '@/components/sections/about/MediaAbout'; import AboutMetric from '@/components/sections/about/AboutMetric';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne'; import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine'; import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive'; import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Scissors, Star, Users } from "lucide-react"; import { Scissors, Star, Users, CheckCircle, Clock, MapPin } from "lucide-react";
export default function LandingPage() { export default function LandingPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="text-shift" defaultButtonVariant="text-shift"
defaultTextAnimation="entrance-slide" defaultTextAnimation="entrance-slide"
borderRadius="rounded" borderRadius="pill"
contentWidth="small" contentWidth="medium"
sizing="largeSmall" sizing="medium"
background="circleGradient" background="noise"
cardStyle="outline" cardStyle="glass-elevated"
primaryButtonStyle="shadow" primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow" secondaryButtonStyle="glass"
headingFontWeight="extrabold" headingFontWeight="bold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay <NavbarStyleApple
navItems={[ navItems={[
{ name: "Головна", id: "hero" }, { name: "Головна", id: "hero" },
{ name: "Про нас", id: "about" }, { name: "Про нас", id: "about" },
@@ -44,140 +44,119 @@ export default function LandingPage() {
</div> </div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboardTestimonial <HeroSplitKpi
useInvertedBackground={false} title="Барбер у вас вдома — стиль без зайвих зусиль"
background={{ variant: "gradient-bars" }} description="Професійні стрижки та догляд за бородою від майстрів преміум-рівня прямо у вас вдома. Економте свій час, не втрачаючи якості."
title="Професійний барбер у вас вдома" background={{ variant: "glowing-orb" }}
description="Отримайте ідеальну стрижку та догляд за бородою без зайвого часу на дорогу. Наш мобільний сервіс приїде до вас у зручний час." kpis={[
testimonials={[ { value: "30+", label: "Майстрів" },
{ name: "Олександр", handle: "@alex", testimonial: "Це найкращий сервіс! Стрижуть якісно і не треба нікуди їхати.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/confused-young-handsome-male-barber-uniform-holding-hair-clippers-spread-hand_141793-81553.jpg?_wi=1", imageAlt: "barber mobile grooming service" }, { value: "5000+", label: "Клієнтів" },
{ name: "Дмитро", handle: "@dmitro", testimonial: "Професійно, швидко і дуже зручно. Рекомендую всім друзям.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/funny-little-boy-is-getting-trendy-haircut-from-expirienced-barber-fashionable-hairdressing-salon-firs-time_613910-21469.jpg?_wi=1", imageAlt: "barber mobile grooming service" }, { value: "4.9", label: "Рейтинг" }
{ name: "Іван", handle: "@ivan", testimonial: "Ідеальна стрижка у власній вітальні.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/barber-styling-hair-client_23-2147778736.jpg?_wi=1", imageAlt: "barber mobile grooming service" },
{ name: "Микола", handle: "@nikola", testimonial: "Сервіс на 10 з 10!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg?_wi=1", imageAlt: "barber mobile grooming service" },
{ name: "Тарас", handle: "@taras", testimonial: "Нарешті не треба стояти в чергах.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/professional-girl-hairdresser-makes-client-haircut-girl-is-sitting-mask-beauty-salon_343596-4435.jpg?_wi=1", imageAlt: "barber mobile grooming service" }
]} ]}
enableKpiAnimation={true}
buttons={[{ text: "Забронювати виїзд", href: "#contact" }, { text: "Переглянути ціни", href: "#pricing" }]}
imageSrc="http://img.b2bpic.net/free-photo/confused-young-handsome-male-barber-uniform-holding-hair-clippers-spread-hand_141793-81553.jpg?_wi=2" imageSrc="http://img.b2bpic.net/free-photo/confused-young-handsome-male-barber-uniform-holding-hair-clippers-spread-hand_141793-81553.jpg?_wi=2"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/low-angle-costumer-barber-shop-looking-phone-with-copy-space_23-2148242843.jpg", alt: "Client 1" },
{ src: "http://img.b2bpic.net/free-photo/annoyed-young-caucasian-male-barber-wearing-glasses-wavy-hair-band-uniform-holding-looking-straight-razor-with-shaving-cream-put-his-face-keeping-hand-air_141793-98626.jpg", alt: "Client 2" },
{ src: "http://img.b2bpic.net/free-photo/frowning-young-afro-american-male-barber-wearing-uniform-holding-barber-tools-looking-pointing-camera-with-comb_141793-117222.jpg", alt: "Client 3" },
{ src: "http://img.b2bpic.net/free-photo/attractive-barber-shaving-hair-client_23-2147778750.jpg", alt: "Client 4" },
{ src: "http://img.b2bpic.net/free-photo/stylist-cutting-beard-faceless-client_23-2147778868.jpg", alt: "Client 5" }
]}
marqueeItems={[
{ type: "text", text: "Тільки професійні майстри" },
{ type: "text", text: "Стерильне обладнання" },
{ type: "text", text: "Зручний запис онлайн" },
{ type: "text", text: "Виїзд по всьому місту" },
{ type: "text", text: "Якість преміум-рівня" }
]}
/> />
</div> </div>
<div id="about" data-section="about"> <div id="about" data-section="about">
<MediaAbout <AboutMetric
title="Ми змінюємо ваш підхід до догляду"
metrics={[
{ icon: Clock, label: "Час", value: "Виїзд 24/7" },
{ icon: CheckCircle, label: "Якість", value: "Преміум інструменти" },
{ icon: MapPin, label: "Локація", value: "Весь Київ" }
]}
metricsAnimation="slide-up"
useInvertedBackground={false} useInvertedBackground={false}
title="Хто ми?"
description="Ми — команда професійних барберів, що цінують ваш час. Наша мета — надати якісний сервіс рівня найкращих барбершопів прямо у вашому домі, офісі чи будь-якій зручній для вас локації."
imageSrc="http://img.b2bpic.net/free-photo/funny-little-boy-is-getting-trendy-haircut-from-expirienced-barber-fashionable-hairdressing-salon-firs-time_613910-21469.jpg?_wi=2"
/> />
</div> </div>
<div id="features" data-section="features"> <div id="features" data-section="features">
<FeatureCardEight <FeatureCardSix
title="Чому обирають нас"
textboxLayout="split" textboxLayout="split"
useInvertedBackground={false} useInvertedBackground={false}
features={[ features={[
{ title: "Економія часу", description: "Ми приїжджаємо до вас у зручний час.", imageSrc: "http://img.b2bpic.net/free-photo/barber-styling-hair-client_23-2147778736.jpg?_wi=2" }, { title: "Економія часу", description: "Ми приїжджаємо до вас у зручний час, щоб ви не стояли в заторах та чергах.", imageSrc: "http://img.b2bpic.net/free-photo/barber-styling-hair-client_23-2147778736.jpg?_wi=2" },
{ title: "Стерильність", description: "Повний набір професійних дезінфікованих інструментів.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg?_wi=2" }, { title: "Стерильність", description: "Кожен інструмент проходить повну дезінфекцію перед кожним клієнтом.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg?_wi=2" },
{ title: "Висока якість", description: "Досвідчені майстри з професійним підходом.", imageSrc: "http://img.b2bpic.net/free-photo/professional-girl-hairdresser-makes-client-haircut-girl-is-sitting-mask-beauty-salon_343596-4435.jpg?_wi=2" }, { title: "Індивідуальний підхід", description: "Майстри проконсультують та підберуть стрижку, що ідеально личитиме вашому обличчю.", imageSrc: "http://img.b2bpic.net/free-photo/professional-girl-hairdresser-makes-client-haircut-girl-is-sitting-mask-beauty-salon_343596-4435.jpg?_wi=2" }
{ title: "Зручний запис", description: "Вибирайте зручний слот в один клік.", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-styling-hair-man_23-2147778737.jpg" },
{ title: "Індивідуальний стиль", description: "Підбір стрижки під ваші риси обличчя.", imageSrc: "http://img.b2bpic.net/free-photo/trendy-haircut-barbershop_1163-2011.jpg" }
]} ]}
title="Наші переваги"
description="Комфорт та якість у кожній деталі."
/> />
</div> </div>
<div id="pricing" data-section="pricing"> <div id="pricing" data-section="pricing">
<PricingCardNine <PricingCardFive
title="Наші послуги"
animationType="slide-up" animationType="slide-up"
textboxLayout="default" textboxLayout="split"
useInvertedBackground={false} useInvertedBackground={false}
plans={[ plans={[
{ id: "1", title: "Стрижка", price: "600 ₴", period: "одна процедура", features: ["Мило голови", "Стрижка", "Укладка"], button: { text: "Забронювати" }, imageSrc: "http://img.b2bpic.net/free-photo/cute-little-child-is-getting-trendy-haircut-from-barber-busy-barbershop_613910-20834.jpg" }, { id: "basic", tag: "Популярно", price: "600 ₴", period: "за сеанс", description: "Базова стрижка з миттям голови та укладкою.", button: { text: "Обрати" }, featuresTitle: "Що входить:", features: ["Мийка голови", "Стрижка", "Стильна укладка"] },
{ id: "2", title: "Стрижка + Борода", price: "900 ₴", period: "одна процедура", features: ["Стрижка", "Догляд за бородою", "Укладка"], button: { text: "Забронювати" }, imageSrc: "http://img.b2bpic.net/free-photo/confused-young-handsome-male-barber-uniform-holding-hair-clippers-spread-hand_141793-81553.jpg?_wi=3" }, { id: "pro", tag: "Рекомендуємо", price: "950 ₴", period: "за сеанс", description: "Комплексний догляд за стрижкою та бородою.", button: { text: "Обрати" }, featuresTitle: "Що входить:", features: ["Стрижка", "Моделювання бороди", "Укладка", "Фінішні засоби"] }
{ id: "3", title: "Королівське гоління", price: "500 ₴", period: "одна процедура", features: ["Гарячий рушник", "Гоління", "Догляд"], button: { text: "Забронювати" }, imageSrc: "http://img.b2bpic.net/free-photo/funny-little-boy-is-getting-trendy-haircut-from-expirienced-barber-fashionable-hairdressing-salon-firs-time_613910-21469.jpg?_wi=3" }
]} ]}
title="Ціни на послуги"
description="Прозорі ціни без прихованих платежів."
/> />
</div> </div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardFive <TestimonialCardTwelve
textboxLayout="default" cardTitle="Відгуки наших клієнтів"
cardTag="Відгуки"
cardAnimation="slide-up"
useInvertedBackground={false} useInvertedBackground={false}
testimonials={[ testimonials={[
{ id: "1", name: "Сергій", date: "12.01.2024", title: "Чудово", quote: "Дуже зручно, майстер приїхав вчасно і зробив все професійно.", tag: "Клієнт", avatarSrc: "http://img.b2bpic.net/free-photo/young-man-smiling_23-2147624592.jpg", imageSrc: "http://img.b2bpic.net/free-photo/confused-young-handsome-male-barber-uniform-holding-hair-clippers-spread-hand_141793-81553.jpg?_wi=4", imageAlt: "happy client man haircutting" }, { id: "1", name: "Андрій", imageSrc: "http://img.b2bpic.net/free-photo/young-man-smiling_23-2147624592.jpg" },
{ id: "2", name: "Ігор", date: "10.01.2024", title: "Клас", quote: "Стрижка на рівні, навіть краще ніж у салоні.", tag: "Клієнт", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-male-barber-uniform-holding-out-straight-razor-camera-isolated-blue_141793-73815.jpg", imageSrc: "http://img.b2bpic.net/free-photo/funny-little-boy-is-getting-trendy-haircut-from-expirienced-barber-fashionable-hairdressing-salon-firs-time_613910-21469.jpg?_wi=4", imageAlt: "happy client man haircutting" }, { id: "2", name: "Олег", imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg" },
{ id: "3", name: "Максим", date: "05.01.2024", title: "Супер", quote: "Дякую, буду звертатися ще!", tag: "Клієнт", avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-getting-her-hair-dyed-by-hairdresser-home_23-2148817234.jpg", imageSrc: "http://img.b2bpic.net/free-photo/barber-styling-hair-client_23-2147778736.jpg?_wi=3", imageAlt: "happy client man haircutting" }, { id: "3", name: "Максим", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-barbershop_23-2148506245.jpg" }
{ id: "4", name: "Олег", date: "02.01.2024", title: "Чудовий сервіс", quote: "Найкращий варіант для зайнятих людей.", tag: "Клієнт", avatarSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205928.jpg", imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg?_wi=3", imageAlt: "happy client man haircutting" },
{ id: "5", name: "Андрій", date: "28.12.2023", title: "Рекомендую", quote: "Все на висоті, щиро раджу.", tag: "Клієнт", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-barbershop_23-2148506245.jpg", imageSrc: "http://img.b2bpic.net/free-photo/professional-girl-hairdresser-makes-client-haircut-girl-is-sitting-mask-beauty-salon_343596-4435.jpg?_wi=3", imageAlt: "happy client man haircutting" }
]} ]}
title="Відгуки клієнтів"
description="Що кажуть про нас клієнти."
/> />
</div> </div>
<div id="metrics" data-section="metrics"> <div id="metrics" data-section="metrics">
<MetricCardOne <MetricCardFourteen
animationType="slide-up" title="Довіра клієнтів"
textboxLayout="default" tag="Показники"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[ metrics={[
{ id: "1", value: "500+", title: "Задоволених клієнтів", description: "Постійних користувачів", icon: Users }, { id: "1", value: "500+", description: "Позитивних відгуків" },
{ id: "2", value: "1000+", title: "Виконаних стрижок", description: "Професійна якість", icon: Scissors }, { id: "2", value: "98%", description: "Повторних звернень" },
{ id: "3", value: "4.9", title: "Середня оцінка", description: "Від клієнтів", icon: Star } { id: "3", value: "1000+", description: "Стрижок у місяць" }
]} ]}
title="Наші показники" metricsAnimation="slide-up"
description="Статистика наших досягнень."
/> />
</div> </div>
<div id="faq" data-section="faq"> <div id="faq" data-section="faq">
<FaqBase <FaqSplitText
textboxLayout="default" sideTitle="Часті питання"
useInvertedBackground={false} sideDescription="Знайдіть відповіді на найпопулярніші запитання про наші послуги виїзного барбера."
faqs={[
{ id: "1", title: "Які райони ви обслуговуєте?", content: "Ми обслуговуємо весь Київ та прилеглі райони." },
{ id: "2", title: "Як замовити послугу?", content: "Зателефонуйте або залиште заявку на сайті." },
{ id: "3", title: "Чи потрібна підготовка місця?", content: "Ні, ми беремо все необхідне з собою." }
]}
title="Питання та відповіді"
description="Знайдіть відповіді на поширені питання."
faqsAnimation="slide-up" faqsAnimation="slide-up"
faqs={[
{ id: "1", title: "Чи потрібне спеціальне місце?", content: "Ми привозимо своє крісло, світло та дзеркало. Вам потрібно лише 2 кв.м простору." },
{ id: "2", title: "Чи виїжджаєте за межі міста?", content: "Так, обговорюємо індивідуально з кожним клієнтом." },
{ id: "3", title: "Які методи оплати?", content: "Готівка або переказ на карту після завершення послуги." }
]}
/> />
</div> </div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactCenter <ContactSplitForm
title="Забронюйте свій візит"
description="Залиште свої дані, і наш менеджер зв'яжеться з вами протягом 10 хвилин для уточнення деталей."
inputs={[
{ name: "name", type: "text", placeholder: "Ваше ім'я" },
{ name: "phone", type: "tel", placeholder: "Номер телефону" }
]}
useInvertedBackground={false} useInvertedBackground={false}
background={{ variant: "plain" }} imageSrc="http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg?_wi=2"
title="Залиште заявку"
description="Ми зв'яжемося з вами найближчим часом."
tag="Контакти"
/> />
</div> </div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterMedia <FooterBaseCard
imageSrc="http://img.b2bpic.net/free-photo/male-hairdresser-cutting-customer-s-hair-while-wearing-face-mask-coronavirus-epidemic_637285-9037.jpg"
logoText="Барбер у дома" logoText="Барбер у дома"
columns={[ columns={[
{ title: "Про нас", items: [{ label: "Про компанію", href: "#about" }, { label: "Наші майстри", href: "#team" }] }, { title: "Навігація", items: [{ label: "Головна", href: "#hero" }, { label: "Про нас", href: "#about" }] },
{ title: "Послуги", items: [{ label: "Стрижка", href: "#pricing" }, { label: "Гоління", href: "#pricing" }] } { title: "Контакти", items: [{ label: "Бронювання", href: "#contact" }, { label: "Telegram", href: "#" }] }
]} ]}
/> />
</div> </div>