188 lines
6.2 KiB
TypeScript
188 lines
6.2 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import { Clock, Map, Mountain } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="large"
|
|
background="blurBottom"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{ name: "Explore", id: "#hero" },
|
|
{ name: "Trails", id: "#features" },
|
|
{ name: "Insights", id: "#metrics" }
|
|
]}
|
|
brandName="PeakPath"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
background={{
|
|
variant: "sparkles-gradient"
|
|
}}
|
|
title="Explore trails like never before"
|
|
description="Immersive 3D scrolling experiences bring hiking destinations to life. Discover your next adventure through interactive, dynamic storytelling."
|
|
tag="Next Gen Exploration"
|
|
buttons={[
|
|
{
|
|
text: "Start Exploring", href: "#features"
|
|
}
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/dramatic-mountain-ridge-stormy-sky_84443-83786.jpg", imageAlt: "Mountain Landscape"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-with-live-abstract-wallpaper-coming-out-screen_23-2151033601.jpg", imageAlt: "3D Topography"
|
|
}
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="Trusted by 5,000+ Hikers"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
animationType="depth-3d"
|
|
textboxLayout="split-description"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "1.2k+", title: "Active Trails", items: [
|
|
"Well-mapped routes", "Real-time updates", "Verified paths"
|
|
]
|
|
},
|
|
{
|
|
id: "m2", value: "450k", title: "Hiker Miles", items: [
|
|
"Community logged", "High reliability", "Verified ascents"
|
|
]
|
|
},
|
|
{
|
|
id: "m3", value: "98%", title: "Satisfaction", items: [
|
|
"User-rated trails", "Detailed guides", "Safe recommendations"
|
|
]
|
|
}
|
|
]}
|
|
title="Trail Stats at a Glance"
|
|
description="Visualize your journey with real-time data insights."
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBorderGlow
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
icon: Map,
|
|
title: "Real-time 3D Maps", description: "Interactive WebGL terrain models you can zoom, rotate, and traverse digitally."
|
|
},
|
|
{
|
|
icon: Mountain,
|
|
title: "Elevation Profiles", description: "Precise topographical data visualization to help you prepare for the climb ahead."
|
|
},
|
|
{
|
|
icon: Clock,
|
|
title: "Live Trail Conditions", description: "Stay updated on weather, path accessibility, and crowd density in real-time."
|
|
}
|
|
]}
|
|
title="Explore Your Way"
|
|
description="Cutting-edge tools to preview, plan, and navigate the most breathtaking trails on Earth."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"National Geographic", "Outdoor Life", "AllTrails", "REI Adventures", "The North Face", "Patagonia", "TrailFinder"
|
|
]}
|
|
title="Trusted by Industry Leaders"
|
|
description="Join thousands of enthusiasts who trust PeakPath for their wilderness explorations."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "sparkles-gradient"
|
|
}}
|
|
tag="Get Started"
|
|
title="Ready for your next adventure?"
|
|
description="Sign up for early access to our immersive 3D trail preview platform and start planning your next escape today."
|
|
buttons={[
|
|
{
|
|
text: "Register Now", href: "#"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="PeakPath"
|
|
columns={[
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About", href: "#"
|
|
},
|
|
{
|
|
label: "Careers", href: "#"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{
|
|
label: "Trail Map", href: "#"
|
|
},
|
|
{
|
|
label: "Safety Tips", href: "#"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{
|
|
label: "Privacy", href: "#"
|
|
},
|
|
{
|
|
label: "Terms", href: "#"
|
|
}
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2024 PeakPath. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |