Merge version_1 into main #2
348
src/app/page.tsx
348
src/app/page.tsx
@@ -9,7 +9,7 @@ import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import { PieChart, Save } from "lucide-react";
|
||||
import { PieChart, Save, Zap, Shield, AlertTriangle, Cloud } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -17,254 +17,120 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#home",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="ExpenseTracker"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "#home" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="ExpenseTracker"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Master Your Personal Finances Effortlessly"
|
||||
description="Keep track of every dollar with our secure expense tracker. Add, edit, and organize your spending by category or date with ease."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/glasses-calculator-tablet-white-neat-desk_1387-384.jpg",
|
||||
alt: "User 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg",
|
||||
alt: "User 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/glasses-calculator-tablet-white-neat-desk_1387-384.jpg",
|
||||
alt: "User 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg",
|
||||
alt: "User 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/glasses-calculator-tablet-white-neat-desk_1387-384.jpg",
|
||||
alt: "User 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by over 5,000+ happy users globally"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Bank-Grade Encryption",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Real-time Syncing",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Categorical Insights",
|
||||
icon: PieChart,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Automated Backup",
|
||||
icon: Save,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Zero Data Leakage",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplit
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Master Your Personal Finances Effortlessly"
|
||||
description="Keep track of every dollar with our secure expense tracker. Add, edit, and organize your spending by category or date with ease."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/glasses-calculator-tablet-white-neat-desk_1387-384.jpg", alt: "User 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg", alt: "User 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/glasses-calculator-tablet-white-neat-desk_1387-384.jpg", alt: "User 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg", alt: "User 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/glasses-calculator-tablet-white-neat-desk_1387-384.jpg", alt: "User 5" }
|
||||
]}
|
||||
avatarText="Trusted by over 5,000+ happy users globally"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Bank-Grade Encryption" },
|
||||
{ type: "text", text: "Real-time Syncing" },
|
||||
{ type: "text-icon", text: "Categorical Insights", icon: PieChart },
|
||||
{ type: "text-icon", text: "Automated Backup", icon: Save },
|
||||
{ type: "text", text: "Zero Data Leakage" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Designed for Clarity and Control"
|
||||
description="Our application simplifies expense management by allowing you to define custom categories like Food, Transport, and Entertainment. It is built with persistence and error handling at its core to ensure your data is always safe."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/glasses-calculator-tablet-white-neat-desk_1387-384.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Designed for Clarity and Control"
|
||||
description="Our application simplifies expense management by allowing you to define custom categories like Food, Transport, and Entertainment. It is built with persistence and error handling at its core to ensure your data is always safe."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/glasses-calculator-tablet-white-neat-desk_1387-384.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Expense Logging",
|
||||
description: "Quickly add, edit, or delete expenses with automatic validation.",
|
||||
buttonIcon: "Zap",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg?_wi=2",
|
||||
imageAlt: "personal finance app dashboard",
|
||||
},
|
||||
{
|
||||
title: "Category Summaries",
|
||||
description: "See exactly where your money goes with detailed categorical breakdowns.",
|
||||
buttonIcon: "PieChart",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glasses-calculator-tablet-white-neat-desk_1387-384.jpg?_wi=2",
|
||||
imageAlt: "organized desk work space",
|
||||
},
|
||||
{
|
||||
title: "Secure Persistence",
|
||||
description: "Persistent file handling ensures your financial records stay saved locally.",
|
||||
buttonIcon: "Shield",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-work-environment-empty-office-business-industry-enterprise-culture_482257-125598.jpg?_wi=1",
|
||||
imageAlt: "data cloud security finance",
|
||||
},
|
||||
{
|
||||
title: "Error Protection",
|
||||
description: "Robust exception handling catches invalid inputs and negative values.",
|
||||
buttonIcon: "AlertTriangle",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg?_wi=3",
|
||||
imageAlt: "personal finance app dashboard",
|
||||
},
|
||||
{
|
||||
title: "Cloud Sync",
|
||||
description: "Keep your data consistent across all your devices effortlessly.",
|
||||
buttonIcon: "Cloud",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glasses-calculator-tablet-white-neat-desk_1387-384.jpg?_wi=3",
|
||||
imageAlt: "organized desk work space",
|
||||
},
|
||||
]}
|
||||
title="Core Functionalities"
|
||||
description="Manage your finances with industry-standard reliability."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Expense Logging", description: "Quickly add, edit, or delete expenses with automatic validation.", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg" },
|
||||
{ title: "Category Summaries", description: "See exactly where your money goes with detailed categorical breakdowns.", buttonIcon: PieChart, imageSrc: "http://img.b2bpic.net/free-photo/glasses-calculator-tablet-white-neat-desk_1387-384.jpg" },
|
||||
{ title: "Secure Persistence", description: "Persistent file handling ensures your financial records stay saved locally.", buttonIcon: Shield, imageSrc: "http://img.b2bpic.net/free-photo/modern-work-environment-empty-office-business-industry-enterprise-culture_482257-125598.jpg" },
|
||||
{ title: "Error Protection", description: "Robust exception handling catches invalid inputs and negative values.", buttonIcon: AlertTriangle, imageSrc: "http://img.b2bpic.net/free-photo/trading-manager-working-with-stock-market-diagrams-looking-real-time-stattistics-trend-with-forex-exchange-profit-rate-analyzing-hedge-fund-index-global-money-investment-laptop_482257-50292.jpg" },
|
||||
{ title: "Cloud Sync", description: "Keep your data consistent across all your devices effortlessly.", buttonIcon: Cloud, imageSrc: "http://img.b2bpic.net/free-photo/glasses-calculator-tablet-white-neat-desk_1387-384.jpg" }
|
||||
]}
|
||||
title="Core Functionalities"
|
||||
description="Manage your finances with industry-standard reliability."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Frequently Asked Questions"
|
||||
description="Get quick answers to common questions about our platform."
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Is my data secure?",
|
||||
content: "Yes, we use local persistent storage and encrypted backups.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Can I export my data?",
|
||||
content: "Absolutely, export your summaries to CSV anytime.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Does it work offline?",
|
||||
content: "Yes, our app is designed to work fully offline.",
|
||||
},
|
||||
{
|
||||
id: "f4",
|
||||
title: "Are there monthly fees?",
|
||||
content: "No, our core tracking features are completely free.",
|
||||
},
|
||||
{
|
||||
id: "f5",
|
||||
title: "How do I add categories?",
|
||||
content: "Simply go to settings and define your custom tags.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Frequently Asked Questions"
|
||||
description="Get quick answers to common questions about our platform."
|
||||
faqs={[
|
||||
{ id: "f1", title: "Is my data secure?", content: "Yes, we use local persistent storage and encrypted backups." },
|
||||
{ id: "f2", title: "Can I export my data?", content: "Absolutely, export your summaries to CSV anytime." },
|
||||
{ id: "f3", title: "Does it work offline?", content: "Yes, our app is designed to work fully offline." },
|
||||
{ id: "f4", title: "Are there monthly fees?", content: "No, our core tracking features are completely free." },
|
||||
{ id: "f5", title: "How do I add categories?", content: "Simply go to settings and define your custom tags." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get Started with Financial Freedom"
|
||||
description="Reach out to us if you need support or feature requests for our expense tracker."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "subject",
|
||||
type: "text",
|
||||
placeholder: "Inquiry Subject",
|
||||
required: false,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "What are you looking to track?",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/glasses-calculator-tablet-white-neat-desk_1387-384.jpg?_wi=4"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get Started with Financial Freedom"
|
||||
description="Reach out to us if you need support or feature requests for our expense tracker."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
{ name: "subject", type: "text", placeholder: "Inquiry Subject", required: false }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "What are you looking to track?", rows: 4, required: true }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/glasses-calculator-tablet-white-neat-desk_1387-384.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-work-environment-empty-office-business-industry-enterprise-culture_482257-125598.jpg?_wi=2"
|
||||
logoText="ExpenseTracker"
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Support",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 ExpenseTracker. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-work-environment-empty-office-business-industry-enterprise-culture_482257-125598.jpg"
|
||||
logoText="ExpenseTracker"
|
||||
columns={[
|
||||
{ title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Support", href: "#contact" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Privacy Policy", href: "#" }] }
|
||||
]}
|
||||
copyrightText="© 2025 ExpenseTracker. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user