enhancement: update css and section single/multi server

Author: LaurenceJJones

crowdsec-docs/src/components/home-page/home-item.tsx

@@ -14,10 +14,10 @@ export const HomePageItem = (props: Props): React.JSX.Element => (
 	<Link key={props.title} href={props.link} className="border-0 hover:no-underline">
 		<div
 			className={
-				"w-full flex justify-start items-center border border-solid border-gray-100 dark:border-transparent dark:bg-gray-200 flex-row rounded-lg px-2 py-2 gap-2 flex-1 cursor-pointer shadow-md dark:shadow-none ease-in-out duration-300 hover:scale-101 active:scale-99 hover:dark:bg-gray-300"
+				"w-full flex justify-start items-center border border-solid border-gray-100 dark:border-transparent dark:bg-gray-200 flex-row rounded-lg px-2 py-2 gap-2 flex-1 cursor-pointer shadow-md dark:shadow-none ease-in-out duration-300 hover:scale-101 active:scale-99 hover:dark:bg-gray-300 hover:bg-neutral-200"
 			}
 		>
-			<span className="w-12 h-12 rounded-lg inline-flex items-center justify-center border border-solid border-gray-200 dark:bg-gray-50">
+			<span className="w-12 h-12 rounded-lg inline-flex items-center justify-center border border-solid border-gray-200 dark:bg-gray-50 bg-white">
 				{(!Array.isArray(props.icon) && <props.icon className="icon icon-xl" />) || <CIcon icon={props.icon} size="xl" />}
 			</span>
 

crowdsec-docs/src/components/home-page/quick-start.tsx

@@ -1,3 +1,5 @@
+import ForwardIcon from "@mui/icons-material/Forward";
+import HubIcon from "@mui/icons-material/Hub";
 import cibApple from "@site/static/img/logo/apple-colored.svg";
 import cibDocker from "@site/static/img/logo/docker-colored.svg";
 import cibFreebsd from "@site/static/img/logo/freebsd-colored.svg";
@@ -14,9 +16,10 @@ type StaticData = {
 	icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
 	text: string;
 	link: string;
+	description?: string;
 };
 
-const staticData: StaticData[] = [
+const singleServerSetup: StaticData[] = [
 	{
 		icon: cibLinux,
 		text: "Linux",
@@ -70,6 +73,21 @@ const staticData: StaticData[] = [
 	// },
 ];
 
+const multiServerSetup: StaticData[] = [
+	{
+		icon: HubIcon,
+		text: "Central LAPI",
+		link: "/u/user_guides/multiserver_setup",
+		description: "Use a single LAPI to collect alerts.",
+	},
+	{
+		icon: ForwardIcon,
+		text: "Log Centralization",
+		link: "/u/user_guides/log_centralization",
+		description: "Use Rsyslog to centralize logs.",
+	},
+];
+
 const QuickStart = (): React.JSX.Element => {
 	return (
 		<section>
@@ -78,15 +96,32 @@ const QuickStart = (): React.JSX.Element => {
 				<p className="max-w-xl text-sm text-foreground/70">We can secure your stack. Just select your platform and get started.</p>
 			</div>
 
+			<div className="text-left">
+				<h4 className="mb-1">Single Server Setup</h4>
+				<p className="max-w-xl text-sm text-foreground/70">
+					Install CrowdSec on a single server. This is the simplest way to get started with CrowdSec.
+				</p>
+			</div>
 			<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
-				{staticData.map((props) => (
+				{singleServerSetup.map((props) => (
 					<HomePageItem title={props.text} description="" link={props.link} icon={props.icon} key={props.text} />
 				))}
 			</div>
-			<p className="text-xs my-1 text-foreground/70 text-right">
+			<p className="text-xs mt-1 mb-4 text-foreground/70 text-right">
 				*Logos and trademarks, such as the logos above, are the property of their respective owners and are used here for
 				identification purposes only.
 			</p>
+			<div className="text-left">
+				<h4 className="mb-1">Multi-Server Setup</h4>
+				<p className="max-w-xl text-sm text-foreground/70">
+					Use CrowdSec within a multi-server environment. This is the advanced way to get started.
+				</p>
+			</div>
+			<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
+				{multiServerSetup.map((props) => (
+					<HomePageItem title={props.text} description={props.description} link={props.link} icon={props.icon} key={props.text} />
+				))}
+			</div>
 		</section>
 	);
 };