sitestructure

partials/landing/main/how.php

@@ -0,0 +1,72 @@
+<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>