106 lines
6.6 KiB
PHP
106 lines
6.6 KiB
PHP
<section id="hero" class="relative overflow-hidden">
|
||
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(56,189,248,0.18),_transparent_55%),radial-gradient(circle_at_bottom,_rgba(8,47,73,0.45),_transparent_60%)] pointer-events-none"></div>
|
||
|
||
<div class="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-24 flex flex-col lg:flex-row gap-10 items-center">
|
||
<!-- Left: Text -->
|
||
<div class="flex-1 space-y-7">
|
||
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="hero_kicker">
|
||
Detect fake USB sticks before you lose data
|
||
</p>
|
||
<h1 class="font-heading text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-white" data-i18n="hero_title">
|
||
Is my USB fake?<br><span class="text-brand-primary">Find out in minutes.</span>
|
||
</h1>
|
||
<p class="text-base sm:text-lg text-brand-muted max-w-xl" data-i18n="hero_lead">
|
||
USBCheck kombiniert einen schnellen Browser-Test mit einem professionellen Pro-Modus. So erkennst du gefälschte USB-Sticks, zu kleine echte Kapazität und langsame Billig-Controller – bevor deine Dateien verschwinden.
|
||
</p>
|
||
|
||
<!-- CTAs -->
|
||
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
|
||
<a href="https://usbcheck.it/fakecheck/"
|
||
class="inline-flex items-center justify-center rounded-full bg-brand-primary px-6 py-3 text-sm font-semibold text-brand-bg shadow-soft hover:bg-blue-400 transition-colors"
|
||
data-i18n="cta_quick">
|
||
Start free quick check
|
||
<svg class="ml-2 h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0L17 8.586a2 2 0 010 2.828l-5.293 5.293a1 1 0 01-1.414-1.414L13.586 11H4a1 1 0 110-2h9.586L10.293 4.707a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||
</svg>
|
||
</a>
|
||
|
||
<a href="#features"
|
||
class="inline-flex items-center justify-center rounded-full border border-brand-border/70 bg-brand-bg/40 px-6 py-3 text-sm font-semibold text-brand-text hover:border-brand-primary hover:text-brand-primary transition-colors"
|
||
data-i18n="cta_learn">
|
||
Learn more about Free & Pro
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Trust / Highlights -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-6 border-t border-brand-border/60">
|
||
<div class="space-y-1">
|
||
<p class="text-xs font-semibold text-brand-muted uppercase tracking-[0.18em]" data-i18n="trust1_title">No install for quick check</p>
|
||
<p class="text-sm text-brand-text/90" data-i18n="trust1_text">Browser-basierter Test direkt auf deinem Stick.</p>
|
||
</div>
|
||
<div class="space-y-1">
|
||
<p class="text-xs font-semibold text-brand-muted uppercase tracking-[0.18em]" data-i18n="trust2_title">Real write & read tests</p>
|
||
<p class="text-sm text-brand-text/90" data-i18n="trust2_text">Schreib-/Lesetests mit echten Daten – keine synthetische Theorie.</p>
|
||
</div>
|
||
<div class="space-y-1">
|
||
<p class="text-xs font-semibold text-brand-muted uppercase tracking-[0.18em]" data-i18n="trust3_title">Privacy first</p>
|
||
<p class="text-sm text-brand-text/90" data-i18n="trust3_text">Deine Testdaten bleiben lokal – Reports nur auf Wunsch.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right: Card (Teaser Quickcheck) -->
|
||
<div class="flex-1 w-full max-w-md lg:max-w-sm">
|
||
<div class="rounded-xl2 bg-brand-surface/90 border border-brand-border/70 shadow-soft p-5 sm:p-6 space-y-4">
|
||
<div class="flex items-start justify-between gap-3">
|
||
<div>
|
||
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-brand-muted" data-i18n="quick_label">
|
||
QUICK CHECK PREVIEW
|
||
</p>
|
||
<h2 class="mt-1 font-heading font-semibold text-lg text-white" data-i18n="quick_title">
|
||
Test a USB drive in under 2 minutes
|
||
</h2>
|
||
</div>
|
||
<span class="inline-flex items-center rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-400" data-i18n="badge_free">
|
||
Free
|
||
</span>
|
||
</div>
|
||
|
||
<div class="space-y-3 text-sm text-brand-muted">
|
||
<p data-i18n="quick_intro">
|
||
Der Schnelltest prüft eine definierte Datenmenge auf deinem Stick und misst:
|
||
</p>
|
||
<ul class="list-disc list-inside space-y-1">
|
||
<li data-i18n="quick_li1">Schreib- und Leserate</li>
|
||
<li data-i18n="quick_li2">Datenintegrität (Hash-Vergleich)</li>
|
||
<li data-i18n="quick_li3">Verdächtige Abbrüche oder Fehler</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="flex flex-col gap-2 text-xs text-brand-muted">
|
||
<div class="flex justify-between">
|
||
<span data-i18n="quick_metric1_label">Write performance</span>
|
||
<span data-i18n="quick_metric1_value">~ 75–120 MB/s*</span>
|
||
</div>
|
||
<div class="h-1.5 rounded-full bg-brand-primarySoft overflow-hidden">
|
||
<div class="h-full w-3/4 bg-brand-primary"></div>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span data-i18n="quick_metric2_label">Integrity checks</span>
|
||
<span data-i18n="quick_metric2_value">512 MB sample</span>
|
||
</div>
|
||
<p class="text-[11px] text-brand-muted/80" data-i18n="quick_footnote">
|
||
*Beispielwerte – deine Ergebnisse hängen von Stick, Port & System ab.
|
||
</p>
|
||
</div>
|
||
|
||
<a href="https://usbcheck.it/fakecheck/"
|
||
class="block text-center rounded-full bg-brand-primary px-4 py-2.5 text-sm font-semibold text-brand-bg hover:bg-blue-400 transition-colors"
|
||
data-i18n="quick_cta">
|
||
Go to free quick check
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|