Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| ccb81a7a71 | |||
| f1a7c4f899 |
@@ -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 (
|
||||
<div>
|
||||
<h1>Alerts</h1>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div>
|
||||
<h1>Calendar</h1>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<div>
|
||||
<h1>Subscriptions</h1>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -78,8 +78,8 @@ export default function HomePage() {
|
||||
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."
|
||||
buttons={[
|
||||
{ text: "View Dashboard", href: "#" },
|
||||
{ text: "Start Free Trial", href: "#" },
|
||||
{ text: "Get Started Free", href: "#" },
|
||||
{ text: "View Demo", href: "#" },
|
||||
]}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
dashboard={{
|
||||
|
||||
Reference in New Issue
Block a user