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

Author: ziracmo

crowdsec-docs/src/components/docs/PathCard/index.tsx

@@ -39,7 +39,7 @@ export default function PathCard({ eyebrow, color, icon, title, desc, tag, tags
 			href={href}
 			onMouseEnter={() => setHover(true)}
 			onMouseLeave={() => setHover(false)}
-			className="relative p-6 rounded-[14px] overflow-hidden cursor-pointer flex flex-col no-underline min-w-0 transition-[border-color,background,box-shadow] duration-200"
+			className="relative p-6 rounded-[14px] overflow-hidden cursor-pointer flex flex-col no-underline hover:no-underline min-w-0 transition-[border-color,background,box-shadow] duration-200"
 			style={{
 				color: "inherit",
 				background: hover ? "var(--cs-surface-2)" : "var(--cs-surface)",
@@ -94,7 +94,7 @@ export default function PathCard({ eyebrow, color, icon, title, desc, tag, tags
 				</div>
 			)}
 
-			<div className="mt-5 pt-4 border-t border-dashed border-cs-border flex items-center justify-between">
+			<div className="mt-5 pt-4 border-t border-cs-border flex items-center justify-between">
 				{audience && (
 					<div className="font-cs-mono text-[10.5px] text-cs-ink-mute tracking-[0.06em] leading-[1.4] min-w-0 overflow-hidden">
 						{audience}

crowdsec-docs/src/css/alerts.css

@@ -12,8 +12,12 @@
 	top: 0.2rem !important;
 }
 
+.alert .cs-admon__icon {
+	@apply p-0.5;
+}
+
 .alert svg {
-	@apply !w-5 !h-5 mb-0;
+	@apply !w-4 !h-4 mb-0;
 }
 
 .alert--info {

crowdsec-docs/src/css/crowdsec-components.css

@@ -413,10 +413,6 @@ code:not(pre code):not(.cs-ic) {
 	overflow: hidden;
 	background: var(--cs-surface);
 }
-.cs-table-wrap table {
-	margin: 0 !important;
-	border: none !important;
-}
 
 /* ── Direct table targeting (catches HTML tables too) ─────────── */
 
@@ -515,6 +511,14 @@ article table tbody tr:hover td {
 	background: color-mix(in srgb, var(--cs-orange) 4%, transparent) !important;
 }
 
+/* ── Reset table styles when inside cs-table-wrap (after all general rules so this wins) */
+.cs-table-wrap table {
+	margin: 0 !important;
+	border: none !important;
+	border-radius: 0 !important;
+	overflow: visible !important;
+}
+
 /* ── Pill component ─────────────────────────────────────────────── */
 .cs-pill {
 	display: inline-flex;
@@ -578,6 +582,13 @@ article table tbody tr:hover td {
 	border-bottom: 1px solid var(--cs-border) !important;
 	margin-bottom: 0 !important;
 	gap: 8px !important;
+	flex-wrap: nowrap !important;
+	overflow-x: auto !important;
+	scrollbar-width: none !important;
+}
+
+.tabs::-webkit-scrollbar {
+	display: none !important;
 }
 
 /* Individual tab items */
@@ -592,6 +603,8 @@ article table tbody tr:hover td {
 	border-radius: 6px 6px 0 0 !important;
 	border: none !important;
 	border-bottom: 2px solid transparent !important;
+	white-space: nowrap !important;
+	flex-shrink: 0 !important;
 	transition:
 		color 0.12s,
 		background 0.12s,

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

@@ -167,7 +167,7 @@
 }
 
 .theme-doc-sidebar-item-link hr {
-	visibility: hidden;
+	background-color: var(--cs-border-hi) !important;
 	margin: 0.25rem 0 !important;
 }
 

crowdsec-docs/src/pages/index.tsx

@@ -44,11 +44,20 @@ const blocklistSteps = [
 		title: "Create an integration endpoint",
 		desc: "Generates a dedicated URL and credentials to serve blocklists to your perimeter devices.",
 	},
-	{ title: "Choose blocklists to serve", desc: "Select from curated feeds: scanners, bots, TOR exits, exploits, and more." },
-	{ title: "Plug in as a threat feed", desc: "Point your firewall, CDN, or WAF at the endpoint. No agent to install." },
+	{
+		title: "Choose blocklists to serve",
+		desc: "Select from curated feeds: scanners, bots, TOR exits, exploits, and more.",
+	},
+	{
+		title: "Plug in as a threat feed",
+		desc: "Point your firewall, CDN, or WAF at the endpoint. No agent to install.",
+	},
 ];
 const ctiSteps = [
-	{ title: "Look up any IP in the Console", desc: "Get reputation score, behaviors, attack history, and CVE links instantly." },
+	{
+		title: "Look up any IP in the Console",
+		desc: "Get reputation score, behaviors, attack history, and CVE links instantly.",
+	},
 	{
 		title: "Generate a CTI API key",
 		hint: "OPTIONAL" as const,
@@ -90,7 +99,12 @@ const alreadyRunningLinks = [
 ];
 
 const popularLinks = [
-	{ icon: <CIcon icon={cilCompass} style={ICON_SM} aria-hidden="true" />, label: "Console", href: "/u/console/intro", color: CS_ORANGE },
+	{
+		icon: <CIcon icon={cilCompass} style={ICON_SM} aria-hidden="true" />,
+		label: "Console",
+		href: "/u/console/intro",
+		color: CS_ORANGE,
+	},
 	{
 		icon: <CIcon icon={cilShieldAlt} style={ICON_SM} aria-hidden="true" />,
 		label: "AppSec / WAF",
@@ -117,7 +131,14 @@ export default function HomePage() {
 		<Layout title="Documentation" description="CrowdSec — the open-source & participative IPS">
 			<main>
 				{/* ── Hero ── full-width so grid bg spans the viewport ── */}
-				<section style={{ position: "relative", padding: "92px 24px 48px", textAlign: "center", overflow: "hidden" }}>
+				<section
+					style={{
+						position: "relative",
+						padding: "92px 24px 48px",
+						textAlign: "center",
+						overflow: "hidden",
+					}}
+				>
 					{/* Radial glow */}
 					<div
 						style={{
@@ -342,8 +363,14 @@ export default function HomePage() {
 					<GuidedSetupCard
 						title="Not sure where to start?"
 						desc="Answer a few questions and get a recommended path with install steps for your stack."
-						primaryCta={{ label: "Use Case Questionnaire", href: "https://start.crowdsec.net/" }}
-						secondaryCta={{ label: "Try in Sandbox", href: "https://killercoda.com/iiamloz/scenario/crowdsec-setup" }}
+						primaryCta={{
+							label: "Use Case Questionnaire",
+							href: "https://start.crowdsec.net/",
+						}}
+						secondaryCta={{
+							label: "Try in Sandbox",
+							href: "https://killercoda.com/iiamloz/scenario/crowdsec-setup",
+						}}
 					/>
 
 					{/* ── Popular docs ── */}

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>