From cb7f4b2c1c11ba90eb6f57d501d68ea83221d67c Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Thu, 10 Apr 2025 15:14:03 +0200
Subject: [PATCH 1/2] Landing page changes

---
 .../Slices/Layout/_LandingPage.cshtml         | 195 +++++-------------
 1 file changed, 51 insertions(+), 144 deletions(-)

diff --git a/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml b/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
index b1b08d014..76e2d43f7 100644
--- a/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
@@ -1,5 +1,5 @@
 @inherits RazorSlice<LayoutViewModel>
-<div class="w-full font-body text-ink relative">
+<div class="w-full font-body text-ink relative text-pretty">
 	<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
 		<div class="h-[2px] w-full overflow-hidden">
 			<div class="progress w-full h-full bg-pink-70 left-right"></div>
@@ -7,11 +7,13 @@
 		<div class="sr-only">Loading</div>
 	</div>
 	<section class="w-full px-8 lg:px-6 bg-grey-10">
-		<div class="container mx-auto py-16 grid items-center gap-6">
+		<div class="container mx-auto py-10 grid md:grid-cols-2 items-center gap-6">
 			<div>
 				<h1 class="text-4xl font-bold font-sans text-black">Elastic Docs</h1>
 				<p class="mt-4">Find the help you need, wherever you are in your Elastic journey.</p>
-				<div class="flex md:inline-flex gap-3 mt-9">
+			</div>
+			<div>
+				<div class="flex md:inline-flex gap-3">
 					<a href="@Model.Link("/get-started/")" class="grow select-none cursor-pointer text-white text-nowrap bg-blue-elastic hover:bg-blue-elastic-110 focus:ring-4 focus:ring-blue-elastic-50 font-semibold font-sans rounded-sm px-6 py-2 focus:outline-none h-10 flex items-center justify-center">
 						Get started
 					</a>
@@ -21,7 +23,7 @@
 	</section>
 
 	<section class="w-full px-8 lg:px-6 bg-grey-10">
-		<div class="container mx-auto py-16">
+		<div class="container mx-auto py-10">
 			<div class="heading-wrapper" id="elastic-products">
 				<h2 class="font-bold font-sans text-3xl text-ink-dark">
 					<a href="#elastic-products">Elastic products</a>
@@ -35,7 +37,7 @@
 							<p class="font-sans font-bold text-xl">Elasticsearch</p>
 							<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>
@@ -47,7 +49,7 @@
 							<p class="font-sans font-bold text-xl">Observability</p>
 							<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>
@@ -60,7 +62,7 @@
 							<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>
@@ -70,7 +72,7 @@
 	</section>
 
 	<section class="w-full px-8 lg:px-6">
-		<div class="container mx-auto py-16">
+		<div class="container mx-auto py-10">
 			<div class="heading-wrapper" id="how-to-guides">
 				<h2 class="font-bold font-sans text-3xl text-ink-dark">
 					<a href="#how-to-guides">
@@ -136,130 +138,46 @@
 	</section>
 	
 	<section class="w-full px-8 lg:px-6">
-		<div class="container mx-auto py-16">
+		<div class="container mx-auto py-10">
 			<div class="heading-wrapper" id="references">
 				<h2 class="font-bold font-sans text-3xl text-ink-dark">
-					<a href="#references">References</a>
+					<a href="#references">Reference</a>
 				</h2>
 			</div>
 			<div class="mt-6 grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-				<div class="flex flex-col rounded-xl bg-white border-1 border-grey-20 p-6">
+				<div class="flex flex-col rounded-xl bg-white">
 					<h3 class="font-bold font-sans text-ink-dark text-2xl">Elastic APIs</h3>
-					<p class="grow mt-3">Browse the API documentation.</p>
-					<ul>
-						<li class="mt-3">
-							<a href="https://www.elastic.co/docs/api/doc/elasticsearch" target="_blank" rel="noopener noreferrer" class="font-sans font-bold hover:underline hover:text-black">
-								Elasticsearch API
-							</a>
-						</li>
-						<li class="mt-3">
-							<a href="https://www.elastic.co/docs/api/doc/kibana" target="_blank" rel="noopener noreferrer" class="font-sans font-bold hover:underline hover:text-black">
-								Kibana API
-							</a>
-						</li>
-						<li class="mt-3">
-							<a href="https://www.elastic.co/docs/api/doc/cloud" target="_blank" rel="noopener noreferrer" class="font-sans font-bold hover:underline hover:text-black">
-								Elastic Cloud API
-							</a>
-						</li>
-					</ul>
+					<p class="grow mt-3">Browse the API docs for Elasticsearch, Kibana, Elastic Cloud, and more.</p>
 					<div class="mt-6">
 						<a href="https://www.elastic.co/docs/api" target="_blank" rel="noopener noreferrer" class="link">
