{% extends "base.html" %}

{% block content %}
<div style="text-align: center; padding: 4rem 0;">
    <h1
        style="font-size: 3.5rem; margin-bottom: 1rem; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
        {{ _('Secure Your Digital Assets') }}
    </h1>
    <p style="font-size: 1.2rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto 2rem;">
        {{ _('Advanced vulnerability scanning and security analysis platform.') }}
        {{ _('Detect threats before they become breaches.') }}
    </p>
    <div style="display: flex; gap: 20px; justify-content: center;">
        <a href="{{ url_for('auth.register') }}" class="btn btn-primary">{{ _('Start Free Scan') }}</a>
        <a href="{{ url_for('auth.login') }}" class="btn btn-outline">{{ _('Member Login') }}</a>
    </div>
</div>

<div class="dashboard-grid" style="margin-top: 4rem;">
    <div class="card">
        <h3>{{ _('Real-time Analysis') }}</h3>
        <p style="color: var(--text-secondary); margin-top: 10px;">{{ _('Instant vulnerability detection with our
            advanced scanning engine.') }}</p>
    </div>
    <div class="card">
        <h3>{{ _('Comprehensive Reports') }}</h3>
        <p style="color: var(--text-secondary); margin-top: 10px;">{{ _('Detailed breakdowns of potential security flaws
            and remediation steps.') }}</p>
    </div>
    <div class="card">
        <h3>{{ _('Tiered Access') }}</h3>
        <p style="color: var(--text-secondary); margin-top: 10px;">{{ _('Free plan for essential checks, Pro plan for
            unlimited deep scanning.') }}</p>
    </div>
</div>
{% endblock %}