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

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>