TEST

partials/landing/main/hero.php

@@ -1,5 +1,5 @@
 <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="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(58,111,248,0.18),_transparent_55%),radial-gradient(circle_at_bottom,_rgba(255,183,134,0.35),_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 -->
@@ -7,7 +7,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">
+            <h1 class="font-heading text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-brand-text" 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">
@@ -26,7 +26,7 @@
                 </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"
+                   class="inline-flex items-center justify-center rounded-full border border-brand-border/70 bg-brand-bg/60 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 &amp; Pro
                 </a>
@@ -50,49 +50,65 @@
         </div>
 
         <!-- Right: Card (Teaser Quickcheck) -->
-        <div class="flex-1 w-full max-w-md lg:max-w-sm">
+        <div class="flex-1 w-full max-w-xl">
-            <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="quick-preview-card space-y-6">
-                <div class="flex items-start justify-between gap-3">
+                <div class="quick-preview-header">
                     <div>
-                        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-brand-muted" data-i18n="quick_label">
+                        <p class="quick-preview-eyebrow" data-i18n="quick_label">
                             QUICK CHECK PREVIEW
                         </p>
-                        <h2 class="mt-1 font-heading font-semibold text-lg text-white" data-i18n="quick_title">
+                        <h2 class="mt-2 font-heading font-semibold text-xl text-brand-text" 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">
+                    <span class="quick-badge" data-i18n="badge_free">
                         Free
                     </span>
                 </div>
 
-                <div class="space-y-3 text-sm text-brand-muted">
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                    <p data-i18n="quick_intro">
+                    <div class="quick-metric-card">
+                        <span data-i18n="quick_metric1_label">Write performance</span>
+                        <span data-i18n="quick_metric1_value">~ 75–120 MB/s*</span>
+                    </div>
+                    <div class="quick-metric-card">
+                        <span data-i18n="quick_metric2_label">Integrity checks</span>
+                        <span data-i18n="quick_metric2_value">512 MB sample</span>
+                    </div>
+                </div>
+
+                <p class="text-sm text-brand-muted" 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">
+                <ul class="list-disc list-inside space-y-1 text-sm text-brand-muted">
                     <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="quick-kit">
-                    <div class="flex justify-between">
+                    <div class="quick-kit-left">
-                        <span data-i18n="quick_metric1_label">Write performance</span>
+                        <h4 data-i18n="quick_visual_title">Quick test indicator</h4>
-                        <span data-i18n="quick_metric1_value">~ 75–120 MB/s*</span>
+                        <p data-i18n="quick_visual_text">
+                            So sieht die Schnelltest-Vorschau aus: Grün markiert einen stabilen Stick, Orange warnt bei Auffälligkeiten.
+                        </p>
+                        <div class="quick-kit-lines">
+                            <div class="quick-kit-line"></div>
+                            <div class="quick-kit-line is-alert"></div>
                         </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">
+                    <div class="quick-kit-window">
-                        <span data-i18n="quick_metric2_label">Integrity checks</span>
+                        <span class="window-label" data-i18n="quick_visual_window">Result window</span>
-                        <span data-i18n="quick_metric2_value">512 MB sample</span>
+                        <div class="window-strip">
+                            <span class="window-dot is-active"></span>
+                            <span class="window-dot is-pass"></span>
+                            <span class="window-dot"></span>
                         </div>
-                    <p class="text-[11px] text-brand-muted/80" data-i18n="quick_footnote">
+                        <p class="quick-kit-footnote" data-i18n="quick_footnote">
                             *Beispielwerte – deine Ergebnisse hängen von Stick, Port &amp; System ab.
                         </p>
                     </div>
+                </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"

partials/structure/layout_start.php

@@ -77,6 +77,34 @@ foreach ($GLOBALS['page_header_scripts'] as $script) {
 }
 ?>
 
+    <script>
+        window.tailwind = window.tailwind || {};
+        window.tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'brand-primary': '#3a6ff8',
+                        'brand-primarySoft': '#e8f1ff',
+                        'brand-border': '#dfe6f4',
+                        'brand-bg': '#f9fbff',
+                        'brand-surface': '#ffffff',
+                        'brand-text': '#0f1f3d',
+                        'brand-muted': '#5f6b85'
+                    },
+                    fontFamily: {
+                        heading: ['"Montserrat"', '"Plus Jakarta Sans"', '"Inter"', 'system-ui', 'sans-serif']
+                    },
+                    borderRadius: {
+                        xl2: '1.75rem',
+                        xl3: '2.25rem'
+                    },
+                    boxShadow: {
+                        soft: '0 18px 45px rgba(58, 111, 248, 0.18)'
+                    }
+                }
+            }
+        };
+    </script>
     <!-- Tailwind (Dev) -->
     <script src="https://cdn.tailwindcss.com"></script>
     <script>

public/assets/css/main.css

