From 3066f314361458e2e981bd7f02488b728efc5c46 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Fri, 14 Mar 2025 16:41:40 +0100
Subject: [PATCH 1/2] wip

---
 src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml b/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
index b06ec612f..075de5dda 100644
--- a/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
@@ -12,11 +12,8 @@
 				<h1 class="text-4xl font-bold font-sans text-black">Elastic documentation</h1>
 				<p class="mt-4">Find the help you need, wherever you are in your Elastic journey.</p>
 				<div class="flex lg:inline-flex gap-3 mt-9">
-					<a href="https://cloud.elastic.co/registration" target="_blank" rel="noopener noreferrer" class="grow select-none cursor-pointer text-white text-nowrap bg-blue-elastic hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-semibold rounded-sm px-6 py-2.5 focus:outline-none h-10 flex items-center justify-center">
-						Start free trial
-					</a>
-					<a href="@Model.Link("/deploy-manage/upgrade")" class="grow cursor-pointer text-blue-elastic hover:text-blue-elastic-100 text-nowrap border-2 border-blue-elastic hover:border-blue-elastic-100 focus:ring-4 focus:outline-none focus:ring-blue-300 font-semibold rounded-sm px-6 py-2.5 text-center h-10 flex items-center justify-center">
-						Upgrade
+					<a href="@Model.Link("/get-started")" class="grow select-none cursor-pointer text-white text-nowrap bg-blue-elastic hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-semibold rounded-sm px-6 py-2.5 focus:outline-none h-10 flex items-center justify-center">
+						Get started
 					</a>
 				</div>
 			</div>

From c07f01351736f852169bb5fe766a8dc926af8300 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Fri, 14 Mar 2025 17:58:33 +0100
Subject: [PATCH 2/2] Landing page changes

---
 .../Slices/Layout/_LandingPage.cshtml         | 285 ++++++------------
 .../_static/icon-dashboards-64-color.svg      |  15 +
 .../_static/icon-graph-64-color.svg           |  15 +
 .../_static/icon-infra-64-color.svg           |  16 +
 .../_static/icon-three-people-64-color.svg    |   8 +
 5 files changed, 150 insertions(+), 189 deletions(-)
 create mode 100644 src/Elastic.Markdown/_static/icon-dashboards-64-color.svg
 create mode 100644 src/Elastic.Markdown/_static/icon-graph-64-color.svg
 create mode 100644 src/Elastic.Markdown/_static/icon-infra-64-color.svg
 create mode 100644 src/Elastic.Markdown/_static/icon-three-people-64-color.svg

diff --git a/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml b/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
index 075de5dda..4972a40b8 100644
--- a/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
@@ -6,7 +6,7 @@
 		</div>
 		<div class="sr-only">Loading</div>
 	</div>
-	<section class="w-screen px-8 lg:px-6 bg-grey-10 ">
+	<section class="w-screen px-8 lg:px-6 bg-grey-10">
 		<div class="container mx-auto py-16 grid lg:grid-cols-2 items-center gap-6">
 			<div class="lg:basis-[50%]">
 				<h1 class="text-4xl font-bold font-sans text-black">Elastic documentation</h1>
@@ -25,54 +25,69 @@
 
 	<section class="w-screen px-8 lg:px-6">
 		<div class="container mx-auto py-16">
