{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container">
    <div class="hero-section rounded mb-4 p-5 text-center">
        <h1 class="display-4">Welcome to ChatApp</h1>
        <p class="lead mb-4">A modern real-time chat application for seamless communication.</p>
        
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
            <a href="/register" class="btn btn-light btn-lg px-4 gap-3">Get Started</a>
            <a href="/login" class="btn btn-outline-light btn-lg px-4">Login</a>
        </div>
    </div>

    <div class="row g-4 py-4">
        <div class="col-md-4">
            <div class="card feature-card h-100">
                <div class="card-body">
                    <h5 class="card-title">Real-time Chat</h5>
                    <p class="card-text">Instant messaging with WebSocket technology</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card feature-card h-100">
                <div class="card-body">
                    <h5 class="card-title">Secure</h5>
                    <p class="card-text">End-to-end encryption for your privacy</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card feature-card h-100">
                <div class="card-body">
                    <h5 class="card-title">User Friendly</h5>
                    <p class="card-text">Modern interface for the best experience</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}