Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 394b3b6293 | |||
| cbdff4261c | |||
| 7106cb9c3a |
235
src/app/page.tsx
235
src/app/page.tsx
@@ -31,22 +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"
|
||||
/>
|
||||
@@ -54,36 +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>
|
||||
@@ -92,15 +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>
|
||||
@@ -111,30 +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>
|
||||
|
||||
@@ -144,27 +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>
|
||||
|
||||
@@ -173,26 +101,14 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "What tools are needed?",
|
||||
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.",
|
||||
},
|
||||
{ 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="Common Questions"
|
||||
description="Everything you need to know about coordinate mapping."
|
||||
title="Поширені запитання"
|
||||
description="Відповіді на технічні аспекти картографування."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
@@ -204,100 +120,31 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
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",
|
||||
},
|
||||
{ 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="Learning Experience"
|
||||
description="Student perspectives on our mapping methodology."
|
||||
title="Відгуки професіоналів"
|
||||
description="Думки фахівців щодо нашої методології."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
text="Ready to map your own city? Start your research today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Mapping",
|
||||
href: "#hero",
|
||||
},
|
||||
]}
|
||||
background={{ variant: "rotated-rays-static" }}
|
||||
text="Маєте питання щодо картографування? Зв'яжіться з нами для технічної консультації."
|
||||
buttons={[{ text: "Надіслати запит", href: "#hero" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{
|
||||
label: "Google Maps",
|
||||
href: "https://maps.google.com",
|
||||
},
|
||||
{
|
||||
label: "City Data",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "About",
|
||||
items: [
|
||||
{
|
||||
label: "Project Info",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Ресурси", items: [{ label: "Google Maps", href: "https://maps.google.com" }, { label: "Технічні інструкції", href: "#" }] },
|
||||
{ title: "Проект", items: [{ label: "Про нас", href: "#" }, { label: "Контакти", href: "#" }] },
|
||||
]}
|
||||
bottomLeftText="© 2024 CityMapper Pro"
|
||||
bottomRightText="All rights reserved."
|
||||
bottomLeftText="© 2025 CityMapper Pro"
|
||||
bottomRightText="Всі права захищені."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user