-			<h2 class="font-bold text-3xl text-ink-dark">Elastic basics</h2>
-			<div class="grid gap-6 mt-6">
-				<div>
-					<p class="grow mt-2 lg:max-w-[80ch]">
-						Learn about Elasticsearch, the components at the heart of the Elastic Search AI Platform, and the solutions it powers.
-					</p>
-					<div class="mt-6">
-						<a href="@Model.Link("/get-started")" class="link">
-							Get started
-							<svg class="link-arrow"
-							     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
-							</svg>
-						</a>
+			<h2 class="font-bold text-3xl text-ink-dark">How-to guides</h2>
+			<div class="grid md:grid-cols-2 xl:grid-cols-4 gap-6 mt-6">
+				<div class="grow rounded-xl border-1 border-grey-20 p-6">
+					<div class="flex gap-6 h-full">
+						<img loading="lazy" alt="Graph icon" src="@Model.Static("icon-graph-64-color.svg")" class="size-9"/>
+						<div class="flex flex-col h-full">
+							<p class="font-sans font-bold text-xl">Manage all your data</p>
+							<p class="mt-2 grow">Learn how to ingest, enrich, and manage your data throughout its entire Elasticsearch lifecycle.</p>
+							<div class="grid grid-cols-2 mt-6">
+								<a href="@Model.Link("/manage-data")" class="text-blue-elastic hover:text-blue-elastic-100 font-sans font-semibold">View docs</a>
+							</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-	</section>
-	
-	<section class="w-screen px-8 lg:px-6 bg-grey-10">
-		<div class="container mx-auto py-16">
-			<h2 class="font-bold text-3xl text-ink-dark">Instant Elasticsearch</h2>
-			<div class="grid lg:grid-cols-2 gap-6 mt-6">
-				<div class="lg:basis-[50%]">
-					<p class="mt-2 font-body">For local testing, use Docker to install and run Elasticsearch.</p>
+
+				<div class="grow rounded-xl border-1 border-grey-20 p-6">
+					<div class="flex gap-6 h-full">
+						<img loading="lazy" alt="Dashboards icon" src="@Model.Static("icon-dashboards-64-color.svg")" class="size-9"/>
+						<div class="flex flex-col h-full">
+							<p class="font-sans font-bold text-xl">Explore and analyze your data</p>
+							<p class="mt-2 grow">Discover the querying, shaping, and visualization tools of Elasticsearch and Kibana, available in every solution.</p>
+							<div class="grid grid-cols-2 mt-6">
+								<a href="@Model.Link("/explore-analyze")" class="text-blue-elastic hover:text-blue-elastic-100 font-sans font-semibold">View docs</a>
+							</div>
+						</div>
+					</div>
 				</div>
-				<div class="lg:basis-[50%] rounded-xl border-1 border-grey-20 p-6">
-					<p class="font-body">Try it locally now:</p>
-					<div class="mt-2">
-						<div class="highlight-bash notranslate">
-							<div class="highlight">
-								<pre>
-									<code class="language-yaml hljs" data-highlighted="yes">curl -fsSL https://elastic.co/start-local | sh</code>
-								</pre>
+
+				<div class="grow rounded-xl border-1 border-grey-20 p-6">
+					<div class="flex gap-6 h-full">
+						<img loading="lazy" alt="Infra logo" src="@Model.Static("icon-infra-64-color.svg")" class="size-9"/>
+						<div class="flex flex-col h-full">
+							<p class="font-sans font-bold text-xl">Deploy and manage</p>
+							<p class="mt-2 grow">Learn about how to deploy and manage all aspects of your Elastic environment.</p>
+							<div class="grid grid-cols-2 mt-6">
+								<a href="@Model.Link("/deploy-manage")" class="text-blue-elastic hover:text-blue-elastic-100 font-sans font-semibold">View docs</a>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="grow rounded-xl border-1 border-grey-20 p-6">
+					<div class="flex gap-6 h-full">
+						<img loading="lazy" alt="Three people icon" src="@Model.Static("icon-three-people-64-color.svg")" class="size-9"/>
+						<div class="flex flex-col h-full">
+							<p class="font-sans font-bold text-xl">Manage your Elastic Cloud organization</p>
+							<p class="mt-2 grow">Manage the settings for your Elastic Cloud account.</p>
+							<div class="grid grid-cols-2 mt-6">
+								<a href="@Model.Link("/cloud-account")" class="text-blue-elastic hover:text-blue-elastic-100 font-sans font-semibold">View docs</a>
 							</div>
 						</div>
 					</div>
 				</div>
+				
 			</div>
 		</div>
 	</section>
 
-	<section class="w-screen px-8 lg:px-6">
+	<section class="w-screen px-8 lg:px-6 bg-grey-10">
 		<div class="container mx-auto py-16">
 			<h2 class="font-bold text-3xl text-ink-dark">Elastic products</h2>
 			<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
-				<div class="grow rounded-xl border-1 border-grey-20 p-6">
+				<div class="grow rounded-xl border-1 border-grey-20 p-6 bg-white">
 					<div class="flex gap-6 h-full">
 						<img loading="lazy" alt="Search logo" src="@Model.Static("elasticsearch-logo-color-64px.svg")" class="size-9"/>
 						<div class="flex flex-col h-full">
