4 Commits

Author SHA1 Message Date
0d15a7fe02 Update src/app/page.tsx 2026-04-20 10:27:21 +00:00
87e1f8f603 Update src/app/page.tsx 2026-04-20 10:25:13 +00:00
51ad3ae583 Update src/app/page.tsx 2026-04-20 10:23:10 +00:00
cfd0bbbacb Merge version_1 into main
Merge version_1 into main
2026-04-20 10:21:29 +00:00

View File

@@ -2,16 +2,14 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import { CheckCircle, Smile, Star } from "lucide-react";
export default function LandingPage() {
return (
@@ -28,211 +26,95 @@ export default function LandingPage() {
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Products", id: "products"},
{
name: "Features", id: "features"},
{
name: "Testimonials", id: "testimonials"},
{
name: "Contact", id: "contact"},
]}
brandName="SolePath"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Habits", id: "habits" },
{ name: "Benefits", id: "benefits" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" }
]}
brandName="HabitHero"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
background={{
variant: "rotated-rays-animated"}}
title="Step Into the Future"
description="Experience unparalleled comfort and style with the latest innovation in performance footwear."
buttons={[
{
text: "Shop Now", href: "#products"},
]}
carouselItems={[
{
id: "h1", imageSrc: "http://img.b2bpic.net/free-photo/close-up-stylish-footwear_23-2148320247.jpg", imageAlt: "Modern running shoe"},
{
id: "h2", imageSrc: "http://img.b2bpic.net/free-photo/close-up-futuristic-sneakers_23-2151005656.jpg", imageAlt: "Dynamic sneaker shot"},
{
id: "h3", imageSrc: "http://img.b2bpic.net/free-photo/closeup-leather-jacket-s-zip_53876-33827.jpg", imageAlt: "Premium leather texture"},
{
id: "h4", imageSrc: "http://img.b2bpic.net/free-photo/close-up-basketball-shoes_23-2150847254.jpg", imageAlt: "Floating sneaker"},
{
id: "h5", imageSrc: "http://img.b2bpic.net/free-photo/brown-shoe-with-rocks-broccoli_52683-94824.jpg", imageAlt: "Minimalist sneaker"},
{
id: "h6", imageSrc: "http://img.b2bpic.net/free-photo/number-written-sand_1122-2122.jpg", imageAlt: "Shoe sole detail"},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
background={{ variant: "sparkles-gradient" }}
title="Little Habits, Big Adventures!"
description="Helping children build positive habits that last a lifetime, one fun step at a time."
mediaAnimation="blur-reveal"
imageSrc="http://img.b2bpic.net/free-photo/happy-kids-playing-outdoors_1150-13611.jpg"
imageAlt="Happy children learning habits"
buttons={[{ text: "Start Learning", href: "#habits" }]}
testimonials={[
{ name: "Sarah M.", handle: "@sarahm", testimonial: "My kids actually look forward to cleaning their rooms now!", rating: 5 }
]}
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
products={[
{
id: "p1", name: "Velocity Pro", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/boss-boot-service-is-thinking-about-new-design-project_613910-17427.jpg"},
{
id: "p2", name: "Classic Loafer", price: "$180", imageSrc: "http://img.b2bpic.net/free-photo/dark-blue-show-rock_52683-94821.jpg"},
{
id: "p3", name: "Training Edge", price: "$140", imageSrc: "http://img.b2bpic.net/free-photo/brown-towel-pair-shoes-with-white-ear-phone-black-background_23-2147924601.jpg"},
{
id: "p4", name: "Retro Court", price: "$110", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-wearing-futuristic-sneakers_23-2151005708.jpg"},
{
id: "p5", name: "Eco-Step", price: "$130", imageSrc: "http://img.b2bpic.net/free-photo/cowboy-boots-stand-wooden-floor_8353-781.jpg"},
{
id: "p6", name: "Trail Master", price: "$160", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-legs_23-2148523842.jpg"},
]}
title="Latest Arrivals"
description="Discover our collection of premium, handcrafted footwear designed for every lifestyle."
/>
</div>
<div id="habits" data-section="habits">
<FeatureCardTwentyThree
animationType="slide-up"
textboxLayout="split"
title="Our Daily Habits"
description="Discover simple, easy-to-follow routines that make life better and healthier."
useInvertedBackground={false}
features={[
{ id: "h1", title: "Brush Teeth", tags: ["Hygiene", "Morning"], imageSrc: "http://img.b2bpic.net/free-photo/child-brushing-teeth_23-2148700000.jpg" },
{ id: "h2", title: "Eat Vegetables", tags: ["Health", "Lunch"], imageSrc: "http://img.b2bpic.net/free-photo/kid-eating-broccoli_23-2148700001.jpg" },
{ id: "h3", title: "Clean Up Toys", tags: ["Responsibility", "Daily"], imageSrc: "http://img.b2bpic.net/free-photo/kid-cleaning-toys_23-2148700002.jpg" }
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwelve
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
id: "f1", label: "Comfort", title: "Ergonomic Sole", items: [
"Pressure mapping", "Supportive foam", "Shock absorption"],
},
{
id: "f2", label: "Material", title: "Breathable Mesh", items: [
"Climate control", "Lightweight weave", "Durable finish"],
},
{
id: "f3", label: "Utility", title: "All-Terrain Grip", items: [
"Slip-resistant", "Wet-weather traction", "Versatile design"],
},
]}
title="Unmatched Technology"
description="Engineered for excellence, our shoes redefine what it means to be comfortable and efficient."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="depth-3d"
gridVariant="uniform-all-items-equal"
textboxLayout="split"
useInvertedBackground={false}
title="Habit Impact"
description="Seeing the positive changes in our community."
metrics={[
{ id: "m1", value: "1000+", title: "Habits Mastered", description: "Completed by kids", icon: CheckCircle },
{ id: "m2", value: "500+", title: "Daily Smiles", description: "Shared with us", icon: Smile },
{ id: "m3", value: "99%", title: "Fun Factor", description: "Reported by kids", icon: Star }
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "m1", value: "500k+", title: "Shoes Sold", description: "Across the globe", imageSrc: "http://img.b2bpic.net/free-photo/custom-handmade-shoes-table-busy-shoe-master-s-workplace_613910-17387.jpg"},
{
id: "m2", value: "98%", title: "Satisfaction", description: "From happy users", imageSrc: "http://img.b2bpic.net/free-photo/top-view-sneakers-white-background-fitness-wear-equipment-sport-fashion-sport-accessories-sport-equipment-healthy-concept-copy-space-concept-healthy-lifestyle-sport-diet-sport-equipment_1391-726.jpg"},
{
id: "m3", value: "15", title: "Awards Won", description: "For innovation", imageSrc: "http://img.b2bpic.net/free-photo/side-view-model-wearing-orange-heels_23-2149704435.jpg"},
]}
title="Built for Growth"
description="We are committed to quality and performance at every step of the journey."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
textboxLayout="default"
title="Happy Parents & Kids"
description="What our community says about us."
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Jane Doe", date: "2023-10-01", title: "Parent", quote: "My kids actually look forward to cleaning their rooms now!", tag: "Fun", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-woman_23-2148972605.jpg" }
]}
/>
</div>
<div id="proof" data-section="proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={true}
names={[
"TechCorp", "SportGear", "UrbanLife", "Innovate", "Outdoor", "TrendyCo", "StreetCulture"]}
title="Trusted by Leaders"
description="Recognized by industry leaders for quality and sustainable practices."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
faqsAnimation="slide-up"
sideTitle="Frequently Asked Questions"
useInvertedBackground={false}
faqs={[
{ id: "q1", title: "Is it free?", content: "Yes, all habit guides are free for everyone." },
{ id: "q2", title: "Can I add my own?", content: "Yes, contact us to suggest new habits." }
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "t1", name: "Sarah Miller", handle: "@sarah_m", testimonial: "The best running shoes I have ever owned. Exceptional comfort!", imageSrc: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg"},
{
id: "t2", name: "John Doe", handle: "@johndoe", testimonial: "Stylish enough for work, durable enough for the weekend.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-outdoors_23-2149037634.jpg"},
{
id: "t3", name: "Emily Chen", handle: "@emilyc", testimonial: "Love the breathable mesh and the lightweight feel.", imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-11786.jpg"},
{
id: "t4", name: "Mike Ross", handle: "@mikeross", testimonial: "High performance and great design. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/brutal-young-man-sunglasses-hat-island-travel_1321-3839.jpg"},
{
id: "t5", name: "Anna Smith", handle: "@annas", testimonial: "Fits perfectly and looks amazing. My go-to shoe now.", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-smiley-girl-sitting-skateboard_23-2148672431.jpg"},
]}
title="What Our Customers Say"
description="Real feedback from the people who wear SolePath everyday."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={true}
faqs={[
{
id: "q1", title: "What is your return policy?", content: "You can return any product within 30 days of purchase for a full refund."},
{
id: "q2", title: "Do you ship internationally?", content: "Yes, we ship to over 100 countries worldwide."},
{
id: "q3", title: "How do I choose the right size?", content: "Check our sizing guide for detailed measurements and fit recommendations."},
]}
sideTitle="Questions?"
sideDescription="Check out our FAQ for more information."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "gradient-bars"}}
text="Ready to take the next step? Get in touch with our team today."
buttons={[
{
text: "Contact Us", href: "mailto:hello@solepath.com"},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "Shop", href: "#products"},
{
label: "Technology", href: "#features"},
],
},
{
items: [
{
label: "About", href: "#"},
{
label: "Support", href: "#"},
],
},
{
items: [
{
label: "Terms", href: "#"},
{
label: "Privacy", href: "#"},
],
},
]}
logoText="SolePath"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="HabitHero"
columns={[{ items: [{ label: "Home", href: "/" }, { label: "About", href: "#" }] }]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}