Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -31,22 +31,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Головна", id: "hero" },
-          name: "Home",
+        { name: "Кроки", id: "steps" },
-          id: "hero",
+        { name: "FAQ", id: "faq" },
-        },
+        { name: "Контакти", id: "contact" },
-        {
-          name: "Steps",
-          id: "steps",
-        },
-        {
-          name: "FAQ",
-          id: "faq",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="CityMapper Pro"
     />
@@ -54,36 +42,16 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardCarousel
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars",
+      title="Картографування міста через координати"
-      }}
+      description="Опануйте професійні методи обчислення міської площі за допомогою Google Maps та точних координат."
-      title="Mapping My City Through Coordinates"
-      description="Learn the professional way to calculate urban area using Google Maps and precise coordinate data."
       mediaItems={[
-        {
+        { imageSrc: "http://img.b2bpic.net/free-photo/calculator-with-pen-business-plan-paper_23-2147965727.jpg", imageAlt: "Mapping dashboard" },
-          imageSrc: "http://img.b2bpic.net/free-photo/calculator-with-pen-business-plan-paper_23-2147965727.jpg",
+        { imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-illustration-botanic-garden_23-2151464653.jpg", imageAlt: "Urban map overview" },
-          imageAlt: "Mapping dashboard",
+        { imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-holding-smartphone_23-2148889732.jpg", imageAlt: "Coordinate reading tool" },
-        },
+        { imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-house-with-automation-light-system-holding-smartphone-turning-light-using-voice-activated-application_482257-2271.jpg", imageAlt: "Precise coordinates UI" },
-        {
+        { imageSrc: "http://img.b2bpic.net/free-vector/3d-geometric-modern-landing-page_23-2148264246.jpg", imageAlt: "Polygon area tool" },
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-illustration-botanic-garden_23-2151464653.jpg",
+        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-monitor-spaceship-displaying-detailed-planetary-scan-mars-screen-futuristic_482257-132577.jpg", imageAlt: "Navigation software UI" },
-          imageAlt: "Urban map overview",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-holding-smartphone_23-2148889732.jpg",
-          imageAlt: "Coordinate reading tool",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-house-with-automation-light-system-holding-smartphone-turning-light-using-voice-activated-application_482257-2271.jpg",
-          imageAlt: "Precise coordinates UI",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-vector/3d-geometric-modern-landing-page_23-2148264246.jpg",
-          imageAlt: "Polygon area tool",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-monitor-spaceship-displaying-detailed-planetary-scan-mars-screen-futuristic_482257-132577.jpg",
-          imageAlt: "Navigation software UI",
-        },
       ]}
     />
   </div>
@@ -92,15 +60,8 @@ export default function LandingPage() {
       <InlineImageSplitTextAbout
       useInvertedBackground={false}
       heading={[
-        {
+        { type: "text", content: "Професійний просторовий аналіз" },
-          type: "text",
+        { type: "image", src: "http://img.b2bpic.net/free-photo/medium-shot-man-pointing-map_23-2149080798.jpg", alt: "Mapping tools" },
-          content: "Mastering Urban Spatial Analysis",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/medium-shot-man-pointing-map_23-2149080798.jpg",
-          alt: "Education mapping tools",
-        },
       ]}
     />
   </div>
@@ -111,30 +72,12 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       features={[
-        {
+        { id: "s1", title: "Пошук координат", description: "Як знайти точні географічні координати об'єкта через інтерфейс Google Maps.", tag: "Крок 1", imageSrc: "http://img.b2bpic.net/free-vector/watercolor-pointers-set-with-hand-drawn-icons_23-2147577032.jpg" },
-          id: "s1",
+        { id: "s2", title: "Метод розрахунку площі", description: "Використання полігональних інструментів для вимірювання контуру ділянки.", tag: "Крок 2", imageSrc: "http://img.b2bpic.net/free-photo/entrepreneur-analyzing-architectural-sketches-blueprints-his-home_482257-90908.jpg" },
-          title: "Define Your Coordinates",
+        { id: "s3", title: "Практичний приклад", description: "Покрокове виконання обчислення: від першої точки до фінального результату.", tag: "Крок 3", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-relaxing-taking-break-from-computer-work-meditation_1163-5129.jpg" },
-          description: "Identify the latitude and longitude of your chosen urban park or stadium.",
-          tag: "Phase 1",
-          imageSrc: "http://img.b2bpic.net/free-vector/watercolor-pointers-set-with-hand-drawn-icons_23-2147577032.jpg",
-        },
-        {
-          id: "s2",
-          title: "Map Your Object",
-          description: "Use the Google Maps measurement tool to trace the perimeter of your target area.",
-          tag: "Phase 2",
-          imageSrc: "http://img.b2bpic.net/free-photo/entrepreneur-analyzing-architectural-sketches-blueprints-his-home_482257-90908.jpg",
-        },
-        {
-          id: "s3",
-          title: "Calculate and Export",
-          description: "Complete the polygon to automatically generate the total surface area data.",
-          tag: "Phase 3",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-relaxing-taking-break-from-computer-work-meditation_1163-5129.jpg",
-        },
       ]}
-      title="How It Works"
+      title="Технічна методологія"
-      description="Master mapping in three simple phases."
+      description="Висновок: точність залежить від якості постановки точок по периметру."
     />
   </div>
 
@@ -144,27 +87,12 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       metrics={[
-        {
+        { id: "m1", title: "Точність", value: "99.9%", icon: CheckCircle },
-          id: "m1",
+        { id: "m2", title: "Користувачів", value: "10k+", icon: Users },
-          title: "Precision",
+        { id: "m3", title: "Похибка", value: "< 1м", icon: Target },
-          value: "99.9%",
-          icon: CheckCircle,
-        },
-        {
-          id: "m2",
-          title: "User Base",
-          value: "100k+",
-          icon: Users,
-        },
-        {
-          id: "m3",
-          title: "Accuracy",
-          value: "Meters",
-          icon: Target,
-        },
       ]}
-      title="Why Precision Matters"
+      title="Чому точність критична"
-      description="Data accuracy ensures professional-grade urban planning."
+      description="Професійні дані потребують систематичного підходу до картографування."
     />
   </div>
 
@@ -173,26 +101,14 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       faqs={[
-        {
+        { id: "q1", title: "Які інструменти потрібні?", content: "Тільки стабільне інтернет-з'єднання та веб-браузер." },
-          id: "q1",
+        { id: "q2", title: "Як експортувати дані?", content: "Дані розрахунку відображаються автоматично в панелі вимірювань Google Maps." },
-          title: "What tools are needed?",
+        { id: "q3", title: "Чи працює це на мобільних?", content: "Рекомендується використовувати десктопну версію для максимальної точності постановки координат." },
-          content: "Only an internet connection and a standard web browser.",
-        },
-        {
-          id: "q2",
-          title: "Is this free?",
-          content: "Yes, Google Maps tools used here are completely free.",
-        },
-        {
-          id: "q3",
-          title: "What is the accuracy limit?",
-          content: "Accuracy depends on the zoom level, typically within 1-5 meters.",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-working-office-travel-agency_23-2150433346.jpg"
       mediaAnimation="slide-up"
-      title="Common Questions"
+      title="Поширені запитання"
-      description="Everything you need to know about coordinate mapping."
+      description="Відповіді на технічні аспекти картографування."
       faqsAnimation="blur-reveal"
     />
   </div>
@@ -204,100 +120,31 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "1", name: "Олена П.", role: "Аналітик", company: "UrbanTech", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/female-freelancer-artist-learns-new-technologies-sketches-graphic-notepad-draws-illustrations-dressed-casual-jumper-poses-outside_273609-55344.jpg" },
-          id: "1",
+        { id: "2", name: "Андрій В.", role: "Картограф", company: "GIS Solutions", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-professional-analyzing-global-data-digital-tablet_23-2151997008.jpg" },
-          name: "Sarah Johnson",
-          role: "Student",
-          company: "Tech Academy",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/female-freelancer-artist-learns-new-technologies-sketches-graphic-notepad-draws-illustrations-dressed-casual-jumper-poses-outside_273609-55344.jpg",
-        },
-        {
-          id: "2",
-          name: "Michael Chen",
-          role: "Researcher",
-          company: "Urban Lab",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-professional-analyzing-global-data-digital-tablet_23-2151997008.jpg",
-        },
-        {
-          id: "3",
-          name: "Emily Rodriguez",
-          role: "Team Lead",
-          company: "GrowthCo",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/people-working-elegant-cozy-office-space_23-2149548733.jpg",
-        },
-        {
-          id: "4",
-          name: "David Kim",
-          role: "Product Manager",
-          company: "MapTech",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-working-home-office_329181-14578.jpg",
-        },
-        {
-          id: "5",
-          name: "Linda Wu",
-          role: "Educator",
-          company: "Science Edu",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-doing-creative-journaling_23-2150447192.jpg",
-        },
       ]}
-      title="Learning Experience"
+      title="Відгуки професіоналів"
-      description="Student perspectives on our mapping methodology."
+      description="Думки фахівців щодо нашої методології."
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={true}
-      background={{
+      background={{ variant: "rotated-rays-static" }}
-        variant: "rotated-rays-static",
+      text="Маєте питання щодо картографування? Зв'яжіться з нами для технічної консультації."
-      }}
+      buttons={[{ text: "Надіслати запит", href: "#hero" }]}
-      text="Ready to map your own city? Start your research today."
-      buttons={[
-        {
-          text: "Start Mapping",
-          href: "#hero",
-        },
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
-        {
+        { title: "Ресурси", items: [{ label: "Google Maps", href: "https://maps.google.com" }, { label: "Технічні інструкції", href: "#" }] },
-          title: "Resources",
+        { title: "Проект", items: [{ label: "Про нас", href: "#" }, { label: "Контакти", href: "#" }] },
-          items: [
-            {
-              label: "Google Maps",
-              href: "https://maps.google.com",
-            },
-            {
-              label: "City Data",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "About",
-          items: [
-            {
-              label: "Project Info",
-              href: "#",
-            },
-            {
-              label: "Contact Us",
-              href: "#",
-            },
-          ],
-        },
       ]}
-      bottomLeftText="© 2024 CityMapper Pro"
+      bottomLeftText="© 2025 CityMapper Pro"
-      bottomRightText="All rights reserved."
+      bottomRightText="Всі права захищені."
     />
   </div>
       </ReactLenis>