-							Explore all
-							<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>
+							View docs
 						</a>
 					</div>
 				</div>
-				<div class="flex flex-col rounded-xl bg-white border-1 border-grey-20 p-6">
+				<div class="flex flex-col rounded-xl bg-white">
 					<h3 class="font-sans font-bold text-ink-dark text-2xl">Elasticsearch Clients</h3>
-					<p class="grow mt-3">Browse the client libraries for Elasticsearch.</p>
-					<ul>
-						<li class="mt-3">
-							<a href="@Model.Link("/reference/elasticsearch/clients/java")" class="font-sans font-bold hover:underline hover:text-black">
-								Java
-							</a>
-						</li>
-						<li class="mt-3">
-							<a href="@Model.Link("/reference/elasticsearch/clients/dotnet")" class="font-sans font-bold hover:underline hover:text-black">
-								.NET
-							</a>
-						</li>
-						<li class="mt-3">
-							<a href="@Model.Link("/reference/elasticsearch/clients/python")" class="font-sans font-bold hover:underline hover:text-black">
-								Python
-							</a>
-						</li>
-					</ul>
+					<p class="grow mt-3">Browse the Elasticsearch client libraries for Java, .Net, Python, and more.</p>
 					<div class="mt-6">
 						<a href="@Model.Link("/reference/elasticsearch-clients/")" class="link">
-							Explore all
-							<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>
+							View docs
 						</a>
 					</div>
 				</div>
-				<div class="flex flex-col rounded-xl bg-white border-1 border-grey-20 p-6">
+				<div class="flex flex-col rounded-xl bg-white">
 					<h3 class="font-sans font-bold text-ink-dark text-2xl">Query Languages</h3>
-					<p class="grow mt-3">Browse the query language documentation.</p>
-					<ul>
-						<li class="mt-3">
-							<a href="@Model.Link("/reference/query-languages/querydsl")" class="font-sans font-bold hover:underline hover:text-black">
-								Query DSL
-							</a>
-						</li>
-						<li class="mt-3">
-							<a href="@Model.Link("reference/query-languages/esql")" class="font-sans font-bold hover:underline hover:text-black">
-								ES/QL
-							</a>
-						</li>
-						<li class="mt-3">
-							<a href="@Model.Link("/reference/query-languages/kql")" class="font-sans font-bold hover:underline hover:text-black">
-								KQL
-							</a>
-						</li>
-					</ul>
+					<p class="grow mt-3">Browse the docs for Query DSL, ES|QL, KQL, and more.</p>
 					<div class="mt-6">
 						<a href="@Model.Link("/reference/query-languages/")" class="link">
-							Explore all
-							<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>
+							View docs
 						</a>
 					</div>
 				</div>
-				<div class="flex flex-col rounded-xl bg-white border-1 border-grey-20 p-6">
+				<div class="flex flex-col rounded-xl bg-white">
 					<h3 class="font-sans font-bold text-ink-dark text-2xl">APM Agents</h3>
-					<p class="grow mt-3">Browse the agents for Elastic APM.</p>
-					<ul>
-						<li class="mt-3">
-							<a href="@Model.Link("/reference/apm/agents/rum-js")" class="font-sans font-bold hover:underline hover:text-black">
-								RUM JavaScript
-							</a>
-						</li>
-						<li class="mt-3">
-							<a href="@Model.Link("/reference/apm/agents/java")" class="font-sans font-bold hover:underline hover:text-black">
-								Java
-							</a>
-						</li>
-						<li class="mt-3">
-							<a href="@Model.Link("/reference/apm/agents/dotnet")" class="font-sans font-bold hover:underline hover:text-black">
-								.NET
-							</a>
-						</li>
-					</ul>
+					<p class="grow mt-3">Browse the APM Agent docs for RUM JavaScript, Java, .NET, and more.</p>
 					<div class="mt-6">
 						<a href="@Model.Link("/reference/apm-agents/")" class="link">
