310 lines
16 KiB
TypeScript
310 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactText from '@/components/sections/contact/ContactText';
|
||
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||
import { Award, Box, Briefcase, Check, Home, Quote, Search, ShieldCheck, Sparkles, Star, User } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="icon-arrow"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="rounded"
|
||
contentWidth="medium"
|
||
sizing="largeSizeMediumTitles"
|
||
background="noise"
|
||
cardStyle="gradient-radial"
|
||
primaryButtonStyle="diagonal-gradient"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="semibold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleFullscreen
|
||
navItems={[
|
||
{
|
||
name: "Услуги", id: "services"},
|
||
{
|
||
name: "Почему Мы", id: "why-us"},
|
||
{
|
||
name: "Галерея", id: "gallery"},
|
||
{
|
||
name: "Цены", id: "pricing"},
|
||
{
|
||
name: "Контакты", id: "contact"},
|
||
]}
|
||
brandName="ХРУСТАЛЬ"
|
||
button={{
|
||
text: "Оставить заявку", href: "#contact"}}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplitDualMedia
|
||
background={{
|
||
variant: "plain"}}
|
||
title="Чистота, которую видно с первого взгляда"
|
||
description="Мы убираем так, что хочется показать всем."
|
||
tag="Клининг высшего класса"
|
||
tagAnimation="blur-reveal"
|
||
buttons={[
|
||
{
|
||
text: "Оставить заявку", href: "#contact"},
|
||
]}
|
||
buttonAnimation="blur-reveal"
|
||
mediaItems={[
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/spatter-black-symbol-drop-splatter_1194-8110.jpg", imageAlt: "Грязный круг"
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-textured-backgound_1258-30483.jpg", imageAlt: "Чистый круг с иконкой швабры"
|
||
}
|
||
]}
|
||
mediaAnimation="blur-reveal"
|
||
rating={5}
|
||
ratingText="Отличные отзывы"
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureHoverPattern
|
||
animationType="blur-reveal"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
features={[
|
||
{
|
||
icon: Home,
|
||
title: "Уборка квартиры", description: "Идеальная чистота в вашем доме."},
|
||
{
|
||
icon: Briefcase,
|
||
title: "Уборка офиса", description: "Порядок, способствующий продуктивности."},
|
||
{
|
||
icon: Sparkles,
|
||
title: "Генеральная уборка", description: "Комплексное наведение порядка."},
|
||
{
|
||
icon: Briefcase,
|
||
title: "Уборка после ремонта", description: "Избавим от строительной пыли."},
|
||
{
|
||
icon: Box,
|
||
title: "Уборка после переезда", description: "Подготовим к новоселью или сдаче."},
|
||
{
|
||
icon: Home,
|
||
title: "Мойка окон", description: "Безупречная прозрачность, без разводов."},
|
||
{
|
||
icon: Home,
|
||
title: "Химчистка мебели", description: "Возвращаем мебели первозданный вид."},
|
||
{
|
||
icon: ShieldCheck,
|
||
title: "Дезинфекция помещений", description: "Безопасность и гигиена."},
|
||
]}
|
||
title="Наши Услуги"
|
||
description="Широкий спектр профессиональных услуг для идеальной чистоты."
|
||
/>
|
||
</div>
|
||
|
||
<div id="why-us" data-section="why-us">
|
||
<MetricCardFourteen
|
||
useInvertedBackground={false}
|
||
title="Почему Выбирают Нас"
|
||
tag="Наши Преимущества"
|
||
tagAnimation="blur-reveal"
|
||
metrics={[
|
||
{
|
||
id: "m1", value: "01", description: "Команда с опытом 8+ лет"},
|
||
{
|
||
id: "m2", value: "02", description: "Сертифицированные средства"},
|
||
{
|
||
id: "m3", value: "03", description: "Гарантия результата или возврат"},
|
||
]}
|
||
metricsAnimation="blur-reveal"
|
||
/>
|
||
</div>
|
||
|
||
<div id="process" data-section="process">
|
||
<FeatureHoverPattern
|
||
animationType="blur-reveal"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
features={[
|
||
{
|
||
icon: User,
|
||
title: "Заявка", description: "Вы оставляете заявку онлайн или по телефону."},
|
||
{
|
||
icon: Search,
|
||
title: "Оценка", description: "Оцениваем объем работ и составляем план."},
|
||
{
|
||
icon: Sparkles,
|
||
title: "Уборка", description: "Профессионалы наводят безупречный порядок."},
|
||
{
|
||
icon: Check,
|
||
title: "Контроль", description: "Проверяем качество и сдаем работу."},
|
||
]}
|
||
title="Как Мы Работаем"
|
||
description="Простой и прозрачный процесс для вашего удобства."
|
||
/>
|
||
</div>
|
||
|
||
<div id="gallery" data-section="gallery">
|
||
<ProductCardFour
|
||
animationType="blur-reveal"
|
||
textboxLayout="default"
|
||
gridVariant="bento-grid"
|
||
useInvertedBackground={false}
|
||
carouselMode="buttons"
|
||
products={[
|
||
{
|
||
id: "g1", name: "Современная квартира", price: "Чистота и Комфорт", variant: "Интерьеры", imageSrc: "http://img.b2bpic.net/free-photo/wiew-through-window-christmas-tree-background-winter-holiday-concept_493343-30113.jpg", imageAlt: "Чистая современная квартира"},
|
||
{
|
||
id: "g2", name: "Роскошный офис", price: "Бизнес-пространства", variant: "Интерьеры", imageSrc: "http://img.b2bpic.net/free-photo/woman-office-reflection_1098-13969.jpg", imageAlt: "Чистый роскошный офис"},
|
||
{
|
||
id: "g3", name: "Минималистичная кухня", price: "Идеальная Чистота", variant: "Интерьеры", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-wooden-house_23-2151264458.jpg", imageAlt: "Безупречно чистая минималистичная кухня"},
|
||
{
|
||
id: "g4", name: "Профессиональный клининг", price: "Высший Стандарт", variant: "Процесс", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-cleaning_23-2148480344.jpg", imageAlt: "Профессиональная уборка"},
|
||
{
|
||
id: "g5", name: "Элегантная ванная", price: "Блеск и Гигиена", variant: "Интерьеры", imageSrc: "http://img.b2bpic.net/free-photo/cozy-composition-with-mirror-decorative-details-bright-room-interior_169016-28687.jpg", imageAlt: "Чистая элегантная ванная комната"},
|
||
{
|
||
id: "g6", name: "Уютная спальня", price: "Гармония и Покой", variant: "Интерьеры", imageSrc: "http://img.b2bpic.net/free-photo/double-bed-with-white-pillows_1203-1338.jpg", imageAlt: "Чистая и уютная спальня"},
|
||
]}
|
||
title="Наша Работа в Деталях"
|
||
description="Взгляните на безупречность, которую мы создаем."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardSix
|
||
animationType="blur-reveal"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
testimonials={[
|
||
{
|
||
id: "t1", name: "Анна Петрова", handle: "@anna.p", testimonial: "«Хрусталь» – это воплощение идеальной чистоты. После их визита квартира сияет, а воздух кажется свежее. Высший класс!", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-with-necklace-talking-phone_23-2148346156.jpg", imageAlt: "Фото Анны Петровой", icon: Quote,
|
||
},
|
||
{
|
||
id: "t2", name: "Игорь Смирнов", handle: "@igor_s", testimonial: "Наш офис преобразился. Внимание к деталям поражает, ни пылинки! Теперь только «Хрусталь».", imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-with-folded-arms-looking-camera_23-2147955314.jpg", imageAlt: "Фото Игоря Смирнова", icon: Quote,
|
||
},
|
||
{
|
||
id: "t3", name: "Елена Волкова", handle: "@elena.v", testimonial: "Генеральная уборка после ремонта – это было испытание. Но команда «Хрусталь» справилась на отлично! Все блестит.", imageSrc: "http://img.b2bpic.net/free-photo/guy-with-long-hair-dressed-fashionable-denim-jacket-cafe_273609-4192.jpg", imageAlt: "Фото Елены Волковой", icon: Quote,
|
||
},
|
||
{
|
||
id: "t4", name: "Дмитрий Козлов", handle: "@dmitriy_k", testimonial: "Заказывал мойку окон. Результат превзошел ожидания, стекла как будто нет. Спасибо за качество!", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-stylish-sensual-male-with-hairstyle-casual-suit_613910-11074.jpg", imageAlt: "Фото Дмитрия Козлова", icon: Quote,
|
||
},
|
||
{
|
||
id: "t5", name: "Мария Иванова", handle: "@masha_i", testimonial: "Химчистка дивана вдохнула в него новую жизнь. Ушли все пятна, цвет стал ярче. Очень довольна!", imageSrc: "http://img.b2bpic.net/free-photo/luxury-blond-female-white-dress-posing-studio_613910-10972.jpg", imageAlt: "Фото Марии Ивановой", icon: Quote,
|
||
},
|
||
]}
|
||
title="Отзывы Наших Клиентов"
|
||
description="Что говорят те, кто уже выбрал безупречную чистоту."
|
||
/>
|
||
</div>
|
||
|
||
<div id="pricing" data-section="pricing">
|
||
<PricingCardTwo
|
||
animationType="blur-reveal"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
plans={[
|
||
{
|
||
id: "standard", badge: "Базовый", badgeIcon: Sparkles,
|
||
price: "от 5 000 ₽", subtitle: "Для регулярной поддержки чистоты", buttons: [
|
||
{
|
||
text: "Выбрать", href: "#contact"},
|
||
],
|
||
features: [
|
||
"Сухая уборка пола", "Влажная уборка поверхностей", "Уборка санузла", "Вынос мусора"],
|
||
},
|
||
{
|
||
id: "comfort", badge: "Популярный Выбор", badgeIcon: Star,
|
||
price: "от 10 000 ₽", subtitle: "Оптимальное решение для комплексной уборки", buttons: [
|
||
{
|
||
text: "Выбрать", href: "#contact"},
|
||
],
|
||
features: [
|
||
"Все из пакета \"Стандарт\"", "Мытье полов", "Очистка кухонной зоны", "Мытье зеркал и стекол", "Чистка пылесосом"],
|
||
},
|
||
{
|
||
id: "premium", badge: "Премиум", badgeIcon: Award,
|
||
price: "от 20 000 ₽", subtitle: "Максимальный уровень чистоты и сервиса", buttons: [
|
||
{
|
||
text: "Выбрать", href: "#contact"},
|
||
],
|
||
features: [
|
||
"Все из пакета \"Комфорт\"", "Глубокая чистка сантехники", "Химчистка одного предмета мебели", "Мытье окон (до 3 шт.)", "Дезинфекция"],
|
||
},
|
||
]}
|
||
title="Выберите Ваш Тариф"
|
||
description="Прозрачные цены на безупречную чистоту."
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactText
|
||
useInvertedBackground={true}
|
||
background={{
|
||
variant: "plain"}}
|
||
text="Готовы к идеальной чистоте? Свяжитесь с нами!"
|
||
buttons={[
|
||
{
|
||
text: "Позвонить", href: "tel:+74951234567"},
|
||
{
|
||
text: "Написать на почту", href: "mailto:info@khrustal.ru"},
|
||
]}
|
||
animationType="reveal-blur"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBase
|
||
columns={[
|
||
{
|
||
title: "Услуги", items: [
|
||
{
|
||
label: "Уборка квартиры", href: "#services"},
|
||
{
|
||
label: "Уборка офиса", href: "#services"},
|
||
{
|
||
label: "Генеральная уборка", href: "#services"},
|
||
{
|
||
label: "Мойка окон", href: "#services"},
|
||
],
|
||
},
|
||
{
|
||
title: "Компания", items: [
|
||
{
|
||
label: "Почему мы", href: "#why-us"},
|
||
{
|
||
label: "Как мы работаем", href: "#process"},
|
||
{
|
||
label: "Отзывы", href: "#testimonials"},
|
||
{
|
||
label: "Цены", href: "#pricing"},
|
||
],
|
||
},
|
||
{
|
||
title: "Контакты", items: [
|
||
{
|
||
label: "+7 (495) 123-45-67", href: "tel:+74951234567"},
|
||
{
|
||
label: "info@khrustal.ru", href: "mailto:info@khrustal.ru"},
|
||
{
|
||
label: "Москва, ул. Чистоты, 5", href: "#"},
|
||
],
|
||
},
|
||
]}
|
||
logoText="ХРУСТАЛЬ"
|
||
copyrightText="© 2024 Хрусталь. Все права защищены."
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|