projects/usbcheck.it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2025-11-23 23:43:59 +01:00
parent c7803719ab
commit f55d9c4ade
6 changed files with 104 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
partials/landing/main/faq.php
View File

@@ -1,10 +1,11 @@
<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">
<section id="faq" class="border-t border-brand-border/60 bg-brand-primarySoft/10 py-16 sm:py-20">
<div class="px-4 sm:px-6 lg:px-8">
<div class="section-shell 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">
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-brand-text" data-i18n="faq_title">
Häufige Fragen zu USBCheck
</h2>
<p class="text-sm sm:text-base text-brand-muted" data-i18n="faq_intro">
@@ -13,7 +14,7 @@
</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">
<details class="group card-frame">
<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>
@@ -24,7 +25,7 @@
</div>
</details>
<details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
<details class="group card-frame">
<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>
@@ -35,7 +36,7 @@
</div>
</details>
<details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
<details class="group card-frame">
<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>
@@ -46,7 +47,7 @@
</div>
</details>
<details class="group rounded-xl2 border border-brand-border bg-brand-surface/80 px-5 py-4">
<details class="group card-frame">
<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>
@@ -57,5 +58,6 @@
</div>
</details>
</div>
</div>
</div>
</section>

16
partials/landing/main/features.php
View File

@@ -1,10 +1,11 @@
<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">
<section id="features" class="border-t border-brand-border/60 bg-brand-primarySoft/20 py-16 sm:py-20">
<div class="px-4 sm:px-6 lg:px-8">
<div class="section-shell 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 &amp; Pro features
</p>
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="features_title">
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-brand-text" 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">
@@ -14,9 +15,9 @@
<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="card-frame card-frame--soft 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>
<h3 class="font-heading text-xl font-semibold text-brand-text" 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>
@@ -42,9 +43,9 @@
</div>
<!-- Pro -->
<div class="rounded-xl2 border border-brand-primary/60 bg-brand-surface shadow-soft p-6 space-y-4">
<div class="card-frame card-frame--accent 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>
<h3 class="font-heading text-xl font-semibold text-brand-text" 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 &amp; teams
</span>
@@ -64,5 +65,6 @@
</p>
</div>
</div>
</div>
</div>
</section>

60
partials/landing/main/how.php
View File

@@ -1,10 +1,11 @@
<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">
<section id="how" class="border-t border-brand-border/60 bg-brand-primarySoft/30 py-16 sm:py-20">
<div class="px-4 sm:px-6 lg:px-8">
<div class="section-shell 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">
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-brand-text" 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">
@@ -42,31 +43,32 @@
</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>
<!-- Small feature card -->
<div class="card-frame card-frame--soft space-y-5">
<h3 class="font-heading text-lg font-semibold text-brand-text" 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>
</div>
</section>

14
partials/landing/main/problem.php
View File

@@ -1,10 +1,11 @@
<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">
<section id="problem" class="border-t border-brand-border/60 bg-brand-primarySoft/20 py-16 sm:py-20">
<div class="px-4 sm:px-6 lg:px-8">
<div class="section-shell 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">
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-brand-text" 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">
@@ -16,19 +17,19 @@
</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">
<div class="card-frame 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">
<div class="card-frame 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">
<div class="card-frame 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.
@@ -37,4 +38,3 @@
</div>
</div>
</section>

14
partials/landing/main/security.php
View File

@@ -1,10 +1,11 @@
<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">
<section id="security" class="border-t border-brand-border/60 bg-brand-primarySoft/20 py-16 sm:py-20">
<div class="px-4 sm:px-6 lg:px-8">
<div class="section-shell 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 &amp; privacy
</p>
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="security_title">
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-brand-text" 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">
@@ -13,24 +14,25 @@
</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">
<div class="card-frame 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">
<div class="card-frame 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">
<div class="card-frame 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>
</div>
</section>

40
public/assets/css/main.css
View File

@@ -529,6 +529,46 @@ body {
color: #7a86a8;
}
.section-shell {
position: relative;
max-width: 1120px;
margin: 0 auto;
padding: clamp(1.75rem, 3.5vw, 3.25rem);
border-radius: 36px;
background: linear-gradient(155deg, #ffffff 0%, #f4f7ff 100%);
border: 1px solid rgba(58, 111, 248, 0.14);
box-shadow: 0 30px 60px rgba(15, 33, 66, 0.08);
backdrop-filter: blur(6px);
overflow: hidden;
}
.section-shell::after {
content: "";
position: absolute;
inset: 12% 8% auto auto;
width: 160px;
height: 160px;
background: radial-gradient(circle, rgba(255, 215, 166, 0.18), transparent 65%);
pointer-events: none;
}
.card-frame {
border-radius: 26px;
padding: 1.5rem;
background: linear-gradient(140deg, #ffffff 0%, #f5f7ff 100%);
border: 1px solid rgba(58, 111, 248, 0.14);
box-shadow: 0 18px 40px rgba(15, 33, 66, 0.08);
}
.card-frame--accent {
border-color: rgba(58, 111, 248, 0.3);
box-shadow: 0 22px 45px rgba(58, 111, 248, 0.15);
}
.card-frame--soft {
background: linear-gradient(140deg, #fbfcff 0%, #f2f6ff 100%);
}
/* Steps / Features / Pricing */
.steps-grid,