Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -31,14 +31,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Головна", id: "hero" },
-          name: "Home",          id: "hero"},
+        { name: "Кроки", id: "steps" },
-        {
+        { name: "FAQ", id: "faq" },
-          name: "Steps",          id: "steps"},
+        { name: "Контакти", id: "contact" },
-        {
-          name: "FAQ",          id: "faq"},
-        {
-          name: "Contact",          id: "contact"},
       ]}
       brandName="CityMapper Pro"
     />
@@ -46,23 +42,16 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardCarousel
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars"}}
+      title="Картографування міста через координати"
-      title="Mapping My City Through Coordinates"
+      description="Опануйте професійні методи обчислення міської площі за допомогою Google Maps та точних координат."
-      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",          imageAlt: "Mapping dashboard"},
+        { imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-illustration-botanic-garden_23-2151464653.jpg", 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/3d-rendering-illustration-botanic-garden_23-2151464653.jpg",          imageAlt: "Urban map overview"},
+        { 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/medium-shot-man-holding-smartphone_23-2148889732.jpg",          imageAlt: "Coordinate reading 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" },
-        {
-          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>
@@ -71,10 +60,8 @@ export default function LandingPage() {
       <InlineImageSplitTextAbout
       useInvertedBackground={false}
       heading={[
-        {
+        { type: "text", content: "Професійний просторовий аналіз" },
-          type: "text",          content: "Mastering Urban Spatial Analysis"},
+        { type: "image", src: "http://img.b2bpic.net/free-photo/medium-shot-man-pointing-map_23-2149080798.jpg", alt: "Mapping tools" },
-        {
-          type: "image",          src: "http://img.b2bpic.net/free-photo/medium-shot-man-pointing-map_23-2149080798.jpg",          alt: "Education mapping tools"},
       ]}
     />
   </div>
@@ -85,15 +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",          title: "Define Your Coordinates",          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: "Метод розрахунку площі", description: "Використання полігональних інструментів для вимірювання контуру ділянки.", tag: "Крок 2", imageSrc: "http://img.b2bpic.net/free-photo/entrepreneur-analyzing-architectural-sketches-blueprints-his-home_482257-90908.jpg" },
-        {
+        { 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" },
-          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>
 
@@ -103,18 +87,12 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       metrics={[
-        {
+        { id: "m1", title: "Точність", value: "99.9%", icon: CheckCircle },
-          id: "m1",          title: "Precision",          value: "99.9%",          icon: CheckCircle,
+        { id: "m2", title: "Користувачів", value: "10k+", icon: Users },
-        },
+        { id: "m3", title: "Похибка", value: "< 1м", icon: Target },
-        {
-          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>
 
@@ -123,17 +101,14 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       faqs={[
-        {
+        { id: "q1", title: "Які інструменти потрібні?", content: "Тільки стабільне інтернет-з'єднання та веб-браузер." },
-          id: "q1",          title: "Які інструменти потрібні?",          content: "Лише підключення до Інтернету та стандартний веб-браузер."},
+        { id: "q2", title: "Як експортувати дані?", content: "Дані розрахунку відображаються автоматично в панелі вимірювань Google Maps." },
-        {
+        { id: "q3", title: "Чи працює це на мобільних?", content: "Рекомендується використовувати десктопну версію для максимальної точності постановки координат." },
-          id: "q2",          title: "Це безкоштовно?",          content: "Так, інструменти Google Maps, що використовуються тут, повністю безкоштовні."},
-        {
-          id: "q3",          title: "Яка межа точності?",          content: "Точність залежить від рівня масштабування, зазвичай в межах 1-5 метрів."},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-working-office-travel-agency_23-2150433346.jpg"
       mediaAnimation="slide-up"
       title="Поширені запитання"
-      description="Усе, що потрібно знати про картографування координат."
+      description="Відповіді на технічні аспекти картографування."
       faqsAnimation="blur-reveal"
     />
   </div>
@@ -145,61 +120,30 @@ 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",          name: "Sarah Johnson",          role: "Студент",          company: "Tech Academy",          rating: 5,
+        { 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" },
-          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: "Дослідник",          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: "Керівник команди",          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: "Менеджер продукту",          company: "MapTech",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/man-working-home-office_329181-14578.jpg"},
-        {
-          id: "5",          name: "Linda Wu",          role: "Викладач",          company: "Science Edu",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-doing-creative-journaling_23-2150447192.jpg"},
       ]}
-      title="Досвід навчання"
+      title="Відгуки професіоналів"
-      description="Перспективи студентів щодо нашої методології картографування."
+      description="Думки фахівців щодо нашої методології."
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={true}
-      background={{
+      background={{ variant: "rotated-rays-static" }}
-        variant: "rotated-rays-static"}}
+      text="Маєте питання щодо картографування? Зв'яжіться з нами для технічної консультації."
-      text="Готові відобразити власне місто? Почніть дослідження сьогодні."
+      buttons={[{ text: "Надіслати запит", href: "#hero" }]}
-      buttons={[
-        {
-          text: "Почати картографування",          href: "#hero"},
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
-        {
+        { title: "Ресурси", items: [{ label: "Google Maps", href: "https://maps.google.com" }, { label: "Технічні інструкції", href: "#" }] },
-          title: "Ресурси",          items: [
+        { title: "Проект", items: [{ label: "Про нас", href: "#" }, { label: "Контакти", href: "#" }] },
-            {
-              label: "Google Maps",              href: "https://maps.google.com"},
-            {
-              label: "Міські дані",              href: "#"},
-          ],
-        },
-        {
-          title: "Про нас",          items: [
-            {
-              label: "Інформація про проект",              href: "#"},
-            {
-              label: "Зв'яжіться з нами",              href: "#"},
-          ],
-        },
       ]}
-      bottomLeftText="© 2024 CityMapper Pro"
+      bottomLeftText="© 2025 CityMapper Pro"
       bottomRightText="Всі права захищені."
     />
   </div>