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"> <section id="faq" class="border-t border-brand-border/60 bg-brand-primarySoft/10 py-16 sm:py-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="px-4 sm:px-6 lg:px-8">
<div class="section-shell space-y-10">
<div class="max-w-3xl space-y-4"> <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"> <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="faq_kicker">
FAQ FAQ
</p> </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 Häufige Fragen zu USBCheck
</h2> </h2>
<p class="text-sm sm:text-base text-brand-muted" data-i18n="faq_intro"> <p class="text-sm sm:text-base text-brand-muted" data-i18n="faq_intro">
@@ -13,7 +14,7 @@
</div> </div>
<div class="space-y-4 text-sm text-brand-muted"> <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"> <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="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 group-open:hidden">+</span>
@@ -24,7 +25,7 @@
</div> </div>
</details> </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"> <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="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 group-open:hidden">+</span>
@@ -35,7 +36,7 @@
</div> </div>
</details> </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"> <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="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 group-open:hidden">+</span>
@@ -46,7 +47,7 @@
</div> </div>
</details> </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"> <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="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 group-open:hidden">+</span>
@@ -57,5 +58,6 @@
</div> </div>
</details> </details>
</div> </div>
</div>
</div> </div>
</section> </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"> <section id="features" class="border-t border-brand-border/60 bg-brand-primarySoft/20 py-16 sm:py-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="px-4 sm:px-6 lg:px-8">
<div class="section-shell space-y-10">
<div class="max-w-3xl space-y-4"> <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"> <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="features_kicker">
Free &amp; Pro features Free &amp; Pro features
</p> </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. Starte mit dem kostenlosen Schnelltest – wechsle in den Pro-Modus, wenn du mehr brauchst.
</h2> </h2>
<p class="text-sm sm:text-base text-brand-muted" data-i18n="features_intro"> <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"> <div class="grid gap-6 md:grid-cols-2">
<!-- Free --> <!-- 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"> <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"> <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 Recommended for most users
</span> </span>
@@ -42,9 +43,9 @@
</div> </div>
<!-- Pro --> <!-- 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"> <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"> <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 For power users &amp; teams
</span> </span>
@@ -64,5 +65,6 @@
</p> </p>
</div> </div>
</div> </div>
</div>
</div> </div>
</section> </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"> <section id="how" class="border-t border-brand-border/60 bg-brand-primarySoft/30 py-16 sm:py-20">
<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="px-4 sm:px-6 lg:px-8">
<div class="space-y-6"> <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"> <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="how_kicker">
How USBCheck works How USBCheck works
</p> </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. Schnelltest im Browser, Pro-Modus mit Tiefenanalyse.
</h2> </h2>
<p class="text-brand-muted text-sm sm:text-base" data-i18n="how_intro"> <p class="text-brand-muted text-sm sm:text-base" data-i18n="how_intro">
@@ -42,31 +43,32 @@
</ol> </ol>
</div> </div>
<!-- Small feature card --> <!-- Small feature card -->
<div class="rounded-xl2 border border-brand-border bg-brand-surface/80 shadow-soft p-6 space-y-5"> <div class="card-frame card-frame--soft space-y-5">
<h3 class="font-heading text-lg font-semibold text-white" data-i18n="how_side_title"> <h3 class="font-heading text-lg font-semibold text-brand-text" data-i18n="how_side_title">
Free vs Pro at a glance Free vs Pro at a glance
</h3> </h3>
<ul class="space-y-3 text-sm text-brand-muted"> <ul class="space-y-3 text-sm text-brand-muted">
<li class="flex gap-2"> <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> <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"> <p data-i18n="how_side_free">
<strong>Free Quick Check:</strong> Geschwindigkeit &amp; Integritätstest im Browser – ideal für schnelle Einschätzungen. <strong>Free Quick Check:</strong> Geschwindigkeit &amp; Integritätstest im Browser – ideal für schnelle Einschätzungen.
</p> </p>
</li> </li>
<li class="flex gap-2"> <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> <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"> <p data-i18n="how_side_pro">
<strong>Pro-Modus:</strong> Tiefenscan, Kapazitätsvalidierung, erweiterte Berichte und API-Integration für Unternehmen. <strong>Pro-Modus:</strong> Tiefenscan, Kapazitätsvalidierung, erweiterte Berichte und API-Integration für Unternehmen.
</p> </p>
</li> </li>
<li class="flex gap-2"> <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> <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"> <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. <strong>Account &amp; Login:</strong> Nach dem Login kannst du Tests speichern, Berichte exportieren und mehrere Geräte verwalten.
</p> </p>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div> </div>
</section> </section>

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

