Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #1.
This commit is contained in:
189
src/app/page.tsx
189
src/app/page.tsx
@@ -32,21 +32,13 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Steps",
|
||||
id: "steps",
|
||||
},
|
||||
name: "Steps", id: "steps"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
name: "FAQ", id: "faq"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="CityMapper Pro"
|
||||
/>
|
||||
@@ -55,35 +47,22 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
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."
|
||||
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/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/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-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-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/close-up-monitor-spaceship-displaying-detailed-planetary-scan-mars-screen-futuristic_482257-132577.jpg", imageAlt: "Navigation software UI"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -93,14 +72,9 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Mastering Urban Spatial Analysis",
|
||||
},
|
||||
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: "image", src: "http://img.b2bpic.net/free-photo/medium-shot-man-pointing-map_23-2149080798.jpg", alt: "Education mapping tools"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -112,26 +86,11 @@ export default function LandingPage() {
|
||||
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: "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: "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: "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"
|
||||
description="Master mapping in three simple phases."
|
||||
@@ -145,22 +104,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
title: "Precision",
|
||||
value: "99.9%",
|
||||
icon: CheckCircle,
|
||||
id: "m1", title: "Precision", value: "99.9%", icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
title: "User Base",
|
||||
value: "100k+",
|
||||
icon: Users,
|
||||
id: "m2", title: "User Base", value: "100k+", icon: Users,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
title: "Accuracy",
|
||||
value: "Meters",
|
||||
icon: Target,
|
||||
id: "m3", title: "Accuracy", value: "Meters", icon: Target,
|
||||
},
|
||||
]}
|
||||
title="Why Precision Matters"
|
||||
@@ -174,25 +124,16 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "What tools are needed?",
|
||||
content: "Only an internet connection and a standard web browser.",
|
||||
},
|
||||
id: "q1", title: "Які інструменти потрібні?", content: "Лише підключення до Інтернету та стандартний веб-браузер."},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Is this free?",
|
||||
content: "Yes, Google Maps tools used here are completely free.",
|
||||
},
|
||||
id: "q2", title: "Це безкоштовно?", content: "Так, інструменти Google Maps, що використовуються тут, повністю безкоштовні."},
|
||||
{
|
||||
id: "q3",
|
||||
title: "What is the accuracy limit?",
|
||||
content: "Accuracy depends on the zoom level, typically within 1-5 meters.",
|
||||
},
|
||||
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="Common Questions"
|
||||
description="Everything you need to know about coordinate mapping."
|
||||
title="Поширені запитання"
|
||||
description="Усе, що потрібно знати про картографування координат."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
@@ -205,48 +146,23 @@ export default function LandingPage() {
|
||||
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: "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: "Researcher",
|
||||
company: "Urban Lab",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-professional-analyzing-global-data-digital-tablet_23-2151997008.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: "Team Lead",
|
||||
company: "GrowthCo",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-working-elegant-cozy-office-space_23-2149548733.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: "Product Manager",
|
||||
company: "MapTech",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-working-home-office_329181-14578.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: "Educator",
|
||||
company: "Science Edu",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-doing-creative-journaling_23-2150447192.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="Learning Experience"
|
||||
description="Student perspectives on our mapping methodology."
|
||||
title="Досвід навчання"
|
||||
description="Перспективи студентів щодо нашої методології картографування."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -254,14 +170,11 @@ export default function LandingPage() {
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
text="Ready to map your own city? Start your research today."
|
||||
variant: "rotated-rays-static"}}
|
||||
text="Готові відобразити власне місто? Почніть дослідження сьогодні."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Mapping",
|
||||
href: "#hero",
|
||||
},
|
||||
text: "Почати картографування", href: "#hero"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -270,34 +183,24 @@ export default function LandingPage() {
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
title: "Ресурси", items: [
|
||||
{
|
||||
label: "Google Maps",
|
||||
href: "https://maps.google.com",
|
||||
},
|
||||
label: "Google Maps", href: "https://maps.google.com"},
|
||||
{
|
||||
label: "City Data",
|
||||
href: "#",
|
||||
},
|
||||
label: "Міські дані", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "About",
|
||||
items: [
|
||||
title: "Про нас", items: [
|
||||
{
|
||||
label: "Project Info",
|
||||
href: "#",
|
||||
},
|
||||
label: "Інформація про проект", href: "#"},
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#",
|
||||
},
|
||||
label: "Зв'яжіться з нами", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 CityMapper Pro"
|
||||
bottomRightText="All rights reserved."
|
||||
bottomRightText="Всі права захищені."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user