122 lines
6 KiB
HTML
122 lines
6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" class="dark">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>FINA - Personal Finance Manager</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
.material-icons {
|
||
|
|
font-family: 'Material Icons';
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: normal;
|
||
|
|
font-size: 24px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
tailwind.config = {
|
||
|
|
darkMode: 'class'
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body class="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 min-h-screen text-white">
|
||
|
|
<!-- Navigation -->
|
||
|
|
<nav class="bg-slate-800/50 backdrop-blur-sm border-b border-slate-700/50">
|
||
|
|
<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">
|
||
|
|
<span class="text-2xl font-bold text-blue-400">FINA</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center space-x-4">
|
||
|
|
<a href="/auth/login" class="text-slate-300 hover:text-blue-400 transition">Login</a>
|
||
|
|
<a href="/auth/register" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">Get Started</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- Hero Section -->
|
||
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
||
|
|
<div class="text-center">
|
||
|
|
<h1 class="text-5xl font-bold text-white mb-6">
|
||
|
|
Take Control of Your Finances
|
||
|
|
</h1>
|
||
|
|
<p class="text-xl text-slate-300 mb-8 max-w-2xl mx-auto">
|
||
|
|
FINA helps you track expenses, manage budgets, and achieve your financial goals with ease.
|
||
|
|
</p>
|
||
|
|
<div class="flex justify-center space-x-4">
|
||
|
|
<a href="/auth/register" class="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-blue-700 transition shadow-lg shadow-blue-500/50">
|
||
|
|
Start Free
|
||
|
|
</a>
|
||
|
|
<a href="/auth/login" class="bg-slate-700 text-white px-8 py-3 rounded-lg text-lg font-semibold border-2 border-slate-600 hover:bg-slate-600 transition">
|
||
|
|
Sign In
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Features -->
|
||
|
|
<div class="grid md:grid-cols-3 gap-8 mt-20">
|
||
|
|
<div class="bg-slate-800/50 backdrop-blur-sm p-8 rounded-xl border border-slate-700/50 hover:border-blue-500/50 transition">
|
||
|
|
<span class="material-icons text-blue-400 text-5xl mb-4">account_balance_wallet</span>
|
||
|
|
<h3 class="text-2xl font-bold mb-3 text-white">Track Expenses</h3>
|
||
|
|
<p class="text-slate-300">Monitor your spending habits and categorize expenses effortlessly.</p>
|
||
|
|
</div>
|
||
|
|
<div class="bg-slate-800/50 backdrop-blur-sm p-8 rounded-xl border border-slate-700/50 hover:border-blue-500/50 transition">
|
||
|
|
<span class="material-icons text-blue-400 text-5xl mb-4">insights</span>
|
||
|
|
<h3 class="text-2xl font-bold mb-3 text-white">Visual Reports</h3>
|
||
|
|
<p class="text-slate-300">Get insights with beautiful charts and detailed financial reports.</p>
|
||
|
|
</div>
|
||
|
|
<div class="bg-slate-800/50 backdrop-blur-sm p-8 rounded-xl border border-slate-700/50 hover:border-blue-500/50 transition">
|
||
|
|
<span class="material-icons text-blue-400 text-5xl mb-4">description</span>
|
||
|
|
<h3 class="text-2xl font-bold mb-3 text-white">Document Management</h3>
|
||
|
|
<p class="text-slate-300">Store and organize receipts and financial documents securely.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Additional Features -->
|
||
|
|
<div class="mt-16 bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700/50 p-8">
|
||
|
|
<h2 class="text-3xl font-bold text-center mb-8 text-white">Why Choose FINA?</h2>
|
||
|
|
<div class="grid md:grid-cols-2 gap-6">
|
||
|
|
<div class="flex items-start space-x-3">
|
||
|
|
<span class="material-icons text-green-400">check_circle</span>
|
||
|
|
<div>
|
||
|
|
<h4 class="font-semibold text-white">Secure & Private</h4>
|
||
|
|
<p class="text-slate-300">Your financial data is encrypted and protected with 2FA.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-start space-x-3">
|
||
|
|
<span class="material-icons text-green-400">check_circle</span>
|
||
|
|
<div>
|
||
|
|
<h4 class="font-semibold text-white">Easy to Use</h4>
|
||
|
|
<p class="text-slate-300">Intuitive interface designed for everyone.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-start space-x-3">
|
||
|
|
<span class="material-icons text-green-400">check_circle</span>
|
||
|
|
<div>
|
||
|
|
<h4 class="font-semibold text-white">Mobile Ready</h4>
|
||
|
|
<p class="text-slate-300">Access your finances from any device, anywhere.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-start space-x-3">
|
||
|
|
<span class="material-icons text-green-400">check_circle</span>
|
||
|
|
<div>
|
||
|
|
<h4 class="font-semibold text-white">Free to Use</h4>
|
||
|
|
<p class="text-slate-300">No hidden fees, completely free personal finance management.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
<footer class="bg-slate-800/50 backdrop-blur-sm mt-20 py-8 border-t border-slate-700/50">
|
||
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-slate-400">
|
||
|
|
<p>© 2025 FINA. All rights reserved.</p>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|