-							Explore all
-							<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>
+							View docs
 						</a>
 					</div>
 				</div>
@@ -276,25 +194,22 @@
 		</div>
 	</section>
 
-	<section class="w-full px-8 lg:px-6 bg-grey-10">
-		<div class="container mx-auto py-16">
+	<section class="w-full px-8 lg:px-6">
+		<div class="container mx-auto py-10">
 			<div class="heading-wrapper" id="product-resources">
-				<h2 class="font-bold font-sans text-3xl text-ink-dark">
+				<h2 class="font-bold font-sans text-3xl">
 					<a href="#product-resources">
 						Product resources
 					</a>
 				</h2>
 			</div>
-			<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
-				<div class="flex flex-col rounded-xl bg-black text-white p-6">
+			<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mt-6 bg-ink-dark text-white">
+				<div class="flex flex-col 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">
-						<a href="@Model.Link("/release-notes/")" class="grow select-none cursor-pointer text-white text-nowrap bg-blue-elastic hover:bg-blue-elastic-110 focus:ring-4 focus:ring-blue-elastic-50 font-semibold font-sans rounded-sm px-6 py-2 focus:outline-none h-10 flex items-center justify-center">
+					<div class="mt-6">
+						<a href="@Model.Link("/release-notes/")" class="link text-white">
 							View release notes
-						</a>
-						<a href="@Model.Link("/deploy-manage/upgrade")" class="link text-white">
-							Upgrade now
 							<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"/>
@@ -302,15 +217,12 @@
 						</a>
 					</div>
 				</div>
-				<div class="flex flex-col rounded-xl bg-black text-white p-6">
+				<div class="flex flex-col 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">
-						<a href="@Model.Link("/troubleshoot/")" class="grow select-none cursor-pointer text-white text-nowrap bg-blue-elastic hover:bg-blue-elastic-110 focus:ring-4 focus:ring-blue-elastic-50 font-semibold font-sans rounded-sm px-6 py-2 focus:outline-none h-10 flex items-center justify-center">
-							Start troubleshooting
-						</a>
-						<a href="https://support.elastic.co" target="_blank" rel="noopener noreferrer" class="link text-white">
-							Get in touch
+					<p class="grow mt-4">Check troubleshooting guides for common fixes.</p>
+					<div class="mt-6">
+						<a href="@Model.Link("/troubleshoot/")" target="_blank" rel="noopener noreferrer" class="link text-white wrap-break-word">
+							View troubleshooting 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"/>
@@ -318,15 +230,14 @@
 						</a>
 					</div>
 				</div>
-				<div class="flex flex-col rounded-xl bg-black text-white p-6">
+				<div class="flex flex-col 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">
-						<a href="@Model.Link("extend/kibana")" class="grow select-none cursor-pointer text-white text-nowrap bg-blue-elastic hover:bg-blue-elastic-110 focus:ring-4 focus:ring-blue-elastic-50 font-semibold font-sans rounded-sm px-6 py-2 focus:outline-none h-10 flex items-center justify-center">
-							Start contributing
-						</a>
-						<a href="@Model.Link("extend")" target="_blank" rel="noopener noreferrer" class="link text-white">
-							Extend Elastic
+					<p class="grow mt-4">Learn how to contribute to Elastic products and extend capabilities.</p>
+					<div class="mt-6">
+						<a href="@Model.Link("extend/kibana")" target="_blank" rel="noopener noreferrer" class="link text-white wrap-break-word">
+							<span class="wrap-break-word">
+								View contribute and extend docs
+							</span>
 							<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"/>
@@ -334,15 +245,12 @@
 						</a>
 					</div>
 				</div>
-				<div class="flex flex-col rounded-xl bg-black text-white p-6">
+				<div class="flex flex-col p-6">
 					<h3 class="font-sans font-bold text-2xl">Archive</h3>
