usbcheck.it/partials/landing/main/how.php

<section id="how" class="border-t border-brand-border/70 bg-brand-primarySoft/30">
    <div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20 grid gap-10 lg:grid-cols-[1.2fr,1fr]">
        <div class="space-y-6">
            <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="how_kicker">
                How USBCheck works
            </p>
            <h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="how_title">
                Schnelltest im Browser, Pro-Modus mit Tiefenanalyse.
            </h2>
            <p class="text-brand-muted text-sm sm:text-base" data-i18n="how_intro">
                USBCheck wurde entwickelt, um zwei Welten zu verbinden: einen einfachen Schnelltest für alle und einen tiefgehenden Pro-Modus für Power-User, Techniker und Admins. Der Schnelltest läuft direkt im Browser, ohne Installation. Für den Pro-Modus wird ein kleines Helfer-Tool verwendet, das auf Wunsch F3- / badblocks-ähnliche Tests ausführt und damit Kapazitäts-Fakes sicher enttarnt.
            </p>

            <ol class="space-y-4 text-sm text-brand-muted">
                <li class="flex gap-3">
                    <span class="flex h-7 w-7 items-center justify-center rounded-full bg-brand-primary/20 text-xs font-semibold text-brand-primary">01</span>
                    <div>
                        <h3 class="font-semibold text-brand-text" data-i18n="how_step1_title">Browser-Test starten</h3>
                        <p data-i18n="how_step1_text">
                            Du öffnest den Schnelltest unter <strong>usbcheck.it/fakecheck/</strong>, wählst deinen USB-Stick bzw. einen Ordner darauf aus und definierst, wie viel Daten getestet werden sollen.
                        </p>
                    </div>
                </li>
                <li class="flex gap-3">
                    <span class="flex h-7 w-7 items-center justify-center rounded-full bg-brand-primary/20 text-xs font-semibold text-brand-primary">02</span>
                    <div>
                        <h3 class="font-semibold text-brand-text" data-i18n="how_step2_title">Schreib-, Lese- und Integritätsprüfung</h3>
                        <p data-i18n="how_step2_text">
                            Der Browser erstellt Testdateien, misst Schreib- und Leserate und vergleicht Hash-Werte, um Datenfehler zu erkennen – alles lokal und ohne Übertragung deiner Inhalte.
                        </p>
                    </div>
                </li>
                <li class="flex gap-3">
                    <span class="flex h-7 w-7 items-center justify-center rounded-full bg-brand-primary/20 text-xs font-semibold text-brand-primary">03</span>
                    <div>
                        <h3 class="font-semibold text-brand-text" data-i18n="how_step3_title">Optional: Pro-Modus für Vollscan</h3>
                        <p data-i18n="how_step3_text">
                            Wer mehr wissen will, installiert das optionale Helfer-Tool. Dieses kann die gesamte Kapazität des Sticks prüfen, Fakes identifizieren und detaillierte Reports erzeugen – ideal für Refurbisher, IT-Abteilungen oder Labore.
                        </p>
                    </div>
                </li>
            </ol>
        </div>

        <!-- Small feature card -->
        <div class="rounded-xl2 border border-brand-border bg-brand-surface/80 shadow-soft p-6 space-y-5">
            <h3 class="font-heading text-lg font-semibold text-white" data-i18n="how_side_title">
                Free vs Pro at a glance
            </h3>
            <ul class="space-y-3 text-sm text-brand-muted">
                <li class="flex gap-2">
                    <span class="mt-1 h-5 w-5 rounded-full bg-emerald-500/10 text-emerald-400 flex items-center justify-center text-[10px]">F</span>
                    <p data-i18n="how_side_free">
                        <strong>Free Quick Check:</strong> Geschwindigkeit &amp; Integritätstest im Browser – ideal für schnelle Einschätzungen.
                    </p>
                </li>
                <li class="flex gap-2">
                    <span class="mt-1 h-5 w-5 rounded-full bg-sky-500/10 text-sky-400 flex items-center justify-center text-[10px]">P</span>
                    <p data-i18n="how_side_pro">
                        <strong>Pro-Modus:</strong> Tiefenscan, Kapazitätsvalidierung, erweiterte Berichte und API-Integration für Unternehmen.
                    </p>
                </li>
                <li class="flex gap-2">
                    <span class="mt-1 h-5 w-5 rounded-full bg-violet-500/10 text-violet-400 flex items-center justify-center text-[10px]">A</span>
                    <p data-i18n="how_side_account">
                        <strong>Account &amp; Login:</strong> Nach dem Login kannst du Tests speichern, Berichte exportieren und mehrere Geräte verwalten.
                    </p>
                </li>
            </ul>
        </div>
    </div>
</section>