@@ -80,12 +95,11 @@
 							<p class="mt-2 grow">Build powerful search and RAG applications using Elasticsearch's vector database, AI toolkit, and advanced retrieval capabilities.</p>
 							<div class="grid grid-cols-2 mt-6">
 								<a href="@Model.Link("/solutions/search/get-started")" class="text-blue-elastic hover:text-blue-elastic-100 font-sans font-semibold">Get started</a>
-								<a href="@Model.Link("/solutions/search")" class="text-blue-elastic hover:text-blue-elastic-100 font-sans font-semibold">View docs</a>
 							</div>
 						</div>
 					</div>
 				</div>
-				<div class="grow rounded-xl border-1 border-grey-20 p-6">
+				<div class="grow rounded-xl border-1 border-grey-20 p-6 bg-white">
 					<div class="flex gap-6 h-full">
 						<img loading="lazy" alt="Observability logo" src="@Model.Static("observability-logo-color-64px.svg")" class="size-9"/>
 						<div class="flex flex-col h-full">
@@ -93,21 +107,19 @@
 							<p class="mt-2 grow">Resolve problems with open, flexible, and unified observability powered by advanced machine learning and analytics.</p>
 							<div class="grid grid-cols-2 mt-6">
 								<a href="@Model.Link("/solutions/observability/get-started")" class="text-blue-elastic hover:text-blue-elastic-100 font-sans font-semibold">Get started</a>
-								<a href="@Model.Link("/solutions/observability")" class="text-blue-elastic hover:text-blue-elastic-100 font-sans font-semibold">View docs</a>
 							</div>
 						</div>
 					</div>
 				</div>
 
-				<div class="grow rounded-xl border-1 border-grey-20 p-6">
+				<div class="grow rounded-xl border-1 border-grey-20 p-6 bg-white">
 					<div class="flex gap-6 h-full">
-					<img loading="lazy" alt="Security logo" src="@Model.Static("security-logo-color-64px.svg")" class="size-9"/>
+						<img loading="lazy" alt="Security logo" src="@Model.Static("security-logo-color-64px.svg")" class="size-9"/>
 						<div class="flex flex-col h-full">
 							<p class="font-sans font-bold text-xl">Security</p>
 							<p class="mt-2 grow">Detect, investigate, and respond to threats with AI-driven security analytics to protect your organization at scale.</p>
 							<div class="grid grid-cols-2 mt-6">
 								<a href="@Model.Link("/solutions/security/get-started")" class="text-blue-elastic hover:text-blue-elastic-100 font-sans font-semibold">Get started</a>
-								<a href="@Model.Link("/solutions/security")" class="text-blue-elastic hover:text-blue-elastic-100 font-sans font-semibold">View docs</a>
 							</div>
 						</div>
 					</div>
@@ -116,150 +128,6 @@
 		</div>
 	</section>
 
