Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -2,9 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
@@ -12,7 +12,7 @@ import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
-import { User } from "lucide-react";
+import { User, MapPin, Phone, Clock } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -50,15 +50,15 @@ export default function LandingPage() {
         variant: "gradient-bars"}}
       title="Естетика та професіоналізм"
       description="Ваш шлях до досконалості та гармонії через преміальний догляд та професійні косметологічні процедури."
-      tag="Преміум догляд • Естетика • Львів"
+      tag="Преміум догляд • Естетика • Київ"
       buttons={[
         { text: "Записатися", href: "#contact-form" },
         { text: "Консультація", href: "https://t.me/example" },
       ]}
       mediaItems={[
-        { 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-1579154204601-01588f351e67?q=80&w=1200&auto=format&fit=crop", imageAlt: "Professional facial aesthetic procedure" },
-        { 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-1612287230202-1ffbe388118b?q=80&w=1200&auto=format&fit=crop", imageAlt: "Cosmetology specialist skincare consultation" },
-        { imageSrc: "https://images.unsplash.com/photo-1616394584738-fc6e6122f6b7?q=80&w=1200&auto=format&fit=crop", imageAlt: "beauty salon interior" },
+        { imageSrc: "https://images.unsplash.com/photo-1595152772835-219674b2a0a6?q=80&w=1200&auto=format&fit=crop", imageAlt: "Advanced beauty salon laser treatment" },
       ]}
     />
   </div>
@@ -114,9 +114,10 @@ export default function LandingPage() {
       testimonials={[
         { 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" },
+        { id: "t3", name: "Олена", handle: "@olena", testimonial: "Результати перевершили очікування, рекомендую!", imageSrc: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=200&auto=format&fit=crop" },
       ]}
       title="Відгуки"
-      description="Наші клієнти про результати"
+      description="Що кажуть наші клієнти"
     />
   </div>
 
@@ -127,26 +128,27 @@ export default function LandingPage() {
       gridVariant="asymmetric-60-wide-40-narrow"
       useInvertedBackground={false}
       products={[
-        { id: "g1", name: "Стерильність", price: "", imageSrc: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=800&auto=format&fit=crop" },
+        { 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: "g2", name: "Професійні засоби", price: "", imageSrc: "https://images.unsplash.com/photo-1598440947619-2c35fd95608d?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", imageAlt: "Luxury skincare product" },
-        { id: "g3", name: "Затишок", price: "", imageSrc: "https://images.unsplash.com/photo-1584028291825-4c0851e309cc?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", imageAlt: "Sterile beauty clinic environment" },
       ]}
-      title="Атмосфера студії"
+      title="Наші результати"
-      description="Місце вашої трансформації"
+      description="Естетичне перетворення у деталях"
       buttons={[{ text: "Дивитися Instagram", href: "#" }]}
     />
   </div>
 
   <div id="contact-form" data-section="contact-form">
-      <ContactSplit
+      <ContactSplitForm
       useInvertedBackground={true}
-      background={{ variant: "plain" }}
-      tag="Запис"
       title="Записатися на візит"
-      description="Залиште ваші контакти для консультації"
+      description="Напишіть нам, і ми підберемо найкращий час"
-      mediaAnimation="slide-up"
+      inputs={[
-      mediaPosition="right"
+        { name: "name", type: "text", placeholder: "Ваше ім'я", required: true },
-      buttonText="Відправити"
+        { name: "email", type: "email", placeholder: "Ваш email або телефон", required: true },
+      ]}
+      textarea={{ name: "message", placeholder: "Ваші побажання щодо процедур", rows: 4 }}
+      buttonText="Відправити заявку"
       imageSrc="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?q=80&w=1200&auto=format&fit=crop"
     />
   </div>
@@ -157,23 +159,19 @@ export default function LandingPage() {
       title="Контакти"
       tag="Зв'язок"
       metrics={[
-        { id: "m1", value: "+38 099 000 00 00", description: "Телефон" },
+        { id: "m1", value: "+38 044 123 45 67", description: "Телефон" },
-        { id: "m2", value: "10:00–20:00", description: "Графік" },
+        { id: "m2", value: "10:00–20:00", description: "Графік роботи" },
-        { id: "m3", value: "Львів, Центр", description: "Адреса" },
+        { id: "m3", value: "м. Київ, вул. Хрещатик, 1", description: "Адреса студії" },
       ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterMedia
+      <FooterLogoReveal
-      imageSrc="https://images.unsplash.com/photo-1560750588-73207b1ef5b8?q=80&w=800&auto=format&fit=crop"
       logoText="Cosmetique Studio"
-      columns={[
+      leftLink={{ text: "Privacy Policy", href: "#" }}
-        { title: "Навігація", items: [{ label: "Послуги", href: "#services" }, { label: "Ціни", href: "#pricing" }] },
+      rightLink={{ text: "Terms of Service", href: "#" }}
-        { title: "Соціальні", items: [{ label: "Instagram", href: "#" }, { label: "Telegram", href: "#" }] },
+      className="bg-background"
-      ]}
-      copyrightText="© 2025 Cosmetique Studio"
-      imageAlt="professional skincare"
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #F7F1EA;
+  --background: #fdfcf9;
-  --card: #FFFFFF;
+  --card: #f6f3f0;
-  --foreground: #2B2420;
+  --foreground: #3a3430;
-  --primary-cta: #C8A46A;
+  --primary-cta: #8c7b70;
   --primary-cta-text: #FFFFFF;
-  --secondary-cta: #8C6A4F;
+  --secondary-cta: #fdfcf9;
   --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);