-					<p class="grow mt-4">Browse the archived documentation for older Elastic product releases.</p>
-					<div class="mt-6 grid grid-cols-1 gap-6 text-center">
-						<a href="@Model.Link("/archive")" class="grow select-none cursor-pointer text-white text-nowrap bg-blue-elastic hover:bg-blue-elastic-110 focus:ring-4 focus:ring-blue-elastic-50 font-semibold font-sans rounded-sm px-6 py-2 focus:outline-none h-10 flex items-center justify-center">
-							View archived docs
-						</a>
-						<a href="https://www.elastic.co/support/eol" target="_blank" rel="noopener noreferrer" class="link text-white">
-							View version policy
+					<p class="grow mt-4">Browse the archived docs for older Elastic product versions.</p>
+					<div class="mt-6">
+						<a href="@Model.Link("/archive")" target="_blank" rel="noopener noreferrer" class="link text-white">
+							View archive 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"/>
@@ -355,7 +263,7 @@
 	</section>
 	
 	@* <section class="w-full px-8 lg:px-6 bg-grey-10"> *@
-	@* 	<div class="container mx-auto py-16"> *@
+	@* 	<div class="container mx-auto py-10"> *@
 	@* 		<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%]"> *@
@@ -378,9 +286,8 @@
 	@* </section> *@
 
 	<section class="w-full 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 class="container mx-auto py-10">
+			<div class="rounded-xl border-1 border-grey-20 px-12 py-8 grid lg:grid-cols-[1fr_auto] gap-12 items-center justify-center text-center lg:text-left">
 				<div>
 					<h2 class="font-semibold font-sans text-4xl text-black leading-[1.2em]">Welcome to our community of developers</h2>
 					<p class="mt-2">Learn from your peers and share code examples.</p>

From 64f57a95d27b7569be9883d7040cb9c9d0e5ea09 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Thu, 10 Apr 2025 21:47:44 +0200
Subject: [PATCH 2/2] adjust grid

---
 .../Slices/Layout/_LandingPage.cshtml         |  15 +-
 .../web-documentation-hero-illustration.svg   | 165 ++++++++++++++++++
 2 files changed, 174 insertions(+), 6 deletions(-)
 create mode 100644 src/Elastic.Markdown/_static/web-documentation-hero-illustration.svg

diff --git a/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml b/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
index 76e2d43f7..922673748 100644
--- a/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
+++ b/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
@@ -7,18 +7,22 @@
 		<div class="sr-only">Loading</div>
 	</div>
 	<section class="w-full px-8 lg:px-6 bg-grey-10">
-		<div class="container mx-auto py-10 grid md:grid-cols-2 items-center gap-6">
+		<div class="container mx-auto pt-16 pb-10 grid md:grid-cols-2 items-center gap-6">
 			<div>
 				<h1 class="text-4xl font-bold font-sans text-black">Elastic Docs</h1>
 				<p class="mt-4">Find the help you need, wherever you are in your Elastic journey.</p>
-			</div>
-			<div>
-				<div class="flex md:inline-flex gap-3">
+				<div class="flex md:inline-flex gap-3 mt-6">
 					<a href="@Model.Link("/get-started/")" class="grow select-none cursor-pointer text-white text-nowrap bg-blue-elastic hover:bg-blue-elastic-110 focus:ring-4 focus:ring-blue-elastic-50 font-semibold font-sans rounded-sm px-6 py-2 focus:outline-none h-10 flex items-center justify-center">
 						Get started
 					</a>
+					<a href="/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-elastic-50 font-semibold font-sans rounded-sm px-6 py-2 text-center h-10 flex items-center justify-center">
+						Upgrade
+					</a>
 				</div>
 			</div>
+			<div class="flex justify-center items-center">
+				<img src="@Model.Static("web-documentation-hero-illustration.svg")" alt="" width="400">
+			</div>
 		</div>
 	</section>
 
@@ -80,7 +84,7 @@
 					</a>
 				</h2>
 			</div>
-			<div class="grid md:grid-cols-2 xl:grid-cols-4 gap-6 mt-6">
+			<div class="grid md:grid-cols-2 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"/>
@@ -132,7 +136,6 @@
 						</div>
 					</div>
 				</div>
-
 			</div>
 		</div>
 	</section>
