feat(blocklists): redesign getting started page with path cards and comparison table

Author: ziracmo

crowdsec-docs/src/css/crowdsec-tokens.css

@@ -39,7 +39,8 @@
 
 	/* Type */
 	--cs-font-sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
-	--cs-font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, Menlo, monospace;
+	--cs-font-mono:
+		"JetBrains Mono", "Roboto Mono", ui-monospace, Menlo, monospace;
 
 	/* ── Infima / Docusaurus bridge ──────────────────────────────────────── */
 	--ifm-background-color: var(--cs-bg);
@@ -71,7 +72,11 @@
 	--ifm-link-hover-color: var(--cs-orange);
 
 	--ifm-code-background: var(--cs-bg-soft);
-	--ifm-navbar-background-color: color-mix(in srgb, var(--cs-bg) 85%, transparent);
+	--ifm-navbar-background-color: color-mix(
+		in srgb,
+		var(--cs-bg) 85%,
+		transparent
+	);
 
 	--ifm-hr-border-color: var(--cs-border-hi);
 	--ifm-blockquote-border-color: var(--cs-orange);
@@ -167,7 +172,7 @@
 }
 
 .theme-doc-sidebar-item-link hr {
-	visibility: hidden;
+	background-color: var(--cs-border-hi) !important;
 	margin: 0.25rem 0 !important;
 }
 
@@ -199,7 +204,9 @@
 }
 
 /* Top-level category labels: eyebrow mono */
-.menu__list > .menu__list-item > .menu__list-item-collapsible > .menu__link--sublist {
+.menu__list > .menu__list-item
+	> .menu__list-item-collapsible
+	> .menu__link--sublist {
 	font-family: var(--cs-font-mono);
 	font-size: 10.5px;
 	letter-spacing: 0.14em;
@@ -212,12 +219,18 @@
 	background: transparent !important;
 }
 
-.menu__list > .menu__list-item > .menu__list-item-collapsible > .menu__link--sublist:hover {
+.menu__list
+	> .menu__list-item
+	> .menu__list-item-collapsible
+	> .menu__link--sublist:hover {
 	background: transparent !important;
 	color: var(--cs-ink-dim);
 }
 
-.menu__list > .menu__list-item > .menu__list-item-collapsible > .menu__link--sublist.menu__link--active {
+.menu__list
+	> .menu__list-item
+	> .menu__list-item-collapsible
+	> .menu__link--sublist.menu__link--active {
 	color: var(--cs-orange);
 	background: transparent !important;
 }

crowdsec-docs/unversioned/blocklists/getting_started.mdx

@@ -20,8 +20,7 @@ New to CrowdSec blocklists? Read the [Introduction](/u/blocklists/intro) first t
     badge="Path A · Self-hosted"
     title="CrowdSec Security Engine"
     desc="Ingest blocklists with the open-source agent. Behavior detection, parsing pipeline, Local API — everything runs on your infra."
-    href="/u/blocklists/security_engine"
-    ctaLabel="Get started"
+    links={[{ label: "Get started", href: "/u/blocklists/security_engine" }]}
   >
     <div style={{ display: "flex", flexDirection: "column", gap: 6, margin: "4px 0" }}>
       {[
@@ -43,8 +42,7 @@ New to CrowdSec blocklists? Read the [Introduction](/u/blocklists/intro) first t
     badge="Path B · No agent"
     title="Direct Integrations"
     desc="Push CrowdSec blocklists straight into your existing firewall, CDN, or WAF. No agent to install — just configure your subscription."
-    href="/u/integrations/intro"
-    ctaLabel="Browse integrations"
+    links={[{ label: "Browse integrations", href: "/u/integrations/intro" }]}
   >
     <div style={{ display: "flex", flexDirection: "column", gap: 6, margin: "4px 0" }}>
       {[
@@ -63,10 +61,28 @@ New to CrowdSec blocklists? Read the [Introduction](/u/blocklists/intro) first t
 
 ## Quick comparison
 
-|  | Security Engine | Integrations |
-|---|---|---|
-| Setup time | ~ 10 min | ~ 2 min |
-| Runs on | Your infrastructure | Your existing firewall / CDN |
-| Behavior detection | Yes — full engine | No — blocklists only |
-| Best for | Servers, gateways, k8s | Edge, WAF, managed CDN |
-| Free community feed | Included | Included |
+export const pill = (color) => ({
+  display: "inline-flex", alignItems: "center",
+  fontFamily: "var(--cs-font-mono)", fontSize: 10.5, letterSpacing: "0.1em",
+  textTransform: "uppercase", fontWeight: 600,
+  padding: "2px 10px", borderRadius: 999,
+  background: `color-mix(in srgb, ${color} 14%, transparent)`,
+  color,
+});
+
+<table>
+  <thead>
+    <tr>
+      <th style={{ width: "30%" }}></th>
+      <th><span style={pill("var(--cs-orange)")}>Security Engine</span></th>
+      <th><span style={pill("var(--cs-teal)")}>Integrations</span></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td>Setup time</td><td>~ 10 min</td><td>~ 2 min</td></tr>
+    <tr><td>Runs on</td><td>Your infrastructure</td><td>Your existing firewall / CDN</td></tr>
+    <tr><td>Behavior detection</td><td>Yes — full engine</td><td>No — blocklists only</td></tr>
+    <tr><td>Best for</td><td>Servers, gateways, k8s</td><td>Edge, WAF, managed CDN</td></tr>
+    <tr><td>Free community feed</td><td>Included</td><td>Included</td></tr>
+  </tbody>
+</table>