{% extends 'base.html' %}

{% block title %}Smart Accounting - Cloud Accounting Software{% endblock %}

{% block content %}
<div class="container-fluid hero-section">
    <div class="container">
        <div class="row align-items-center" style="min-height: 80vh;">
            <div class="col-md-6">
                <h1 class="display-3 fw-bold">Effortless Accounting for Your Business</h1>
                <p class="lead my-4">Smart Accounting is a simple, beautiful, and powerful cloud accounting solution designed for modern businesses.</p>
                <a href="#" class="btn btn-primary btn-lg me-2">Get Started for Free</a>
                <a href="#" class="btn btn-outline-secondary btn-lg">Learn More</a>
            </div>
            <div class="col-md-6 text-center">
                <div class="invoice-teaser-card">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="mb-0">New Invoice</h5>
                        <span class="badge bg-success-soft">Paid</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span>Client:</span>
                        <strong>Innovate Corp.</strong>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span>Amount:</span>
                        <strong class="text-success">$1,250.00</strong>
                    </div>
                    <div class="progress" style="height: 5px;">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container my-5 py-5">
    <div class="row text-center">
        <div class="col-md-4">
            <div class="feature-card">
                <div class="icon-circle bg-primary-soft mb-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                </div>
                <h4>Invoicing</h4>
                <p>Create and send professional invoices in seconds.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="feature-card">
                <div class="icon-circle bg-secondary-soft mb-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-up"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
                </div>
                <h4>Expense Tracking</h4>
                <p>Track your expenses and never miss a deduction.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="feature-card">
                <div class="icon-circle bg-accent-soft mb-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart"><path d="M21.21 15.89A10 10 0 1 1 8.11 2.99"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
                </div>
                <h4>Reporting</h4>
                <p>Generate insightful financial reports with a single click.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}
