Skip to content

Landing page changes #1080

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 10, 2025
Merged

Landing page changes #1080

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cb7f4b2
Landing page changes
reakaleek Apr 10, 2025
64f57a9
adjust grid
reakaleek Apr 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 56 additions & 146 deletions src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,33 @@
@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>
</div>
<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 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 class="flex md:inline-flex gap-3 mt-9">
<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>

<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>
Expand All @@ -35,7 +41,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>
Expand All @@ -47,7 +53,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>
Expand All @@ -60,7 +66,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>
Expand All @@ -70,15 +76,15 @@
</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">
How-to guides
</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"/>
Expand Down Expand Up @@ -130,136 +136,51 @@
</div>
</div>
</div>

</div>
</div>
</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>
Expand All @@ -276,73 +197,63 @@
</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"/>
</svg>
</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"/>
</svg>
</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"/>
</svg>
</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"/>
Expand All @@ -355,7 +266,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%]"> *@
Expand All @@ -378,9 +289,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>
Expand Down
Loading
Loading