Merge version_1 into main #1
450
src/app/page.tsx
450
src/app/page.tsx
@@ -28,337 +28,141 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About Us",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact Us",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="GeoMapper 3D"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About Us", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Contact Us", id: "contact" },
|
||||
]}
|
||||
brandName="GeoMapper 3D"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Interactive 3D Mapping for Modern Businesses"
|
||||
description="Visualize your data with world-class, real-time 3D map animations designed for clarity, scale, and performance."
|
||||
tag="Revolutionary Visualization"
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Maps",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delimitation-land-plots_23-2150170927.jpg",
|
||||
imageAlt: "3D Map Visualization",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-tech-view-futuristic-earth_23-2151100380.jpg",
|
||||
imageAlt: "3D Map Visualization",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glowing-digital-sphere-futuristic-environment_23-2152020906.jpg",
|
||||
imageAlt: "3D Map Visualization",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-dark-earth-space_23-2151051317.jpg",
|
||||
imageAlt: "3D Map Visualization",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-mexican-mountains-from_181624-11512.jpg",
|
||||
imageAlt: "3D Map Visualization",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-wavy-folds-background_1048-16077.jpg",
|
||||
imageAlt: "3D Map Visualization",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{ variant: "plain" }}
|
||||
title="Interactive 3D Mapping for Modern Businesses"
|
||||
description="Visualize your data with world-class, real-time 3D map animations designed for clarity, scale, and performance."
|
||||
tag="Revolutionary Visualization"
|
||||
buttons={[
|
||||
{ text: "Explore Maps", href: "#features" },
|
||||
{ text: "Contact Us", href: "#contact" },
|
||||
]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/delimitation-land-plots_23-2150170927.jpg", imageAlt: "3D Map Visualization" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/high-tech-view-futuristic-earth_23-2151100380.jpg", imageAlt: "3D Map Visualization" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/glowing-digital-sphere-futuristic-environment_23-2152020906.jpg", imageAlt: "3D Map Visualization" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-dark-earth-space_23-2151051317.jpg", imageAlt: "3D Map Visualization" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-mexican-mountains-from_181624-11512.jpg", imageAlt: "3D Map Visualization" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-wavy-folds-background_1048-16077.jpg", imageAlt: "3D Map Visualization" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Why Choose GeoMapper 3D?"
|
||||
metrics={[
|
||||
{
|
||||
icon: Globe,
|
||||
label: "Global Reach",
|
||||
value: "150+",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
label: "Mapping Speed",
|
||||
value: "0.1s",
|
||||
},
|
||||
{
|
||||
icon: Database,
|
||||
label: "Data Points",
|
||||
value: "50M+",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Why Choose GeoMapper 3D?"
|
||||
metrics={[
|
||||
{ icon: Globe, label: "Global Reach", value: "150+" },
|
||||
{ icon: Zap, label: "Mapping Speed", value: "0.1s" },
|
||||
{ icon: Database, label: "Data Points", value: "50M+" },
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Map,
|
||||
title: "Interactive Terrain",
|
||||
description: "Dynamic terrain mapping with real-time data integration for precise geographic insights.",
|
||||
},
|
||||
{
|
||||
icon: Layers,
|
||||
title: "Advanced Data Layers",
|
||||
description: "Overlay complex business data with ease, providing deep contextual intelligence.",
|
||||
},
|
||||
{
|
||||
icon: Share2,
|
||||
title: "Seamless Collaboration",
|
||||
description: "Share your custom 3D views instantly with your team for unified decision-making.",
|
||||
},
|
||||
]}
|
||||
title="Core Mapping Capabilities"
|
||||
description="Our mapping platform combines raw performance with intuitive 3D design to empower your data decisions."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Map, title: "Interactive Terrain", description: "Dynamic terrain mapping with real-time data integration for precise geographic insights." },
|
||||
{ icon: Layers, title: "Advanced Data Layers", description: "Overlay complex business data with ease, providing deep contextual intelligence." },
|
||||
{ icon: Share2, title: "Seamless Collaboration", description: "Share your custom 3D views instantly with your team for unified decision-making." },
|
||||
]}
|
||||
title="Core Mapping Capabilities"
|
||||
description="Our mapping platform combines raw performance with intuitive 3D design to empower your data decisions."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Pro Mapper",
|
||||
price: "$99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/european-union-using-radar-system-detect-missiles-attacking-member-states_482257-89727.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Analytics View",
|
||||
price: "$149",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-wearing-medical-mask-showing-clipboard_23-2148761341.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Layer Editor",
|
||||
price: "$199",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-blogger-streaming-online-with-tablet_23-2148771582.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "API Access",
|
||||
price: "$299",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/navy-operations-specialist-following-hostile-warship-trajectory_482257-91043.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Data Export",
|
||||
price: "$49",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/data-center-it-expert-uses-mockup-tablet-reviewing-performance-dashboards-equipment-rigs-server_482257-136199.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Custom Geolocation",
|
||||
price: "$399",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/electronic-scoreboards-with-led-display_187299-47543.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Solutions"
|
||||
description="Ready-to-deploy mapping modules tailored to your operational needs."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Pro Mapper", price: "$99", imageSrc: "http://img.b2bpic.net/free-photo/european-union-using-radar-system-detect-missiles-attacking-member-states_482257-89727.jpg" },
|
||||
{ id: "2", name: "Analytics View", price: "$149", imageSrc: "http://img.b2bpic.net/free-photo/person-wearing-medical-mask-showing-clipboard_23-2148761341.jpg" },
|
||||
{ id: "3", name: "Layer Editor", price: "$199", imageSrc: "http://img.b2bpic.net/free-photo/female-blogger-streaming-online-with-tablet_23-2148771582.jpg" },
|
||||
{ id: "4", name: "API Access", price: "$299", imageSrc: "http://img.b2bpic.net/free-photo/navy-operations-specialist-following-hostile-warship-trajectory_482257-91043.jpg" },
|
||||
{ id: "5", name: "Data Export", price: "$49", imageSrc: "http://img.b2bpic.net/free-photo/data-center-it-expert-uses-mockup-tablet-reviewing-performance-dashboards-equipment-rigs-server_482257-136199.jpg" },
|
||||
{ id: "6", name: "Custom Geolocation", price: "$399", imageSrc: "http://img.b2bpic.net/free-photo/electronic-scoreboards-with-led-display_187299-47543.jpg" },
|
||||
]}
|
||||
title="Our Solutions"
|
||||
description="Ready-to-deploy mapping modules tailored to your operational needs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "99.9%",
|
||||
description: "Platform Uptime",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "500k",
|
||||
description: "Maps Rendered Daily",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "24/7",
|
||||
description: "Priority Support",
|
||||
},
|
||||
]}
|
||||
title="Platform Growth"
|
||||
description="Trusted by industry leaders across the globe."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "99.9%", description: "Platform Uptime" },
|
||||
{ id: "m2", value: "500k", description: "Maps Rendered Daily" },
|
||||
{ id: "m3", value: "24/7", description: "Priority Support" },
|
||||
]}
|
||||
title="Platform Growth"
|
||||
description="Trusted by industry leaders across the globe."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
role: "CEO",
|
||||
company: "Global Logistics",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "David Chen",
|
||||
role: "CTO",
|
||||
company: "TechInnovate",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-transgender-posing_23-2149154638.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena Rodriguez",
|
||||
role: "Head of Data",
|
||||
company: "Insights Corp",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Marcus Thorne",
|
||||
role: "Lead Analyst",
|
||||
company: "Strategy Hub",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Priya Singh",
|
||||
role: "Product Lead",
|
||||
company: "AppFlow",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beauty-businesswoman-leaning-against-brick-wall_613910-773.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Julian Vane",
|
||||
role: "Operations Manager",
|
||||
company: "ScaleUp",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/upbeat-data-center-it-expert-uses-pc-update-servers-tech-configuring-gear-using-software-jolly_482257-132528.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Our Partners Say"
|
||||
description="Industry leaders trust our 3D mapping solutions to drive growth."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Miller", role: "CEO", company: "Global Logistics", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg" },
|
||||
{ id: "2", name: "David Chen", role: "CTO", company: "TechInnovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-transgender-posing_23-2149154638.jpg" },
|
||||
{ id: "3", name: "Elena Rodriguez", role: "Head of Data", company: "Insights Corp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg" },
|
||||
{ id: "4", name: "Marcus Thorne", role: "Lead Analyst", company: "Strategy Hub", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg" },
|
||||
{ id: "5", name: "Priya Singh", role: "Product Lead", company: "AppFlow", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beauty-businesswoman-leaning-against-brick-wall_613910-773.jpg" },
|
||||
{ id: "6", name: "Julian Vane", role: "Operations Manager", company: "ScaleUp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/upbeat-data-center-it-expert-uses-pc-update-servers-tech-configuring-gear-using-software-jolly_482257-132528.jpg" },
|
||||
]}
|
||||
title="What Our Partners Say"
|
||||
description="Industry leaders trust our 3D mapping solutions to drive growth."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
text="Ready to bring your maps to life? Contact our team for a personalized demo."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Support",
|
||||
href: "#footer",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Ready to bring your maps to life? Contact our team for a personalized demo."
|
||||
buttons={[{ text: "Contact Support", href: "#footer" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="GeoMapper 3D"
|
||||
columns={[
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#products",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "API Docs",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Support",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="GeoMapper 3D"
|
||||
columns={[
|
||||
{ title: "Platform", items: [{ label: "About", href: "#about" }, { label: "Features", href: "#features" }, { label: "Pricing", href: "#products" }] },
|
||||
{ title: "Resources", items: [{ label: "Blog", href: "#" }, { label: "API Docs", href: "#" }, { label: "Support", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user