-	<section class="w-screen px-8 lg:px-6 bg-grey-10">
-		<div class="container mx-auto py-16">
-			<h2 class="font-bold text-3xl text-ink-dark">Elastic how-to guides</h2>
-			<section class="mt-9">
-				<h3 class="text-2xl font-bold">Manage all your data</h3>
-				<p class="text-ink-light mt-4 max-w-[80ch]">Learn how to ingest, enrich, and manage your data throughout its entire Elasticsearch lifecycle.</p>
-				<ul class="mt-9 grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-					<li>
-						<a class="block px-6 py-8 rounded-xl border-1 border-grey-20 bg-white hover:underline hover:text-black" href="@Model.Link("/manage-data/data-store")">
-							Understand Elasticsearch data
-						</a>
-					</li>
-					<li>
-						<a class="block px-6 py-8 rounded-xl border-1 border-grey-20 bg-white hover:underline hover:text-black" href="@Model.Link("/manage-data/ingest")">
-							Ingest and enrich your data
-						</a>
-					</li>
-					<li>
-						<a class="block px-6 py-8 rounded-xl border-1 border-grey-20 bg-white hover:underline hover:text-black" href="@Model.Link("/manage-data/lifecycle")">
-							Manage the data lifecycle
-						</a>
-					</li>
-				</ul>
-				<div class="mt-6">
-					<a href="@Model.Link("/manage-data")" class="link">
-						View all docs
-						<svg class="link-arrow"
-						     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
-						</svg>
-					</a>
-				</div>
-			</section>
-
-			<section class="mt-9">
-				<h3 class="text-2xl font-bold">Explore and analyze your data</h3>
-				<p class="text-ink-light mt-4 max-w-[80ch]">Discover the querying, shaping, and visualization tools of Elasticsearch and Kibana, available in every solution.</p>
-				<ul class="mt-9 grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-					<li>
-						<a class="block px-6 py-8 rounded-xl border-1 border-grey-20 bg-white hover:underline hover:text-black" href="@Model.Link("/explore-analyze/query-filter")">
-							Query and filter data
-						</a>
-					</li>
-					<li>
-						<a class="block px-6 py-8 rounded-xl border-1 border-grey-20 bg-white hover:underline hover:text-black" href="@Model.Link("/explore-analyze/discover")">
-							Explore with Discover
-						</a>
-					</li>
-					<li>
-						<a class="block px-6 py-8 rounded-xl border-1 border-grey-20 bg-white hover:underline hover:text-black" href="@Model.Link("/explore-analyze/dashboards")">
-							Build dashboards
-						</a>
-					</li>
-					<li>
-						<a class="block px-6 py-8 rounded-xl border-1 border-grey-20 bg-white hover:underline hover:text-black" href="@Model.Link("/explore-analyze/machine-learning")">
-							Machine Learning
-						</a>
-					</li>
-					<li>
-						<a class="block px-6 py-8 rounded-xl border-1 border-grey-20 bg-white hover:underline hover:text-black" href="@Model.Link("/explore-analyze/alerts-cases")">
-							Set up alerts
-						</a>
-					</li>
-					<li>
-						<a class="block px-6 py-8 rounded-xl border-1 border-grey-20 bg-white hover:underline hover:text-black" href="@Model.Link("/explore-analyze/report-and-share")">
-							Share data insights
-						</a>
-					</li>
-				</ul>
-				<div class="mt-6">
-					<a href="@Model.Link("/explore-analyze")" class="link">
-						View all docs
-						<svg class="link-arrow"
-						     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
-						</svg>
-					</a>
-				</div>
-			</section>
-
-			<section class="mt-9">
-				<h3 class="text-2xl font-bold">Deploy and manage</h3>
-				<p class="text-ink-light mt-4 max-w-[80ch]">Learn about how to deploy and manage all aspects of your Elastic environment. Learn how to design resilient, highly available clusters and deployments, and maintain and scale your environment to grow with your use case.</p>
-				<ul class="mt-9 grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-					<li>
-						<a class="block px-6 py-8 rounded-xl border-1 border-grey-20 bg-white hover:underline hover:text-black" href="@Model.Link("/deploy-manage/deploy")">
-							Deploy Elastic
-						</a>
-					</li>
-					<li>
-						<a class="block px-6 py-8 rounded-xl border-1 border-grey-20 bg-white hover:underline hover:text-black" href="@Model.Link("/deploy-manage/production-guidance")">
-							Plan for production
-						</a>
-					</li>
-					<li>
-						<a class="block px-6 py-8 rounded-xl border-1 border-grey-20 bg-white hover:underline hover:text-black" href="@Model.Link("/deploy-manage/users-roles")">
-							Manage users and roles
-						</a>
-					</li>
-					<li>
-						<a class="block px-6 py-8 rounded-xl border-1 border-grey-20 bg-white hover:underline hover:text-black" href="@Model.Link("/deploy-manage/security")">
-							Secure your environment
-						</a>
-					</li>
-					<li>
-						<a class="block px-6 py-8 rounded-xl border-1 border-grey-20 bg-white hover:underline hover:text-black" href="@Model.Link("/deploy-manage/monitor")">
-							Monitor your environment
-						</a>
-					</li>
-					<li>
-						<a class="block px-6 py-8 rounded-xl border-1 border-grey-20 bg-white hover:underline hover:text-black" href="@Model.Link("/deploy-manage/cloud-organization")">
-							Manage your Elastic Cloud organization
-						</a>
-					</li>
-				</ul>
-				<div class="mt-6">
-					<a href="@Model.Link("/deploy-manage")" class="link">
-						View all docs
-						<svg class="link-arrow"
-						     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-							<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
-						</svg>
-					</a>
-				</div>
-			</section>
-			
-		</div>
-	</section>
-
-	<section class="w-screen px-8 lg:px-6 bg-grey-10">
-		<div class="container mx-auto py-16">
-			<div class="rounded-xl border-1 border-grey-20 px-12 py-8 grid lg:grid-cols-[auto_1fr_auto] gap-12 items-center justify-center text-center lg:text-left">
-				<img loading="lazy" class="mx-auto" alt="Elastic Community logo" src="@Model.Static("community-logo.png")" />
-				<div>
-					<h2 class="font-sans font-semibold text-4xl text-black -tracking-[0.04em] leading-[1.2em]">Welcome to our community of developers</h2>
-					<p class="mt-2">Learn from your peers and share code examples.</p>
-				</div>
-				<a href="https://discuss.elastic.co" target="_blank" rel="noopener noreferrer" class="grow cursor-pointer text-blue-elastic hover:text-blue-elastic-100 text-nowrap border-2 border-blue-elastic hover:border-blue-elastic-100 focus:ring-4 focus:outline-none focus:ring-blue-300 font-semibold rounded-sm px-6 py-2.5 text-center h-10 flex items-center justify-center">
-					Join now
-				</a>
-			</div>
-		</div>
-	</section>
-	
 	<section class="w-screen px-8 lg:px-6">
 		<div class="container mx-auto py-16">
 			<h2 class="font-bold text-3xl text-ink-dark">References</h2>
