Update src/app/page.tsx
This commit is contained in:
183
src/app/page.tsx
183
src/app/page.tsx
@@ -2,35 +2,35 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { Scissors, Star, Users } from "lucide-react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import { Scissors, Star, Users, CheckCircle, Clock, MapPin } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Головна", id: "hero" },
|
||||
{ name: "Про нас", id: "about" },
|
||||
@@ -44,140 +44,119 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Професійний барбер у вас вдома"
|
||||
description="Отримайте ідеальну стрижку та догляд за бородою без зайвого часу на дорогу. Наш мобільний сервіс приїде до вас у зручний час."
|
||||
testimonials={[
|
||||
{ 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" },
|
||||
{ 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" },
|
||||
{ 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" }
|
||||
<HeroSplitKpi
|
||||
title="Барбер у вас вдома — стиль без зайвих зусиль"
|
||||
description="Професійні стрижки та догляд за бородою від майстрів преміум-рівня прямо у вас вдома. Економте свій час, не втрачаючи якості."
|
||||
background={{ variant: "glowing-orb" }}
|
||||
kpis={[
|
||||
{ value: "30+", label: "Майстрів" },
|
||||
{ value: "5000+", label: "Клієнтів" },
|
||||
{ value: "4.9", label: "Рейтинг" }
|
||||
]}
|
||||
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"
|
||||
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 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}
|
||||
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 id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
<FeatureCardSix
|
||||
title="Чому обирають нас"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
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/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/hairdresser-styling-hair-man_23-2147778737.jpg" },
|
||||
{ title: "Індивідуальний стиль", description: "Підбір стрижки під ваші риси обличчя.", imageSrc: "http://img.b2bpic.net/free-photo/trendy-haircut-barbershop_1163-2011.jpg" }
|
||||
{ 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/professional-girl-hairdresser-makes-client-haircut-girl-is-sitting-mask-beauty-salon_343596-4435.jpg?_wi=2" }
|
||||
]}
|
||||
title="Наші переваги"
|
||||
description="Комфорт та якість у кожній деталі."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
<PricingCardFive
|
||||
title="Наші послуги"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
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: "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: "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" }
|
||||
{ id: "basic", tag: "Популярно", price: "600 ₴", period: "за сеанс", description: "Базова стрижка з миттям голови та укладкою.", button: { text: "Обрати" }, featuresTitle: "Що входить:", features: ["Мийка голови", "Стрижка", "Стильна укладка"] },
|
||||
{ id: "pro", tag: "Рекомендуємо", price: "950 ₴", period: "за сеанс", description: "Комплексний догляд за стрижкою та бородою.", button: { text: "Обрати" }, featuresTitle: "Що входить:", features: ["Стрижка", "Моделювання бороди", "Укладка", "Фінішні засоби"] }
|
||||
]}
|
||||
title="Ціни на послуги"
|
||||
description="Прозорі ціни без прихованих платежів."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
<TestimonialCardTwelve
|
||||
cardTitle="Відгуки наших клієнтів"
|
||||
cardTag="Відгуки"
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
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: "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: "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: "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" }
|
||||
{ id: "1", name: "Андрій", imageSrc: "http://img.b2bpic.net/free-photo/young-man-smiling_23-2147624592.jpg" },
|
||||
{ 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: "Максим", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-barbershop_23-2148506245.jpg" }
|
||||
]}
|
||||
title="Відгуки клієнтів"
|
||||
description="Що кажуть про нас клієнти."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
<MetricCardFourteen
|
||||
title="Довіра клієнтів"
|
||||
tag="Показники"
|
||||
metrics={[
|
||||
{ id: "1", value: "500+", title: "Задоволених клієнтів", description: "Постійних користувачів", icon: Users },
|
||||
{ id: "2", value: "1000+", title: "Виконаних стрижок", description: "Професійна якість", icon: Scissors },
|
||||
{ id: "3", value: "4.9", title: "Середня оцінка", description: "Від клієнтів", icon: Star }
|
||||
{ id: "1", value: "500+", description: "Позитивних відгуків" },
|
||||
{ id: "2", value: "98%", description: "Повторних звернень" },
|
||||
{ id: "3", value: "1000+", description: "Стрижок у місяць" }
|
||||
]}
|
||||
title="Наші показники"
|
||||
description="Статистика наших досягнень."
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "Які райони ви обслуговуєте?", content: "Ми обслуговуємо весь Київ та прилеглі райони." },
|
||||
{ id: "2", title: "Як замовити послугу?", content: "Зателефонуйте або залиште заявку на сайті." },
|
||||
{ id: "3", title: "Чи потрібна підготовка місця?", content: "Ні, ми беремо все необхідне з собою." }
|
||||
]}
|
||||
title="Питання та відповіді"
|
||||
description="Знайдіть відповіді на поширені питання."
|
||||
<FaqSplitText
|
||||
sideTitle="Часті питання"
|
||||
sideDescription="Знайдіть відповіді на найпопулярніші запитання про наші послуги виїзного барбера."
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "1", title: "Чи потрібне спеціальне місце?", content: "Ми привозимо своє крісло, світло та дзеркало. Вам потрібно лише 2 кв.м простору." },
|
||||
{ id: "2", title: "Чи виїжджаєте за межі міста?", content: "Так, обговорюємо індивідуально з кожним клієнтом." },
|
||||
{ id: "3", title: "Які методи оплати?", content: "Готівка або переказ на карту після завершення послуги." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
<ContactSplitForm
|
||||
title="Забронюйте свій візит"
|
||||
description="Залиште свої дані, і наш менеджер зв'яжеться з вами протягом 10 хвилин для уточнення деталей."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Ваше ім'я" },
|
||||
{ name: "phone", type: "tel", placeholder: "Номер телефону" }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
title="Залиште заявку"
|
||||
description="Ми зв'яжемося з вами найближчим часом."
|
||||
tag="Контакти"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/male-hairdresser-cutting-customer-s-hair-while-wearing-face-mask-coronavirus-epidemic_637285-9037.jpg"
|
||||
<FooterBaseCard
|
||||
logoText="Барбер у дома"
|
||||
columns={[
|
||||
{ title: "Про нас", items: [{ label: "Про компанію", href: "#about" }, { label: "Наші майстри", href: "#team" }] },
|
||||
{ title: "Послуги", items: [{ label: "Стрижка", href: "#pricing" }, { label: "Гоління", href: "#pricing" }] }
|
||||
{ title: "Навігація", items: [{ label: "Головна", href: "#hero" }, { label: "Про нас", href: "#about" }] },
|
||||
{ title: "Контакти", items: [{ label: "Бронювання", href: "#contact" }, { label: "Telegram", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user