Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #2.
This commit is contained in:
380
src/app/page.tsx
380
src/app/page.tsx
@@ -28,278 +28,130 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Головна",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Послуги",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Про нас",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Контакти",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="СТО Хмельницький"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Головна", id: "hero" },
|
||||
{ name: "Послуги", id: "services" },
|
||||
{ name: "Про нас", id: "about" },
|
||||
{ name: "Контакти", id: "contact" },
|
||||
]}
|
||||
brandName="СТО Хмельницький"
|
||||
button={{ text: "Записатись", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="СТО Хмельницький"
|
||||
description="Професійний автосервіс. Діагностика, ремонт та обслуговування авто без зайвих витрат. Ваше авто в надійних руках."
|
||||
buttons={[
|
||||
{
|
||||
text: "Записатись",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Подзвонити",
|
||||
href: "tel:+380XXXXXXXXX",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/toolbox-car_1170-1608.jpg?_wi=1"
|
||||
imageAlt="Professional car service workshop interior"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="СТО Хмельницький"
|
||||
description="Професійний автосервіс. Діагностика, ремонт та обслуговування авто без зайвих витрат. Ваше авто в надійних руках."
|
||||
buttons={[
|
||||
{ text: "Записатись", href: "#contact" },
|
||||
{ text: "Подзвонити", href: "tel:+380XXXXXXXXX" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/toolbox-car_1170-1608.jpg"
|
||||
imageAlt="Professional car service workshop interior"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Рейтинг 4.4",
|
||||
"175+ відгуків",
|
||||
"Хмельницький",
|
||||
"Гарантія якості",
|
||||
"Професійні майстри",
|
||||
"Сучасне обладнання",
|
||||
"Чесна ціна",
|
||||
]}
|
||||
title="Довіра наших клієнтів"
|
||||
description="Нам довіряють власники авто завдяки нашому професіоналізму та чесному підходу до роботи."
|
||||
/>
|
||||
</div>
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Рейтинг 4.4", "175+ відгуків", "Хмельницький", "Гарантія якості", "Професійні майстри", "Сучасне обладнання", "Чесна ціна"]}
|
||||
title="Довіра наших клієнтів"
|
||||
description="Нам довіряють власники авто завдяки нашому професіоналізму та чесному підходу до роботи."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Діагностика",
|
||||
description: "Повна комп'ютерна діагностика систем авто.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Search,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hands-female-mechanic-using-digital-tablet_1170-1246.jpg",
|
||||
imageAlt: "car engine diagnostics interface",
|
||||
},
|
||||
{
|
||||
title: "Гальмівна система",
|
||||
description: "Ремонт та заміна компонентів гальм.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: AlertTriangle,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/toolbox-car_1170-1608.jpg?_wi=2",
|
||||
imageAlt: "car engine diagnostics interface",
|
||||
},
|
||||
{
|
||||
title: "Двигун",
|
||||
description: "Професійний ремонт та обслуговування.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Zap,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-woman-cafe-drinking-coffee-date-looking-camera_197531-22708.jpg?_wi=1",
|
||||
imageAlt: "car engine diagnostics interface",
|
||||
},
|
||||
{
|
||||
title: "Заміна масла",
|
||||
description: "Швидка заміна технічних рідин.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Droplets,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-happy-man-driving-car_158595-4205.jpg?_wi=1",
|
||||
imageAlt: "car engine diagnostics interface",
|
||||
},
|
||||
{
|
||||
title: "Підвіска",
|
||||
description: "Діагностика та відновлення ходової.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Settings,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg?_wi=1",
|
||||
imageAlt: "car engine diagnostics interface",
|
||||
},
|
||||
]}
|
||||
title="Наші послуги"
|
||||
description="Професійний сервіс для вашого автомобіля"
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Діагностика", description: "Повна комп'ютерна діагностика систем авто.", bentoComponent: "reveal-icon", icon: Search },
|
||||
{ title: "Гальмівна система", description: "Ремонт та заміна компонентів гальм.", bentoComponent: "reveal-icon", icon: AlertTriangle },
|
||||
{ title: "Двигун", description: "Професійний ремонт та обслуговування.", bentoComponent: "reveal-icon", icon: Zap },
|
||||
{ title: "Заміна масла", description: "Швидка заміна технічних рідин.", bentoComponent: "reveal-icon", icon: Droplets },
|
||||
{ title: "Підвіска", description: "Діагностика та відновлення ходової.", bentoComponent: "reveal-icon", icon: Settings },
|
||||
]}
|
||||
title="Наші послуги"
|
||||
description="Професійний сервіс для вашого автомобіля"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Про нас"
|
||||
title="Робимо швидко, чесно і якісно"
|
||||
description="Ви розумієте, за що платите. Кожен клієнт для нас — це довгострокова довіра, а не разовий ремонт."
|
||||
subdescription="Ми використовуємо сучасне обладнання, щоб гарантувати бездоганний результат для вашого автомобіля."
|
||||
icon={Award}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/repairman-smiling-work_23-2147897915.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="team of professional mechanics"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Про нас"
|
||||
title="Робимо швидко, чесно і якісно"
|
||||
description="Ви розумієте, за що платите. Кожен клієнт для нас — це довгострокова довіра, а не разовий ремонт."
|
||||
subdescription="Ми використовуємо сучасне обладнання, щоб гарантувати бездоганний результат для вашого автомобіля."
|
||||
icon={Award}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/repairman-smiling-work_23-2147897915.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="team of professional mechanics"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="process" data-section="process">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "step1",
|
||||
value: "01",
|
||||
title: "Заявка",
|
||||
items: [
|
||||
"Ви залишаєте заявку на сайті або по телефону.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "step2",
|
||||
value: "02",
|
||||
title: "Дзвінок",
|
||||
items: [
|
||||
"Ми зв'язуємось для уточнення деталей.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "step3",
|
||||
value: "03",
|
||||
title: "Діагностика",
|
||||
items: [
|
||||
"Проводимо професійний огляд авто.",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "step4",
|
||||
value: "04",
|
||||
title: "Ремонт",
|
||||
items: [
|
||||
"Узгоджуємо ціну та виконуємо роботи.",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Як ми працюємо"
|
||||
description="Простий та прозорий процес ремонту для вашої зручності."
|
||||
/>
|
||||
</div>
|
||||
<div id="process" data-section="process">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "step1", value: "01", title: "Заявка", items: ["Ви залишаєте заявку на сайті або по телефону."] },
|
||||
{ id: "step2", value: "02", title: "Дзвінок", items: ["Ми зв'язуємось для уточнення деталей."] },
|
||||
{ id: "step3", value: "03", title: "Діагностика", items: ["Проводимо професійний огляд авто."] },
|
||||
{ id: "step4", value: "04", title: "Ремонт", items: ["Узгоджуємо ціну та виконуємо роботи."] },
|
||||
]}
|
||||
title="Як ми працюємо"
|
||||
description="Простий та прозорий процес ремонту для вашої зручності."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Чудовий сервіс!",
|
||||
quote: "Дуже задоволений діагностикою двигуна, все зробили швидко.",
|
||||
name: "Олександр",
|
||||
role: "Клієнт",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-woman-cafe-drinking-coffee-date-looking-camera_197531-22708.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Професійно",
|
||||
quote: "Ремонтував ходову, ціни чесні, якість на висоті.",
|
||||
name: "Марина",
|
||||
role: "Клієнт",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-happy-man-driving-car_158595-4205.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Рекомендую",
|
||||
quote: "Звернувся з проблемою гальм, все усунули за один день.",
|
||||
name: "Андрій",
|
||||
role: "Клієнт",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Якісно!",
|
||||
quote: "Завжди обслуговую авто тут. Жодних проблем не виникало.",
|
||||
name: "Оксана",
|
||||
role: "Клієнт",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-is-buyer-standing-new-car-dealer-center-looking-camera_146671-14877.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Надійно",
|
||||
quote: "Сервіс, якому можна довіряти. Все пояснили і показали.",
|
||||
name: "Ігор",
|
||||
role: "Клієнт",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-looking-car_23-2150171224.jpg",
|
||||
},
|
||||
]}
|
||||
title="Відгуки клієнтів"
|
||||
description="Що кажуть наші відвідувачі про наш сервіс."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Чудовий сервіс!", quote: "Дуже задоволений діагностикою двигуна, все зробили швидко.", name: "Олександр", role: "Клієнт", imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-woman-cafe-drinking-coffee-date-looking-camera_197531-22708.jpg" },
|
||||
{ id: "2", title: "Професійно", quote: "Ремонтував ходову, ціни чесні, якість на висоті.", name: "Марина", role: "Клієнт", imageSrc: "http://img.b2bpic.net/free-photo/handsome-happy-man-driving-car_158595-4205.jpg" },
|
||||
{ id: "3", title: "Рекомендую", quote: "Звернувся з проблемою гальм, все усунули за один день.", name: "Андрій", role: "Клієнт", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg" },
|
||||
{ id: "4", title: "Якісно!", quote: "Завжди обслуговую авто тут. Жодних проблем не виникало.", name: "Оксана", role: "Клієнт", imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-is-buyer-standing-new-car-dealer-center-looking-camera_146671-14877.jpg" },
|
||||
{ id: "5", title: "Надійно", quote: "Сервіс, якому можна довіряти. Все пояснили і показали.", name: "Ігор", role: "Клієнт", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-looking-car_23-2150171224.jpg" },
|
||||
]}
|
||||
title="Відгуки клієнтів"
|
||||
description="Що кажуть наші відвідувачі про наш сервіс."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
tag="Запис"
|
||||
title="Записатись на сервіс"
|
||||
description="Залиште свої дані, і ми зв'яжемося з вами найближчим часом для запису."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mechanic-using-laptop_1170-1318.jpg"
|
||||
buttonText="Надіслати"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
tag="Запис"
|
||||
title="Записатись на сервіс"
|
||||
description="Залиште свої дані, і ми зв'яжемося з вами найближчим часом для запису."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mechanic-using-laptop_1170-1318.jpg"
|
||||
buttonText="Надіслати"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="СТО Хмельницький"
|
||||
columns={[
|
||||
{
|
||||
title: "Контакти",
|
||||
items: [
|
||||
{
|
||||
label: "Хмельницький, вул. Автомобільна, 1",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "+380 99 123 45 67",
|
||||
href: "tel:+380991234567",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Години роботи",
|
||||
items: [
|
||||
{
|
||||
label: "Пн-Пт: 09:00 - 19:00",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Сб-Нд: 10:00 - 16:00",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 СТО Хмельницький. Всі права захищені."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="СТО Хмельницький"
|
||||
columns={[
|
||||
{ title: "Контакти", items: [{ label: "Хмельницький, вул. Автомобільна, 1", href: "#" }, { label: "+380 99 123 45 67", href: "tel:+380991234567" }] },
|
||||
{ title: "Години роботи", items: [{ label: "Пн-Пт: 09:00 - 19:00", href: "#" }, { label: "Сб-Нд: 10:00 - 16:00", href: "#" }] },
|
||||
]}
|
||||
copyrightText="© 2024 СТО Хмельницький. Всі права захищені."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user