| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>FinTrack - Personal Finance Management</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <style> |
| .hero-gradient { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .feature-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .demo-container { |
| background-color: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-200"> |
| |
| <nav class="bg-white dark:bg-gray-800 shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i data-feather="dollar-sign" class="h-8 w-8 text-indigo-600 dark:text-indigo-400"></i> |
| <span class="ml-2 text-xl font-bold text-gray-900 dark:text-white">FinTrack</span> |
| </div> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
| <a href="#features" class="text-gray-900 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 px-3 py-2 text-sm font-medium">Features</a> |
| <a href="#demo" class="text-gray-900 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 px-3 py-2 text-sm font-medium">Demo</a> |
| <a href="#pricing" class="text-gray-900 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 px-3 py-2 text-sm font-medium">Pricing</a> |
| <a href="/login" class="text-gray-900 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 px-3 py-2 text-sm font-medium">Login</a> |
| <a href="/signup" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Sign up free</a> |
| </div> |
| <div class="-mr-2 flex items-center md:hidden"> |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false"> |
| <span class="sr-only">Open main menu</span> |
| <i data-feather="menu" class="block h-6 w-6"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="hero-gradient text-white pt-20 pb-40"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8"> |
| <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center"> |
| <div> |
| <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl"> |
| <span class="block">Take control of</span> |
| <span class="block text-indigo-200">your finances</span> |
| </h1> |
| <p class="mt-3 text-base text-indigo-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> |
| FinTrack helps you track expenses, manage budgets, and visualize your financial health in one beautiful interface. |
| </p> |
| <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> |
| <div class="rounded-md shadow"> |
| <a href="/signup" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> |
| Get started |
| </a> |
| </div> |
| <div class="mt-3 rounded-md shadow"> |
| <a href="#demo" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10"> |
| Live demo |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center"> |
| <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md"> |
| <div class="demo-container relative w-full h-96 rounded-lg overflow-hidden"> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="text-center p-6"> |
| <i data-feather="bar-chart-2" class="h-16 w-16 text-white mx-auto"></i> |
| <h3 class="mt-4 text-xl font-medium text-white">Interactive Dashboard</h3> |
| <p class="mt-2 text-indigo-100">Visualize your income and expenses with beautiful charts</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="features" class="py-12 bg-white dark:bg-gray-900"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:text-center"> |
| <h2 class="text-base text-indigo-600 dark:text-indigo-400 font-semibold tracking-wide uppercase">Features</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl"> |
| Everything you need to manage your money |
| </p> |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto"> |
| FinTrack provides powerful tools to help you understand and improve your financial health. |
| </p> |
| </div> |
|
|
| <div class="mt-10"> |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> |
| |
| <div class="feature-card relative transition-all duration-300 ease-in-out p-6 rounded-lg border border-gray-200 dark:border-gray-700"> |
| <div class="absolute -top-6 left-6 flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
| <i data-feather="dollar-sign"></i> |
| </div> |
| <h3 class="mt-6 text-lg leading-6 font-medium text-gray-900 dark:text-white">Expense Tracking</h3> |
| <p class="mt-2 text-base text-gray-500 dark:text-gray-400"> |
| Easily record and categorize your expenses. Set budgets and get alerts when you're overspending. |
| </p> |
| </div> |
|
|
| |
| <div class="feature-card relative transition-all duration-300 ease-in-out p-6 rounded-lg border border-gray-200 dark:border-gray-700"> |
| <div class="absolute -top-6 left-6 flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
| <i data-feather="trending-up"></i> |
| </div> |
| <h3 class="mt-6 text-lg leading-6 font-medium text-gray-900 dark:text-white">Income Management</h3> |
| <p class="mt-2 text-base text-gray-500 dark:text-gray-400"> |
| Track all your income sources in one place. Visualize your earnings over time. |
| </p> |
| </div> |
|
|
| |
| <div class="feature-card relative transition-all duration-300 ease-in-out p-6 rounded-lg border border-gray-200 dark:border-gray-700"> |
| <div class="absolute -top-6 left-6 flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
| <i data-feather="pie-chart"></i> |
| </div> |
| <h3 class="mt-6 text-lg leading-6 font-medium text-gray-900 dark:text-white">Visual Reports</h3> |
| <p class="mt-2 text-base text-gray-500 dark:text-gray-400"> |
| Beautiful charts and graphs to help you understand your spending patterns. |
| </p> |
| </div> |
|
|
| |
| <div class="feature-card relative transition-all duration-300 ease-in-out p-6 rounded-lg border border-gray-200 dark:border-gray-700"> |
| <div class="absolute -top-6 left-6 flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
| <i data-feather="upload"></i> |
| </div> |
| <h3 class="mt-6 text-lg leading-6 font-medium text-gray-900 dark:text-white">CSV Import</h3> |
| <p class="mt-2 text-base text-gray-500 dark:text-gray-400"> |
| Import transactions from your bank. We automatically detect and prevent duplicates. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="demo" class="py-12 bg-gray-50 dark:bg-gray-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:text-center mb-12"> |
| <h2 class="text-base text-indigo-600 dark:text-indigo-400 font-semibold tracking-wide uppercase">Try it out</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl"> |
| Interactive Demo |
| </p> |
| </div> |
|
|
| <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden"> |
| <div class="p-6"> |
| <div class="flex flex-col md:flex-row gap-6"> |
| |
| <div class="w-full md:w-1/3"> |
| <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Add a transaction</h3> |
| <div class="space-y-4"> |
| <div> |
| <label for="type" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Type</label> |
| <select id="type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> |
| <option>Expense</option> |
| <option>Income</option> |
| <option>Transfer</option> |
| </select> |
| </div> |
| <div> |
| <label for="amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Amount</label> |
| <input type="number" id="amount" class="mt-1 block w-full shadow-sm sm:text-sm border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded-md focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| <div> |
| <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category</label> |
| <select id="category" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> |
| <option>Food & Dining</option> |
| <option>Transportation</option> |
| <option>Entertainment</option> |
| <option>Shopping</option> |
| <option>Salary</option> |
| </select> |
| </div> |
| <div> |
| <label for="account" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Account</label> |
| <select id="account" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> |
| <option>Cash</option> |
| <option>Bank Account</option> |
| <option>Credit Card</option> |
| </select> |
| </div> |
| <button type="button" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
| Add Transaction |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="w-full md:w-2/3"> |
| <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Your Finances</h3> |
| <div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg"> |
| <canvas id="demoChart" height="300"></canvas> |
| </div> |
| <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2"> |
| <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg"> |
| <div class="px-4 py-5 sm:p-6"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> |
| <i data-feather="arrow-down" class="h-6 w-6 text-white"></i> |
| </div> |
| <div class="ml-5 w-0 flex-1"> |
| <dl> |
| <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Total Income</dt> |
| <dd class="flex items-baseline"> |
| <div class="text-2xl font-semibold text-gray-900 dark:text-white">$4,230</div> |
| </dd> |
| </dl> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg"> |
| <div class="px-4 py-5 sm:p-6"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 bg-red-500 rounded-md p-3"> |
| <i data-feather="arrow-up" class="h-6 w-6 text-white"></i> |
| </div> |
| <div class="ml-5 w-0 flex-1"> |
| <dl> |
| <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Total Expenses</dt> |
| <dd class="flex items-baseline"> |
| <div class="text-2xl font-semibold text-gray-900 dark:text-white">$2,190</div> |
| </dd> |
| </dl> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-indigo-700"> |
| <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8"> |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> |
| <span class="block">Ready to take control of your finances?</span> |
| <span class="block">Start using FinTrack today.</span> |
| </h2> |
| <p class="mt-4 text-lg leading-6 text-indigo-200"> |
| Join thousands of users who are already managing their money better with our simple yet powerful tools. |
| </p> |
| <a href="/signup" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto"> |
| Sign up for free |
| </a> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-white dark:bg-gray-900"> |
| <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8"> |
| <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer"> |
| <div class="px-5 py-2"> |
| <a href="#" class="text-base text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"> |
| About |
| </a> |
| </div> |
| <div class="px-5 py-2"> |
| <a href="#" class="text-base text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"> |
| Blog |
| </a> |
| </div> |
| <div class="px-5 py-2"> |
| <a href="#" class="text-base text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"> |
| Privacy |
| </a> |
| </div> |
| <div class="px-5 py-2"> |
| <a href="#" class="text-base text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"> |
| Terms |
| </a> |
| </div> |
| <div class="px-5 py-2"> |
| <a href="#" class="text-base text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"> |
| Contact |
| </a> |
| </div> |
| </nav> |
| <div class="mt-8 flex justify-center space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-gray-500"> |
| <span class="sr-only">Facebook</span> |
| <i data-feather="facebook"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-gray-500"> |
| <span class="sr-only">Twitter</span> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-gray-500"> |
| <span class="sr-only">GitHub</span> |
| <i data-feather="github"></i> |
| </a> |
| </div> |
| <p class="mt-8 text-center text-base text-gray-400 dark:text-gray-500"> |
| © 2023 FinTrack. All rights reserved. |
| </p> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| AOS.init({ |
| duration: 800, |
| easing: 'ease-in-out', |
| once: true |
| }); |
| |
| |
| feather.replace(); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const ctx = document.getElementById('demoChart').getContext('2d'); |
| const demoChart = new Chart(ctx, { |
| type: 'bar', |
| data: { |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], |
| datasets: [ |
| { |
| label: 'Income', |
| data: [1200, 1900, 1500, 2000, 1800, 2200], |
| backgroundColor: '#4f46e5', |
| borderRadius: 4 |
| }, |
| { |
| label: 'Expenses', |
| data: [800, 1200, 1000, 1400, 1100, 1500], |
| backgroundColor: '#ef4444', |
| borderRadius: 4 |
| } |
| ] |
| }, |
| options: { |
| responsive: true, |
| plugins: { |
| legend: { |
| position: 'top', |
| }, |
| title: { |
| display: true, |
| text: 'Monthly Income vs Expenses' |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true |
| } |
| } |
| } |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
