{% extends 'base.html.twig' %}
{% block body %}


    <!-- Hero Section -->
    <section class="container my-5 text-center bg-body-secondary py-4 rounded">
        <div class="row align-items-center">
            <div class="col">
                <h2 class="display-4 fw-bold text-primary">Empower Your Decisions with Data</h2>
                <p class="lead text-muted mt-3">The ultimate platform to visualize, manage, and analyze your data seamlessly.</p>
                <a href="#signup" class="btn btn-lg btn-primary mt-3">Try it Free</a>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="container my-5">
        <h3 class="text-center fw-bold text-primary mb-5">Features You'll Love</h3>
        <div class="row text-center">
            <div class="col-md-4 mb-4">
                <div class="card shadow border-0">
                    <div class="card-body">
                        <i class="bi bi-bar-chart-fill display-6 text-primary"></i>
                        <h5 class="card-title mt-3">Analytics Dashboard</h5>
                        <p class="text-muted">Get insights into your data with comprehensive analytics tools.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card shadow border-0">
                    <div class="card-body">
                        <i class="bi bi-people-fill display-6 text-primary"></i>
                        <h5 class="card-title mt-3">Collaboration</h5>
                        <p class="text-muted">Work with your team seamlessly with real-time collaboration features.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card shadow border-0">
                    <div class="card-body">
                        <i class="bi bi-file-earmark-text-fill display-6 text-primary"></i>
                        <h5 class="card-title mt-3">Custom Reports</h5>
                        <p class="text-muted">Generate customized reports tailored to your needs.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section id="testimonials" class="container my-5 bg-info-subtle rounded py-5">
        <h3 class="text-center fw-bold text-primary mb-5">What Our Users Say</h3>
        <div class="row text-center">
            <div class="col-md-6">
                <blockquote class="blockquote p-4 bg-light rounded shadow-sm">
                    <p class="mb-0">"An indispensable tool for our data-driven team."</p>
                    <footer class="blockquote-footer mt-2">User A, <cite title="Company">Company</cite></footer>
                </blockquote>
            </div>
            <div class="col-md-6">
                <blockquote class="blockquote p-4 bg-light shadow-sm">
                    <p class="mb-0">"Our workflow has never been smoother. A must-have!"</p>
                    <footer class="blockquote-footer mt-2">User B, <cite title="Company">Company</cite></footer>
                </blockquote>
            </div>
        </div>
    </section>

    <!-- Final CTA Section -->
    <section id="signup" class="container text-center my-5 p-5 rounded bg-body-secondary    ">
        <h3 class="display-6 fw-bold">Ready to Get Started?</h3>
        <p class="lead">Sign up today and take control of your data!</p>
        <a href="#signup" class="btn btn-lg btn-light mt-3">Get Started for Free</a>
    </section>


{% endblock %}