@@ -397,11 +265,11 @@
 		</div>
 	</section>
 
-	<section class="w-screen px-8 lg:px-6">
+	<section class="w-screen px-8 lg:px-6 bg-grey-10">
 		<div class="container mx-auto py-16">
 			<h2 class="font-bold text-3xl text-ink-dark">Product resources</h2>
 			<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
-				<div class="flex flex-col rounded-t-xl bg-black text-white p-6">
+				<div class="flex flex-col rounded-xl bg-black text-white p-6">
 					<h3 class="font-sans font-bold text-2xl">Releases</h3>
 					<p class="grow mt-4">Explore the latest features and changes in Elastic.</p>
 					<div class="mt-6 grid grid-cols-1 gap-6 text-center">
@@ -417,7 +285,7 @@
 						</a>
 					</div>
 				</div>
-				<div class="flex flex-col rounded-t-xl bg-black text-white p-6">
+				<div class="flex flex-col rounded-xl bg-black text-white p-6">
 					<h3 class="font-sans font-bold text-2xl">Troubleshoot and support</h3>
 					<p class="grow mt-4">Check troubleshooting guides for common fixes or reach out to the experts.</p>
 					<div class="mt-6 grid grid-cols-1 gap-6 text-center">
@@ -433,7 +301,7 @@
 						</a>
 					</div>
 				</div>
-				<div class="flex flex-col rounded-t-xl bg-black text-white p-6">
+				<div class="flex flex-col rounded-xl bg-black text-white p-6">
 					<h3 class="font-sans font-bold text-2xl">Contribute and extend</h3>
 					<p class="grow mt-4">Learn how to contribute to Elastic products and extend Elastic capabilities.</p>
 					<div class="mt-6 grid grid-cols-1 gap-6 text-center">
@@ -452,4 +320,43 @@
 			</div>
 		</div>
 	</section>
