Merge version_2 into main #2
184
src/app/page.tsx
184
src/app/page.tsx
@@ -3,14 +3,14 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
|
||||
export default function LandingPage() {
|
||||
@@ -31,14 +31,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Features", id: "features"},
|
||||
{
|
||||
name: "Metrics", id: "metrics"},
|
||||
{
|
||||
name: "Pricing", id: "pricing"},
|
||||
{
|
||||
name: "FAQ", id: "faq"},
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Metrics", id: "metrics" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
]}
|
||||
brandName="GravelForge"
|
||||
/>
|
||||
@@ -46,38 +42,24 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
background={{ variant: "plain" }}
|
||||
title="Forge Your Best Ride."
|
||||
description="GravelForge combines race-grade tracking, AI coaching, and safety tools into one elite mobile companion. From gravel grit to indoor training, master every meter."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/female-cyclist-wearing-helmet-posing-with-bicycle_23-2149749614.jpg", alt: "Cyclist 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-bicycle-front-view_23-2149727778.jpg", alt: "Cyclist 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-smiley-swimmer-outdoors_23-2148768958.jpg", alt: "Cyclist 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-cyclist-woman-outdors_23-2149647388.jpg", alt: "Cyclist 4"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-man-riding-bike-outdoors_23-2150884368.jpg", alt: "Cyclist 5"},
|
||||
{ src: "http://img.b2bpic.net/free-photo/female-cyclist-wearing-helmet-posing-with-bicycle_23-2149749614.jpg", alt: "Cyclist 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/woman-bicycle-front-view_23-2149727778.jpg", alt: "Cyclist 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-smiley-swimmer-outdoors_23-2148768958.jpg", alt: "Cyclist 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-cyclist-woman-outdors_23-2149647388.jpg", alt: "Cyclist 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/front-view-man-riding-bike-outdoors_23-2150884368.jpg", alt: "Cyclist 5" },
|
||||
]}
|
||||
avatarText="Join 50,000+ elite cyclists"
|
||||
buttons={[
|
||||
{
|
||||
text: "Get the App", href: "#contact"},
|
||||
]}
|
||||
buttons={[{ text: "Get the App", href: "#contact" }]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text", text: "AI-Powered Analysis"},
|
||||
{
|
||||
type: "text", text: "Real-time Metrics"},
|
||||
{
|
||||
type: "text", text: "Safe Routes"},
|
||||
{
|
||||
type: "text", text: "Pro Training Plans"},
|
||||
{
|
||||
type: "text", text: "Indoor Sync"},
|
||||
{ type: "text", text: "AI-Powered Analysis" },
|
||||
{ type: "text", text: "Real-time Metrics" },
|
||||
{ type: "text", text: "Safe Routes" },
|
||||
{ type: "text", text: "Pro Training Plans" },
|
||||
{ type: "text", text: "Indoor Sync" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -86,10 +68,7 @@ export default function LandingPage() {
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="Designed for the way you ride"
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More", href: "#features"},
|
||||
]}
|
||||
buttons={[{ text: "Learn More", href: "#features" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -99,12 +78,10 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"No generic jargon", "No cluttered UI", "No heavy desk reliance", "No outdated maps", "No manual logging"],
|
||||
items: ["No generic jargon", "No cluttered UI", "No heavy desk reliance", "No outdated maps", "No manual logging"],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Real-time race-day mode", "Smart trainer sync", "Surface confidence scores", "AI fatigue warning", "Global community challenges"],
|
||||
items: ["Real-time race-day mode", "Smart trainer sync", "Surface confidence scores", "AI fatigue warning", "Global community challenges"],
|
||||
}}
|
||||
title="Elite Features for Every Surface"
|
||||
description="Whether you're crushing gravel or sprinting for the podium, we've got the data tools you need."
|
||||
@@ -117,12 +94,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "98%", title: "Accuracy", description: "Power zone tracking", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-football-soccer-player-with-glowing-lights_23-2151152923.jpg"},
|
||||
{
|
||||
id: "m2", value: "150+", title: "Workout Library", description: "Indoor training sessions", imageSrc: "http://img.b2bpic.net/free-photo/physical-activity-stats-around-person_23-2150163353.jpg"},
|
||||
{
|
||||
id: "m3", value: "24/7", title: "Safety", description: "Crash fall-back mode", imageSrc: "http://img.b2bpic.net/free-photo/single-house-top-mountain_1401-402.jpg"},
|
||||
{ id: "m1", value: "98%", title: "Accuracy", description: "Power zone tracking", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-football-soccer-player-with-glowing-lights_23-2151152923.jpg" },
|
||||
{ id: "m2", value: "150+", title: "Workout Library", description: "Indoor training sessions", imageSrc: "http://img.b2bpic.net/free-photo/physical-activity-stats-around-person_23-2150163353.jpg" },
|
||||
{ id: "m3", value: "24/7", title: "Safety", description: "Crash fall-back mode", imageSrc: "http://img.b2bpic.net/free-photo/single-house-top-mountain_1401-402.jpg" },
|
||||
]}
|
||||
title="Data That Matters"
|
||||
description="Precision insights for performance tracking."
|
||||
@@ -130,113 +104,77 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Professional Grade Pricing"
|
||||
description="Choose the plan that pushes your limits."
|
||||
plans={[
|
||||
{
|
||||
id: "free", name: "Forge Basic", price: "Free", features: [
|
||||
"Ride tracking", "Basic metrics", "Safety beacon", "Offline maps"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Download", href: "#"},
|
||||
],
|
||||
id: "free", name: "Forge Basic", price: "Free", subtitle: "Start your journey today.", features: ["Ride tracking", "Basic metrics", "Safety beacon", "Offline maps"],
|
||||
buttons: [{ text: "Download", href: "#" }],
|
||||
badge: "Starter"
|
||||
},
|
||||
{
|
||||
id: "pro", name: "Forge Pro", price: "$12.99/mo", features: [
|
||||
"AI Coach", "Race tactics", "Indoor sync", "Custom plans", "Priority support"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Pro", href: "#"},
|
||||
],
|
||||
id: "pro", name: "Forge Pro", price: "$12.99/mo", subtitle: "Elite tools for performance.", features: ["AI Coach", "Race tactics", "Indoor sync", "Custom plans", "Priority support"],
|
||||
buttons: [{ text: "Get Pro", href: "#" }],
|
||||
badge: "Pro"
|
||||
},
|
||||
]}
|
||||
title="Choose Your Path"
|
||||
description="Elite tools for serious riders."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Elite Rider Reviews"
|
||||
description="See why athletes switch to GravelForge."
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", title: "Total Game Changer", quote: "I reduced my race times by weeks.", name: "Sarah J.", role: "Pro Gravel Racer", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-gym_23-2147789567.jpg"},
|
||||
{
|
||||
id: "2", title: "Data Accuracy", quote: "The metrics are incredibly reliable.", name: "Mark R.", role: "Endurance Cyclist", imageSrc: "http://img.b2bpic.net/free-photo/young-man-renting-bike_1163-3507.jpg"},
|
||||
{
|
||||
id: "3", title: "Best AI Coaching", quote: "My training load finally feels balanced.", name: "Elena K.", role: "Triathlete", imageSrc: "http://img.b2bpic.net/free-photo/stylish-guy-gym-sits-resting-treadmill-healthy-lifestyle_78826-3202.jpg"},
|
||||
{
|
||||
id: "4", title: "Solid Safety", quote: "Crash detection saved my hide.", name: "Tom B.", role: "Solo MTB Rider", imageSrc: "http://img.b2bpic.net/free-photo/young-man-are-cycling-road-bike-evening_158595-2257.jpg"},
|
||||
{
|
||||
id: "5", title: "Easy Indoor Sync", quote: "Training in winter is actually fun.", name: "Lucy H.", role: "Club Cyclist", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-cyclist-catching-his-breath_329181-8667.jpg"},
|
||||
{ id: "1", name: "Sarah J.", role: "Pro Gravel Racer", testimonial: "I reduced my race times by weeks.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-gym_23-2147789567.jpg" },
|
||||
{ id: "2", name: "Mark R.", role: "Endurance Cyclist", testimonial: "The metrics are incredibly reliable.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-renting-bike_1163-3507.jpg" },
|
||||
{ id: "3", name: "Elena K.", role: "Triathlete", testimonial: "My training load finally feels balanced.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-guy-gym-sits-resting-treadmill-healthy-lifestyle_78826-3202.jpg" },
|
||||
]}
|
||||
title="Trusted by Pro Athletes"
|
||||
description="See what riders are saying about GravelForge."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1", title: "Does it work with power meters?", content: "Yes, it connects seamlessly."},
|
||||
{
|
||||
id: "f2", title: "Can I hide my start location?", content: "Absolutely, privacy is built-in."},
|
||||
{
|
||||
id: "f3", title: "Is the app free?", content: "We offer a powerful free tier."},
|
||||
{
|
||||
id: "f4", title: "Does it support MTB?", content: "Fully optimized for mountain terrain."},
|
||||
{
|
||||
id: "f5", title: "Can I export data?", content: "Yes, export to all major platforms."},
|
||||
]}
|
||||
sideTitle="Questions?"
|
||||
<FaqBase
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Got Questions?"
|
||||
description="We've compiled answers to the most common questions."
|
||||
faqs={[
|
||||
{ id: "f1", title: "Does it work with power meters?", content: "Yes, it connects seamlessly." },
|
||||
{ id: "f2", title: "Can I hide my start location?", content: "Absolutely, privacy is built-in." },
|
||||
{ id: "f3", title: "Is the app free?", content: "We offer a powerful free tier." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Start Your Ride Today"
|
||||
description="Join the Forge and take control."
|
||||
title="Join the Forge"
|
||||
description="Get elite coaching delivered to your device."
|
||||
inputs={[
|
||||
{
|
||||
name: "name", type: "text", placeholder: "Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email", type: "email", placeholder: "Email Address", required: true,
|
||||
},
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Work Email", required: true },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-modern-office-business-entrepreneur-with-laptop_482257-91246.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
<FooterLogoEmphasis
|
||||
logoText="GravelForge"
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{
|
||||
label: "Features", href: "#features"},
|
||||
{
|
||||
label: "Pricing", href: "#pricing"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Contact", href: "#contact"},
|
||||
],
|
||||
},
|
||||
{ items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
|
||||
{ items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
bottomLeftText="© 2024 GravelForge"
|
||||
bottomRightText="All rights reserved"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user