From 3d7b4add92471c24c45a2cf528b62d5960012e3c Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 12 Apr 2026 14:13:35 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 380 +++++++++++++++--------------------------------
 1 file changed, 116 insertions(+), 264 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5b88d20..9394868 100644
--- a/src/app/page.tsx
+++ b/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>
   );
-}
+}
\ No newline at end of file