{% extends "base.html" %}

{% block title %}Welcome to Outline VPN{% endblock %}

{% block content %}
<div class="px-4 py-5 my-5 text-center">
    <h1 class="display-5 fw-bold text-body-emphasis">Welcome to Outline VPN</h1>
    <div class="col-lg-6 mx-auto">
        <p class="lead mb-4">
            Secure, fast, and reliable VPN service for all your needs.
            Access the internet freely and privately with our advanced VPN solution.
        </p>
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
            {% if user and user is not none %}
                <a href="/dashboard" class="btn btn-primary btn-lg px-4 gap-3">Go to Dashboard</a>
            {% else %}
                <a href="/signup" class="btn btn-primary btn-lg px-4 gap-3">Get Started</a>
                <a href="/login" class="btn btn-outline-secondary btn-lg px-4">Sign In</a>
            {% endif %}
        </div>
    </div>
</div>

<div class="container px-4 py-5">
    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
            <div class="card h-100 text-center">
                <div class="card-body">
                    <h5 class="card-title">Secure Connection</h5>
                    <p class="card-text">
                        Military-grade encryption keeps your data safe and private.
                    </p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100 text-center">
                <div class="card-body">
                    <h5 class="card-title">High Speed</h5>
                    <p class="card-text">
                        Optimized servers ensure fast and reliable connections.
                    </p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100 text-center">
                <div class="card-body">
                    <h5 class="card-title">Easy to Use</h5>
                    <p class="card-text">
                        Simple setup and user-friendly interface for all devices.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}