sitestructure
This commit is contained in:
@@ -0,0 +1,75 @@
|
||||
<section id="hero" class="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.45),_transparent_60%)] pointer-events-none"></div>
|
||||
|
||||
<div class="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-14 sm:py-20 flex flex-col lg:flex-row gap-10 items-center">
|
||||
<!-- Left: Text -->
|
||||
<div class="flex-1 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-white" 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="flex-1 max-w-md w-full">
|
||||
<div class="rounded-2xl border border-brand-border bg-brand-surface/80 p-5 sm:p-6 shadow-soft space-y-4">
|
||||
<h2 class="font-heading text-lg sm:text-xl font-semibold text-white" 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>
|
||||
</section>
|
||||
|
||||
36
partials/landing/fakecheck/webcheck.php
Normal file
36
partials/landing/fakecheck/webcheck.php
Normal file
@@ -0,0 +1,36 @@
|
||||
<section id="webcheck" class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
|
||||
<div class="grid gap-8 lg:grid-cols-[minmax(0,2fr)_minmax(0,1.4fr)] items-start">
|
||||
<!-- Links: Test-Steuerung (Platzhalter) -->
|
||||
<div class="space-y-6">
|
||||
<div class="rounded-2xl border border-brand-border bg-brand-surface/80 p-6 sm:p-7 shadow-soft">
|
||||
<h2 class="font-heading text-xl sm:text-2xl font-semibold mb-2 text-white" data-i18n="fake_app_title">
|
||||
Browser-Testoberfläche (Preview)
|
||||
</h2>
|
||||
<p class="text-sm text-brand-muted mb-4" data-i18n="fake_app_intro">
|
||||
Hier entsteht die eigentliche FakeCheck-Web-App: Auswahl des Testordners, Konfiguration der Testmenge, Fortschrittsanzeige und Ergebnisübersicht. Aktuell zeigt der Button oben nur eine Demo-Ausgabe.
|
||||
</p>
|
||||
|
||||
<ul class="space-y-2 text-xs text-brand-muted">
|
||||
<li data-i18n="fake_app_point1">• Quick-Test mit kleiner Datenmenge.</li>
|
||||
<li data-i18n="fake_app_point2">• Light-Benchmark: Schreib-/Lesegeschwindigkeit über begrenzte Zeit.</li>
|
||||
<li data-i18n="fake_app_point3">• Write/Verify: Testdateien schreiben und direkt wieder verifizieren.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rechts: Ergebnis / JSON-Report-Preview -->
|
||||
<div class="space-y-4">
|
||||
<div id="resultContainer" class="hidden rounded-2xl border border-brand-border bg-brand-surface/80 p-5 sm:p-6 shadow-soft">
|
||||
<h3 class="font-heading text-lg font-semibold mb-2 text-white" data-i18n="fake_result_title">
|
||||
Demo-Ausgabe des Browser-Tests
|
||||
</h3>
|
||||
<p class="text-xs text-brand-muted mb-3" data-i18n="fake_result_hint">
|
||||
Diese Ausgabe dient nur als Vorschau. Später wird hier der echte JSON-Report aus dem Browser-Test angezeigt.
|
||||
</p>
|
||||
<pre id="resultOutput"
|
||||
class="text-[11px] whitespace-pre-wrap bg-black/40 text-brand-muted rounded-xl p-3 font-mono overflow-x-auto min-h-[140px]">
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
61
partials/landing/main/faq.php
Normal file
61
partials/landing/main/faq.php
Normal file
@@ -0,0 +1,61 @@
|
||||
<section id="faq" class="border-t border-brand-border/70 bg-brand-primarySoft/10">
|
||||
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20 space-y-10">
|
||||
<div class="max-w-3xl space-y-4">
|
||||
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="faq_kicker">
|
||||
FAQ
|
||||
</p>
|
||||
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="faq_title">
|
||||
Häufige Fragen zu USBCheck
|
||||
</h2>
|
||||
<p class="text-sm sm:text-base text-brand-muted" data-i18n="faq_intro">
|
||||
Hier findest du Antworten auf häufig gestellte Fragen. Der FAQ-Bereich kann jederzeit erweitert werden, wenn neue Anwendungsfälle hinzukommen oder du Feedback von Nutzern erhältst.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 text-sm text-brand-muted">
|
||||
<details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
|
||||
<summary class="flex cursor-pointer list-none items-center justify-between gap-4">
|
||||
<span class="font-semibold text-brand-text" data-i18n="faq_q1">Ist der Schnelltest wirklich komplett im Browser?</span>
|
||||
<span class="ml-auto text-brand-muted group-open:hidden">+</span>
|
||||
<span class="ml-auto text-brand-muted hidden group-open:inline">−</span>
|
||||
</summary>
|
||||
<div class="mt-2 text-sm text-brand-muted" data-i18n="faq_a1">
|
||||
Ja. Der Schnelltest läuft vollständig im Browser und nutzt moderne Browser-APIs, um Testdateien auf deinem Stick zu schreiben und wieder auszulesen. Es wird nichts ohne deine Zustimmung hochgeladen.
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
|
||||
<summary class="flex cursor-pointer list-none items-center justify-between gap-4">
|
||||
<span class="font-semibold text-brand-text" data-i18n="faq_q2">Brauche ich ein Konto, um den Schnelltest zu benutzen?</span>
|
||||
<span class="ml-auto text-brand-muted group-open:hidden">+</span>
|
||||
<span class="ml-auto text-brand-muted hidden group-open:inline">−</span>
|
||||
</summary>
|
||||
<div class="mt-2 text-sm text-brand-muted" data-i18n="faq_a2">
|
||||
Nein. Der kostenlose Schnelltest ist ohne Registrierung nutzbar. Ein Login ist nur notwendig, wenn du Testberichte speichern, mehrere Sticks verwalten oder den Pro-Modus nutzen möchtest.
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
|
||||
<summary class="flex cursor-pointer list-none items-center justify-between gap-4">
|
||||
<span class="font-semibold text-brand-text" data-i18n="faq_q3">Kann USBCheck jeden Fake-Stick sicher erkennen?</span>
|
||||
<span class="ml-auto text-brand-muted group-open:hidden">+</span>
|
||||
<span class="ml-auto text-brand-muted hidden group-open:inline">−</span>
|
||||
</summary>
|
||||
<div class="mt-2 text-sm text-brand-muted" data-i18n="faq_a3">
|
||||
Kein Tool kann eine 100 %-Garantie geben. Der Pro-Modus mit Vollscan ist jedoch darauf ausgelegt, typische Fälschungsmuster (Manipulation der gemeldeten Kapazität, instabile Bereiche, Fehler ab einer bestimmten Füllmenge) sehr zuverlässig zu erkennen.
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
|
||||
<summary class="flex cursor-pointer list-none items-center justify-between gap-4">
|
||||
<span class="font-semibold text-brand-text" data-i18n="faq_q4">Wie fügt sich das Tool in mein bestehendes System ein?</span>
|
||||
<span class="ml-auto text-brand-muted group-open:hidden">+</span>
|
||||
<span class="ml-auto text-brand-muted hidden group-open:inline">−</span>
|
||||
</summary>
|
||||
<div class="mt-2 text-sm text-brand-muted" data-i18n="faq_a4">
|
||||
USBCheck ist von Anfang an für Automatisierung gedacht. Über den Pro-Modus und die geplante API kannst du Tests in bestehende Workflows integrieren – beispielsweise in Wareneingangsprüfungen oder Qualitätskontrollen.
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
68
partials/landing/main/features.php
Normal file
68
partials/landing/main/features.php
Normal file
@@ -0,0 +1,68 @@
|
||||
<section id="features" class="border-t border-brand-border/70 bg-brand-primarySoft/20">
|
||||
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20 space-y-10">
|
||||
<div class="max-w-3xl space-y-4">
|
||||
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="features_kicker">
|
||||
Free & Pro features
|
||||
</p>
|
||||
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="features_title">
|
||||
Starte mit dem kostenlosen Schnelltest – wechsle in den Pro-Modus, wenn du mehr brauchst.
|
||||
</h2>
|
||||
<p class="text-sm sm:text-base text-brand-muted" data-i18n="features_intro">
|
||||
USBCheck wächst mit deinen Anforderungen: Private Nutzer brauchen oft nur eine schnelle Einschätzung. Profis möchten tiefer einsteigen, Kapazitäten verifizieren und Reports archivieren. Genau dafür ist der Pro-Modus gedacht.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 md:grid-cols-2">
|
||||
<!-- Free -->
|
||||
<div class="rounded-xl2 border border-brand-border bg-brand-surface/90 shadow-soft p-6 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-heading text-xl font-semibold text-white" data-i18n="features_free_title">Free Quick Check</h3>
|
||||
<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="features_free_badge">
|
||||
Recommended for most users
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-brand-muted" data-i18n="features_free_text">
|
||||
Ideal für alle, die schnell prüfen möchten, ob ein USB-Stick zumindest grundlegend performant und stabil arbeitet – ganz ohne Installation.
|
||||
</p>
|
||||
<ul class="mt-2 space-y-2 text-sm text-brand-muted">
|
||||
<li data-i18n="features_free_li1">• Browser-basierter Schnelltest direkt auf deinem Stick</li>
|
||||
<li data-i18n="features_free_li2">• Schreib- und Lesegeschwindigkeit mit realen Testdaten</li>
|
||||
<li data-i18n="features_free_li3">• Hash-basierte Integritätsprüfung einer Testmenge</li>
|
||||
<li data-i18n="features_free_li4">• Auswahl verschiedener Teststufen (z. B. 200 MB, 2 GB)</li>
|
||||
<li data-i18n="features_free_li5">• Keine Registrierung erforderlich</li>
|
||||
</ul>
|
||||
<a href="https://usbcheck.it/fakecheck/"
|
||||
class="inline-flex mt-3 items-center text-sm font-semibold text-brand-primary hover:text-blue-300"
|
||||
data-i18n="features_free_cta">
|
||||
Start free quick check
|
||||
<svg class="ml-1 h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path 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"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Pro -->
|
||||
<div class="rounded-xl2 border border-brand-primary/60 bg-brand-surface shadow-soft p-6 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-heading text-xl font-semibold text-white" data-i18n="features_pro_title">Pro Mode</h3>
|
||||
<span class="inline-flex items-center rounded-full bg-brand-primary/10 px-3 py-1 text-xs font-semibold text-brand-primary" data-i18n="features_pro_badge">
|
||||
For power users & teams
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-brand-muted" data-i18n="features_pro_text">
|
||||
Für alle, die volle Kontrolle brauchen: IT-Abteilungen, Techniker, Refurbisher, Labore oder Unternehmen, die regelmäßig größere Stick-Mengen testen.
|
||||
</p>
|
||||
<ul class="mt-2 space-y-2 text-sm text-brand-muted">
|
||||
<li data-i18n="features_pro_li1">• Tiefenscan der gesamten Kapazität (ähnlich F3 / badblocks)</li>
|
||||
<li data-i18n="features_pro_li2">• Erkennung von Kapazitäts-Fakes und defekten Bereichen</li>
|
||||
<li data-i18n="features_pro_li3">• Detaillierte, speicherbare Testberichte (JSON, PDF)</li>
|
||||
<li data-i18n="features_pro_li4">• Optional: API-Zugriff für automatisierte Testprozesse</li>
|
||||
<li data-i18n="features_pro_li5">• Multi-Device- und Multi-User-Support (über Login-Bereich)</li>
|
||||
</ul>
|
||||
<p class="mt-3 text-xs text-brand-muted/80" data-i18n="features_pro_note">
|
||||
Der Pro-Modus erfordert ein kleines Helfer-Tool auf deinem System. Dieses arbeitet lokal und kann bei Bedarf mit deinem Account auf USBCheck verbunden werden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,105 @@
|
||||
<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>
|
||||
|
||||
72
partials/landing/main/how.php
Normal file
72
partials/landing/main/how.php
Normal file
@@ -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 & 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 & Login:</strong> Nach dem Login kannst du Tests speichern, Berichte exportieren und mehrere Geräte verwalten.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
39
partials/landing/main/problem.php
Normal file
39
partials/landing/main/problem.php
Normal file
@@ -0,0 +1,39 @@
|
||||
<section id="problem" class="border-t border-brand-border/70">
|
||||
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20 space-y-8">
|
||||
<div class="max-w-3xl space-y-4">
|
||||
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="problem_kicker">
|
||||
Why fake USB sticks are dangerous
|
||||
</p>
|
||||
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="problem_title">
|
||||
Gefälschte USB-Sticks kosten Geld – und im schlimmsten Fall deine Daten.
|
||||
</h2>
|
||||
<p class="text-sm sm:text-base text-brand-muted" data-i18n="problem_p1">
|
||||
Viele Billig-USB-Sticks werben mit unrealistisch hohen Kapazitäten. In Wahrheit wurde der Controller manipuliert: Der Stick meldet z. B. 256 GB, obwohl physisch nur 32 GB verbaut sind. Die Folge: Daten werden scheinbar korrekt kopiert, später aber stillschweigend überschrieben oder beschädigt.
|
||||
</p>
|
||||
<p class="text-sm sm:text-base text-brand-muted" data-i18n="problem_p2">
|
||||
USBCheck hilft dir, solche Fakes zu erkennen, bevor du sie produktiv einsetzt – egal ob du einzelne Sticks privat nutzt oder größere Chargen für dein Unternehmen prüfst.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 md:grid-cols-3 text-sm text-brand-muted">
|
||||
<div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
|
||||
<h3 class="font-semibold text-brand-text" data-i18n="problem_card1_title">Verlust wichtiger Dateien</h3>
|
||||
<p data-i18n="problem_card1_text">
|
||||
Fotos, Projektdateien, Backups – alles kann betroffen sein, wenn der Stick weniger speichert als behauptet. Defekte Sektoren bleiben oft unbemerkt, bis es zu spät ist.
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
|
||||
<h3 class="font-semibold text-brand-text" data-i18n="problem_card2_title">Kosten durch defekte Chargen</h3>
|
||||
<p data-i18n="problem_card2_text">
|
||||
Unternehmen, Reseller und Agenturen verteilen USB-Sticks oft in großer Stückzahl. Fakes bedeuten Reklamationen, Imageschaden und erneute Produktionskosten.
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
|
||||
<h3 class="font-semibold text-brand-text" data-i18n="problem_card3_title">Unsichere Performance</h3>
|
||||
<p data-i18n="problem_card3_text">
|
||||
Langsame Controller, instabile Firmware und schwankende Schreibraten sind typisch für Fake-Sticks. Das erhöht das Risiko von Fehlern – besonders bei großen Dateien.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
36
partials/landing/main/security.php
Normal file
36
partials/landing/main/security.php
Normal file
@@ -0,0 +1,36 @@
|
||||
<section id="security" class="border-t border-brand-border/70">
|
||||
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20 space-y-8">
|
||||
<div class="max-w-3xl space-y-4">
|
||||
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="security_kicker">
|
||||
Security & privacy
|
||||
</p>
|
||||
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="security_title">
|
||||
Privacy-first-Design: Deine Testdaten gehören dir.
|
||||
</h2>
|
||||
<p class="text-sm sm:text-base text-brand-muted" data-i18n="security_intro">
|
||||
USBCheck wurde von Anfang an so konzipiert, dass deine Daten geschützt bleiben. Der Browser-Schnelltest arbeitet ausschließlich mit Testdateien. Deine eigenen Dokumente, Bilder oder Backups werden weder gelesen noch übertragen. Im Pro-Modus hast du volle Kontrolle, ob und welche Reports mit deinem Account synchronisiert werden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 md:grid-cols-3 text-sm text-brand-muted">
|
||||
<div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
|
||||
<h3 class="font-semibold text-brand-text" data-i18n="security_card1_title">Local-only Tests</h3>
|
||||
<p data-i18n="security_card1_text">
|
||||
Alle Schreib- und Lesetests erfolgen lokal auf deinem USB-Stick. Der Browser greift nur auf die Testdateien zu – nicht auf deine privaten Inhalte.
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
|
||||
<h3 class="font-semibold text-brand-text" data-i18n="security_card2_title">Transparente Reports</h3>
|
||||
<p data-i18n="security_card2_text">
|
||||
Wenn du dich einloggst, kannst du Testberichte in deinem Account speichern, exportieren oder wieder löschen. Du entscheidest, welche Daten im System bleiben.
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-xl2 border border-brand-border bg-brand-surface/80 p-5 space-y-2">
|
||||
<h3 class="font-semibold text-brand-text" data-i18n="security_card3_title">Schonend für deine Hardware</h3>
|
||||
<p data-i18n="security_card3_text">
|
||||
Der Schnelltest arbeitet mit moderaten Datenmengen, um unnötigen Verschleiß zu vermeiden. Der Pro-Modus warnt deutlich, wenn ein Vollscan mit hoher Schreiblast ausgeführt wird.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -4,7 +4,9 @@
|
||||
</main>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<?php include __DIR__ . '/footer.php'; ?>
|
||||
<?php
|
||||
tpl('footer');
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -50,7 +50,9 @@ $host = $_SERVER['HTTP_HOST'] ?? '';
|
||||
<div class="min-h-screen flex flex-col">
|
||||
|
||||
<!-- HEADER -->
|
||||
<?php include __DIR__ . '/header.php'; ?>
|
||||
<?php
|
||||
tpl('header'); // structure/header.php
|
||||
?>
|
||||
|
||||
<!-- MAIN CONTENT -->
|
||||
<main class="flex-1">
|
||||
|
||||
Reference in New Issue
Block a user