2 Commits

Author SHA1 Message Date
d7dbeb7d40 Update src/app/page.tsx 2026-03-07 20:25:52 +00:00
c9252bb234 Update src/app/layout.tsx 2026-03-07 20:25:51 +00:00
5 changed files with 768 additions and 96 deletions

View File

@@ -1,11 +1,245 @@
import React from "react"; "use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import Link from "next/link";
import {
AlertCircle,
Target,
TrendingUp,
CreditCard,
Eye,
Brain,
Lock,
Smartphone,
Share2,
Download,
HelpCircle,
Bell,
Zap,
BarChart3,
Wallet,
} from "lucide-react";
export default function AlertsPage() {
const navItems = [
{ name: "Dashboard", id: "dashboard" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "Contact", id: "contact" },
{ name: "Login", id: "login" },
];
const footerColumns = [
{
title: "Product", items: [
{ label: "Features", href: "/features" },
{ label: "Pricing", href: "/pricing" },
{ label: "Security", href: "#" },
{ label: "Status", href: "#" },
],
},
{
title: "Company", items: [
{ label: "About", href: "/about" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Resources", items: [
{ label: "Help Center", href: "#" },
{ label: "Documentation", href: "#" },
{ label: "API Reference", href: "#" },
{ label: "Community", href: "#" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Compliance", href: "#" },
],
},
];
const AlertsPage = () => {
return ( return (
<div> <ThemeProvider
<h1>Alerts</h1> defaultButtonVariant="icon-arrow"
</div> defaultTextAnimation="background-highlight"
); borderRadius="rounded"
}; contentWidth="medium"
sizing="medium"
background="none"
cardStyle="gradient-bordered"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="FinControl"
bottomLeftText="Take control of your finances"
bottomRightText="hello@fincontrol.app"
/>
</div>
export default AlertsPage; <div id="alerts-features" data-section="alerts-features">
<FeatureBento
features={[
{
title: "Budget Warnings", description: "Real-time alerts when you approach or exceed budget limits", bentoComponent: "animated-bar-chart"},
{
title: "Alert Categories", description: "Customizable alerts for different financial events", bentoComponent: "icon-info-cards", items: [
{
icon: Target,
label: "Active Alerts", value: "8"},
{
icon: AlertCircle,
label: "This Week", value: "3"},
{
icon: TrendingUp,
label: "Resolved", value: "24"},
],
},
{
title: "Priority Alerts", description: "Critical financial notifications ranked by importance", bentoComponent: "3d-task-list", items: [
{
icon: AlertCircle,
label: "Budget Overspend Warning", time: "2 hours ago"},
{
icon: Bell,
label: "Bill Due Tomorrow", time: "4 hours ago"},
{
icon: TrendingUp,
label: "Unusual Transaction", time: "Yesterday"},
],
},
{
title: "Spending Trends", description: "Visual breakdown of alert frequency and patterns", bentoComponent: "line-chart"},
{
title: "Alert Types Hub", description: "Manage all alert types and notification preferences", bentoComponent: "orbiting-icons", centerIcon: Bell,
items: [
{
icon: AlertCircle,
ring: 1,
},
{
icon: CreditCard,
ring: 1,
},
{
icon: Zap,
ring: 2,
},
{
icon: Wallet,
ring: 2,
},
],
},
{
title: "Notification Channels", description: "Multi-channel delivery: email, SMS, push, and in-app", bentoComponent: "marquee", centerIcon: Bell,
variant: "text", texts: [
"Email Notifications - Detailed summaries", "SMS Alerts - Urgent warnings", "Push Notifications - Instant mobile alerts", "In-App Notifications - Dashboard center"],
},
]}
title="Intelligent Alert System"
description="Never miss important financial events with smart, timely notifications"
tag="Alerts"
tagIcon={Bell}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
carouselMode="buttons"
/>
</div>
<div id="alerts-tools" data-section="alerts-tools">
<FeatureHoverPattern
features={[
{
icon: Eye,
title: "Complete Visibility", description: "See all financial alerts in one unified dashboard"},
{
icon: Brain,
title: "Smart Filtering", description: "Organize alerts by type, urgency, or account"},
{
icon: Lock,
title: "Privacy Protected", description: "Your alert preferences and data are completely secure"},
{
icon: Smartphone,
title: "Mobile Ready", description: "Get alerts on your phone, tablet, or web browser"},
{
icon: Share2,
title: "Customizable Triggers", description: "Set your own alert thresholds and notification rules"},
{
icon: Download,
title: "Alert History", description: "View complete history of all alerts and actions taken"},
]}
title="Alert Management Tools"
description="Full control over how and when you receive financial alerts"
tag="Features"
tagIcon={Zap}
textboxLayout="default"
animationType="blur-reveal"
useInvertedBackground={true}
/>
</div>
<div id="alerts-faq" data-section="alerts-faq">
<FaqDouble
faqs={[
{
id: "1", title: "What types of alerts does FinControl offer?", content:
"FinControl provides budget alerts, bill reminders, unusual transaction notifications, low balance warnings, spending milestone alerts, goal progress updates, and subscription change notifications."},
{
id: "2", title: "How do I customize my alert preferences?", content:
"In Settings → Notifications, you can enable/disable each alert type, choose your preferred channels (email, SMS, push, in-app), and set custom thresholds for budget alerts."},
{
id: "3", title: "Can I set different alerts for different accounts?", content:
"Yes! Each account can have its own alert settings. You can set different budget thresholds, notification preferences, and alert types per account."},
{
id: "4", title: "Do I get alerts immediately or are they delayed?", content:
"Most alerts are delivered in real-time. Budget warnings appear instantly, SMS alerts within seconds, and email summaries within minutes. Push notifications are immediate."},
{
id: "5", title: "Can I snooze or dismiss alerts?", content:
"Yes, you can snooze alerts for 1, 6, or 24 hours, or dismiss them entirely. Recurring alerts will still appear on their normal schedule."},
{
id: "6", title: "How do I know if my card is compromised?", content:
"FinControl flags unusual transactions based on your spending patterns. If we detect potential fraud, you'll get an immediate alert. You can manually mark transactions as suspicious too."},
{
id: "7", title: "Are there different alert levels?", content:
"Yes, alerts are ranked by priority: Critical (immediate), High (urgent), Medium (important), and Low (informational). You can filter by priority in your alert center."},
{
id: "8", title: "What happens to old alerts?", content:
"All alerts are archived for 90 days. You can access your alert history anytime in the Alerts Center to review past notifications and actions taken."},
]}
title="Alert System FAQs"
description="Get answers about our notification and alert features"
tag="Help"
tagIcon={HelpCircle}
textboxLayout="default"
faqsAnimation="slide-up"
useInvertedBackground={false}
animationType="smooth"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="FinControl"
columns={footerColumns}
copyrightText="© 2025 FinControl. All rights reserved."
/>
</div>
</ThemeProvider>
);
}

View File

@@ -1,11 +1,247 @@
import React from "react"; "use client";
const CalendarPage = () => { import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import Link from "next/link";
import {
Calendar,
Clock,
AlertCircle,
CheckCircle,
Bell,
Eye,
Zap,
Share2,
Rocket,
HelpCircle,
DollarSign,
Mail,
} from "lucide-react";
export default function CalendarPage() {
return ( return (
<div> <ThemeProvider
<h1>Calendar</h1> defaultButtonVariant="icon-arrow"
</div> defaultTextAnimation="background-highlight"
); borderRadius="rounded"
}; contentWidth="medium"
sizing="medium"
background="none"
cardStyle="gradient-bordered"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="semibold"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Dashboard", id: "/app/dashboard" },
{ name: "Features", id: "/features" },
{ name: "Pricing", id: "/pricing" },
{ name: "Contact", id: "/contact" },
{ name: "Login", id: "/login" },
]}
brandName="FinControl"
bottomLeftText="Take control of your finances"
bottomRightText="hello@fincontrol.app"
/>
</div>
export default CalendarPage; {/* Calendar Features Bento */}
<div id="calendar-bento" data-section="calendar-bento">
<FeatureBento
title="Financial Calendar & Bill Tracking"
description="Never miss a bill or important financial event. View your entire financial calendar at a glance with smart notifications and reminders."
tag="Calendar"
tagIcon={Calendar}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
features={[
{
title: "Upcoming Bills", description: "See all upcoming bills and payments color-coded by priority", bentoComponent: "marquee", centerIcon: AlertCircle,
variant: "text", texts: [
"Electric Bill - Due Tomorrow", "Internet Service - Due in 3 days", "Car Insurance - Due in 1 week", "Subscription Renewal - Due in 5 days"],
},
{
title: "Payment Due Dates", description: "Calendar view showing all payment deadlines for the month", bentoComponent: "animated-bar-chart"},
{
title: "Recurring Transactions", description: "Automatically tracked subscriptions and recurring payments", bentoComponent: "3d-task-list", items: [
{
icon: DollarSign,
label: "Netflix Subscription", time: "Every 15th"},
{
icon: Bell,
label: "Gym Membership", time: "Every 1st"},
{
icon: Zap,
label: "Utilities Bill", time: "Every 20th"},
],
},
{
title: "Financial Events", description: "Mark important financial milestones and events", bentoComponent: "icon-info-cards", items: [
{
icon: CheckCircle,
label: "Completed", value: "24"},
{
icon: Clock,
label: "Pending", value: "8"},
{
icon: AlertCircle,
label: "Overdue", value: "1"},
],
},
{
title: "Notifications", description: "Smart alerts for upcoming payments and milestones", bentoComponent: "marquee", centerIcon: Bell,
variant: "icon", icons: [AlertCircle, CheckCircle, Clock, Bell],
},
{
title: "Calendar Sharing", description: "Share calendar with family for coordinated financial planning", bentoComponent: "orbiting-icons", centerIcon: Share2,
items: [
{
icon: Mail,
ring: 1,
},
{
icon: Eye,
ring: 1,
},
{
icon: Share2,
ring: 2,
},
{
icon: Bell,
ring: 2,
},
],
},
]}
carouselMode="buttons"
/>
</div>
{/* Calendar FAQ */}
<div id="faq" data-section="faq">
<FaqDouble
title="Calendar & Bill Tracking FAQ"
description="Questions about managing your financial calendar and bill reminders"
tag="FAQ"
tagIcon={HelpCircle}
textboxLayout="default"
faqsAnimation="slide-up"
useInvertedBackground={false}
animationType="smooth"
faqs={[
{
id: "1", title: "How does the calendar sync with my bills?", content:
"The calendar automatically pulls bill data from your connected accounts and transactions. You can also manually add bills, subscriptions, and recurring payments. Updates sync in real-time across all your devices."},
{
id: "2", title: "Can I get reminders for upcoming bills?", content:
"Yes! You can set custom reminder times for each bill (1 day before, 3 days before, etc.). Reminders are sent via in-app notification, email, or SMS (Premium plan). You control notification preferences."},
{
id: "3", title: "What happens if I mark a bill as paid?", content:
"Marking a bill as paid removes it from the upcoming list and records the payment in your transaction history. This helps track payment history and improves your financial records accuracy."},
{
id: "4", title: "Can I add custom events to the calendar?", content:
"Absolutely! Add any financial event: tax deadlines, investment reviews, financial checkups, savings milestones, or personal budget reviews. Custom events are color-coded and can have their own reminders."},
{
id: "5", title: "How are recurring bills handled?", content:
"Recurring bills are automatically detected and shown on their due date each period. You can customize frequency (weekly, biweekly, monthly, quarterly, annual) and update amounts if they change."},
{
id: "6", title: "Can family members see my calendar?", content:
"In Pro and Premium plans, you can share your calendar with family members with custom permission levels: view-only, edit, or full access. Family members see only the events you share."},
{
id: "7", title: "What if I need to reschedule a bill?", content:
"Most recurring bills can be rescheduled within the calendar. For actual bill date changes, update the bill details and the calendar will reflect the new schedule automatically."},
{
id: "8", title: "Can I export my financial calendar?", content:
"Premium plan users can export the calendar to iCal format for import into Google Calendar, Outlook, or Apple Calendar. Keeps your financial events synchronized everywhere."},
]}
/>
</div>
{/* Contact CTA */}
<div id="contact" data-section="contact">
<ContactCTA
tag="Stay on Top of Finances"
tagIcon={Rocket}
title="Never Miss a Bill Again"
description="Explore our comprehensive calendar and bill tracking features to maintain complete control over your financial obligations."
buttons={[
{
text: "View Full Calendar", href: "#"},
{
text: "Contact Support", href: "#"},
]}
background={{
variant: "radial-gradient"}}
useInvertedBackground={true}
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="FinControl"
columns={[
{
title: "Product", items: [
{
label: "Features", href: "/features"},
{
label: "Pricing", href: "/pricing"},
{
label: "Security", href: "#"},
{
label: "Status", href: "#"},
],
},
{
title: "Company", items: [
{
label: "About", href: "/about"},
{
label: "Blog", href: "#"},
{
label: "Careers", href: "#"},
{
label: "Contact", href: "/contact"},
],
},
{
title: "Resources", items: [
{
label: "Help Center", href: "#"},
{
label: "Documentation", href: "#"},
{
label: "API Reference", href: "#"},
{
label: "Community", href: "#"},
],
},
{
title: "Legal", items: [
{
label: "Privacy Policy", href: "#"},
{
label: "Terms of Service", href: "#"},
{
label: "Cookie Policy", href: "#"},
{
label: "Compliance", href: "#"},
],
},
]}
copyrightText="© 2025 FinControl. All rights reserved."
/>
</div>
</ThemeProvider>
);
}

