Update src/app/page.tsx

This commit is contained in:
2026-05-09 15:51:34 +00:00
parent 1128ba6c6f
commit 25c38c424f

View File

@@ -12,7 +12,8 @@ import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import SplitAbout from '@/components/sections/about/SplitAbout'; import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix'; import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Activity, MapPin, Users } from "lucide-react"; import { Activity, MapPin, Users, Map } from "lucide-react";
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
export default function LandingPage() { export default function LandingPage() {
return ( return (
@@ -33,21 +34,15 @@ export default function LandingPage() {
<NavbarStyleApple <NavbarStyleApple
navItems={[ navItems={[
{ {
name: "Home", name: "Home", id: "hero"},
id: "hero",
},
{ {
name: "About", name: "About", id: "about"},
id: "about",
},
{ {
name: "Trips", name: "Trips", id: "features"},
id: "features",
},
{ {
name: "Contact", name: "Map", id: "map"},
id: "contact", {
}, name: "Contact", id: "contact"},
]} ]}
brandName="BikeJournal" brandName="BikeJournal"
/> />
@@ -59,75 +54,38 @@ export default function LandingPage() {
description="Capture the essence of every ride. Create your travel diary, share your favorite routes, and connect with fellow bike enthusiasts." description="Capture the essence of every ride. Create your travel diary, share your favorite routes, and connect with fellow bike enthusiasts."
testimonials={[ testimonials={[
{ {
name: "Sarah J.", name: "Sarah J.", handle: "@sarah_bikes", testimonial: "The best platform for tracking my short weekend escapes!", rating: 5,
handle: "@sarah_bikes", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-riding-mountain-bike_23-2148777254.jpg?_wi=1", imageAlt: "cyclist mountain sunset scenic"},
testimonial: "The best platform for tracking my short weekend escapes!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-riding-mountain-bike_23-2148777254.jpg?_wi=1",
imageAlt: "cyclist mountain sunset scenic",
},
{ {
name: "Mike R.", name: "Mike R.", handle: "@miketravels", testimonial: "I love how easy it is to share my route details and photos.", rating: 5,
handle: "@miketravels", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-hand-bicycle-with-brown-bag_23-2148176576.jpg?_wi=1", imageAlt: "cyclist mountain sunset scenic"},
testimonial: "I love how easy it is to share my route details and photos.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-hand-bicycle-with-brown-bag_23-2148176576.jpg?_wi=1",
imageAlt: "cyclist mountain sunset scenic",
},
{ {
name: "Elena K.", name: "Elena K.", handle: "@elenacycles", testimonial: "An incredible community of like-minded enthusiasts.", rating: 5,
handle: "@elenacycles", imageSrc: "http://img.b2bpic.net/free-photo/shadows-man-motorbike_23-2148321986.jpg?_wi=1", imageAlt: "cyclist mountain sunset scenic"},
testimonial: "An incredible community of like-minded enthusiasts.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/shadows-man-motorbike_23-2148321986.jpg?_wi=1",
imageAlt: "cyclist mountain sunset scenic",
},
{ {
name: "David L.", name: "David L.", handle: "@dl_rides", testimonial: "My go-to diary for every cycling trip I take.", rating: 5,
handle: "@dl_rides", imageSrc: "http://img.b2bpic.net/free-photo/bicycle-standing-asphalt-road-background-ocean-mountains-sunset_181624-56975.jpg?_wi=1", imageAlt: "cyclist mountain sunset scenic"},
testimonial: "My go-to diary for every cycling trip I take.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/bicycle-standing-asphalt-road-background-ocean-mountains-sunset_181624-56975.jpg?_wi=1",
imageAlt: "cyclist mountain sunset scenic",
},
{ {
name: "Sophie P.", name: "Sophie P.", handle: "@sophie_wheels", testimonial: "Simple, clean, and perfectly designed for bikers.", rating: 5,
handle: "@sophie_wheels", imageSrc: "http://img.b2bpic.net/free-photo/pathway-forest-surrounded-by-leaves-trees-cloudy-sky_181624-17393.jpg?_wi=1", imageAlt: "cyclist mountain sunset scenic"},
testimonial: "Simple, clean, and perfectly designed for bikers.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/pathway-forest-surrounded-by-leaves-trees-cloudy-sky_181624-17393.jpg?_wi=1",
imageAlt: "cyclist mountain sunset scenic",
},
]} ]}
buttons={[ buttons={[
{ {
text: "Start Diary", text: "Start Diary", href: "#contact"},
href: "#contact",
},
]} ]}
imageSrc="http://img.b2bpic.net/free-photo/high-angle-man-riding-mountain-bike_23-2148777254.jpg?_wi=2" imageSrc="http://img.b2bpic.net/free-photo/high-angle-man-riding-mountain-bike_23-2148777254.jpg?_wi=2"
imageAlt="Cyclist on scenic road" imageAlt="Cyclist on scenic road"
avatars={[ avatars={[
{ {
src: "http://img.b2bpic.net/free-photo/smiling-with-happy-confident-expression-with-hand-chin_1194-406821.jpg", src: "http://img.b2bpic.net/free-photo/smiling-with-happy-confident-expression-with-hand-chin_1194-406821.jpg", alt: "Cyclist portrait 1"},
alt: "Cyclist portrait 1",
},
{ {
src: "http://img.b2bpic.net/free-photo/front-view-young-female-sport-clothes-with-helmet-blue-wall_179666-30533.jpg", src: "http://img.b2bpic.net/free-photo/front-view-young-female-sport-clothes-with-helmet-blue-wall_179666-30533.jpg", alt: "Cyclist portrait 2"},
alt: "Cyclist portrait 2",
},
{ {
src: "http://img.b2bpic.net/free-photo/front-view-young-female-sport-clothes-with-helmet-blue-wall_179666-26803.jpg", src: "http://img.b2bpic.net/free-photo/front-view-young-female-sport-clothes-with-helmet-blue-wall_179666-26803.jpg", alt: "Cyclist portrait 3"},
alt: "Cyclist portrait 3",
},
{ {
src: "http://img.b2bpic.net/free-photo/front-view-young-female-sport-clothes-with-helmet-blue-wall_179666-26799.jpg", src: "http://img.b2bpic.net/free-photo/front-view-young-female-sport-clothes-with-helmet-blue-wall_179666-26799.jpg", alt: "Cyclist portrait 4"},
alt: "Cyclist portrait 4",
},
{ {
src: "http://img.b2bpic.net/free-photo/close-up-cyclist-woman-outdors_23-2149647389.jpg", src: "http://img.b2bpic.net/free-photo/close-up-cyclist-woman-outdors_23-2149647389.jpg", alt: "Cyclist portrait 5"},
alt: "Cyclist portrait 5",
},
]} ]}
avatarText="Join 500+ riders" avatarText="Join 500+ riders"
/> />
@@ -141,17 +99,11 @@ export default function LandingPage() {
description="Every pedal stroke tells a story. Our journal helps you preserve the memories, track your progress, and inspire others to explore the paths less traveled." description="Every pedal stroke tells a story. Our journal helps you preserve the memories, track your progress, and inspire others to explore the paths less traveled."
bulletPoints={[ bulletPoints={[
{ {
title: "Track Routes", title: "Track Routes", description: "Keep logs of every short trip and road difficulty."},
description: "Keep logs of every short trip and road difficulty.",
},
{ {
title: "Share Moments", title: "Share Moments", description: "Upload photos of the most scenic stops."},
description: "Upload photos of the most scenic stops.",
},
{ {
title: "Join Community", title: "Join Community", description: "Discover new routes from other enthusiasts."},
description: "Discover new routes from other enthusiasts.",
},
]} ]}
imageSrc="http://img.b2bpic.net/free-photo/close-up-man-s-hand-bicycle-with-brown-bag_23-2148176576.jpg?_wi=2" imageSrc="http://img.b2bpic.net/free-photo/close-up-man-s-hand-bicycle-with-brown-bag_23-2148176576.jpg?_wi=2"
imageAlt="Travel planning setup" imageAlt="Travel planning setup"
@@ -166,32 +118,32 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
features={[ features={[
{ {
id: "f1", id: "f1", title: "Gravel Adventures", subtitle: "Dust and thrill", category: "Trail", value: "20+ Trips"},
title: "Gravel Adventures",
subtitle: "Dust and thrill",
category: "Trail",
value: "20+ Trips",
},
{ {
id: "f2", id: "f2", title: "Coastal Rides", subtitle: "Sun and sea", category: "Scenic", value: "15+ Trips"},
title: "Coastal Rides",
subtitle: "Sun and sea",
category: "Scenic",
value: "15+ Trips",
},
{ {
id: "f3", id: "f3", title: "Urban Commutes", subtitle: "City life rhythm", category: "City", value: "30+ Trips"},
title: "Urban Commutes",
subtitle: "City life rhythm",
category: "City",
value: "30+ Trips",
},
]} ]}
title="Popular Categories" title="Popular Categories"
description="Explore curated collections of rides tailored for every cycling style." description="Explore curated collections of rides tailored for every cycling style."
/> />
</div> </div>
<div id="map" data-section="map">
<MetricCardSeven
animationType="blur-reveal"
textboxLayout="split"
useInvertedBackground={true}
title="Interactive Route Map"
description="See the global network of paths our community has discovered and mapped."
metrics={[
{
id: "map-overview", value: "500+", title: "Total Locations Found", items: ["All Major Trails", "Hidden Gems", "Scenic Lookout Points", "Community Favorites"]
}
]}
/>
</div>
<div id="metrics" data-section="metrics"> <div id="metrics" data-section="metrics">
<MetricCardOne <MetricCardOne
animationType="slide-up" animationType="slide-up"
@@ -200,25 +152,13 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
metrics={[ metrics={[
{ {
id: "m1", id: "m1", value: "1.2k", title: "Routes Logged", description: "Journeys shared by users", icon: MapPin,
value: "1.2k",
title: "Routes Logged",
description: "Journeys shared by users",
icon: MapPin,
}, },
{ {
id: "m2", id: "m2", value: "500", title: "Active Riders", description: "Community members", icon: Users,
value: "500",
title: "Active Riders",
description: "Community members",
icon: Users,
}, },
{ {
id: "m3", id: "m3", value: "8k", title: "Total Miles", description: "Covered by our community", icon: Activity,
value: "8k",
title: "Total Miles",
description: "Covered by our community",
icon: Activity,
}, },
]} ]}
title="Journey Stats" title="Journey Stats"
@@ -233,40 +173,15 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
testimonials={[ testimonials={[
{ {
id: "t1", id: "t1", name: "Sarah J.", handle: "@sarah", testimonial: "Incredible platform for documenting my weekend trails.", imageSrc: "http://img.b2bpic.net/free-photo/professional-cyclist-woman_23-2149703278.jpg"},
name: "Sarah J.",
handle: "@sarah",
testimonial: "Incredible platform for documenting my weekend trails.",
imageSrc: "http://img.b2bpic.net/free-photo/professional-cyclist-woman_23-2149703278.jpg",
},
{ {
id: "t2", id: "t2", name: "Mike R.", handle: "@mike", testimonial: "Simple design, effective tracking, love it!", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-male-wearing-helmet-standing-with-bicycle-straight-road_23-2147874068.jpg"},
name: "Mike R.",
handle: "@mike",
testimonial: "Simple design, effective tracking, love it!",
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-male-wearing-helmet-standing-with-bicycle-straight-road_23-2147874068.jpg",
},
{ {
id: "t3", id: "t3", name: "Elena K.", handle: "@elena", testimonial: "The community is what truly makes this special.", imageSrc: "http://img.b2bpic.net/free-photo/bearded-sporty-male-sits-red-mountain-bicycle-holds-smartphone_613910-2050.jpg"},
name: "Elena K.",
handle: "@elena",
testimonial: "The community is what truly makes this special.",
imageSrc: "http://img.b2bpic.net/free-photo/bearded-sporty-male-sits-red-mountain-bicycle-holds-smartphone_613910-2050.jpg",
},
{ {
id: "t4", id: "t4", name: "David L.", handle: "@david", testimonial: "My cycling journal became so much more organized.", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-sad-unhappy-young-cyclist-wearing-sports-clothing-helmet-eyeglasses-sitting-big-tree-with-broken-electric-bicycle-lying-ground-waiting-friends-help-him_273609-268.jpg"},
name: "David L.",
handle: "@david",
testimonial: "My cycling journal became so much more organized.",
imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-sad-unhappy-young-cyclist-wearing-sports-clothing-helmet-eyeglasses-sitting-big-tree-with-broken-electric-bicycle-lying-ground-waiting-friends-help-him_273609-268.jpg",
},
{ {
id: "t5", id: "t5", name: "Sophie P.", handle: "@sophie", testimonial: "Truly inspiring platform for every enthusiast.", imageSrc: "http://img.b2bpic.net/free-photo/caucasian-man-looking-map-travel-explore-concept_53876-13405.jpg"},
name: "Sophie P.",
handle: "@sophie",
testimonial: "Truly inspiring platform for every enthusiast.",
imageSrc: "http://img.b2bpic.net/free-photo/caucasian-man-looking-map-travel-explore-concept_53876-13405.jpg",
},
]} ]}
title="Voices from the Trail" title="Voices from the Trail"
description="Hear what our fellow riders have to say about their experience." description="Hear what our fellow riders have to say about their experience."
@@ -282,35 +197,11 @@ export default function LandingPage() {
description="Expert tips and gear reviews for your next short cycling adventure." description="Expert tips and gear reviews for your next short cycling adventure."
blogs={[ blogs={[
{ {
id: "b1", id: "b1", category: "Tips", title: "Gear Checklist", excerpt: "What to carry for your weekend ride.", imageSrc: "http://img.b2bpic.net/free-photo/shadows-man-motorbike_23-2148321986.jpg?_wi=2", authorName: "Coach Mark", authorAvatar: "http://img.b2bpic.net/free-photo/smiling-young-man-riding-bicycle-mountain-road_651396-2648.jpg", date: "Oct 12, 2024"},
category: "Tips",
title: "Gear Checklist",
excerpt: "What to carry for your weekend ride.",
imageSrc: "http://img.b2bpic.net/free-photo/shadows-man-motorbike_23-2148321986.jpg?_wi=2",
authorName: "Coach Mark",
authorAvatar: "http://img.b2bpic.net/free-photo/smiling-young-man-riding-bicycle-mountain-road_651396-2648.jpg",
date: "Oct 12, 2024",
},
{ {
id: "b2", id: "b2", category: "Guides", title: "Safety First", excerpt: "Essential rules for road biking.", imageSrc: "http://img.b2bpic.net/free-photo/bicycle-standing-asphalt-road-background-ocean-mountains-sunset_181624-56975.jpg?_wi=2", authorName: "Coach Mark", authorAvatar: "http://img.b2bpic.net/free-photo/young-adult-using-electric-bike-country-side_23-2149124567.jpg", date: "Oct 15, 2024"},
category: "Guides",
title: "Safety First",
excerpt: "Essential rules for road biking.",
imageSrc: "http://img.b2bpic.net/free-photo/bicycle-standing-asphalt-road-background-ocean-mountains-sunset_181624-56975.jpg?_wi=2",
authorName: "Coach Mark",
authorAvatar: "http://img.b2bpic.net/free-photo/young-adult-using-electric-bike-country-side_23-2149124567.jpg",
date: "Oct 15, 2024",
},
{ {
id: "b3", id: "b3", category: "Review", title: "Best Bike Lights", excerpt: "Keep your evening rides bright.", imageSrc: "http://img.b2bpic.net/free-photo/pathway-forest-surrounded-by-leaves-trees-cloudy-sky_181624-17393.jpg?_wi=2", authorName: "Coach Mark", authorAvatar: "http://img.b2bpic.net/free-photo/young-adult-using-electric-bike-country-side_23-2149124564.jpg", date: "Oct 20, 2024"},
category: "Review",
title: "Best Bike Lights",
excerpt: "Keep your evening rides bright.",
imageSrc: "http://img.b2bpic.net/free-photo/pathway-forest-surrounded-by-leaves-trees-cloudy-sky_181624-17393.jpg?_wi=2",
authorName: "Coach Mark",
authorAvatar: "http://img.b2bpic.net/free-photo/young-adult-using-electric-bike-country-side_23-2149124564.jpg",
date: "Oct 20, 2024",
},
]} ]}
/> />
</div> </div>
@@ -321,20 +212,11 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
faqs={[ faqs={[
{ {
id: "q1", id: "q1", title: "Is it free?", content: "Yes, standard access to the diary is free for all."},
title: "Is it free?",
content: "Yes, standard access to the diary is free for all.",
},
{ {
id: "q2", id: "q2", title: "Can I share my rides?", content: "Yes, you can share them with the community or private groups."},
title: "Can I share my rides?",
content: "Yes, you can share them with the community or private groups.",
},
{ {
id: "q3", id: "q3", title: "How to join?", content: "Just sign up and start logging your first ride today."},
title: "How to join?",
content: "Just sign up and start logging your first ride today.",
},
]} ]}
title="Common Questions" title="Common Questions"
description="Everything you need to know about starting your diary." description="Everything you need to know about starting your diary."
@@ -349,20 +231,12 @@ export default function LandingPage() {
description="Have questions or want to collaborate on a route? Reach out!" description="Have questions or want to collaborate on a route? Reach out!"
inputs={[ inputs={[
{ {
name: "name", name: "name", type: "text", placeholder: "Your Name"},
type: "text",
placeholder: "Your Name",
},
{ {
name: "email", name: "email", type: "email", placeholder: "Email Address"},
type: "email",
placeholder: "Email Address",
},
]} ]}
textarea={{ textarea={{
name: "message", name: "message", placeholder: "Your message here..."}}
placeholder: "Your message here...",
}}
imageSrc="http://img.b2bpic.net/free-photo/cyclist-riding-bike-sunset-mountain-road_346278-468.jpg" imageSrc="http://img.b2bpic.net/free-photo/cyclist-riding-bike-sunset-mountain-road_346278-468.jpg"
/> />
</div> </div>
@@ -373,29 +247,19 @@ export default function LandingPage() {
logoText="BikeJournal" logoText="BikeJournal"
columns={[ columns={[
{ {
title: "Product", title: "Product", items: [
items: [
{ {
label: "Features", label: "Features", href: "#features"},
href: "#features",
},
{ {
label: "Blog", label: "Blog", href: "#blog"},
href: "#blog",
},
], ],
}, },
{ {
title: "Support", title: "Support", items: [
items: [
{ {
label: "FAQ", label: "FAQ", href: "#faq"},
href: "#faq",
},
{ {
label: "Contact", label: "Contact", href: "#contact"},
href: "#contact",
},
], ],
}, },
]} ]}
@@ -404,4 +268,4 @@ export default function LandingPage() {
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );
} }