Merge version_1 into main #1
239
src/app/page.tsx
239
src/app/page.tsx
@@ -26,163 +26,100 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Dashboard",
|
||||
id: "#metrics",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "FAQs",
|
||||
id: "#faq",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="ReciteTracker"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Dashboard", id: "#metrics" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "FAQs", id: "#faq" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="ReciteTracker"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Master Your Daily Recitation"
|
||||
description="Stay consistent with your Quran reading. Track your daily progress, analyze your streaks, and recap your journey with precision."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Tracking",
|
||||
href: "#metrics",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/task-management-app_23-2148661892.jpg"
|
||||
imageAlt="Dashboard visualization"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Master Your Daily Recitation"
|
||||
description="Stay consistent with your Quran reading. Track your daily progress, analyze your streaks, and recap your journey with precision."
|
||||
buttons={[{ text: "Start Tracking", href: "#metrics" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/task-management-app_23-2148661892.jpg"
|
||||
imageAlt="Dashboard visualization"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
title: "Pages Read Today",
|
||||
value: "15",
|
||||
icon: BookOpen,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
title: "Current Streak",
|
||||
value: "24 Days",
|
||||
icon: Flame,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
title: "Total Recited",
|
||||
value: "3,400",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
]}
|
||||
title="Your Performance at a Glance"
|
||||
description="See how much progress you have made through your daily dedication."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", title: "Pages Read Today", value: "15", icon: BookOpen },
|
||||
{ id: "m2", title: "Current Streak", value: "24 Days", icon: Flame },
|
||||
{ id: "m3", title: "Total Recited", value: "3,400", icon: CheckCircle },
|
||||
]}
|
||||
title="Your Performance at a Glance"
|
||||
description="See how much progress you have made through your daily dedication."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Daily Progress Marking",
|
||||
description: "Easily input your daily readings with our intuitive interface and watch your progress update in real-time.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/travel-booking-app-screens_23-2148596394.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Historical Recap",
|
||||
description: "Press on any day in your calendar to get a full recap of how much you read and your reflection notes for that date.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/workout-tracker-app-interface_23-2148653680.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Streak Analytics",
|
||||
description: "Keep track of your total days recited and build a lasting habit through visual consistency and motivation.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-infographic-element-set_52683-6801.jpg",
|
||||
},
|
||||
]}
|
||||
title="Features Designed for Growth"
|
||||
description="Powerful tools to keep you focused on your goals every single day."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1", title: "Daily Progress Marking", description: "Easily input your daily readings with our intuitive interface and watch your progress update in real-time.", imageSrc: "http://img.b2bpic.net/free-vector/travel-booking-app-screens_23-2148596394.jpg"},
|
||||
{
|
||||
id: "f2", title: "Historical Recap", description: "Press on any day in your calendar to get a full recap of how much you read and your reflection notes for that date.", imageSrc: "http://img.b2bpic.net/free-vector/workout-tracker-app-interface_23-2148653680.jpg"},
|
||||
{
|
||||
id: "f3", title: "Streak Analytics", description: "Keep track of your total days recited and build a lasting habit through visual consistency and motivation.", imageSrc: "http://img.b2bpic.net/free-vector/flat-infographic-element-set_52683-6801.jpg"},
|
||||
]}
|
||||
title="Features Designed for Growth"
|
||||
description="Powerful tools to keep you focused on your goals every single day."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Can I edit previous days?",
|
||||
content: "Yes, you can edit your history by tapping on the calendar date.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Does it track streaks?",
|
||||
content: "Absolutely, the dashboard displays your current streak prominently.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Is my data stored locally?",
|
||||
content: "Your data is backed up to your account so you never lose your progress.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/blue-company-brochure_23-2147539375.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked Questions"
|
||||
description="Learn more about how to get the most out of your recitation tracker."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Can I edit previous days?", content: "Yes, you can edit your history by tapping on the calendar date." },
|
||||
{ id: "q2", title: "Does it track streaks?", content: "Absolutely, the dashboard displays your current streak prominently." },
|
||||
{ id: "q3", title: "Is my data stored locally?", content: "Your data is backed up to your account so you never lose your progress." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/blue-company-brochure_23-2147539375.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked Questions"
|
||||
description="Learn more about how to get the most out of your recitation tracker."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Get Started Today"
|
||||
description="Join thousands of others committed to their daily Quran recitation journey."
|
||||
tag="Join Us"
|
||||
buttonText="Sign Up"
|
||||
inputPlaceholder="Enter your email"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Get Started Today"
|
||||
description="Join thousands of others committed to their daily Quran recitation journey."
|
||||
tag="Join Us"
|
||||
buttonText="Sign Up"
|
||||
inputPlaceholder="Enter your email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="ReciteTracker"
|
||||
leftLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="ReciteTracker"
|
||||
leftLink={{ text: "Terms of Service", href: "#" }}
|
||||
rightLink={{ text: "Privacy Policy", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user