usbcheck.it/partials/landing/dashboard/dashboard.php

<?php
// partials/landing/dashboard/dashboard.php

// Annahme: $currentUser kommt über tpl() aus $GLOBALS (siehe functions.php)
$currentUser = $currentUser ?? ($_SESSION['user'] ?? null);

$firstName = '';
$plan      = 'free';

if (is_array($currentUser)) {
    $firstName = trim((string)($currentUser['first_name'] ?? ''));
    $plan      = (string)($currentUser['plan'] ?? 'free');
}

$planLabel = [
    'free'       => 'Free',
    'pro'        => 'Pro',
    'enterprise' => 'Enterprise',
][$plan] ?? ucfirst($plan ?: 'Free');
?>
<section id="dashboard" class="section-band section-band--soft border-t border-brand-border/60 py-16 sm:py-20">
    <div class="px-4 sm:px-6 lg:px-8">
        <div class="section-shell space-y-10">

        <!-- Begrüßung & Plan -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
            <div class="space-y-2">
                <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="dashboard_kicker">
                    Dashboard
                </p>
                <h1 class="font-heading text-2xl sm:text-3xl font-bold text-brand-text" data-i18n="dashboard_title">
                    Willkommen<?= $firstName ? ', ' . htmlspecialchars($firstName) : '' ?>!
                </h1>
                <p class="text-sm sm:text-base text-brand-muted max-w-2xl" data-i18n="dashboard_intro">
                    Hier kannst du deine USB-Tests verwalten, Geräte übersichtlich organisieren und später den Pro-Modus aktivieren. Dieser Bereich ist aktuell noch im Aufbau – du bekommst aber schon einen ersten Überblick.
                </p>
            </div>

            <div class="self-start md:self-auto">
                <div class="inline-flex items-center gap-3 rounded-full border border-brand-border bg-brand-surface/80 px-4 py-2 shadow-soft">
                    <span class="text-xs font-semibold uppercase tracking-[0.18em] text-brand-muted" data-i18n="dashboard_plan_label">
                        Aktueller Plan
                    </span>
                    <span class="inline-flex items-center rounded-full bg-brand-primary/10 px-3 py-1 text-xs font-semibold text-brand-primary">
                        <?= htmlspecialchars($planLabel) ?>
                    </span>
                </div>
            </div>
        </div>

        <!-- Grid: Karten -->
        <div class="grid gap-6 md:grid-cols-3">

            <!-- Letzte Tests -->
            <div class="card-frame card-frame--soft flex flex-col">
                <h2 class="font-heading text-lg font-semibold text-brand-text mb-2" data-i18n="dashboard_card_tests_title">
                    Letzte Tests
                </h2>
                <p class="text-sm text-brand-muted mb-4" data-i18n="dashboard_card_tests_text">
                    Hier werden später deine letzten Schnelltests und Pro-Scans angezeigt – inklusive Status, Geschwindigkeit und Integritätsprüfung.
                </p>

                <div class="flex-1 flex items-center justify-center text-xs text-brand-muted/70 border border-dashed border-brand-border/60 rounded-lg py-6">
                    <span data-i18n="dashboard_card_tests_empty">
                        Noch keine Testdaten vorhanden. Starte einen ersten Test über den Browser oder den Pro-Modus.
                    </span>
                </div>
            </div>

            <!-- Geräte / USB-Sticks -->
            <div class="card-frame card-frame--soft flex flex-col">
                <h2 class="font-heading text-lg font-semibold text-brand-text mb-2" data-i18n="dashboard_card_devices_title">
                    Deine USB-Geräte
                </h2>
                <p class="text-sm text-brand-muted mb-4" data-i18n="dashboard_card_devices_text">
                    Später kannst du hier deine getesteten Sticks verwalten: Hersteller, Modell, Seriennummer und erkannte Kapazität.
                </p>

                <div class="flex-1 flex items-center justify-center text-xs text-brand-muted/70 border border-dashed border-brand-border/60 rounded-lg py-6">
                    <span data-i18n="dashboard_card_devices_empty">
                        Noch keine Geräte gespeichert. Nach deinen ersten Tests kannst du USB-Sticks hier als Geräte anlegen.
                    </span>
                </div>
            </div>

            <!-- Pro-Modus / Nächste Schritte -->
            <div class="card-frame flex flex-col">
                <h2 class="font-heading text-lg font-semibold text-brand-text mb-2" data-i18n="dashboard_card_next_title">
                    Nächste Schritte
                </h2>
                <p class="text-sm text-brand-muted mb-4" data-i18n="dashboard_card_next_text">
                    USBCheck ist noch im Aufbau. Du gehörst zu den ersten Nutzern – später findest du hier Pro-Optionen, API-Zugänge und Detail-Reports.
                </p>

                <ul class="text-sm text-brand-muted space-y-1 mb-4">
                    <li data-i18n="dashboard_card_next_item1">• Browser-FakeCheck testen und Feedback geben</li>
                    <li data-i18n="dashboard_card_next_item2">• Pro-Modus-Features definieren (z. B. Vollscan, Reports, API)</li>
                    <li data-i18n="dashboard_card_next_item3">• Accounts &amp; SSO (my-log.in) finalisieren</li>
                </ul>

                <a href="/fakecheck/?lang=<?= urlencode($lang ?? 'de') ?>"
                   class="mt-auto inline-flex items-center justify-center rounded-full bg-brand-primary px-4 py-2.5 text-xs font-semibold text-brand-bg hover:bg-blue-400 transition-colors"
                   data-i18n="dashboard_card_next_cta">
                    Zum Browser-FakeCheck
                </a>
            </div>
        </div>
        </div>
    </div>
</section>