Merge version_1 into main #3
174
src/app/page.tsx
174
src/app/page.tsx
@@ -2,55 +2,21 @@
|
||||
|
||||
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import FeatureBento, { type FeatureCard } from "@/components/sections/feature/FeatureBento";
|
||||
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
|
||||
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
||||
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
||||
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { Bot, Brain, Sparkles, User, FileText, Send, CheckCircle, Zap, MessageSquare, CreditCard, HelpCircle, Mail, Activity, Shield, Clock, BarChart3, Layers, FileDown, Receipt, Target, DollarSign, Users, Settings, PieChart } from "lucide-react";
|
||||
import { DollarSign, Receipt, Brain, Users, Shield, PieChart, Target, Clock } from "lucide-react";
|
||||
|
||||
export default function FinanceAppPage() {
|
||||
const navItems = [
|
||||
{ name: "Dashboard", id: "features" },
|
||||
{ name: "Planning", id: "planning" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const features: FeatureCard[] = [
|
||||
{
|
||||
bentoComponent: "3d-task-list", title: "Quick Entry", items: [
|
||||
{ icon: DollarSign, label: "Coffee - $5", time: "Now" },
|
||||
{ icon: Receipt, label: "Grocery Scan", time: "10m ago" },
|
||||
{ icon: CheckCircle, label: "Salary Received", time: "1h ago" },
|
||||
{ icon: Send, label: "Rent Payment", time: "2h ago" },
|
||||
],
|
||||
description: "Instantly record income and expenses on the go with smart categorization."},
|
||||
{
|
||||
bentoComponent: "chat", aiIcon: Bot,
|
||||
userIcon: User,
|
||||
exchanges: [
|
||||
{ userMessage: "How much did I spend on dining?", aiResponse: "You've spent $450 on dining this month, which is 10% lower than your average." },
|
||||
{ userMessage: "Am I on track for my savings?", aiResponse: "Yes! You're currently $200 ahead of your monthly savings goal." },
|
||||
],
|
||||
placeholder: "Ask FinAI anything...", title: "AI Financial Assistant", description: "Get instant insights, budget advice, and spending reports via natural chat."},
|
||||
{
|
||||
bentoComponent: "3d-card-grid", items: [
|
||||
{ name: "Budget", icon: Target },
|
||||
{ name: "Savings", icon: PiggyBankIconMock },
|
||||
{ name: "Bills", icon: Clock },
|
||||
{ name: "Reports", icon: FileDown },
|
||||
],
|
||||
centerIcon: Brain,
|
||||
title: "Smart Management", description: "Integrated planning tools to help you take full control of your financial health."},
|
||||
];
|
||||
|
||||
function PiggyBankIconMock(props: any) { return <Target {...props} />; }
|
||||
|
||||
const pricingPlans = [
|
||||
{
|
||||
id: "basic", price: "Free", name: "Personal", buttons: [{ text: "Get Started", href: "#" }],
|
||||
@@ -74,70 +40,68 @@ export default function FinanceAppPage() {
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="gradient-bordered"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="FinFlow"
|
||||
/>
|
||||
<HeroBillboardDashboard
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
tag="Smart Finance"
|
||||
tagIcon={DollarSign}
|
||||
title="Master Your Money With Intelligent Automation"
|
||||
description="Track expenses, reach savings goals, and get AI-driven financial insights in one unified dashboard."
|
||||
buttons={[{ text: "Get Started", href: "#" }]}
|
||||
dashboard={{
|
||||
title: "Finance Overview", logoIcon: PieChart,
|
||||
stats: [
|
||||
{ title: "Monthly Income", values: [5000, 5200, 5100], valuePrefix: "$" },
|
||||
{ title: "Total Expenses", values: [3200, 3400, 3100], valuePrefix: "$" },
|
||||
{ title: "Health Score", values: [85, 88, 92] },
|
||||
],
|
||||
chartTitle: "Balance Trends", chartData: [{ value: 10 }, { value: 30 }, { value: 20 }, { value: 60 }, { value: 40 }],
|
||||
listTitle: "Recent Activity", listItems: [
|
||||
{ icon: Receipt, title: "Grocery store", status: "-$85.00" },
|
||||
{ icon: DollarSign, title: "Salary Deposit", status: "+$4200.00" },
|
||||
{ icon: Clock, title: "Electric Bill", status: "-$120.00" },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
<div id="features">
|
||||
<FeatureBento
|
||||
features={features}
|
||||
animationType="slide-up"
|
||||
tag="Features"
|
||||
title="Everything You Need to Thrive"
|
||||
description="From automated bill reminders to deep analytics, we simplify your financial journey."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
brandName="FinFlow"
|
||||
/>
|
||||
</div>
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
tag="Capabilities"
|
||||
title="Powerful Tools for Better Decisions"
|
||||
description="Leverage smart technology to predict future trends and stay within your budget."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Receipt, title: "OCR Receipt Scanning", description: "Scan your physical receipts and let AI extract details automatically." },
|
||||
{ icon: Brain, title: "Smart Forecasting", description: "Predict your monthly spending and balance with AI-driven trend analysis." },
|
||||
{ icon: Users, title: "Family Mode", description: "Collaborate with family members to manage shared household accounts securely." },
|
||||
{ icon: Shield, title: "Secure Backup", description: "Your financial data is encrypted and backed up for peace of mind." },
|
||||
]}
|
||||
/>
|
||||
<MetricSplitMediaAbout
|
||||
tag="Insights"
|
||||
title="Financial Health at a Glance"
|
||||
description="See exactly where your money goes. Get a clear view of your net worth, spending habits, and future potential with our interactive dashboard."
|
||||
metrics={[{ value: "95%", title: "User Budget Success" }, { value: "2M+", title: "Transactions Tracked" }]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<div id="pricing">
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardDashboard
|
||||
tag="Smart Finance"
|
||||
tagIcon={DollarSign}
|
||||
title="Master Your Money With Intelligent Automation"
|
||||
description="Track expenses, reach savings goals, and get AI-driven financial insights in one unified dashboard."
|
||||
buttons={[{ text: "Get Started", href: "#" }]}
|
||||
dashboard={{
|
||||
title: "Finance Overview", logoIcon: PieChart,
|
||||
stats: [
|
||||
{ title: "Monthly Income", values: [5000, 5200, 5100], valuePrefix: "$", description: "Income trends" },
|
||||
{ title: "Total Expenses", values: [3200, 3400, 3100], valuePrefix: "$", description: "Spending analysis" },
|
||||
{ title: "Health Score", values: [85, 88, 92], description: "Financial wellness" },
|
||||
],
|
||||
chartTitle: "Balance Trends", chartData: [{ value: 10 }, { value: 30 }, { value: 20 }, { value: 60 }, { value: 40 }],
|
||||
listTitle: "Recent Activity", listItems: [
|
||||
{ icon: Receipt, title: "Grocery store", status: "-$85.00" },
|
||||
{ icon: DollarSign, title: "Salary Deposit", status: "+$4200.00" },
|
||||
{ icon: Clock, title: "Electric Bill", status: "-$120.00" },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
tag="Capabilities"
|
||||
title="Powerful Tools for Better Decisions"
|
||||
description="Leverage smart technology to predict future trends and stay within your budget."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Receipt, title: "OCR Receipt Scanning", description: "Scan your physical receipts and let AI extract details automatically." },
|
||||
{ icon: Brain, title: "Smart Forecasting", description: "Predict your monthly spending and balance with AI-driven trend analysis." },
|
||||
{ icon: Users, title: "Family Mode", description: "Collaborate with family members to manage shared household accounts securely." },
|
||||
{ icon: Shield, title: "Secure Backup", description: "Your financial data is encrypted and backed up for peace of mind." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
tag="Insights"
|
||||
title="Financial Health at a Glance"
|
||||
description="See exactly where your money goes. Get a clear view of your net worth, spending habits, and future potential with our interactive dashboard."
|
||||
metrics={[{ value: "95%", title: "User Budget Success" }, { value: "2M+", title: "Transactions Tracked" }]}
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
plans={pricingPlans}
|
||||
animationType="slide-up"
|
||||
@@ -148,10 +112,20 @@ export default function FinanceAppPage() {
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<FooterBaseCard
|
||||
logoText="FinFlow"
|
||||
columns={[{ title: "Product", items: [{ label: "Features", href: "#" }] }]}
|
||||
/>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Get Started"
|
||||
title="Ready to take control?"
|
||||
description="Join thousands of users optimizing their finances with FinFlow today."
|
||||
buttons={[{ text: "Contact Us", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="FinFlow"
|
||||
columns={[{ title: "Product", items: [{ label: "Features", href: "#" }, { label: "Pricing", href: "#" }] }]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user