import React, { useState, useEffect } from 'react'; import { Container } from '@/components/ui/container'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Menu, X, DollarSign, TrendingUp, Shield, Users, CreditCard, PieChart, Star, ChevronDown, ChevronUp, Moon, Sun, ArrowRight, Check } from 'lucide-react'; export default function App() { const [isOpen, setIsOpen] = useState(false); const [isDark, setIsDark] = useState(false); const [income, setIncome] = useState('5000'); const [expenses, setExpenses] = useState('3500'); const [savings, setSavings] = useState('1500'); const [openFaq, setOpenFaq] = useState(null); const [budgetResult, setBudgetResult] = useState(0); useEffect(() => { const result = parseFloat(income) - parseFloat(expenses) - parseFloat(savings); setBudgetResult(result); }, [income, expenses, savings]); const toggleDark = () => { setIsDark(!isDark); document.documentElement.classList.toggle('dark'); }; const features = [ { icon: , title: "Smart Budgeting", description: "AI-powered budget recommendations that adapt to your spending habits and financial goals." }, { icon: , title: "Investment Tracking", description: "Monitor your portfolio performance with real-time analytics and personalized insights." }, { icon: , title: "Bank-Level Security", description: "Your financial data is protected with military-grade encryption and security protocols." }, { icon: , title: "Financial Coaching", description: "Get personalized advice from certified financial advisors to reach your goals faster." }, { icon: , title: "Expense Management", description: "Track and categorize expenses automatically with intelligent transaction analysis." }, { icon: , title: "Wealth Analytics", description: "Visualize your financial health with comprehensive charts and performance metrics." } ]; const pricingPlans = [ { name: "Starter", price: "$9", period: "/month", description: "Perfect for individuals getting started", features: [ "Basic budget tracking", "Expense categorization", "Monthly reports", "Mobile app access", "Email support" ] }, { name: "Pro", price: "$19", period: "/month", description: "Advanced features for serious savers", features: [ "Everything in Starter", "Investment tracking", "Financial goal setting", "Advanced analytics", "Priority support", "API access" ], popular: true }, { name: "Enterprise", price: "$49", period: "/month", description: "For teams and organizations", features: [ "Everything in Pro", "Team collaboration", "Custom integrations", "Dedicated account manager", "White-label options", "Advanced security" ] } ]; const testimonials = [ { name: "Sarah Chen", role: "Software Engineer", content: "FinanceFlow transformed how I manage my money. The AI insights helped me save 30% more each month!", avatar: "https://i.pravatar.cc/200?img=1", rating: 5 }, { name: "Marcus Johnson", role: "Small Business Owner", content: "The investment tracking features are incredible. I finally understand my portfolio performance.", avatar: "https://i.pravatar.cc/200?img=5", rating: 5 }, { name: "Elena Rodriguez", role: "Marketing Manager", content: "Love the clean interface and smart budgeting. It's like having a financial advisor in my pocket.", avatar: "https://i.pravatar.cc/200?img=12", rating: 5 } ]; const faqs = [ { question: "How secure is my financial data?", answer: "We use bank-level 256-bit encryption and never store your actual banking credentials. All data is transmitted securely and stored in encrypted format." }, { question: "Can I connect multiple bank accounts?", answer: "Yes! You can connect unlimited bank accounts, credit cards, and investment accounts from over 10,000+ financial institutions." }, { question: "Is there a mobile app available?", answer: "Absolutely! Our mobile app is available for both iOS and Android with full feature parity and real-time synchronization." }, { question: "What if I need help getting started?", answer: "We offer free onboarding sessions with our financial experts, plus 24/7 customer support via chat, email, and phone." }, { question: "Can I cancel my subscription anytime?", answer: "Yes, you can cancel your subscription at any time. No long-term contracts or cancellation fees." } ]; return (

{/* Header */}

FinanceFlow

{isOpen && ( )}

{/* Hero Section */}

Take Control of Your Financial Future

Smart budgeting, investment tracking, and financial insights powered by AI to help you achieve your goals.

{/* Budget Calculator */}

Interactive Budget Calculator

See how much you can save with smart financial planning

Monthly Income

setIncome(e.target.value)} className="pl-10 text-lg" placeholder="5000" />

Monthly Expenses

setExpenses(e.target.value)} className="pl-10 text-lg" placeholder="3500" />

Target Savings

setSavings(e.target.value)} className="pl-10 text-lg" placeholder="1500" />

Remaining Balance

= 0 ? 'text-green-600' : 'text-red-600'}`}> ${budgetResult.toLocaleString()}

{budgetResult >= 0 ? "Great! You're on track with your budget." : "Consider adjusting your expenses or savings goal."}

{/* Features */}

Powerful Features for Financial Success

Everything you need to manage your finances, track investments, and achieve your financial goals.

{features.map((feature, index) => (

{feature.icon}

{feature.title}

{feature.description}

))}

{/* Pricing */}

Simple, Transparent Pricing

Choose the plan that fits your needs. Start free, upgrade when you're ready.

{pricingPlans.map((plan, index) => ( {plan.popular && (

{plan.name}

{plan.description}

{plan.price} {plan.period}

{feature}

))}

{/* Testimonials */}

What Our Users Say

Join thousands of satisfied users who transformed their financial lives with FinanceFlow.

{testimonials.map((testimonial, index) => (

{[...Array(testimonial.rating)].map((_, i) => ( ))}

"{testimonial.content}"

{testimonial.name}

{testimonial.role}

))}

{/* FAQ */}

Frequently Asked Questions

Got questions? We've got answers. Find everything you need to know about FinanceFlow.

{faqs.map((faq, index) => ( {openFaq === index && (

{faq.answer}

)} ))}

{/* CTA */}

Ready to Transform Your Financial Life?

Join over 100,000 users who have already taken control of their finances with FinanceFlow.

{/* Footer */}

); }

Fintech Landing Page with Interactive Calculator