@@ -1,17 +1,17 @@
 :root {
-  --brand-blue: #0051FF;
+  --brand-blue: #3a6ff8;
-  --deep-gray: #1A1A1A;
+  --deep-gray: #0f1f3d;
-  --silver: #C8CBD0;
+  --silver: #d9e1f2;
-  --green-check: #03C160;
+  --green-check: #1fce88;
-  --error-red: #E63946;
+  --error-red: #f46666;
-  --amber-yellow: #FFDA3D;
+  --amber-yellow: #ffb347;
-  --light-gray: #F4F4F4;
+  --light-gray: #edf2fb;
-  --very-light-gray: #FAFAFA;
+  --very-light-gray: #f9fbff;
-  --off-white: #FFFFFF;
+  --off-white: #ffffff;
 
   --radius-lg: 16px;
   --radius-pill: 999px;
-  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.08);
+  --shadow-soft: 0 18px 45px rgba(55, 101, 202, 0.15);
 }
 
 *,
@@ -28,8 +28,8 @@ html, body {
 body {
   font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-weight: 400;
-  color: #222;
+  color: #1f2a44;
-  background: var(--very-light-gray);
+  background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 50%, #f1f6ff 100%);
 }
 
 /* Layout helpers */
@@ -237,7 +237,8 @@ body {
 .hero {
   padding-top: 5rem;
   padding-bottom: 4rem;
-  background: radial-gradient(circle at top left, rgba(0, 81, 255, 0.08), transparent 55%);
+  background: radial-gradient(circle at top left, rgba(58, 111, 248, 0.2), transparent 55%),
+              radial-gradient(circle at bottom right, rgba(255, 215, 166, 0.25), transparent 60%);
 }
 
 .hero-grid {
@@ -301,11 +302,11 @@ body {
 }
 
 .hero-card {
-  background: #fff;
+  background: linear-gradient(160deg, #ffffff 0%, #f1f5ff 80%);
-  border-radius: 24px;
+  border-radius: 28px;
-  padding: 1.4rem 1.5rem;
+  padding: 1.6rem 1.8rem;
   box-shadow: var(--shadow-soft);
-  border: 1px solid rgba(200, 203, 208, 0.6);
+  border: 1px solid rgba(58, 111, 248, 0.15);
 }
 
 .hero-logo {
@@ -324,31 +325,208 @@ body {
 .hero-metrics {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0.75rem;
+  gap: 0.9rem;
-  margin-bottom: 0.75rem;
+  margin-bottom: 1.25rem;
 }
 
 .metric-label {
   display: block;
-  font-size: 0.75rem;
+  font-size: 0.8rem;
-  color: #777;
+  color: #5f6b85;
 }
 
 .metric-value {
   font-family: 'Montserrat', system-ui, sans-serif;
   font-weight: 700;
-  font-size: 1rem;
+  font-size: 1.1rem;
+  color: var(--deep-gray);
 }
 
 .hero-small {
-  font-size: 0.75rem;
+  font-size: 0.78rem;
-  color: #777;
+  color: #6c7695;
 }
 
 .hero-stick img {
   width: 200px;
   max-width: 100%;
-  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.25));
+  filter: drop-shadow(0 12px 28px rgba(58, 111, 248, 0.25));
+}
+
+/* Quick test visual */
+
+.quick-preview-card {
+  position: relative;
+  border-radius: 32px;
+  padding: 1.8rem;
+  background: linear-gradient(165deg, #ffffff 0%, #eef4ff 100%);
+  border: 1px solid rgba(56, 102, 214, 0.2);
+  box-shadow: var(--shadow-soft);
+  overflow: hidden;
+}
+
+.quick-preview-card::after {
+  content: "";
+  position: absolute;
+  inset: 12% auto auto 60%;
+  width: 220px;
+  height: 220px;
+  background: radial-gradient(circle, rgba(58, 111, 248, 0.12), transparent 65%);
+  pointer-events: none;
+}
+
+.quick-preview-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.quick-preview-eyebrow {
+  font-size: 0.75rem;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: var(--brand-blue);
+}
+
+.quick-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.35rem 0.75rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #1b4045;
+  background: rgba(31, 206, 136, 0.15);
+}
+
+.quick-metric-card {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 20px;
+  border: 1px solid rgba(90, 132, 224, 0.2);
+  padding: 0.8rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.quick-metric-card span:first-child {
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #6c7695;
+}
+
+.quick-metric-card span:last-child {
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--deep-gray);
+}
+
+.quick-kit {
+  position: relative;
+  margin-top: 1.5rem;
+  border-radius: 30px;
+  padding: 1.5rem;
+  background: linear-gradient(120deg, #ffffff 0%, #f2f7ff 100%);
+  border: 1px solid rgba(68, 121, 249, 0.18);
+  display: grid;
+  grid-template-columns: 1.1fr 0.9fr;
+  gap: 1rem;
+}
+
+.quick-kit-left h4 {
+  margin: 0;
+  font-size: 1.1rem;
+  font-family: 'Montserrat', system-ui, sans-serif;
+  color: var(--deep-gray);
+}
+
+.quick-kit-left p {
+  margin: 0.35rem 0 0;
+  font-size: 0.9rem;
+  color: #5f6b85;
+}
+
+.quick-kit-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 0.8rem;
+}
+
+.quick-kit-line {
+  position: relative;
+  height: 14px;
+  border-radius: 999px;
+  background: rgba(92, 120, 192, 0.12);
+  overflow: hidden;
+}
+
+.quick-kit-line::after {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(58, 111, 248, 0.1), rgba(31, 206, 136, 0.5));
+}
+
+.quick-kit-line.is-alert::after {
+  background: linear-gradient(90deg, rgba(255, 180, 90, 0.2), rgba(255, 118, 118, 0.5));
+}
+
+.quick-kit-window {
+  position: relative;
+  border-radius: 26px;
+  padding: 1rem;
+  background: linear-gradient(145deg, #edf2ff, #ffffff);
+  box-shadow: inset 0 2px 6px rgba(15, 33, 66, 0.08);
+}
+
+.quick-kit-window .window-label {
+  font-size: 0.7rem;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  color: #8390b3;
+  margin-bottom: 0.5rem;
+  display: block;
+}
+
+.quick-kit-window .window-strip {
+  height: 60px;
+  border-radius: 18px;
+  background: #ffffff;
+  border: 1px dashed rgba(89, 124, 178, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 0 1.2rem;
+}
+
+.window-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #e6ecff;
+  position: relative;
+}
+
+.window-dot.is-active {
+  background: #3a6ff8;
+  box-shadow: 0 0 0 6px rgba(58, 111, 248, 0.18);
+}
+
+.window-dot.is-pass {
+  background: #1fce88;
+  box-shadow: 0 0 0 6px rgba(31, 206, 136, 0.18);
+}
+
+.quick-kit-footnote {
+  margin-top: 0.7rem;
+  font-size: 0.75rem;
+  color: #7a86a8;
 }
 
 /* Steps / Features / Pricing */

public/assets/i18n/de.json

@@ -45,7 +45,10 @@
     "quick_metric2_label": "Integritätsprüfung",
     "quick_metric2_value": "512 MB Testdaten",
     "quick_footnote": "*Beispielwerte – deine Ergebnisse hängen von Stick, Port & System ab.",
-    "quick_cta": "Zum kostenlosen Schnelltest"
+    "quick_cta": "Zum kostenlosen Schnelltest",
+    "quick_visual_title": "Schnelltest-Anzeige",
+    "quick_visual_text": "So sieht die Quick-Check-Vorschau aus: Grün markiert stabile Daten, Orange warnt, wenn die Schreibrate einbricht.",
+    "quick_visual_window": "Ergebnisfenster"
   },
 
   "how": {

public/assets/i18n/en.json

@@ -45,7 +45,10 @@
     "quick_metric2_label": "Integrity checks",
     "quick_metric2_value": "512 MB sample",
     "quick_footnote": "*Example values – your results depend on drive, port & system.",
-    "quick_cta": "Go to free quick check"
+    "quick_cta": "Go to free quick check",
+    "quick_visual_title": "Quick test indicator",
+    "quick_visual_text": "See how the quick check highlights fake patterns: the green bar marks stable data, orange alerts you when writes collapse.",
+    "quick_visual_window": "Result window"
   },
 
   "how": {

public/assets/i18n/fr.json

@@ -45,7 +45,10 @@
     "quick_metric2_label": "Contrôles d’intégrité",
     "quick_metric2_value": "Échantillon de 512 Mo",
     "quick_footnote": "*Valeurs indicatives – les résultats dépendent de la clé, du port et du système.",
-    "quick_cta": "Accéder au test rapide gratuit"
+    "quick_cta": "Accéder au test rapide gratuit",
+    "quick_visual_title": "Indicateur du test rapide",
+    "quick_visual_text": "Voici l’aspect visuel du contrôle rapide : le vert signale des données stables, l’orange avertit lorsque l’écriture s’effondre.",
+    "quick_visual_window": "Fenêtre de résultat"
   },
 
   "how": {

public/assets/i18n/it.json

@@ -45,7 +45,10 @@
     "quick_metric2_label": "Controlli di integrità",
     "quick_metric2_value": "Campione da 512 MB",
     "quick_footnote": "*Valori di esempio – i risultati dipendono da chiavetta, porta e sistema.",
-    "quick_cta": "Vai al test rapido gratuito"
+    "quick_cta": "Vai al test rapido gratuito",
+    "quick_visual_title": "Indicatore quick test",
+    "quick_visual_text": "Ecco l’aspetto visivo del controllo rapido: il verde mostra dati stabili, l’arancione avvisa quando la scrittura crolla.",
+    "quick_visual_window": "Finestra risultato"
   },
 
   "how": {