Merge version_1 into main #1
497
src/app/page.tsx
497
src/app/page.tsx
@@ -17,363 +17,168 @@ import { Activity, CheckCircle, Flame, Smartphone, Trophy, Zap } from "lucide-re
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Habits",
|
||||
id: "habits",
|
||||
},
|
||||
{
|
||||
name: "Planner",
|
||||
id: "planner",
|
||||
},
|
||||
{
|
||||
name: "Overview",
|
||||
id: "overview",
|
||||
},
|
||||
]}
|
||||
brandName="Discipline"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Habits", id: "habits" },
|
||||
{ name: "Planner", id: "planner" },
|
||||
{ name: "Overview", id: "overview" }
|
||||
]}
|
||||
brandName="Discipline"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlayTestimonial
|
||||
title="Master Your Discipline"
|
||||
description="The minimalist dashboard to track daily habits, plan your tomorrow, and maintain your streaks effortlessly."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex R.",
|
||||
handle: "@alex",
|
||||
testimonial: "Finally, a simple tool that doesn't distract me with complex features. Love the 'never miss twice' rule.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-with-glasses_23-2148422106.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jordan P.",
|
||||
handle: "@jp",
|
||||
testimonial: "The streak system is addictive. It really helps me stay consistent with my morning routine.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-athleisure-posing-outdoors_23-2148655853.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sam T.",
|
||||
handle: "@st",
|
||||
testimonial: "Nightly planning has transformed my productivity. I know exactly what to do when I wake up.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
|
||||
},
|
||||
{
|
||||
name: "Casey L.",
|
||||
handle: "@cl",
|
||||
testimonial: "Clean design and extremely fast. It's the only habit tracker I've stuck with for more than a week.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-serious-businesswoman-sitting-couch_1098-3140.jpg",
|
||||
},
|
||||
{
|
||||
name: "Morgan D.",
|
||||
handle: "@md",
|
||||
testimonial: "Essential for anyone serious about self-improvement. The simplicity is its greatest strength.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-with-dark-hair-smiles-happily-expresses-positive-emotions-dressed-casual-turtleneck-hears-good-nes-isolated-brown-background-glad-meet-old-best-friend_273609-61400.jpg",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-gradient-background-with-grainy-effect_84443-3077.jpg"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/studio-close-up-photo-caucasian-man-black-shirt-looking-surprised_132075-8196.jpg",
|
||||
alt: "User 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-young-person-barbeque_23-2149271992.jpg",
|
||||
alt: "User 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-man-suffering-from-schizophrenia_23-2149332546.jpg",
|
||||
alt: "User 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-lesbian-couple-embracing-looking-camera_1262-18087.jpg",
|
||||
alt: "User 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/serious-businessman-with-damaged-face_1098-1085.jpg",
|
||||
alt: "User 5",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlayTestimonial
|
||||
title="Master Your Discipline"
|
||||
description="The minimalist dashboard to track daily habits, plan your tomorrow, and maintain your streaks effortlessly."
|
||||
testimonials={[
|
||||
{ name: "Alex R.", handle: "@alex", testimonial: "Finally, a simple tool that doesn't distract me with complex features. Love the 'never miss twice' rule.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-with-glasses_23-2148422106.jpg" },
|
||||
{ name: "Jordan P.", handle: "@jp", testimonial: "The streak system is addictive. It really helps me stay consistent with my morning routine.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-athleisure-posing-outdoors_23-2148655853.jpg" },
|
||||
{ name: "Sam T.", handle: "@st", testimonial: "Nightly planning has transformed my productivity. I know exactly what to do when I wake up.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg" },
|
||||
{ name: "Casey L.", handle: "@cl", testimonial: "Clean design and extremely fast. It's the only habit tracker I've stuck with for more than a week.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-serious-businesswoman-sitting-couch_1098-3140.jpg" },
|
||||
{ name: "Morgan D.", handle: "@md", testimonial: "Essential for anyone serious about self-improvement. The simplicity is its greatest strength.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man-with-dark-hair-smiles-happily-expresses-positive-emotions-dressed-casual-turtleneck-hears-good-nes-isolated-brown-background-glad-meet-old-best-friend_273609-61400.jpg" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-gradient-background-with-grainy-effect_84443-3077.jpg"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/studio-close-up-photo-caucasian-man-black-shirt-looking-surprised_132075-8196.jpg", alt: "User 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-young-person-barbeque_23-2149271992.jpg", alt: "User 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-man-suffering-from-schizophrenia_23-2149332546.jpg", alt: "User 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-lesbian-couple-embracing-looking-camera_1262-18087.jpg", alt: "User 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/serious-businessman-with-damaged-face_1098-1085.jpg", alt: "User 5" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="habits" data-section="habits">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: CheckCircle,
|
||||
title: "Morning Routine",
|
||||
description: "Start the day with intentionality.",
|
||||
},
|
||||
{
|
||||
icon: Flame,
|
||||
title: "Deep Work (2h)",
|
||||
description: "Focus sessions for maximum output.",
|
||||
},
|
||||
{
|
||||
icon: Smartphone,
|
||||
title: "No Phone Before 9am",
|
||||
description: "Protect your mental clarity.",
|
||||
},
|
||||
]}
|
||||
title="Daily Habit Tracker"
|
||||
description="Mark your daily wins and keep your streaks alive."
|
||||
/>
|
||||
</div>
|
||||
<div id="habits" data-section="habits">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: CheckCircle, title: "Morning Routine", description: "Start the day with intentionality." },
|
||||
{ icon: Flame, title: "Deep Work (2h)", description: "Focus sessions for maximum output." },
|
||||
{ icon: Smartphone, title: "No Phone Before 9am", description: "Protect your mental clarity." }
|
||||
]}
|
||||
title="Daily Habit Tracker"
|
||||
description="Mark your daily wins and keep your streaks alive."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="overview" data-section="overview">
|
||||
<MetricCardThree
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Trophy,
|
||||
title: "Highest Streak",
|
||||
value: "12 Days",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Activity,
|
||||
title: "Weekly Completion",
|
||||
value: "85%",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Zap,
|
||||
title: "Active Habits",
|
||||
value: "5",
|
||||
},
|
||||
]}
|
||||
title="Weekly Progress"
|
||||
description="Visual overview of your consistency over the last 7 days."
|
||||
/>
|
||||
</div>
|
||||
<div id="overview" data-section="overview">
|
||||
<MetricCardThree
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{ id: "m1", icon: Trophy, title: "Highest Streak", value: "12 Days" },
|
||||
{ id: "m2", icon: Activity, title: "Weekly Completion", value: "85%" },
|
||||
{ id: "m3", icon: Zap, title: "Active Habits", value: "5" }
|
||||
]}
|
||||
title="Weekly Progress"
|
||||
description="Visual overview of your consistency over the last 7 days."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="planner" data-section="planner">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Task 01",
|
||||
price: "High Priority",
|
||||
imageSrc: "asset://task-1",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Task 02",
|
||||
price: "Medium Priority",
|
||||
imageSrc: "asset://task-2",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Task 03",
|
||||
price: "Low Priority",
|
||||
imageSrc: "asset://task-3",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Task 04",
|
||||
price: "Optional",
|
||||
imageSrc: "asset://task-4",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Task 05",
|
||||
price: "Optional",
|
||||
imageSrc: "asset://task-5",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Task 06",
|
||||
price: "Optional",
|
||||
imageSrc: "asset://task-6",
|
||||
},
|
||||
]}
|
||||
title="Nightly Priorities"
|
||||
description="Define your top 3 tasks for tomorrow to ensure you wake up with purpose."
|
||||
/>
|
||||
</div>
|
||||
<div id="planner" data-section="planner">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Task 01", price: "High Priority", imageSrc: "asset://task-1" },
|
||||
{ id: "p2", name: "Task 02", price: "Medium Priority", imageSrc: "asset://task-2" },
|
||||
{ id: "p3", name: "Task 03", price: "Low Priority", imageSrc: "asset://task-3" },
|
||||
{ id: "p4", name: "Task 04", price: "Optional", imageSrc: "asset://task-4" },
|
||||
{ id: "p5", name: "Task 05", price: "Optional", imageSrc: "asset://task-5" },
|
||||
{ id: "p6", name: "Task 06", price: "Optional", imageSrc: "asset://task-6" }
|
||||
]}
|
||||
title="Nightly Priorities"
|
||||
description="Define your top 3 tasks for tomorrow to ensure you wake up with purpose."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTwo
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Marcus Aurelius",
|
||||
role: "Philosopher",
|
||||
description: "The Stoic guide.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-roman-figure-carving_23-2149413143.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "James Clear",
|
||||
role: "Author",
|
||||
description: "Master of habits.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-elegant-old-man-wearing-suit_23-2148831100.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Cal Newport",
|
||||
role: "Researcher",
|
||||
description: "Focus advocate.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businesswoman-smiling-standing-near-business-centre_176420-16777.jpg",
|
||||
},
|
||||
]}
|
||||
title="Accountability Partners"
|
||||
description="Discipline is easier when you're not alone."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{ id: "t1", name: "Marcus Aurelius", role: "Philosopher", description: "The Stoic guide.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-roman-figure-carving_23-2149413143.jpg" },
|
||||
{ id: "t2", name: "James Clear", role: "Author", description: "Master of habits.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-elegant-old-man-wearing-suit_23-2148831100.jpg" },
|
||||
{ id: "t3", name: "Cal Newport", role: "Researcher", description: "Focus advocate.", imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businesswoman-smiling-standing-near-business-centre_176420-16777.jpg" }
|
||||
]}
|
||||
title="Accountability Partners"
|
||||
description="Discipline is easier when you're not alone."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Great app",
|
||||
quote: "Consistency is key.",
|
||||
name: "John D.",
|
||||
role: "Designer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-lady-showing-ok-gesture-shirt-shorts-looking-merry-front-view_176474-53962.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Simple",
|
||||
quote: "Love the minimalist interface.",
|
||||
name: "Jane S.",
|
||||
role: "Coder",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-women-posing-casual-clothes_273609-19474.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Effective",
|
||||
quote: "My habits are finally sticking.",
|
||||
name: "Mike B.",
|
||||
role: "Manager",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-with-three-raised-fingers_1187-1818.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Must have",
|
||||
quote: "Helps me focus.",
|
||||
name: "Sara K.",
|
||||
role: "Writer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-counting-four_1368-5126.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Top notch",
|
||||
quote: "The streak system works.",
|
||||
name: "Paul L.",
|
||||
role: "Artist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-with-stylus_53876-105077.jpg",
|
||||
},
|
||||
]}
|
||||
title="Community Voices"
|
||||
description="What our disciplined users say."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Great app", quote: "Consistency is key.", name: "John D.", role: "Designer", imageSrc: "http://img.b2bpic.net/free-photo/young-lady-showing-ok-gesture-shirt-shorts-looking-merry-front-view_176474-53962.jpg" },
|
||||
{ id: "2", title: "Simple", quote: "Love the minimalist interface.", name: "Jane S.", role: "Coder", imageSrc: "http://img.b2bpic.net/free-photo/portrait-women-posing-casual-clothes_273609-19474.jpg" },
|
||||
{ id: "3", title: "Effective", quote: "My habits are finally sticking.", name: "Mike B.", role: "Manager", imageSrc: "http://img.b2bpic.net/free-photo/man-with-three-raised-fingers_1187-1818.jpg" },
|
||||
{ id: "4", title: "Must have", quote: "Helps me focus.", name: "Sara K.", role: "Writer", imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-counting-four_1368-5126.jpg" },
|
||||
{ id: "5", title: "Top notch", quote: "The streak system works.", name: "Paul L.", role: "Artist", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-with-stylus_53876-105077.jpg" }
|
||||
]}
|
||||
title="Community Voices"
|
||||
description="What our disciplined users say."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How does data saving work?",
|
||||
content: "Everything is saved locally on your device via localStorage.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What if I miss a day?",
|
||||
content: "The 'Never Miss Twice' rule will alert you to stay on track the next day.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Can I export my data?",
|
||||
content: "Data is local, you can clear browser history if needed.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="How to make the most of your tracker."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How does data saving work?", content: "Everything is saved locally on your device via localStorage." },
|
||||
{ id: "f2", title: "What if I miss a day?", content: "The 'Never Miss Twice' rule will alert you to stay on track the next day." },
|
||||
{ id: "f3", title: "Can I export my data?", content: "Data is local, you can clear browser history if needed." }
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="How to make the most of your tracker."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Support"
|
||||
title="Need Help?"
|
||||
description="Reach out if you have questions."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Support"
|
||||
title="Need Help?"
|
||||
description="Reach out if you have questions."
|
||||
buttons={[{ text: "Contact Us", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Habits",
|
||||
href: "#habits",
|
||||
},
|
||||
{
|
||||
label: "Planner",
|
||||
href: "#planner",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Discipline"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "Habits", href: "#habits" }, { label: "Planner", href: "#planner" }] },
|
||||
{ items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
logoText="Discipline"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user