{% extends "base.html" %}

{% block title %}Stick - Use-Case Oriented Rust Web Template{% endblock %}

{% block content %}
<div class="grow flex items-center justify-center py-20 px-4">
    <div class="max-w-4xl w-full text-center">
        <!-- Badge -->
        <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium bg-sky-500/10 text-sky-400 border border-sky-500/20 mb-6">
            <span class="w-1.5 h-1.5 rounded-full bg-sky-400 animate-pulse"></span>
            Axum 0.8 + MongoDB v3 + Askama 0.16
        </span>
        
        <!-- Hero Title -->
        <h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight mb-6 text-slate-100 leading-none">
            Clean, Use-Case Centric <br class="hidden sm:inline">
            <span class="text-indigo-500">Rust Web Development</span>
        </h1>
        
        <!-- Subtitle -->
        <p class="text-lg text-slate-400 max-w-2xl mx-auto mb-10 leading-relaxed">
            A production-ready template organized around vertical features. Auth, databases, and domain logic are grouped together by use-case for high maintainability.
        </p>

        <!-- CTA Buttons -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
            {% if authenticated %}
                <a href="/tasks" class="px-8 py-4 rounded-2xl bg-indigo-600 hover:bg-indigo-500 transition font-semibold text-white shadow-xl shadow-indigo-600/10 hover:shadow-indigo-600/20 scale-100 hover:scale-[1.02] transform duration-200">
                    Go to Tasks Dashboard
                </a>
            {% else %}
                <a href="/auth/register" class="px-8 py-4 rounded-2xl bg-indigo-600 hover:bg-indigo-500 transition font-semibold text-white shadow-xl shadow-indigo-600/10 hover:shadow-indigo-600/20 scale-100 hover:scale-[1.02] transform duration-200">
                    Get Started Free
                </a>
                <a href="/auth/login" class="px-8 py-4 rounded-2xl bg-slate-900/60 hover:bg-slate-900 border border-slate-800 hover:border-slate-700 transition font-semibold text-slate-200 scale-100 hover:scale-[1.02] transform duration-200">
                    Sign In
                </a>
            {% endif %}
        </div>

        <!-- Features Grid -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-left">
            <div class="bg-slate-900/40 border border-slate-900 hover:border-slate-800 rounded-2xl p-6 hover:bg-slate-900/60 transition duration-300">
                <div class="w-10 h-10 rounded-lg bg-sky-500/10 border border-sky-500/20 flex items-center justify-center text-sky-400 mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
                    </svg>
                </div>
                <h3 class="text-base font-semibold text-slate-200 mb-2">Type-Safe Views</h3>
                <p class="text-sm text-slate-400 leading-relaxed">Askama renders templates compiled directly into Rust code, catching missing arguments or syntax bugs at compile time.</p>
            </div>
            
            <div class="bg-slate-900/40 border border-slate-900 hover:border-slate-800 rounded-2xl p-6 hover:bg-slate-900/60 transition duration-300">
                <div class="w-10 h-10 rounded-lg bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center text-indigo-400 mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
                    </svg>
                </div>
                <h3 class="text-base font-semibold text-slate-200 mb-2">Secure Authentication</h3>
                <p class="text-sm text-slate-400 leading-relaxed">Built-in JWT session verification, cookie storage, bcrypt password hashing, and custom Axum 0.8 guard extractors.</p>
            </div>

            <div class="bg-slate-900/40 border border-slate-900 hover:border-slate-800 rounded-2xl p-6 hover:bg-slate-900/60 transition duration-300">
                <div class="w-10 h-10 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400 mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z" />
                    </svg>
                </div>
                <h3 class="text-base font-semibold text-slate-200 mb-2">MongoDB Integration</h3>
                <p class="text-sm text-slate-400 leading-relaxed">Seamless BSON v3 mapping, index setups, and type-safe `chrono::DateTime` conversion via `serde_with` serialize helpers.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}