Merge version_2 into main #2
394
src/app/page.tsx
394
src/app/page.tsx
@@ -32,74 +32,33 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Послуги",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Ціни",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Відгуки",
|
||||
id: "reviews",
|
||||
},
|
||||
{
|
||||
name: "Контакти",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Послуги", id: "services" },
|
||||
{ name: "Ціни", id: "pricing" },
|
||||
{ name: "Відгуки", id: "reviews" },
|
||||
{ name: "Галерея", id: "gallery" },
|
||||
{ name: "Контакти", id: "contact" },
|
||||
]}
|
||||
brandName="Масаж у Львові"
|
||||
brandName="Cosmetique Studio"
|
||||
button={{
|
||||
text: "Записатися",
|
||||
href: "#contact-form",
|
||||
}}
|
||||
text: "Записатися", href: "#contact-form"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Масаж у Львові для відновлення тіла та спокою"
|
||||
description="Допоможу зняти напругу, відновити легкість у тілі та підібрати масаж під ваш стан і запит."
|
||||
tag="Індивідуальний підхід • Зручний запис • Львів"
|
||||
variant: "gradient-bars"}}
|
||||
title="Естетика та професіоналізм"
|
||||
description="Ваш шлях до досконалості та гармонії через преміальний догляд та професійні косметологічні процедури."
|
||||
tag="Преміум догляд • Естетика • Львів"
|
||||
buttons={[
|
||||
{
|
||||
text: "Записатися",
|
||||
href: "#contact-form",
|
||||
},
|
||||
{
|
||||
text: "Написати в Telegram",
|
||||
href: "https://t.me/example",
|
||||
},
|
||||
{ text: "Записатися", href: "#contact-form" },
|
||||
{ text: "Консультація", href: "https://t.me/example" },
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spa-equipments-with-soap-cotton-flower_23-2147844979.jpg?_wi=1",
|
||||
imageAlt: "massage therapist hands spa relaxation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-relaxing-spa-hotel_23-2149037089.jpg?_wi=1",
|
||||
imageAlt: "massage therapist hands spa relaxation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-female-back-with-stones_23-2147648669.jpg",
|
||||
imageAlt: "massage therapist hands spa relaxation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/finger-hand-massage-spa-focus-details_169016-69354.jpg",
|
||||
imageAlt: "massage therapist hands spa relaxation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serene-spa-interior_23-2151945692.jpg",
|
||||
imageAlt: "massage therapist hands spa relaxation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-spa-center_23-2148099314.jpg",
|
||||
imageAlt: "massage therapist hands spa relaxation",
|
||||
},
|
||||
{ imageSrc: "https://images.unsplash.com/photo-1596464303290-7d7b69c73024?q=80&w=1200&auto=format&fit=crop", imageAlt: "cosmetology aesthetic treatment" },
|
||||
{ imageSrc: "https://images.unsplash.com/photo-1570172619644-dfd03d5d812e?q=80&w=1200&auto=format&fit=crop", imageAlt: "skincare specialist treatment" },
|
||||
{ imageSrc: "https://images.unsplash.com/photo-1616394584738-fc6e6122f6b7?q=80&w=1200&auto=format&fit=crop", imageAlt: "beauty salon interior" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -110,87 +69,12 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "s1",
|
||||
title: "Класичний масаж",
|
||||
subtitle: "Повне розслаблення та відновлення м'язів.",
|
||||
category: "Масаж",
|
||||
value: "✓",
|
||||
buttons: [
|
||||
{
|
||||
text: "Записатися",
|
||||
href: "#contact-form",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
title: "Релакс масаж",
|
||||
subtitle: "Зануртесь у стан спокою.",
|
||||
category: "Масаж",
|
||||
value: "✓",
|
||||
buttons: [
|
||||
{
|
||||
text: "Записатися",
|
||||
href: "#contact-form",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
title: "Лікувальний масаж",
|
||||
subtitle: "Усунення болю та покращення постави.",
|
||||
category: "Масаж",
|
||||
value: "✓",
|
||||
buttons: [
|
||||
{
|
||||
text: "Записатися",
|
||||
href: "#contact-form",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "s4",
|
||||
title: "Масаж спини та шиї",
|
||||
subtitle: "Зняття хронічної напруги.",
|
||||
category: "Масаж",
|
||||
value: "✓",
|
||||
buttons: [
|
||||
{
|
||||
text: "Записатися",
|
||||
href: "#contact-form",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "s5",
|
||||
title: "Антицелюлітний масаж",
|
||||
subtitle: "Корекція фігури та покращення шкіри.",
|
||||
category: "Масаж",
|
||||
value: "✓",
|
||||
buttons: [
|
||||
{
|
||||
text: "Записатися",
|
||||
href: "#contact-form",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "s6",
|
||||
title: "SPA-масаж",
|
||||
subtitle: "Комплексний догляд за тілом.",
|
||||
category: "Масаж",
|
||||
value: "✓",
|
||||
buttons: [
|
||||
{
|
||||
text: "Записатися",
|
||||
href: "#contact-form",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ id: "s1", title: "Омолодження", subtitle: "Сучасні методи відновлення пружності шкіри.", category: "Догляд", value: "✓" },
|
||||
{ id: "s2", title: "Глибоке очищення", subtitle: "Професійний догляд за шкірою обличчя.", category: "Догляд", value: "✓" },
|
||||
{ id: "s3", title: "Ліфтинг догляд", subtitle: "Ефективна боротьба з ознаками старіння.", category: "Догляд", value: "✓" },
|
||||
]}
|
||||
title="Послуги"
|
||||
description="Оберіть масаж, який найкраще підійде вашому стану"
|
||||
title="Наші послуги"
|
||||
description="Високоефективні процедури для вашої впевненості"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -200,71 +84,25 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
badge: "Стандарт",
|
||||
price: "700 грн",
|
||||
subtitle: "Класичний масаж",
|
||||
features: [
|
||||
"Відновлення",
|
||||
"Розслаблення",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Записатися",
|
||||
href: "#contact-form",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
badge: "Релакс",
|
||||
price: "800 грн",
|
||||
subtitle: "Релакс масаж",
|
||||
features: [
|
||||
"Спокій",
|
||||
"Антистрес",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Записатися",
|
||||
href: "#contact-form",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
badge: "Лікувальний",
|
||||
price: "500 грн",
|
||||
subtitle: "Спина та шия",
|
||||
features: [
|
||||
"Здоров'я",
|
||||
"Постава",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Записатися",
|
||||
href: "#contact-form",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ id: "p1", badge: "Базовий", price: "900 грн", subtitle: "Доглядові процедури", features: ["Очищення", "Зволоження"], buttons: [{ text: "Записатися", href: "#contact-form" }] },
|
||||
{ id: "p2", badge: "Преміум", price: "1500 грн", subtitle: "Комплексний підхід", features: ["Омолодження", "Масаж"], buttons: [{ text: "Записатися", href: "#contact-form" }] },
|
||||
]}
|
||||
title="Ціни"
|
||||
description="Точна ціна залежить від тривалості та обраної процедури."
|
||||
title="Інвестиція у себе"
|
||||
description="Обирайте найкраще для вашого догляду"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Про спеціаліста"
|
||||
title="Працюю індивідуально з кожним клієнтом"
|
||||
description="Підбираю масаж під стан тіла, самопочуття та бажаний результат. Головне — комфорт, безпека і відчутний ефект після процедури."
|
||||
subdescription="Маю багаторічний досвід роботи з клієнтами різного рівня навантажень."
|
||||
tag="Про нас"
|
||||
title="Мистецтво косметології"
|
||||
description="Ми поєднуємо професіоналізм із турботою про кожного клієнта. Кожна процедура — це ретельно підібраний ритуал краси."
|
||||
subdescription="Використовуємо тільки перевірені методики та професійну косметику преміум класу."
|
||||
icon={User}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smiley-senior-man-working-his-laptop_23-2148404379.jpg?_wi=1"
|
||||
imageSrc="https://images.unsplash.com/photo-1556767576-5ec41e3d39ea?q=80&w=800&auto=format&fit=crop"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="portrait professional massage therapist smiling"
|
||||
imageAlt="aesthetic cosmetologist"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -274,49 +112,11 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Олена",
|
||||
handle: "@olena",
|
||||
testimonial: "Найкращий масаж у Львові! Дуже сподобалось.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serene-minimalist-spa-interior-meditation-space_23-2151935120.jpg",
|
||||
imageAlt: "Serene minimalist spa interior meditation space",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Марія",
|
||||
handle: "@maria",
|
||||
testimonial: "Почуваю себе оновленою після процедури.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spa-equipments-with-soap-cotton-flower_23-2147844979.jpg?_wi=2",
|
||||
imageAlt: "Serene minimalist spa interior meditation space",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Ірина",
|
||||
handle: "@irina",
|
||||
testimonial: "Дуже професійний підхід та затишна атмосфера.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-senior-man-working-his-laptop_23-2148404379.jpg?_wi=2",
|
||||
imageAlt: "Serene minimalist spa interior meditation space",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Катерина",
|
||||
handle: "@katya",
|
||||
testimonial: "Рекомендую всім, хто хоче зняти напругу.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spa-composition-with-burning-candle-bath-towels-close-up-aromatherapy-concept_169016-15621.jpg?_wi=1",
|
||||
imageAlt: "Serene minimalist spa interior meditation space",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Оксана",
|
||||
handle: "@oksana",
|
||||
testimonial: "Відчула ефект вже після першого сеансу.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-relaxing-spa-hotel_23-2149037089.jpg?_wi=2",
|
||||
imageAlt: "Serene minimalist spa interior meditation space",
|
||||
},
|
||||
{ id: "t1", name: "Анна", handle: "@anna", testimonial: "Найкращий догляд у місті, результат видно одразу!", imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=200&auto=format&fit=crop" },
|
||||
{ id: "t2", name: "Вікторія", handle: "@vika", testimonial: "Дуже приємна атмосфера та справжні професіонали.", imageSrc: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=200&auto=format&fit=crop" },
|
||||
]}
|
||||
title="Відгуки клієнтів"
|
||||
description="Що кажуть про мої послуги"
|
||||
title="Відгуки"
|
||||
description="Наші клієнти про результати"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -324,72 +124,30 @@ export default function LandingPage() {
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-actions"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "g1",
|
||||
name: "Студія",
|
||||
price: "",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spa-composition-with-burning-candle-bath-towels-close-up-aromatherapy-concept_169016-15621.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "g2",
|
||||
name: "Процедура",
|
||||
price: "",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxury-bedroom-illuminated-by-modern-electric-lamp-generated-by-ai_188544-28185.jpg",
|
||||
},
|
||||
{
|
||||
id: "g3",
|
||||
name: "Деталі",
|
||||
price: "",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-checking-water-before-taking-bath_23-2149239340.jpg",
|
||||
},
|
||||
{
|
||||
id: "g4",
|
||||
name: "Атмосфера",
|
||||
price: "",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-yoga-equipment_23-2151725296.jpg",
|
||||
},
|
||||
{
|
||||
id: "g5",
|
||||
name: "Комфорт",
|
||||
price: "",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spa-massage-concept-with-woman_23-2147817023.jpg",
|
||||
},
|
||||
{
|
||||
id: "g6",
|
||||
name: "Результат",
|
||||
price: "",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/massage-concept-with-woman_23-2147816942.jpg",
|
||||
},
|
||||
]}
|
||||
title="Атмосфера"
|
||||
description="Більше фото — в Instagram"
|
||||
buttons={[
|
||||
{
|
||||
text: "Перейти в Instagram",
|
||||
href: "https://instagram.com",
|
||||
},
|
||||
{ id: "g1", name: "Стерильність", price: "", imageSrc: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=800&auto=format&fit=crop" },
|
||||
{ id: "g2", name: "Професійні засоби", price: "", imageSrc: "https://images.unsplash.com/photo-1598440947619-2c35fd95608d?q=80&w=800&auto=format&fit=crop" },
|
||||
{ id: "g3", name: "Затишок", price: "", imageSrc: "https://images.unsplash.com/photo-1584028291825-4c0851e309cc?q=80&w=800&auto=format&fit=crop" },
|
||||
]}
|
||||
title="Атмосфера студії"
|
||||
description="Місце вашої трансформації"
|
||||
buttons={[{ text: "Дивитися Instagram", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-form" data-section="contact-form">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Запис"
|
||||
title="Записатися на масаж"
|
||||
description="Заповніть форму, і я зв'яжуся з вами найближчим часом."
|
||||
title="Записатися на візит"
|
||||
description="Залиште ваші контакти для консультації"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Ваше ім'я або телефон"
|
||||
buttonText="Надіслати заявку"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/warm-oil-palms-client-legs-pre-massage-ritual-daily-selfcare_169016-69389.jpg"
|
||||
imageAlt="Warm oil in palms above client legs pre massage ritual daily selfcare"
|
||||
buttonText="Відправити"
|
||||
imageSrc="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?q=80&w=1200&auto=format&fit=crop"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -397,64 +155,28 @@ export default function LandingPage() {
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Контакти"
|
||||
tag="Львів"
|
||||
tag="Зв'язок"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "+38 (0XX) XXX-XX-XX",
|
||||
description: "Телефон",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "10:00–20:00",
|
||||
description: "Графік",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Instagram",
|
||||
description: "Соцмережі",
|
||||
},
|
||||
{ id: "m1", value: "+38 099 000 00 00", description: "Телефон" },
|
||||
{ id: "m2", value: "10:00–20:00", description: "Графік" },
|
||||
{ id: "m3", value: "Львів, Центр", description: "Адреса" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/tranquil-pool-oasis-meditation-space_23-2151935119.jpg"
|
||||
logoText="Масаж у Львові"
|
||||
imageSrc="https://images.unsplash.com/photo-1560750588-73207b1ef5b8?q=80&w=800&auto=format&fit=crop"
|
||||
logoText="Cosmetique Studio"
|
||||
columns={[
|
||||
{
|
||||
title: "Меню",
|
||||
items: [
|
||||
{
|
||||
label: "Послуги",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Ціни",
|
||||
href: "#pricing",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Соціальні мережі",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Telegram",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Навігація", items: [{ label: "Послуги", href: "#services" }, { label: "Ціни", href: "#pricing" }] },
|
||||
{ title: "Соціальні", items: [{ label: "Instagram", href: "#" }, { label: "Telegram", href: "#" }] },
|
||||
]}
|
||||
copyrightText="© 2025 Масаж у Львові"
|
||||
imageAlt="massage therapist hands spa relaxation"
|
||||
copyrightText="© 2025 Cosmetique Studio"
|
||||
imageAlt="professional skincare"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user