{% extends 'base.html' %}

{% block title %}FinSight - Smarter Financial Decisions{% endblock %}

{% block mystyle %}

{% endblock %}

{% block content %}

<!-- Hero Section -->
<div class="container1 text-center py-5">
    <div class="d-flex flex-column justify-content-center align-items-center h-100">
        <h1 class="display-4 font-weight-bold" data-aos="fade-up">Welcome to FinSight</h1>
        <p class="lead mt-3" data-aos="fade-up" data-aos-delay="300">Your comprehensive personal finance ledger system. Track, analyze, and optimize your finances effortlessly.</p>
        <a href="/login" class="btn btn-primary btn-md mt-4" data-aos="fade-up" data-aos-delay="600">Start for Free</a>
    </div>
</div>

<div class="breaker17"></div>

<!-- Core Purpose Section -->
<div class="container2 text-center py-5">
    <h2 class="font-weight-bold mb-4" data-aos="fade-up">Why Choose FinSight?</h2>
    <p class="mb-5" data-aos="fade-up" data-aos-delay="300">Empowering smarter financial decisions, mitigating risks, and providing financial clarity for your future.</p>
    <div class="row justify-content-center">
        <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="500">
            <div class="icon-box p-4 rounded shadow-sm">
                <i class="fas fa-shield-alt fa-4x text-primary mb-3"></i>
                <h4>Risk Mitigation</h4>
                <p>Plan ahead and avoid financial pitfalls with our powerful risk management tools.</p>
            </div>
        </div>
        <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="700">
            <div class="icon-box p-4 rounded shadow-sm">
                <i class="fas fa-chart-line fa-4x text-success mb-3"></i>
                <h4>Improved Decisions</h4>
                <p>Get actionable insights and recommendations to improve your financial outcomes.</p>
            </div>
        </div>
        <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="900">
            <div class="icon-box p-4 rounded shadow-sm">
                <i class="fas fa-search-dollar fa-4x text-info mb-3"></i>
                <h4>Financial Clarity</h4>
                <p>Visualize your assets, liabilities, and cash flow with ease for better decision-making.</p>
            </div>
        </div>
    </div>
</div>

<div class="breaker213"></div>

<!-- Key Features Section -->
<div class="container1 text-center py-5">
    <h2 class="font-weight-bold mb-5" data-aos="fade-up">Key Features</h2>
    <div class="row justify-content-center gy-4">
        <div class="col-md-5" data-aos="fade-up" data-aos-delay="300">
             <p>With FinSight, you can easily visualize and manage your finances in a simple yet powerful dashboard. Make informed decisions to boost your financial health.</p>
            <ul class="list-group list-group-flush">
                <li class="list-group-item"><i class="fas fa-check text-success me-3"></i> Lend & Borrow Tracking</li>
                <li class="list-group-item"><i class="fas fa-check text-success me-3"></i> Debit & Credit Management</li>
                <li class="list-group-item"><i class="fas fa-check text-success me-3"></i> Asset & Investment Tracking</li>
                <li class="list-group-item"><i class="fas fa-check text-success me-3"></i> Risk Analysis & Insights</li>
                <li class="list-group-item"><i class="fas fa-check text-success me-3"></i> Budgeting & Goal Setting</li>
                <li class="list-group-item"><i class="fas fa-check text-success me-3"></i> Financial Reporting</li>
                <li class="list-group-item"><i class="fas fa-check text-success me-3"></i> Automated Expense Tracking</li>
                <li class="list-group-item"><i class="fas fa-check text-success me-3"></i> Customizable Financial Dashboards</li>
                <li class="list-group-item"><i class="fas fa-check text-success me-3"></i> Tax Preparation & Reporting</li>
                <li class="list-group-item"><i class="fas fa-check text-success me-3"></i> Real-Time Data Syncing</li>
            </ul>
        </div>
        <div class="col-md-7" data-aos="fade-up" data-aos-delay="500">
            <img src="{{ url_for('static', filename='images/dashboard.jpg') }}" alt="FinSight Dashboard" class="img-fluid rounded">
        </div>
    </div>
</div>

<div class="breaker113"></div>

<!-- Testimonials Section -->
<div class="container2 text-center py-5">
    <h2 class="font-weight-bold mb-4" data-aos="fade-up">What Our Users Say</h2>
    <div class="row">
        <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="300">
            <div class="card shadow-lg border-0 rounded">
                <div class="card-body">
                    <p>"FinSight helped me track my expenses and investments seamlessly. The insights are incredibly useful!"</p>
                    <h5 class="card-title">- Sarah L.</h5>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="500">
            <div class="card shadow-lg border-0 rounded">
                <div class="card-body">
                    <p>"The simplicity and depth of features make it incredibly easy to manage my finances. I love it!"</p>
                    <h5 class="card-title">- James R.</h5>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="700">
            <div class="card shadow-lg border-0 rounded">
                <div class="card-body">
                    <p>"The risk management tools saved me from financial mistakes. It’s like having a financial advisor in my pocket!"</p>
                    <h5 class="card-title">- Priya M.</h5>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- If last container is 1 -->
<div class="breaker46"></div>

{% endblock %}