Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -32,74 +32,33 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Послуги", id: "services" },
-          name: "Послуги",
+        { name: "Ціни", id: "pricing" },
-          id: "services",
+        { name: "Відгуки", id: "reviews" },
-        },
+        { name: "Галерея", id: "gallery" },
-        {
+        { name: "Контакти", id: "contact" },
-          name: "Ціни",
-          id: "pricing",
-        },
-        {
-          name: "Відгуки",
-          id: "reviews",
-        },
-        {
-          name: "Контакти",
-          id: "contact",
-        },
       ]}
-      brandName="Масаж у Львові"
+      brandName="Cosmetique Studio"
       button={{
-        text: "Записатися",
+        text: "Записатися",        href: "#contact-form"}}
-        href: "#contact-form",
-      }}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboardCarousel
       background={{
-        variant: "gradient-bars",
+        variant: "gradient-bars"}}
-      }}
+      title="Естетика та професіоналізм"
-      title="Масаж у Львові для відновлення тіла та спокою"
+      description="Ваш шлях до досконалості та гармонії через преміальний догляд та професійні косметологічні процедури."
-      description="Допоможу зняти напругу, відновити легкість у тілі та підібрати масаж під ваш стан і запит."
+      tag="Преміум догляд • Естетика • Львів"
-      tag="Індивідуальний підхід • Зручний запис • Львів"
       buttons={[
-        {
+        { text: "Записатися", href: "#contact-form" },
-          text: "Записатися",
+        { text: "Консультація", href: "https://t.me/example" },
-          href: "#contact-form",
-        },
-        {
-          text: "Написати в Telegram",
-          href: "https://t.me/example",
-        },
       ]}
       mediaItems={[
-        {
+        { imageSrc: "https://images.unsplash.com/photo-1579154204601-01588f351e67?q=80&w=1200&auto=format&fit=crop", imageAlt: "Professional facial aesthetic procedure" },
-          imageSrc: "http://img.b2bpic.net/free-photo/spa-equipments-with-soap-cotton-flower_23-2147844979.jpg?_wi=1",
+        { imageSrc: "https://images.unsplash.com/photo-1612287230202-1ffbe388118b?q=80&w=1200&auto=format&fit=crop", imageAlt: "Cosmetology specialist skincare consultation" },
-          imageAlt: "massage therapist hands spa relaxation",
+        { imageSrc: "https://images.unsplash.com/photo-1595152772835-219674b2a0a6?q=80&w=1200&auto=format&fit=crop", imageAlt: "Advanced beauty salon laser treatment" },
-        },
-        {
-          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",
-        },
       ]}
     />
   </div>
@@ -110,87 +69,12 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
+        { id: "s1", title: "Омолодження", subtitle: "Сучасні методи відновлення пружності шкіри.", category: "Догляд", value: "✓" },
-          id: "s1",
+        { id: "s2", title: "Глибоке очищення", subtitle: "Професійний догляд за шкірою обличчя.", category: "Догляд", value: "✓" },
-          title: "Класичний масаж",
+        { id: "s3", title: "Ліфтинг догляд", subtitle: "Ефективна боротьба з ознаками старіння.", category: "Догляд", value: "✓" },
-          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",
-            },
-          ],
-        },
       ]}
-      title="Послуги"
+      title="Наші послуги"
-      description="Оберіть масаж, який найкраще підійде вашому стану"
+      description="Високоефективні процедури для вашої впевненості"
     />
   </div>
 
@@ -200,71 +84,25 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       plans={[
-        {
+        { id: "p1", badge: "Базовий", price: "900 грн", subtitle: "Доглядові процедури", features: ["Очищення", "Зволоження"], buttons: [{ text: "Записатися", href: "#contact-form" }] },
-          id: "p1",
+        { id: "p2", badge: "Преміум", price: "1500 грн", subtitle: "Комплексний підхід", features: ["Омолодження", "Масаж"], buttons: [{ text: "Записатися", href: "#contact-form" }] },
-          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",
-            },
-          ],
-        },
       ]}
-      title="Ціни"
+      title="Інвестиція у себе"
-      description="Точна ціна залежить від тривалості та обраної процедури."
+      description="Обирайте найкраще для вашого догляду"
     />
   </div>
 
   <div id="about" data-section="about">
       <TestimonialAboutCard
       useInvertedBackground={false}
-      tag="Про спеціаліста"
+      tag="Про нас"
-      title="Працюю індивідуально з кожним клієнтом"
+      title="Мистецтво косметології"
-      description="Підбираю масаж під стан тіла, самопочуття та бажаний результат. Головне — комфорт, безпека і відчутний ефект після процедури."
+      description="Ми поєднуємо професіоналізм із турботою про кожного клієнта. Кожна процедура — це ретельно підібраний ритуал краси."
-      subdescription="Маю багаторічний досвід роботи з клієнтами різного рівня навантажень."
+      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: "@anna", testimonial: "Найкращий догляд у місті, результат видно одразу!", imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=200&auto=format&fit=crop" },
-          id: "t1",
+        { id: "t2", name: "Вікторія", handle: "@vika", testimonial: "Дуже приємна атмосфера та справжні професіонали.", imageSrc: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=200&auto=format&fit=crop" },
-          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",
-        },
       ]}