@@ -1,10 +1,11 @@
<section id="problem" class="border-t border-brand-border/70"> <section id="problem" class="border-t border-brand-border/60 bg-brand-primarySoft/20 py-16 sm:py-20">
<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="px-4 sm:px-6 lg:px-8">
<div class="section-shell space-y-8">
<div class="max-w-3xl space-y-4"> <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"> <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 Why fake USB sticks are dangerous
</p> </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. Gefälschte USB-Sticks kosten Geld – und im schlimmsten Fall deine Daten.
</h2> </h2>
<p class="text-sm sm:text-base text-brand-muted" data-i18n="problem_p1"> <p class="text-sm sm:text-base text-brand-muted" data-i18n="problem_p1">
@@ -16,19 +17,19 @@
</div> </div>
<div class="grid gap-6 md:grid-cols-3 text-sm text-brand-muted"> <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> <h3 class="font-semibold text-brand-text" data-i18n="problem_card1_title">Verlust wichtiger Dateien</h3>
<p data-i18n="problem_card1_text"> <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. 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> </p>
</div> </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> <h3 class="font-semibold text-brand-text" data-i18n="problem_card2_title">Kosten durch defekte Chargen</h3>
<p data-i18n="problem_card2_text"> <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. Unternehmen, Reseller und Agenturen verteilen USB-Sticks oft in großer Stückzahl. Fakes bedeuten Reklamationen, Imageschaden und erneute Produktionskosten.
</p> </p>
</div> </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> <h3 class="font-semibold text-brand-text" data-i18n="problem_card3_title">Unsichere Performance</h3>
<p data-i18n="problem_card3_text"> <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. 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>
</div> </div>
</section> </section>

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

@@ -1,10 +1,11 @@
<section id="security" class="border-t border-brand-border/70"> <section id="security" class="border-t border-brand-border/60 bg-brand-primarySoft/20 py-16 sm:py-20">
<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="px-4 sm:px-6 lg:px-8">
<div class="section-shell space-y-8">
<div class="max-w-3xl space-y-4"> <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"> <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="security_kicker">
Security &amp; privacy Security &amp; privacy
</p> </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. Privacy-first-Design: Deine Testdaten gehören dir.
</h2> </h2>
<p class="text-sm sm:text-base text-brand-muted" data-i18n="security_intro"> <p class="text-sm sm:text-base text-brand-muted" data-i18n="security_intro">
@@ -13,24 +14,25 @@
</div> </div>
<div class="grid gap-6 md:grid-cols-3 text-sm text-brand-muted"> <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> <h3 class="font-semibold text-brand-text" data-i18n="security_card1_title">Local-only Tests</h3>
<p data-i18n="security_card1_text"> <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. Alle Schreib- und Lesetests erfolgen lokal auf deinem USB-Stick. Der Browser greift nur auf die Testdateien zu – nicht auf deine privaten Inhalte.
</p> </p>
</div> </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> <h3 class="font-semibold text-brand-text" data-i18n="security_card2_title">Transparente Reports</h3>
<p data-i18n="security_card2_text"> <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. Wenn du dich einloggst, kannst du Testberichte in deinem Account speichern, exportieren oder wieder löschen. Du entscheidest, welche Daten im System bleiben.
</p> </p>
</div> </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> <h3 class="font-semibold text-brand-text" data-i18n="security_card3_title">Schonend für deine Hardware</h3>
<p data-i18n="security_card3_text"> <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. 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> </p>
</div> </div>
</div> </div>
</div>
</div> </div>
</section> </section>

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

@@ -529,6 +529,46 @@ body {
color: #7a86a8; 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 / Features / Pricing */
.steps-grid, .steps-grid,