+	
+	@* <section class="w-screen px-8 lg:px-6 bg-grey-10"> *@
+	@* 	<div class="container mx-auto py-16"> *@
+	@* 		<h2 class="font-bold text-3xl text-ink-dark">Instant Elasticsearch</h2> *@
+	@* 		<div class="grid lg:grid-cols-2 gap-6 mt-6"> *@
+	@* 			<div class="lg:basis-[50%]"> *@
+	@* 				<p class="mt-2 font-body">For local testing, use Docker to install and run Elasticsearch.</p> *@
+	@* 			</div> *@
+	@* 			<div class="lg:basis-[50%] rounded-xl border-1 border-grey-20 p-6"> *@
+	@* 				<p class="font-body">Try it locally now:</p> *@
+	@* 				<div class="mt-2"> *@
+	@* 					<div class="highlight-bash notranslate"> *@
+	@* 						<div class="highlight"> *@
+	@* 							<pre> *@
+	@* 								<code class="language-yaml hljs" data-highlighted="yes">curl -fsSL https://elastic.co/start-local | sh</code> *@
+	@* 							</pre> *@
+	@* 						</div> *@
+	@* 					</div> *@
+	@* 				</div> *@
+	@* 			</div> *@
+	@* 		</div> *@
+	@* 	</div> *@
+	@* </section> *@
+
+	<section class="w-screen px-8 lg:px-6">
+		<div class="container mx-auto py-16">
+			<div class="rounded-xl border-1 border-grey-20 px-12 py-8 grid lg:grid-cols-[auto_1fr_auto] gap-12 items-center justify-center text-center lg:text-left">
+				<img loading="lazy" class="mx-auto" alt="Elastic Community logo" src="@Model.Static("community-logo.png")" />
+				<div>
+					<h2 class="font-sans font-semibold text-4xl text-black -tracking-[0.04em] leading-[1.2em]">Welcome to our community of developers</h2>
+					<p class="mt-2">Learn from your peers and share code examples.</p>
+				</div>
+				<a href="https://discuss.elastic.co" target="_blank" rel="noopener noreferrer" class="grow cursor-pointer text-blue-elastic hover:text-blue-elastic-100 text-nowrap border-2 border-blue-elastic hover:border-blue-elastic-100 focus:ring-4 focus:outline-none focus:ring-blue-300 font-semibold rounded-sm px-6 py-2.5 text-center h-10 flex items-center justify-center">
+					Join now
+				</a>
+			</div>
+		</div>
+	</section>
+	
 </div>
