79 lines
4.9 KiB
PHP
79 lines
4.9 KiB
PHP
<section id="hero" class="hero-section relative overflow-hidden border-b border-brand-border/70">
|
||
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(8,47,73,0.35),_transparent_60%)] pointer-events-none"></div>
|
||
|
||
<div class="relative px-4 sm:px-6 lg:px-8 py-14 sm:py-20">
|
||
<div class="section-shell hero-shell items-center">
|
||
<!-- Left: Text -->
|
||
<div class="hero-copy space-y-6">
|
||
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="fake_hero_kicker">
|
||
FakeCheck – Browser-Modus
|
||
</p>
|
||
<h1 class="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-brand-text" data-i18n="fake_hero_title">
|
||
Ist mein USB-Stick fake?
|
||
</h1>
|
||
<p class="text-base sm:text-lg text-brand-muted max-w-xl" data-i18n="fake_hero_lead">
|
||
Der FakeCheck hilft dir, typische Fake-Sticks aufzuspüren: Browser-basierte Schreib-/Lesetests und Plausibilitätsprüfungen der nutzbaren Kapazität – ohne Installation.
|
||
</p>
|
||
|
||
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
|
||
<button
|
||
id="startButton"
|
||
class="inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-semibold bg-brand-primary text-brand-bg shadow-soft hover:bg-cyan-400 transition-colors"
|
||
data-i18n="fake_cta_start">
|
||
Browser-Test starten (Demo)
|
||
</button>
|
||
|
||
<a href="/?lang=<?= htmlspecialchars($lang) ?>"
|
||
class="inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-medium border border-brand-border text-brand-muted hover:border-brand-primary hover:text-brand-primary transition-colors"
|
||
data-i18n="fake_cta_back_home">
|
||
Zur Übersicht zurück
|
||
</a>
|
||
</div>
|
||
|
||
<p class="text-xs text-brand-muted/80 max-w-md" data-i18n="fake_hero_hint">
|
||
Der FakeCheck im Browser arbeitet mit Testdateien und Lese-/Schreibmustern, die du in einem ausgewählten Ordner anlegst. Deine echten Dateien bleiben unangetastet.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Right: Explainer -->
|
||
<div class="hero-preview w-full">
|
||
<div class="card-frame card-frame--soft space-y-4">
|
||
<h2 class="font-heading text-lg sm:text-xl font-semibold text-brand-text" data-i18n="fake_box_title">
|
||
Was der Browser-Test leisten kann
|
||
</h2>
|
||
<ul class="space-y-3 text-sm text-brand-muted">
|
||
<li class="flex gap-2">
|
||
<span class="mt-0.5 h-5 w-5 flex items-center justify-center rounded-full bg-brand-primary/15 text-[11px] font-semibold text-brand-primary">1</span>
|
||
<div>
|
||
<p class="font-medium text-brand-text" data-i18n="fake_box_point1_title">Schreib-/Lesetest mit Testdateien</p>
|
||
<p data-i18n="fake_box_point1_text">
|
||
Der Browser legt Testdateien im gewählten Ordner an, misst Schreib- und Leseraten und prüft, ob gelesene Daten mit den geschriebenen Mustern übereinstimmen.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex gap-2">
|
||
<span class="mt-0.5 h-5 w-5 flex items-center justify-center rounded-full bg-brand-primary/15 text-[11px] font-semibold text-brand-primary">2</span>
|
||
<div>
|
||
<p class="font-medium text-brand-text" data-i18n="fake_box_point2_title">Plausibilitätscheck der Kapazität</p>
|
||
<p data-i18n="fake_box_point2_text">
|
||
Aus der Menge der erfolgreich geschriebenen und verifizierten Daten ergibt sich ein realistischer Eindruck, wie viel Nutzkapazität tatsächlich stabil ankommt.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex gap-2">
|
||
<span class="mt-0.5 h-5 w-5 flex items-center justify-center rounded-full bg-brand-primary/15 text-[11px] font-semibold text-brand-primary">3</span>
|
||
<div>
|
||
<p class="font-medium text-brand-text" data-i18n="fake_box_point3_title">JSON-Report für deine Dokumentation</p>
|
||
<p data-i18n="fake_box_point3_text">
|
||
Alle Ergebnisse werden in einem strukturierten JSON-Report gesammelt, den du speichern, hochladen oder für spätere Vergleiche nutzen kannst.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|