link to start.crowdsec & roadmap (#907)

* Addition of link to start.crowdsec in intro and roadmap in header + tooltips on header icons

* mini beauty fix & tootltip on hub

---------

Co-authored-by: jdv <[email protected]>

Author: rr404

crowdsec-docs/docusaurus.config.ts

@@ -107,24 +107,34 @@ const NAVBAR_ITEMS: NavbarItem[] = [
 		position: "left",
 		label: "FAQ/Troubleshooting",
 	},
+	{
+		href: "https://roadmap.crowdsec.net",
+		position: "right",
+		title: "Features Roadmap",
+		className: "header-roadmap-link header-icon-link invert dark:invert-0",
+	},
 	{
 		href: "https://github.com/crowdsecurity/crowdsec",
 		position: "right",
+		title: "GitHub CrowdSecurity",
 		className: "header-github-link header-icon-link invert dark:invert-0",
 	},
 	{
 		href: "https://discord.gg/wGN7ShmEE8",
 		position: "right",
+		title: "Discord Community",
 		className: "header-discord-link invert dark:invert-0",
 	},
 	{
 		href: "https://discourse.crowdsec.net",
 		position: "right",
+		title: "Discourse Community",
 		className: "header-discourse-link invert dark:invert-0",
 	},
 	{
 		href: "https://hub.crowdsec.net/",
 		position: "right",
+		title: "CrowdSec Hub",
 		className: "header-hub-link dark:invert",
 	},
 ];

crowdsec-docs/src/css/navbar.css

@@ -24,18 +24,23 @@ const HomePageHeader = (): React.JSX.Element => {
 					<div className="flex flex-col md:flex-row items-start gap-2">
 						<Link to="/u/getting_started/intro" className="w-full md:w-auto">
 							<Button color="primary" className="w-full md:w-auto">
-								Get started
+								🚀 Quick Guides
 							</Button>
 						</Link>
 						<div className="flex flex-row gap-2 w-full md:w-auto">
 							<Link to="https://app.crowdsec.net/" className="flex-1 md:flex-none">
 								<Button variant="secondary" className="w-full md:w-auto">
-									Explore the Console
+									👨‍💻 Explore the Console
 								</Button>
 							</Link>
 							<Link to="https://killercoda.com/iiamloz/scenario/crowdsec-setup" className="flex-1 md:flex-none">
 								<Button variant="secondary" className="w-full md:w-auto">
-									Online Sandbox
+									🛠️ Online Sandbox
+								</Button>
+							</Link>
+							<Link to="https://start.crowdsec.net/" className="flex-1 md:flex-none">
+								<Button variant="secondary" className="w-full md:w-auto">
+									💡 Not sure where to start?
 								</Button>
 							</Link>
 						</div>