diff --git a/src/Elastic.Markdown/_static/icon-dashboards-64-color.svg b/src/Elastic.Markdown/_static/icon-dashboards-64-color.svg
new file mode 100644
index 000000000..ef4a8ac50
--- /dev/null
+++ b/src/Elastic.Markdown/_static/icon-dashboards-64-color.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <title>icon-dashboards-64-color</title>
+    <desc>Created with Sketch.</desc>
+    <g id="icon-dashboards-64-color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill-rule="nonzero" x="0" y="0" width="64" height="64"></rect>
+        <g id="Group" transform="translate(4.000000, 6.000000)" fill-rule="nonzero">
+            <path d="M4,3 C3.44771525,3 3,3.44771525 3,4 L3,11 C3,11.5522847 3.44771525,12 4,12 L52,12 C52.5522847,12 53,11.5522847 53,11 L53,4 C53,3.44771525 52.5522847,3 52,3 L4,3 Z M4,0 L52,0 C54.209139,0 56,1.790861 56,4 L56,11 C56,13.209139 54.209139,15 52,15 L4,15 C1.790861,15 0,13.209139 0,11 L0,4 C0,1.790861 1.790861,0 4,0 Z" id="Rectangle" fill="#535966"></path>
+            <path d="M4,22 C3.44771525,22 3,22.4477153 3,23 L3,30 C3,30.5522847 3.44771525,31 4,31 L22,31 C22.5522847,31 23,30.5522847 23,30 L23,23 C23,22.4477153 22.5522847,22 22,22 L4,22 Z M4,19 L22,19 C24.209139,19 26,20.790861 26,23 L26,30 C26,32.209139 24.209139,34 22,34 L4,34 C1.790861,34 0,32.209139 0,30 L0,23 C0,20.790861 1.790861,19 4,19 Z" id="Rectangle" fill="#00BDB1"></path>
+            <path d="M34,22 C33.4477153,22 33,22.4477153 33,23 L33,49 C33,49.5522847 33.4477153,50 34,50 L52,50 C52.5522847,50 53,49.5522847 53,49 L53,23 C53,22.4477153 52.5522847,22 52,22 L34,22 Z M34,19 L52,19 C54.209139,19 56,20.790861 56,23 L56,49 C56,51.209139 54.209139,53 52,53 L34,53 C31.790861,53 30,51.209139 30,49 L30,23 C30,20.790861 31.790861,19 34,19 Z" id="Rectangle" fill="#00BDB1"></path>
+            <path d="M4,41 C3.44771525,41 3,41.4477153 3,42 L3,49 C3,49.5522847 3.44771525,50 4,50 L22,50 C22.5522847,50 23,49.5522847 23,49 L23,42 C23,41.4477153 22.5522847,41 22,41 L4,41 Z M4,38 L22,38 C24.209139,38 26,39.790861 26,42 L26,49 C26,51.209139 24.209139,53 22,53 L4,53 C1.790861,53 0,51.209139 0,49 L0,42 C0,39.790861 1.790861,38 4,38 Z" id="Rectangle" fill="#535966"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/Elastic.Markdown/_static/icon-graph-64-color.svg b/src/Elastic.Markdown/_static/icon-graph-64-color.svg
new file mode 100644
index 000000000..d57763a96
--- /dev/null
+++ b/src/Elastic.Markdown/_static/icon-graph-64-color.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <title>icon-graph-64-color</title>
+    <desc>Created with Sketch.</desc>
+    <g id="icon-graph-64-color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill-rule="nonzero" x="0" y="0" width="64" height="64"></rect>
+        <g id="Group-9" transform="translate(10.000000, 5.000000)">
+            <path d="M37.5,24 C35.57,24 34,25.57 34,27.5 C34,29.43 35.57,31 37.5,31 C39.43,31 41,29.43 41,27.5 C41,25.57 39.43,24 37.5,24 M37.5,34 C33.916,34 31,31.084 31,27.5 C31,23.916 33.916,21 37.5,21 C41.084,21 44,23.916 44,27.5 C44,31.084 41.084,34 37.5,34" id="Fill-1" fill="#00BFB2"></path>
+            <path d="M21.5,3 C19.57,3 18,4.57 18,6.5 C18,8.43 19.57,10 21.5,10 C23.43,10 25,8.43 25,6.5 C25,4.57 23.43,3 21.5,3 M21.5,13 C17.916,13 15,10.084 15,6.5 C15,2.916 17.916,0 21.5,0 C25.084,0 28,2.916 28,6.5 C28,10.084 25.084,13 21.5,13" id="Fill-3" fill="#00BFB2"></path>
+            <path d="M21.5,44 C19.57,44 18,45.57 18,47.5 C18,49.43 19.57,51 21.5,51 C23.43,51 25,49.43 25,47.5 C25,45.57 23.43,44 21.5,44 M21.5,54 C17.916,54 15,51.084 15,47.5 C15,43.916 17.916,41 21.5,41 C25.084,41 28,43.916 28,47.5 C28,51.084 25.084,54 21.5,54" id="Fill-5" fill="#00BFB2"></path>
+            <path d="M3,27.5 C3,25.57 4.57,24 6.5,24 C8.43,24 10,25.57 10,27.5 C10,29.43 8.43,31 6.5,31 C4.57,31 3,29.43 3,27.5 L3,27.5 Z M27,29 L27,26 L12.818,26 C12.542,24.836 11.955,23.792 11.146,22.963 L16.664,15.64 L14.268,13.835 L8.602,21.355 C7.941,21.129 7.236,21 6.5,21 C2.916,21 0,23.916 0,27.5 C0,31.084 2.916,34 6.5,34 C7.457,34 8.362,33.787 9.182,33.414 L14.268,40.165 L16.664,38.36 L11.554,31.578 C12.154,30.836 12.591,29.958 12.818,29 L27,29 Z" id="Fill-7" fill="#535966"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/Elastic.Markdown/_static/icon-infra-64-color.svg b/src/Elastic.Markdown/_static/icon-infra-64-color.svg
new file mode 100644
index 000000000..2229a9f3d
--- /dev/null
+++ b/src/Elastic.Markdown/_static/icon-infra-64-color.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <title>icon-infra-64-color</title>
+    <desc>Created with Sketch.</desc>
+    <g id="icon-infra-64-color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill-rule="nonzero" x="0" y="0" width="64" height="64"></rect>
+        <g id="Group" transform="translate(3.000000, 4.000000)">
+            <path d="M12,40.866501 L12,43.983752 C5.12957495,42.362692 -0.0001,36.1825912 -0.0001,28.824 C-0.0001,22.254 4.0159,16.516 10.0949,14.244 C11.1599,6.18 18.1089,-1.95399252e-13 26.3399,-1.95399252e-13 C34.5699,-1.95399252e-13 41.5199,6.179 42.5859,14.245 C45.9842896,15.5179722 48.7726243,17.9173383 50.5582744,21 L46.936751,21 C45.3756084,19.0328232 43.24613,17.5453401 40.7569,16.791 L39.7679,16.491 L39.6949,15.46 C39.2069,8.473 33.3409,3 26.3399,3 C19.3389,3 13.4729,8.473 12.9849,15.46 L12.9139,16.491 L11.9249,16.791 C6.5859,18.409 2.9999,23.245 2.9999,28.824 C2.9999,34.5149713 6.80497257,39.3211294 12,40.866501 Z" id="Combined-Shape" fill="#535966"></path>
+            <path d="M16,56 L57,56 L57,25 L16,25 L16,56 Z M19,53 L54,53 L54,28 L19,28 L19,53 Z" id="Fill-1" fill="#535966"></path>
+            <polygon id="Fill-2" fill="#00BFB2" points="23 35 30 35 30 32 23 32"></polygon>
+            <polygon id="Fill-3" fill="#00BFB2" points="23 49 30 49 30 46 23 46"></polygon>
+            <polygon id="Fill-4" fill="#535966" points="16.5 42.5 54.5 42.5 54.5 39.5 16.5 39.5"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/Elastic.Markdown/_static/icon-three-people-64-color.svg b/src/Elastic.Markdown/_static/icon-three-people-64-color.svg
new file mode 100644
index 000000000..db996013f
--- /dev/null
+++ b/src/Elastic.Markdown/_static/icon-three-people-64-color.svg
@@ -0,0 +1,8 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 9C11.1343 9 8 12.1337 8 15.9994C8 19.8661 11.134 23 15 23C18.866 23 22 19.8661 22 15.9994C22 12.1337 18.8657 9 15 9ZM15 20C12.7909 20 11 18.2092 11 15.9994C11 13.7907 12.791 12 15 12C17.209 12 19 13.7907 19 15.9994C19 18.2092 17.2091 20 15 20Z" fill="#00BFB3"/>
+<path d="M7 34V31.9894C7 25.8762 9.85428 23 15 23C18.4108 23 21.034 24.3898 22.3982 27.0181L25.0609 25.636C23.1465 21.9477 19.4701 20 15 20C8.19225 20 4 24.2245 4 31.9894V34H7Z" fill="#00BFB3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49 9C45.1343 9 42 12.1337 42 15.9994C42 19.8661 45.134 23 49 23C52.866 23 56 19.8661 56 15.9994C56 12.1337 52.8657 9 49 9ZM49 20C46.7909 20 45 18.2092 45 15.9994C45 13.7907 46.791 12 49 12C51.209 12 53 13.7907 53 15.9994C53 18.2092 51.2091 20 49 20Z" fill="#00BFB3"/>
+<path d="M41.618 26.9868C42.9864 24.379 45.6029 23 49 23C54.1457 23 57 25.8762 57 31.9894V34H60V31.9894C60 24.2245 55.8077 20 49 20C44.5481 20 40.8825 21.932 38.9615 25.5929L41.618 26.9868Z" fill="#00BFB3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32 17C26.4775 17 22 21.4767 22 26.9991C22 32.523 26.4772 37 32 37C37.5228 37 42 32.523 42 26.9991C42 21.4767 37.5225 17 32 17ZM32 34C28.134 34 25 30.8661 25 26.9991C25 23.1337 28.1343 20 32 20C35.8657 20 39 23.1337 39 26.9991C39 30.8661 35.866 34 32 34Z" fill="#535766"/>
+<path d="M18 54V50.7336C18 42.0331 23.5653 37 32 37C40.4347 37 46 42.0331 46 50.7336V54H49V50.7336C49 40.3052 42.0281 34 32 34C21.9719 34 15 40.3052 15 50.7336V54H18Z" fill="#535766"/>
+</svg>