-      title="Відгуки клієнтів"
+      title="Відгуки"
-      description="Що кажуть про мої послуги"
+      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: "https://images.unsplash.com/photo-1616394584738-fc6e6122f6b7?q=80&w=800&auto=format&fit=crop", imageAlt: "Skincare procedure result" },
-          id: "g1",
+        { id: "g2", name: "Професійна косметика", price: "", imageSrc: "https://images.unsplash.com/photo-1598440947619-2c35fd95608d?q=80&w=800&auto=format&fit=crop", imageAlt: "Luxury skincare product" },
-          name: "Студія",
+        { id: "g3", name: "Стерильність процедур", price: "", imageSrc: "https://images.unsplash.com/photo-1584028291825-4c0851e309cc?q=80&w=800&auto=format&fit=crop", imageAlt: "Sterile beauty clinic environment" },
-          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",
-        },
       ]}
+      title="Наші результати"
+      description="Естетичне перетворення у деталях"
+      buttons={[{ text: "Дивитися Instagram", href: "#" }]}
     />
   </div>
 
   <div id="contact-form" data-section="contact-form">
       <ContactSplit
       useInvertedBackground={true}
-      background={{
+      background={{ variant: "plain" }}
-        variant: "plain",
-      }}
       tag="Запис"
-      title="Записатися на масаж"
+      title="Записатися на візит"
-      description="Заповніть форму, і я зв'яжуся з вами найближчим часом."
+      description="Залиште ваші контакти для консультації"
       mediaAnimation="slide-up"
       mediaPosition="right"
-      inputPlaceholder="Ваше ім'я або телефон"
+      buttonText="Відправити"
-      buttonText="Надіслати заявку"
+      imageSrc="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?q=80&w=1200&auto=format&fit=crop"
-      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"
     />
   </div>
 
@@ -397,61 +155,25 @@ export default function LandingPage() {
       <MetricCardFourteen
       useInvertedBackground={false}
       title="Контакти"
-      tag="Львів"
+      tag="Зв'язок"
       metrics={[
-        {
+        { id: "m1", value: "+38 099 000 00 00", description: "Телефон" },
-          id: "m1",
+        { id: "m2", value: "10:00–20:00", description: "Графік" },
-          value: "+38 (0XX) XXX-XX-XX",
+        { id: "m3", value: "Львів, Центр", description: "Адреса" },
-          description: "Телефон",
-        },
-        {
-          id: "m2",
-          value: "10:00–20:00",
-          description: "Графік",
-        },
-        {
-          id: "m3",
-          value: "Instagram",
-          description: "Соцмережі",
-        },
       ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/tranquil-pool-oasis-meditation-space_23-2151935119.jpg"
+      imageSrc="https://images.unsplash.com/photo-1560750588-73207b1ef5b8?q=80&w=800&auto=format&fit=crop"
-      logoText="Масаж у Львові"
+      logoText="Cosmetique Studio"
       columns={[
-        {
+        { title: "Навігація", items: [{ label: "Послуги", href: "#services" }, { label: "Ціни", href: "#pricing" }] },
-          title: "Меню",
+        { title: "Соціальні", items: [{ label: "Instagram", href: "#" }, { label: "Telegram", href: "#" }] },
-          items: [
-            {
-              label: "Послуги",
-              href: "#services",
-            },
-            {
-              label: "Ціни",
-              href: "#pricing",
-            },
-          ],
-        },
-        {
-          title: "Соціальні мережі",
-          items: [
-            {
-              label: "Instagram",
-              href: "#",
-            },
-            {
-              label: "Telegram",
-              href: "#",
-            },
-          ],
-        },
       ]}
-      copyrightText="© 2025 Масаж у Львові"
+      copyrightText="© 2025 Cosmetique Studio"
-      imageAlt="massage therapist hands spa relaxation"
+      imageAlt="professional skincare"
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #F7F1EA;
+  --background: #fbfbf7;
-  --card: #FFFFFF;
+  --card: #f0ede8;
-  --foreground: #2B2420;
+  --foreground: #3a3430;
-  --primary-cta: #C8A46A;
+  --primary-cta: #8c7b70;
   --primary-cta-text: #FFFFFF;
-  --secondary-cta: #8C6A4F;
+  --secondary-cta: #d5cdc7;
   --secondary-cta-text: #FFFFFF;
-  --accent: #E8D8C8;
+  --accent: #c6bcae;
-  --background-accent: #1E1B18;
+  --background-accent: #e8e1d9;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);