bender/aecfdc20-40c5-4653-a5d0-79ae67377156
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: bender:version_2
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1
..
compare: bender:version_3
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1

2 Commits
version_2 ... version_3

Author SHA1 Message Date
bender
394b3b6293 Update src/app/page.tsx 2026-05-05 17:43:16 +00:00
bender
cbdff4261c Merge version_2 into main 
Merge version_2 into main
 2026-05-05 17:39:54 +00:00
1 changed files with 39 additions and 95 deletions
Expand all files Collapse all files

134
src/app/page.tsx
View File

@@ -31,14 +31,10 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home", id: "hero"},
{
name: "Steps", id: "steps"},
{
name: "FAQ", id: "faq"},
{
name: "Contact", id: "contact"},
{ name: "Головна", id: "hero" },
{ name: "Кроки", id: "steps" },
{ name: "FAQ", id: "faq" },
{ name: "Контакти", id: "contact" },
]}
brandName="CityMapper Pro"
/>
@@ -46,23 +42,16 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroBillboardCarousel
background={{
variant: "gradient-bars"}}
title="Mapping My City Through Coordinates"
description="Learn the professional way to calculate urban area using Google Maps and precise coordinate data."
background={{ variant: "gradient-bars" }}
title="Картографування міста через координати"
description="Опануйте професійні методи обчислення міської площі за допомогою Google Maps та точних координат."
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/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/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"},
{ 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/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: "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"},
{ type: "text", content: "Професійний просторовий аналіз" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/medium-shot-man-pointing-map_23-2149080798.jpg", alt: "Mapping tools" },
]}
/>
</div>
@@ -85,15 +72,12 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={true}
features={[
{
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: "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"},
{ 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: "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" },
]}
title="How It Works"
description="Master mapping in three simple phases."
title="Технічна методологія"
description="Висновок: точність залежить від якості постановки точок по периметру."
/>
</div>
@@ -103,18 +87,12 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{
id: "m1", title: "Precision", value: "99.9%", icon: CheckCircle,
},
{
id: "m2", title: "User Base", value: "100k+", icon: Users,
},
{
id: "m3", title: "Accuracy", value: "Meters", icon: Target,
},
{ id: "m1", title: "Точність", value: "99.9%", icon: CheckCircle },
{ id: "m2", title: "Користувачів", value: "10k+", icon: Users },
{ id: "m3", title: "Похибка", value: "< 1м", icon: Target },
]}
title="Why Precision Matters"
description="Data accuracy ensures professional-grade urban planning."
title="Чому точність критична"
description="Професійні дані потребують систематичного підходу до картографування."
/>
</div>
@@ -123,17 +101,14 @@ export default function LandingPage() {
textboxLayout="split"
useInvertedBackground={true}
faqs={[
{
id: "q1", title: "Які інструменти потрібні?", content: "Лише підключення до Інтернету та стандартний веб-браузер."},
{
id: "q2", title: "Це безкоштовно?", content: "Так, інструменти Google Maps, що використовуються тут, повністю безкоштовні."},
{
id: "q3", title: "Яка межа точності?", content: "Точність залежить від рівня масштабування, зазвичай в межах 1-5 метрів."},
{ id: "q1", title: "Які інструменти потрібні?", content: "Тільки стабільне інтернет-з'єднання та веб-браузер." },
{ id: "q2", title: "Як експортувати дані?", content: "Дані розрахунку відображаються автоматично в панелі вимірювань Google Maps." },
{ id: "q3", title: "Чи працює це на мобільних?", content: "Рекомендується використовувати десктопну версію для максимальної точності постановки координат." },
]}
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: "Sarah Johnson", role: "Студент", 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: "Дослідник", 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"},
{ 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: "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" },
]}
title="Досвід навчання"
description="Перспективи студентів щодо нашої методології картографування."
title="Відгуки професіоналів"
description="Думки фахівців щодо нашої методології."
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={true}
background={{
variant: "rotated-rays-static"}}
text="Готові відобразити власне місто? Почніть дослідження сьогодні."
buttons={[
{
text: "Почати картографування", href: "#hero"},
]}
background={{ variant: "rotated-rays-static" }}
text="Маєте питання щодо картографування? Зв'яжіться з нами для технічної консультації."
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: [
{
label: "Інформація про проект", href: "#"},
{
label: "Зв'яжіться з нами", href: "#"},
],
},
{ title: "Ресурси", items: [{ 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>