diff --git a/src/Elastic.Markdown/_static/web-documentation-hero-illustration.svg b/src/Elastic.Markdown/_static/web-documentation-hero-illustration.svg
new file mode 100644
index 000000000..f1cc4b0dc
--- /dev/null
+++ b/src/Elastic.Markdown/_static/web-documentation-hero-illustration.svg
@@ -0,0 +1,165 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1920 1080">
+  <!-- Generator: Adobe Illustrator 29.0.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 186)  -->
+  <defs>
+    <style>
+      .st0, .st1 {
+        fill: none;
+      }
+
+      .st2 {
+        fill: #ff957d;
+      }
+
+      .st2, .st3, .st4, .st5, .st6, .st7, .st8, .st9, .st1 {
+        stroke: #101c3f;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 2px;
+      }
+
+      .st3 {
+        fill: #f04e98;
+      }
+
+      .st4, .st10 {
+        fill: #0b64dd;
+      }
+
+      .st5, .st11 {
+        fill: #0a52b3;
+      }
+
+      .st12 {
+        fill: url(#linear-gradient);
+      }
+
+      .st13 {
+        clip-path: url(#clippath-1);
+      }
+
+      .st6 {
+        fill: #48efcf;
+      }
+
+      .st7 {
+        fill: #fec514;
+      }
+
+      .st8 {
+        fill: #f5f7fa;
+      }
+
+      .st14 {
+        fill: #02bcb7;
+      }
+
+      .st9 {
+        fill: #101c3f;
+      }
+
+      .st15 {
+        fill: #abb4c4;
+        isolation: isolate;
+        opacity: .25;
+      }
+
+      .st16 {
+        clip-path: url(#clippath);
+      }
+    </style>
+    <clipPath id="clippath">
+      <polygon class="st0" points="1089.56 701.93 844.63 505.73 869.93 437.27 721.64 320.24 373 676.69 770.43 1033.09 1089.56 701.93"/>
+    </clipPath>
+    <linearGradient id="linear-gradient" x1="306.97" y1="402.14" x2="864.39" y2="402.14" gradientTransform="translate(0 1080) scale(1 -1)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#48efcf"/>
+      <stop offset=".99" stop-color="#0b64dd"/>
+    </linearGradient>
+    <clipPath id="clippath-1">
+      <path class="st0" d="M455.61,322.02l408.78,319.5-133.11,353.59s-18.52,19.96,7.49,38.6l-431.8-338.17,148.64-373.52h0Z"/>
+    </clipPath>
+  </defs>
+  <g>
+    <path class="st9" d="M1377.83,514.33s57.49,29.86,18.1,89.96l-100.44-82.02,60.88-25.41,21.46,17.47Z"/>
+    <path class="st8" d="M808.06,411.27l179.15-104.55c47.06-27.98,106.59-23.6,149.05,10.96l241.56,196.65s-240.83,97.91-284.09,162.33l-285.68-265.39h0Z"/>
+  </g>
+  <polygon class="st15" points="1158.04 431.08 1129.46 449.07 1235.57 538.4 1266.5 522.64 1158.04 431.08"/>
+  <polygon class="st15" points="1070.59 330.25 959.56 396.19 1044.12 466.91 1155.7 397.19 1070.59 330.25"/>
+  <g>
+    <polygon class="st10" points="1089.56 701.93 844.63 505.73 869.93 437.27 721.64 320.24 373 676.69 770.43 1033.09 1089.56 701.93"/>
+    <g class="st16">
+      <polygon class="st11" points="1084.74 676.66 923.7 804.63 749.31 1043.36 550.26 899.92 1006.2 546.19 1084.74 676.66"/>
+    </g>
+    <polygon class="st1" points="1089.56 701.93 844.63 505.73 869.93 437.27 721.64 320.24 373 676.69 770.43 1033.09 1089.56 701.93"/>
+  </g>
+  <path class="st6" d="M648.54,468.95c34.29-49.64,77.9-92.13,128.38-125.16,27.21-17.8,53.3-33.87,63.08-36.83,23.58-7.14,360.65,250.37,360.65,250.37l-285.63,212.66-304.5-245.99,38.02-55.04h0Z"/>
+  <ellipse class="st14" cx="890.06" cy="516.58" rx="104.65" ry="110.31"/>
+  <path class="st8" d="M530.1,400.78s64.51-87.16,38.75-120.67c-21.36-27.79,462.52,318.17,462.52,318.17l-255.41,376.96-409.32-337.9,163.48-236.56h-.02Z"/>
+  <g>
+    <path class="st12" d="M455.61,322.02l408.78,319.5-133.11,353.59s-18.52,19.96,7.49,38.6l-431.8-338.17,148.64-373.52h0Z"/>
+    <g class="st13">
+      <polygon class="st14" points="166.74 573.27 447.2 693.68 188.52 855.68 254.65 708.53 166.74 573.27"/>
+    </g>
+    <path class="st1" d="M455.61,322.02l408.78,319.5-133.11,353.59s-18.52,19.96,7.49,38.6l-431.8-338.17,148.64-373.52h0Z"/>
+  </g>
+  <polygon class="st5" points="455.61 322.02 476.47 325.62 884.25 640.39 864.39 641.52 455.61 322.02"/>
+  <path class="st5" d="M884.25,640.39l-136.41,338.46c-4.73,11.73-1.1,25.17,8.88,32.93h0c11.44,8.89,27.75,7.71,37.79-2.74l295.05-307.11,3.96,15.69-297.47,315.38c-3.44,3.65-7.55,6.6-12.11,8.69h0c-13.23,6.07-28.75,4.26-40.23-4.69l-8.8-6.86c-10.5-8.18-15.21-21.76-12.05-34.68l1.44-5.89c1.7-6.93,3.9-13.72,6.59-20.32l133.51-327.73,19.86-1.13h-.01Z"/>
+  <polygon class="st4" points="138.25 496.86 418.72 617.27 160.04 779.27 226.17 632.12 138.25 496.86"/>
+  <polygon class="st9" points="418.72 617.27 422.78 637.9 170.39 789.68 160.04 779.27 418.72 617.27"/>
+  <g>
+    <path class="st9" d="M913.36,171.87l-6.6,11.68s-80.91,31.8-166.39,103.93l1.42-10.66s105.58-105.34,171.58-104.94h-.01Z"/>
+    <polygon class="st9" points="679.45 212.87 676.23 222.72 740.36 287.47 754.07 255.08 689.3 211.04 679.45 212.87"/>
+    <path class="st8" d="M679.45,212.87l62.34,63.94s103.8-86.46,171.58-104.94l-57.55-62.48s-128.16,44.71-176.36,103.48h-.01Z"/>
+  </g>
+  <polygon class="st9" points="1492.68 474.51 1222.36 261.64 1212.53 270.17 1485.36 491.91 1492.68 474.51"/>
+  <polygon class="st9" points="1492.68 474.51 1781.75 405.42 1768.81 419.3 1486.89 492.05 1492.68 474.51"/>
+  <path class="st8" d="M1222.36,261.64c209.03-68.38,310.47-51.64,310.47-51.64l248.92,195.43-289.41,72.68-269.99-216.46h.01Z"/>
+  <g>
+    <g>
+      <polygon class="st9" points="1064.37 160.21 980.29 127.18 985.61 109.86 1073.14 144.25 1064.37 160.21 1064.37 160.21"/>
+      <path class="st9" d="M1133.7,131.7c-20.51-8.05-47.05-6.01-61.59,12.24-3.78,4.75-6.45,10.34-7.75,16.27l8.77-15.96c4.84-22.28,27.06-34.01,48.58-33.04,7.12.32,14.17,1.93,20.8,4.53l-8.81,15.97h0Z"/>
+      <path class="st9" d="M1158.17,57.19l-24.46,74.51c15.55-28.18,23.26-59.99,33.28-90.51l-8.82,16h0Z"/>
+      <path class="st2" d="M1166.99,41.18l-24.47,74.54c-20.52-8.06-47.08-6.03-61.63,12.24-3.78,4.75-6.46,10.34-7.75,16.28l-87.53-34.39c16.6-57.29,76.3-84.98,132.59-80.22,16.72,1.41,33.18,5.42,48.8,11.55h-.01Z"/>
+    </g>
+    <g>
+      <path class="st9" d="M1076.08,307.22c-56.39-22.29-105.22-75.46-106.58-138.49-.41-18.97,4.11-33.24,13.08-49.73-21.34,74.11,36.07,146.25,102.3,172.33l-8.8,15.89h0Z"/>
+      <path class="st1" d="M1100.71,232.19l-24.63,75.03c15.66-28.28,23.37-60.28,33.44-90.95l-8.81,15.92h0Z"/>
+      <path class="st4" d="M1109.51,216.27l-24.64,75.06c-66.23-26.08-123.64-98.22-102.3-172.33l87.55,34.39c-6.13,27.43,15.02,53.28,39.39,62.88h0Z"/>
+    </g>
+    <g>
+      <path class="st9" d="M1158.24,121.61c10.02-30.53,17.74-62.33,33.28-90.52-10.02,30.53-17.72,62.34-33.28,90.52h0Z"/>
+      <path class="st9" d="M1194.48,155.67c-6.8-15.7-20.44-27.82-36.24-34.06l8.82-15.97c15.8,6.24,29.46,18.37,36.27,34.08l-8.85,15.94h0Z"/>
+      <polygon class="st9" points="1277.67 135.57 1194.48 155.67 1203.33 139.72 1286.58 119.63 1277.67 135.57 1277.67 135.57"/>
+      <path class="st7" d="M1286.58,119.63l-83.25,20.09c-6.8-15.71-20.46-27.84-36.27-34.08l24.46-74.55c41.2,16.25,76.97,47.74,95.06,88.54h0Z"/>
+    </g>
+    <g>
+      <path class="st9" d="M1092.8,319.83c10.06-30.67,17.78-62.66,33.43-90.95-10.06,30.67-17.76,62.68-33.43,90.95h0Z"/>
+      <polygon class="st9" points="1183.65 187.48 1266.87 167.38 1275.77 151.44 1192.5 171.55 1183.65 187.48 1183.65 187.48"/>
+      <path class="st1" d="M1273.83,251.62c-16.61,55.4-73.33,83.28-128.39,79.99-18.05-1.08-35.82-5.22-52.65-11.78l8.8-15.88c76.21,29.8,181.84-1.14,185.63-95.39.79-19.63-3.57-39.19-11.45-57.11l-8.9,15.94c11.64,26.45,15.18,56.28,6.96,84.24h0Z"/>
+      <path class="st9" d="M1273,254.29c9.23-28.67,5.88-59.59-6.14-86.91l-83.22,20.11c18.57,43.41-22.59,76.65-60.89,61.8l-29.96,70.54c65.91,25.79,155.8,9.21,180.21-65.54h0Z"/>
+      <path class="st3" d="M1282.75,235.73c-16.62,55.43-73.38,83.31-128.46,80.01-18.07-1.08-35.84-5.22-52.69-11.79l24.63-75.07c38.32,14.85,84.87-13.88,66.27-57.33l83.27-20.11c11.65,26.47,15.2,56.31,6.98,84.29h0Z"/>
+    </g>
+  </g>
+  <line class="st1" x1="1350.64" y1="280.88" x2="1510.36" y2="411.9"/>
+  <line class="st1" x1="1389.12" y1="265.72" x2="1494.27" y2="351.97"/>
+  <line class="st1" x1="1439.6" y1="251.29" x2="1544.74" y2="337.54"/>
+  <line class="st1" x1="1487.73" y1="240.66" x2="1621.06" y2="350.29"/>
+  <line class="st1" x1="619.99" y1="394.59" x2="908.68" y2="601.61"/>
+  <g>
+    <g>
+      <polygon class="st9" points="1547.31 256.53 1584.99 52.74 1571.37 40.13 1533.61 244.24 1547.31 256.53 1547.31 256.53"/>
+      <polygon class="st9" points="1584.99 52.74 1634.18 58.86 1620.64 46.25 1571.37 40.13 1584.99 52.74 1584.99 52.74"/>
+      <path class="st6" d="M1596.54,262.75l37.64-203.9-49.19-6.12-37.68,203.79c16.41,2.08,32.83,4.15,49.24,6.23h-.01Z"/>
+    </g>
+    <g>
+      <polygon class="st9" points="1467.13 246.39 1494.27 100.02 1480.51 87.49 1453.31 234.09 1467.13 246.39 1467.13 246.39"/>
+      <polygon class="st9" points="1494.27 100.02 1543.4 106.16 1529.71 93.63 1480.51 87.49 1494.27 100.02 1494.27 100.02"/>
+      <path class="st6" d="M1516.29,252.6l27.11-146.45-49.12-6.14-27.15,146.37c16.39,2.07,32.77,4.14,49.16,6.22Z"/>
+    </g>
+    <g>
+      <polygon class="st9" points="1387.08 236.26 1408.14 123.06 1394.24 110.58 1373.13 223.96 1387.08 236.26 1387.08 236.26"/>
+      <polygon class="st9" points="1408.14 123.06 1457.19 129.2 1443.36 116.72 1394.24 110.58 1408.14 123.06 1408.14 123.06"/>
+      <path class="st6" d="M1436.16,242.47l21.03-113.27-49.05-6.15-21.06,113.21c16.36,2.07,32.72,4.14,49.08,6.21h0Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file