View File

@@ -1,11 +1,248 @@
import React from "react"; "use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import Link from "next/link";
import {
Bell,
Target,
AlertCircle,
TrendingUp,
Wallet,
DollarSign,
CreditCard,
PiggyBank,
Home,
Plane,
Zap,
Eye,
Brain,
Lock,
Smartphone,
Share2,
Download,
HelpCircle,
} from "lucide-react";
export default function RecurringExpensesPage() {
const navItems = [
{ name: "Dashboard", id: "dashboard" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "Contact", id: "contact" },
{ name: "Login", id: "login" },
];
const footerColumns = [
{
title: "Product", items: [
{ label: "Features", href: "/features" },
{ label: "Pricing", href: "/pricing" },
{ label: "Security", href: "#" },
{ label: "Status", href: "#" },
],
},
{
title: "Company", items: [
{ label: "About", href: "/about" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Resources", items: [
{ label: "Help Center", href: "#" },
{ label: "Documentation", href: "#" },
{ label: "API Reference", href: "#" },
{ label: "Community", href: "#" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Compliance", href: "#" },
],
},
];
const SubscriptionsPage = () => {
return ( return (
<div> <ThemeProvider
<h1>Subscriptions</h1> defaultButtonVariant="icon-arrow"
</div> defaultTextAnimation="background-highlight"
); borderRadius="rounded"
}; contentWidth="medium"
sizing="medium"
background="none"
cardStyle="gradient-bordered"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="FinControl"
bottomLeftText="Take control of your finances"
bottomRightText="hello@fincontrol.app"
/>
</div>
export default SubscriptionsPage; <div id="recurring-features" data-section="recurring-features">
<FeatureBento
features={[
{
title: "Smart Recurring Detection", description: "Automatically identify and categorize recurring transactions", bentoComponent: "animated-bar-chart"},
{
title: "Subscription Management", description: "Track all your subscriptions and recurring payments", bentoComponent: "icon-info-cards", items: [
{
icon: Bell,
label: "Active Subs", value: "12"},
{
icon: AlertCircle,
label: "This Month", value: "$287"},
{
icon: TrendingUp,
label: "Annual Cost", value: "$3.4K"},
],
},
{
title: "Renewal Timeline", description: "See upcoming subscription renewals at a glance", bentoComponent: "3d-task-list", items: [
{
icon: Zap,
label: "Streaming Service", time: "In 2 days"},
{
icon: Smartphone,
label: "Cloud Storage", time: "In 7 days"},
{
icon: Home,
label: "VPN Service", time: "In 15 days"},
],
},
{
title: "Savings Insights", description: "Discover which subscriptions you can cancel to save money", bentoComponent: "line-chart"},
{
title: "Integration Hub", description: "Connect and manage subscriptions from multiple services", bentoComponent: "orbiting-icons", centerIcon: Wallet,
items: [
{
icon: DollarSign,
ring: 1,
},
{
icon: CreditCard,
ring: 1,
},
{
icon: TrendingUp,
ring: 2,
},
{
icon: PiggyBank,
ring: 2,
},
],
},
{
title: "Cancellation Assistant", description: "Get help canceling unwanted subscriptions", bentoComponent: "marquee", centerIcon: Bell,
variant: "text", texts: [
"Streaming Service - Save $12.99/month", "Cloud Storage - Save $4.99/month", "VPN Service - Save $7.99/month", "News Subscription - Save $15.00/month"],
},
]}
title="Recurring Expenses Management"
description="Master your subscriptions and recurring payments with intelligent tracking and insights"
tag="Subscriptions"
tagIcon={Zap}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
carouselMode="buttons"
/>
</div>
<div id="recurring-tools" data-section="recurring-tools">
<FeatureHoverPattern
features={[
{
icon: Eye,
title: "Full Visibility", description: "See every recurring charge across all your accounts in one place"},
{
icon: Brain,
title: "Smart Analytics", description: "AI-powered analysis shows which subscriptions cost you most"},
{
icon: Lock,
title: "Secure Management", description: "Safely manage and cancel subscriptions without sharing passwords"},
{
icon: Bell,
title: "Smart Alerts", description: "Get notified before any recurring charge hits your account"},
{
icon: Download,
title: "Export Reports", description: "Generate detailed subscription reports for your records"},
{
icon: Share2,
title: "Family Sharing", description: "Track shared subscriptions with family members"},
]}
title="Advanced Subscription Control"
description="Powerful tools to manage every recurring expense"
tag="Tools"
tagIcon={Zap}
textboxLayout="default"
animationType="blur-reveal"
useInvertedBackground={true}
/>
</div>
<div id="recurring-faq" data-section="recurring-faq">
<FaqDouble
faqs={[
{
id: "1", title: "How does FinControl detect recurring expenses?", content:
"Our AI engine analyzes your transaction history to identify patterns. Any charge that repeats on a regular schedule (daily, weekly, monthly, yearly) is automatically flagged as recurring."},
{
id: "2", title: "Can I pause a subscription instead of canceling?", content:
"Yes! For supported services, you can pause subscriptions directly from FinControl. We'll notify you when the pause period is about to end."},
{
id: "3", title: "Will FinControl help me cancel subscriptions?", content:
"We provide direct cancellation links and guides for major services. For others, we give you the information you need to cancel easily. We never access your account credentials."},
{
id: "4", title: "How accurate is the subscription detection?", content:
"Our AI is 99.2% accurate in identifying recurring charges. You can manually add or remove subscriptions anytime to ensure complete accuracy."},
{
id: "5", title: "Can I see my annual subscription costs?", content:
"Absolutely! We automatically calculate annual costs for all recurring expenses. You can see total annual spend and sort subscriptions by cost to identify savings opportunities."},
{
id: "6", title: "Are subscription alerts sent to my phone?", content:
"Yes! Pro and Premium plans include mobile alerts. Get notified on iOS or Android before any recurring charge. You can customize alert timing and frequency."},
{
id: "7", title: "Can I export my subscription list?", content:
"Yes, Premium plan users can export their subscription list as PDF or CSV. Great for sharing with family or for your records."},
{
id: "8", title: "What if a subscription amount changes?", content:
"FinControl tracks price changes and alerts you when a recurring charge increases. You'll know immediately if a subscription costs more than before."},
]}
title="Subscription FAQs"
description="Common questions about recurring expense management"
tag="Help"
tagIcon={HelpCircle}
textboxLayout="default"
faqsAnimation="slide-up"
useInvertedBackground={false}
animationType="smooth"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="FinControl"
columns={footerColumns}
copyrightText="© 2025 FinControl. All rights reserved."
/>
</div>
</ThemeProvider>
);
}

View File

@@ -5,8 +5,7 @@ import "./globals.css";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "FinControl - Personal Finance Management", description: "Take charge of your finances with intelligent tracking, budgeting, and insights." title: "FinControl - Personal Finance Management", description: "Take charge of your finances with intelligent tracking, budgeting, and insights."};
};
export default function RootLayout({ export default function RootLayout({
children, children,

View File

@@ -78,7 +78,7 @@ export default function HomePage() {
title="Your Money. Fully Controlled." title="Your Money. Fully Controlled."
description="Take charge of your finances with intelligent tracking, budgeting, and insights. See exactly where your money goes and make smarter financial decisions." description="Take charge of your finances with intelligent tracking, budgeting, and insights. See exactly where your money goes and make smarter financial decisions."
buttons={[ buttons={[
{ text: "Get Started Free", href: "#" }, { text: "Start Free Trial", href: "#" },
{ text: "View Demo", href: "#" }, { text: "View Demo", href: "#" },
]} ]}
background={{ variant: "radial-gradient" }} background={{ variant: "radial-gradient" }}
@@ -98,16 +98,13 @@ export default function HomePage() {
stats: [ stats: [
{ {
title: "Monthly Balance", values: [2450.5, 3120.75, 3895.25], title: "Monthly Balance", values: [2450.5, 3120.75, 3895.25],
valuePrefix: "$", description: "Total account balance" valuePrefix: "$", description: "Total account balance"},
},
{ {
title: "This Month Income", values: [5200, 5200, 5200], title: "This Month Income", values: [5200, 5200, 5200],
valuePrefix: "$", description: "Received income" valuePrefix: "$", description: "Received income"},
},
{ {
title: "This Month Spent", values: [2100.5, 1950.25, 1305.75], title: "This Month Spent", values: [2100.5, 1950.25, 1305.75],
valuePrefix: "$", description: "Total expenses" valuePrefix: "$", description: "Total expenses"},
},
], ],
chartTitle: "Income vs Expenses", chartData: [ chartTitle: "Income vs Expenses", chartData: [
{ value: 65 }, { value: 65 },
@@ -119,16 +116,13 @@ export default function HomePage() {
listTitle: "Recent Transactions", listItems: [ listTitle: "Recent Transactions", listItems: [
{ {
icon: ShoppingCart, icon: ShoppingCart,
title: "Grocery Store - $125.50", status: "Completed" title: "Grocery Store - $125.50", status: "Completed"},
},
{ {
icon: Zap, icon: Zap,
title: "Electric Bill - $89.00", status: "Pending" title: "Electric Bill - $89.00", status: "Pending"},
},
{ {
icon: Fuel, icon: Fuel,
title: "Gas Station - $42.30", status: "Completed" title: "Gas Station - $42.30", status: "Completed"},
},
], ],
}} }}
/> />
@@ -147,8 +141,7 @@ export default function HomePage() {
features={[ features={[
{ {
title: "Smart Expense Tracking", description: title: "Smart Expense Tracking", description:
"Automatically categorize and track every transaction with intelligent insights", bentoComponent: "animated-bar-chart" "Automatically categorize and track every transaction with intelligent insights", bentoComponent: "animated-bar-chart"},
},
{ {
title: "Budget Planning", description: "Set and monitor budgets by category with real-time alerts", bentoComponent: "icon-info-cards", items: [ title: "Budget Planning", description: "Set and monitor budgets by category with real-time alerts", bentoComponent: "icon-info-cards", items: [
{ icon: Target, label: "Budget Set", value: "8/12" }, { icon: Target, label: "Budget Set", value: "8/12" },
@@ -164,8 +157,7 @@ export default function HomePage() {
], ],
}, },
{ {
title: "Analytics & Reports", description: "Detailed financial reports and trend analysis", bentoComponent: "line-chart" title: "Analytics & Reports", description: "Detailed financial reports and trend analysis", bentoComponent: "line-chart"},
},
{ {
title: "Multi-Account Support", description: "Manage checking, savings, and credit cards in one place", bentoComponent: "orbiting-icons", centerIcon: Wallet, title: "Multi-Account Support", description: "Manage checking, savings, and credit cards in one place", bentoComponent: "orbiting-icons", centerIcon: Wallet,
items: [ items: [
@@ -178,8 +170,7 @@ export default function HomePage() {
{ {
title: "Bill Reminders", description: "Never miss a payment with smart notifications", bentoComponent: "marquee", centerIcon: Bell, title: "Bill Reminders", description: "Never miss a payment with smart notifications", bentoComponent: "marquee", centerIcon: Bell,
variant: "text", texts: [ variant: "text", texts: [
"Electric Bill - Due Tomorrow", "Internet Service - Due in 3 days", "Car Insurance - Due in 1 week", "Subscription Renewal - Due in 5 days" "Electric Bill - Due Tomorrow", "Internet Service - Due in 3 days", "Car Insurance - Due in 1 week", "Subscription Renewal - Due in 5 days"],
],
}, },
]} ]}
carouselMode="buttons" carouselMode="buttons"
@@ -200,31 +191,25 @@ export default function HomePage() {
{ {
icon: Eye, icon: Eye,
title: "Real-Time Visibility", description: title: "Real-Time Visibility", description:
"See your complete financial picture instantly across all accounts and categories" "See your complete financial picture instantly across all accounts and categories"},
},
{ {
icon: Brain, icon: Brain,
title: "AI-Powered Insights", description: title: "AI-Powered Insights", description:
"Get personalized financial recommendations based on your spending patterns" "Get personalized financial recommendations based on your spending patterns"},
},
{ {
icon: Lock, icon: Lock,
title: "Bank-Level Security", description: title: "Bank-Level Security", description:
"Your data is encrypted and protected with enterprise-grade security" "Your data is encrypted and protected with enterprise-grade security"},
},
{ {
icon: Smartphone, icon: Smartphone,
title: "Mobile App", description: "Manage finances on the go with full-featured iOS and Android apps" title: "Mobile App", description: "Manage finances on the go with full-featured iOS and Android apps"},
},
{ {
icon: Share2, icon: Share2,
title: "Easy Sharing", description: "Share budgets and goals with family members securely" title: "Easy Sharing", description: "Share budgets and goals with family members securely"},
},
{ {
icon: Download, icon: Download,
title: "Data Export", description: title: "Data Export", description:
"Export reports in PDF, CSV, or connect to other financial tools" "Export reports in PDF, CSV, or connect to other financial tools"},
},
]} ]}
/> />
</div> </div>
@@ -238,11 +223,9 @@ export default function HomePage() {
description="We built FinControl because managing personal finances shouldn't require a spreadsheet degree. Our mission is to make financial control intuitive, actionable, and empowering for everyone." description="We built FinControl because managing personal finances shouldn't require a spreadsheet degree. Our mission is to make financial control intuitive, actionable, and empowering for everyone."
metrics={[ metrics={[
{ {
value: "500K+", title: "Active Users Trusting FinControl" value: "500K+", title: "Active Users Trusting FinControl"},
},
{ {
value: "$2.3B", title: "Total Money Managed on Platform" value: "$2.3B", title: "Total Money Managed on Platform"},
},
]} ]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APLXeHKJqU2feMDf1tonz33lP0/modern-fintech-office-environment-with-d-1772913906315-938ec239.png" imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APLXeHKJqU2feMDf1tonz33lP0/modern-fintech-office-environment-with-d-1772913906315-938ec239.png"
imageAlt="FinControl team working on financial platform" imageAlt="FinControl team working on financial platform"
@@ -266,33 +249,27 @@ export default function HomePage() {
{ {
id: "1", name: "Sarah Johnson", handle: "@sarahj_finance", testimonial: id: "1", name: "Sarah Johnson", handle: "@sarahj_finance", testimonial:
"FinControl completely transformed how I manage money. Finally see exactly where my cash goes every month. Game changer!", imageSrc: "FinControl completely transformed how I manage money. Finally see exactly where my cash goes every month. Game changer!", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APLXeHKJqU2feMDf1tonz33lP0/professional-headshot-photo-of-a-35-year-1772913907000-91fdb825.png", imageAlt: "Sarah Johnson" "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APLXeHKJqU2feMDf1tonz33lP0/professional-headshot-photo-of-a-35-year-1772913907000-91fdb825.png", imageAlt: "Sarah Johnson"},
},
{ {
id: "2", name: "Michael Chen", handle: "@mike_fintech", testimonial: id: "2", name: "Michael Chen", handle: "@mike_fintech", testimonial:
"The budget tracking features are incredible. Saved me thousands by catching overspending patterns I never noticed before.", imageSrc: "The budget tracking features are incredible. Saved me thousands by catching overspending patterns I never noticed before.", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APLXeHKJqU2feMDf1tonz33lP0/professional-headshot-of-a-40-year-old-m-1772913906975-cdb9bd88.png", imageAlt: "Michael Chen" "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APLXeHKJqU2feMDf1tonz33lP0/professional-headshot-of-a-40-year-old-m-1772913906975-cdb9bd88.png", imageAlt: "Michael Chen"},
},
{ {
id: "3", name: "Emily Rodriguez", handle: "@emily_saves", testimonial: id: "3", name: "Emily Rodriguez", handle: "@emily_saves", testimonial:
"Love the goal tracking. Watching progress toward my emergency fund feels so motivating. Best finance app I've used.", imageSrc: "Love the goal tracking. Watching progress toward my emergency fund feels so motivating. Best finance app I've used.", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APLXeHKJqU2feMDf1tonz33lP0/professional-headshot-of-a-32-year-old-w-1772913906571-32a6e8e6.png", imageAlt: "Emily Rodriguez" "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APLXeHKJqU2feMDf1tonz33lP0/professional-headshot-of-a-32-year-old-w-1772913906571-32a6e8e6.png", imageAlt: "Emily Rodriguez"},
},
{ {
id: "4", name: "David Kim", handle: "@david_ventures", testimonial: id: "4", name: "David Kim", handle: "@david_ventures", testimonial:
"The analytics dashboard is professional-grade. Perfect for serious budgeters who want real insights into spending.", imageSrc: "The analytics dashboard is professional-grade. Perfect for serious budgeters who want real insights into spending.", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APLXeHKJqU2feMDf1tonz33lP0/professional-headshot-of-a-45-year-old-m-1772913905916-62fd7907.png", imageAlt: "David Kim" "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APLXeHKJqU2feMDf1tonz33lP0/professional-headshot-of-a-45-year-old-m-1772913905916-62fd7907.png", imageAlt: "David Kim"},
},
{ {
id: "5", name: "Jessica Adams", handle: "@jess_budget", testimonial: id: "5", name: "Jessica Adams", handle: "@jess_budget", testimonial:
"User interface is intuitive and beautiful. Managing multiple accounts has never been easier. Highly recommend!", imageSrc: "User interface is intuitive and beautiful. Managing multiple accounts has never been easier. Highly recommend!", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APLXeHKJqU2feMDf1tonz33lP0/professional-headshot-of-a-28-year-old-w-1772913907021-3da338eb.png", imageAlt: "Jessica Adams" "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APLXeHKJqU2feMDf1tonz33lP0/professional-headshot-of-a-28-year-old-w-1772913907021-3da338eb.png", imageAlt: "Jessica Adams"},
},
{ {
id: "6", name: "Thomas Wells", handle: "@tom_finance", testimonial: id: "6", name: "Thomas Wells", handle: "@tom_finance", testimonial:
"The mobile app is seamless. Control my finances anytime, anywhere. This is the future of personal finance apps.", imageSrc: "The mobile app is seamless. Control my finances anytime, anywhere. This is the future of personal finance apps.", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APLXeHKJqU2feMDf1tonz33lP0/professional-headshot-of-a-38-year-old-m-1772913908103-f534366b.png", imageAlt: "Thomas Wells" "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APLXeHKJqU2feMDf1tonz33lP0/professional-headshot-of-a-38-year-old-m-1772913908103-f534366b.png", imageAlt: "Thomas Wells"},
},
]} ]}
speed={40} speed={40}
/> />
@@ -315,8 +292,7 @@ export default function HomePage() {
{ text: "Learn More", href: "#" }, { text: "Learn More", href: "#" },
], ],
features: [ features: [
"Up to 5 accounts", "Basic transaction tracking", "Monthly budget creation", "Mobile app access", "Email support" "Up to 5 accounts", "Basic transaction tracking", "Monthly budget creation", "Mobile app access", "Email support"],
],
}, },
{ {
id: "2", badge: "Most Popular", badgeIcon: Sparkles, id: "2", badge: "Most Popular", badgeIcon: Sparkles,
@@ -325,8 +301,7 @@ export default function HomePage() {
{ text: "Chat to Sales", href: "#" }, { text: "Chat to Sales", href: "#" },
], ],
features: [ features: [
"Unlimited accounts", "Advanced analytics", "Goal tracking system", "Spending insights & alerts", "Bill reminders", "Priority support", "PDF reports export" "Unlimited accounts", "Advanced analytics", "Goal tracking system", "Spending insights & alerts", "Bill reminders", "Priority support", "PDF reports export"],
],
}, },
{ {
id: "3", price: "$19.99/mo", name: "Premium Plan", buttons: [ id: "3", price: "$19.99/mo", name: "Premium Plan", buttons: [
@@ -334,8 +309,7 @@ export default function HomePage() {
{ text: "Chat to Sales", href: "#" }, { text: "Chat to Sales", href: "#" },
], ],
features: [ features: [
"Everything in Pro", "Investment tracking", "Tax preparation reports", "Multi-user access", "API access", "24/7 Phone support", "Custom integrations", "Dedicated account manager" "Everything in Pro", "Investment tracking", "Tax preparation reports", "Multi-user access", "API access", "24/7 Phone support", "Custom integrations", "Dedicated account manager"],
],
}, },
]} ]}
carouselMode="buttons" carouselMode="buttons"
@@ -356,36 +330,28 @@ export default function HomePage() {
faqs={[ faqs={[
{ {
id: "1", title: "Is FinControl secure?", content: id: "1", title: "Is FinControl secure?", content:
"Yes, absolutely. FinControl uses industry-standard 256-bit encryption for all data transmission and storage. We never access your bank login credentials—we use secure API connections only. All servers are certified for financial-grade security compliance." "Yes, absolutely. FinControl uses industry-standard 256-bit encryption for all data transmission and storage. We never access your bank login credentials—we use secure API connections only. All servers are certified for financial-grade security compliance."},
},
{ {
id: "2", title: "Which banks are supported?", content: id: "2", title: "Which banks are supported?", content:
"FinControl connects with 12,000+ financial institutions worldwide, including all major banks. We use secure, read-only API connections that can't move money or make changes to your accounts." "FinControl connects with 12,000+ financial institutions worldwide, including all major banks. We use secure, read-only API connections that can't move money or make changes to your accounts."},
},
{ {
id: "3", title: "Can I share my budget with family?", content: id: "3", title: "Can I share my budget with family?", content:
"Yes! Pro and Premium plans include shared budgets. You can invite family members to view and collaborate on budget planning with full permission controls." "Yes! Pro and Premium plans include shared budgets. You can invite family members to view and collaborate on budget planning with full permission controls."},
},
{ {
id: "4", title: "What if I need to export my data?", content: id: "4", title: "What if I need to export my data?", content:
"You can export all your financial data anytime as PDF reports (Pro+) or CSV files (Premium). No lock-in—your data belongs to you." "You can export all your financial data anytime as PDF reports (Pro+) or CSV files (Premium). No lock-in—your data belongs to you."},
},
{ {
id: "5", title: "Is there a free trial?", content: id: "5", title: "Is there a free trial?", content:
"Yes! The Starter plan is completely free with full features. Pro and Premium plans offer a 30-day free trial with no credit card required." "Yes! The Starter plan is completely free with full features. Pro and Premium plans offer a 30-day free trial with no credit card required."},
},
{ {
id: "6", title: "How do I cancel my subscription?", content: id: "6", title: "How do I cancel my subscription?", content:
"Cancel anytime from your settings with one click. No questions asked, no penalties. Your data remains in your free account indefinitely." "Cancel anytime from your settings with one click. No questions asked, no penalties. Your data remains in your free account indefinitely."},
},
{ {
id: "7", title: "Can I use FinControl offline?", content: id: "7", title: "Can I use FinControl offline?", content:
"The web app requires internet, but our mobile apps cache recent data. You can view recent transactions and budgets offline on iOS and Android." "The web app requires internet, but our mobile apps cache recent data. You can view recent transactions and budgets offline on iOS and Android."},
},
{ {
id: "8", title: "What payment methods do you accept?", content: id: "8", title: "What payment methods do you accept?", content:
"We accept all major credit cards, debit cards, and PayPal. Billing is monthly or annual with the annual option giving you 2 months free." "We accept all major credit cards, debit cards, and PayPal. Billing is monthly or annual with the annual option giving you 2 months free."},
},
]} ]}
/> />
</div> </div>
@@ -395,7 +361,7 @@ export default function HomePage() {
<ContactCTA <ContactCTA
tag="Ready to Take Control?" tag="Ready to Take Control?"
tagIcon={Rocket} tagIcon={Rocket}
title="Take Control of Your Money in Minutes" title="Start Your Financial Journey Today"
description="Join thousands of users already managing their money smarter. Get started free and experience the difference." description="Join thousands of users already managing their money smarter. Get started free and experience the difference."
buttons={[ buttons={[
{ text: "Start Free Trial", href: "#" }, { text: "Start Free Trial", href: "#" },