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,12 +94,14 @@ 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">
-				{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 && (
+					<div className="font-cs-mono text-[10.5px] text-cs-ink-mute tracking-[0.06em] leading-[1.4] min-w-0 overflow-hidden mt-4">
 						{audience}
 					</div>
 				)}
+
+			<div className="mt-3 pt-4 border-t border-cs-border flex items-center justify-between">
+
 				<div
 					className="inline-flex items-center gap-1.5 font-semibold text-[13px] ml-auto whitespace-nowrap shrink-0 transition-[gap] duration-[160ms]"
 					style={{ color }}

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

@@ -1,8 +1,15 @@
-import { cilBarChart, cilCompass, cilGlobeAlt, cilRss, cilShieldAlt, cilSpeedometer } from "@coreui/icons";
+import {
+	cilBarChart,
+	cilCompass,
+	cilGlobeAlt,
+	cilRss,
+	cilShieldAlt,
+	cilSpeedometer,
+} from "@coreui/icons";
 import { CIcon } from "@coreui/icons-react";
 import Layout from "@theme/Layout";
 import SearchBar from "@theme/SearchBar";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import GuidedSetupCard from "../components/docs/GuidedSetupCard";
 import PathCard from "../components/docs/PathCard";
 import PathCards from "../components/docs/PathCards";
@@ -44,11 +51,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 +106,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",
@@ -114,10 +135,20 @@ export default function HomePage() {
 	}, []);
 
 	return (
-		<Layout title="Documentation" description="CrowdSec — the open-source & participative IPS">
+		<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={{
@@ -138,14 +169,17 @@ export default function HomePage() {
 							backgroundImage:
 								"linear-gradient(var(--cs-border-hi) 1px, transparent 1px), linear-gradient(90deg, var(--cs-border-hi) 1px, transparent 1px)",
 							backgroundSize: "64px 64px",
-							maskImage: "radial-gradient(ellipse 700px 320px at 50% 30%, black 30%, transparent 75%)",
+							maskImage:
+								"radial-gradient(ellipse 700px 320px at 50% 30%, black 30%, transparent 75%)",
 							opacity: 0.4,
 							pointerEvents: "none",
 						}}
 						aria-hidden="true"
 					/>
 
-					<div style={{ position: "relative", maxWidth: 760, margin: "0 auto" }}>
+					<div
+						style={{ position: "relative", maxWidth: 760, margin: "0 auto" }}
+					>
 						{/* Badge */}
 						<div
 							style={{
@@ -154,8 +188,10 @@ export default function HomePage() {
 								gap: 8,
 								padding: "5px 12px",
 								borderRadius: 999,
-								background: "color-mix(in srgb, var(--cs-orange) 12%, transparent)",
-								border: "1px solid color-mix(in srgb, var(--cs-orange) 33%, transparent)",
+								background:
+									"color-mix(in srgb, var(--cs-orange) 12%, transparent)",
+								border:
+									"1px solid color-mix(in srgb, var(--cs-orange) 33%, transparent)",
 								marginBottom: 28,
 								fontFamily: "var(--cs-font-mono)",
 								fontSize: 11.5,
@@ -192,7 +228,8 @@ export default function HomePage() {
 							<br />
 							<span
 								style={{
-									background: "linear-gradient(120deg, var(--cs-ink) 30%, var(--cs-orange) 70%, var(--cs-ink))",
+									background:
+										"linear-gradient(120deg, var(--cs-ink) 30%, var(--cs-orange) 70%, var(--cs-ink))",
 									WebkitBackgroundClip: "text",
 									WebkitTextFillColor: "transparent",
 									backgroundClip: "text",
@@ -214,18 +251,23 @@ export default function HomePage() {
 								marginRight: "auto",
 							}}
 						>
-							Three paths — one platform. Detect attacks at the edge, push curated threat feeds into your stack, or query
-							intel on demand.
+							Three paths — one platform. Detect attacks at the edge, push
+							curated threat feeds into your stack, or query intel on demand.
 						</p>
 
 						{/* Search */}
-						<div className="homepage-search" style={{ marginTop: 36, maxWidth: 560, margin: "36px auto 0" }}>
+						<div
+							className="homepage-search"
+							style={{ marginTop: 36, maxWidth: 560, margin: "36px auto 0" }}
+						>
 							<SearchBar />
 						</div>
 					</div>
 				</section>
 
-				<div style={{ maxWidth: 1080, margin: "0 auto", padding: "0 24px 80px" }}>
+				<div
+					style={{ maxWidth: 1080, margin: "0 auto", padding: "0 24px 80px" }}
+				>
 					{/* ── "I want to…" eyebrow ── */}
 					<div
 						style={{
@@ -245,35 +287,53 @@ export default function HomePage() {
 					{/* ── Path cards ── */}
 					<PathCards>
 						<PathCard
-							eyebrow="01 · DETECT"
+							// eyebrow="01 · DETECT"
 							color={CS_ORANGE}
-							icon={<CIcon icon={cilShieldAlt} style={{ width: 20, height: 20 }} aria-hidden="true" />}
+							icon={
+								<CIcon
+									icon={cilShieldAlt}
+									style={{ width: 20, height: 20 }}
+									aria-hidden="true"
+								/>
+							}
 							title="Detect & block attacks on my servers"
 							desc="Identify and ban bad-behaving IPs from your logs and requests using CrowdSec Detection Scenarios and Virtual-Patching collections."
 							tag="Security Engine"
-							tags={["IDS", "IPS", "WAF", "CrowdSec FOSS"]}
+							tags={["IDPS", "WAF", "CrowdSec FOSS"]}
 							audience="Sysadmins · DevOps · SRE"
 							href="/security-engine"
 						/>
 						<PathCard
-							eyebrow="02 · PROTECT"
+							// eyebrow="02 · PROTECT"
 							color={CS_TEAL}
-							icon={<CIcon icon={cilRss} style={{ width: 20, height: 20 }} aria-hidden="true" />}
+							icon={
+								<CIcon
+									icon={cilRss}
+									style={{ width: 20, height: 20 }}
+									aria-hidden="true"
+								/>
+							}
 							title="Push blocklists into my firewall, CDN or WAF"
 							desc="Manage network-perimeter devices and want a URL to subscribe to — no agent to install, just curated feeds your equipment can pull."
 							tag="Blocklist Endpoint"
-							tags={["AWS", "Threat Feeds", "NGINX", "Cloudflare"]}
+							tags={["Threat Feeds", "IOC Streams", "Deny-list"]}
 							audience="Network · Platform teams"
 							href="/blocklists"
 						/>
 						<PathCard
-							eyebrow="03 · INVESTIGATE"
+							// eyebrow="03 · INVESTIGATE"
 							color={CS_VIOLET}
-							icon={<CIcon icon={cilGlobeAlt} style={{ width: 20, height: 20 }} aria-hidden="true" />}
+							icon={
+								<CIcon
+									icon={cilGlobeAlt}
+									style={{ width: 20, height: 20 }}
+									aria-hidden="true"
+								/>
+							}
 							title="Investigate IP behaviors & enrich alerts"
 							desc="Security analyst or developer who wants IP context, behaviors, CVEs, aggressivity… in a browser or via REST API."
 							tag="IP Reputation & CTI"
-							tags={["SOC", "Lookup", "Threat Intel", "API"]}
+							tags={["IOC Lookup", "Threat Intel", "API Access"]}
 							audience="SOC · Threat Intel"
 							href="/u/cti_api/intro"
 						/>
@@ -293,7 +353,9 @@ export default function HomePage() {
 							justifyContent: "center",
 						}}
 					>
-						<div style={{ height: 1, flex: 1, background: "var(--cs-border)" }} />
+						<div
+							style={{ height: 1, flex: 1, background: "var(--cs-border)" }}
+						/>
 						<div
 							style={{
 								fontFamily: "var(--cs-font-mono)",
@@ -306,7 +368,9 @@ export default function HomePage() {
 						>
 							How each path works
 						</div>
-						<div style={{ height: 1, flex: 1, background: "var(--cs-border)" }} />
+						<div
+							style={{ height: 1, flex: 1, background: "var(--cs-border)" }}
+						/>
 					</div>
 
 					<PathwayRow
@@ -315,7 +379,7 @@ export default function HomePage() {
 						title="Detect and block malicious behaviors on your infrastructure"
 						sub="Open-source agent that parses logs, applies scenarios, and bans IPs."
 						steps={securityEngineSteps}
-						ctaLabel="Get started"
+						ctaLabel="Install CrowdSec"
 						ctaHref="/security-engine"
 						defaultOpen
 					/>
@@ -325,7 +389,7 @@ export default function HomePage() {
 						title="Push curated threat feeds directly into your firewall, CDN or WAF"
 						sub="Subscribe via URL. Compatible with AWS, Cloudflare, NGINX, Fastly, F5, and more."
 						steps={blocklistSteps}
-						ctaLabel="Get started"
+						ctaLabel="Integrate Blocklist"
 						ctaHref="/blocklists"
 					/>
 					<PathwayRow
@@ -342,8 +406,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 ── */}