Skip to content

Commit dc229b2

Browse files
reakaleekreakaleek
authored
Landing page changes (#1080)
* Landing page changes * adjust grid
1 parent 4ed014c commit dc229b2

File tree

2 files changed

+221
-146
lines changed

2 files changed

+221
-146
lines changed

‎src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml‎

Lines changed: 56 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,33 @@
11
@inherits RazorSlice<LayoutViewModel>
2-
<div class="w-full font-body text-ink relative">
2+
<div class="w-full font-body text-ink relative text-pretty">
33
<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
44
<div class="h-[2px] w-full overflow-hidden">
55
<div class="progress w-full h-full bg-pink-70 left-right"></div>
66
</div>
77
<div class="sr-only">Loading</div>
88
</div>
99
<section class="w-full px-8 lg:px-6 bg-grey-10">
10-
<div class="container mx-auto py-16 grid items-center gap-6">
10+
<div class="container mx-auto pt-16 pb-10 grid md:grid-cols-2 items-center gap-6">
1111
<div>
1212
<h1 class="text-4xl font-bold font-sans text-black">Elastic Docs</h1>
1313
<p class="mt-4">Find the help you need, wherever you are in your Elastic journey.</p>
14-
<div class="flex md:inline-flex gap-3 mt-9">
14+
<div class="flex md:inline-flex gap-3 mt-6">
1515
<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">
1616
Get started
1717
</a>
18+
<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">
19+
Upgrade
20+
</a>
1821
</div>
1922
</div>
23+
<div class="flex justify-center items-center">
24+
<img src="@Model.Static("web-documentation-hero-illustration.svg")" alt="" width="400">
25+
</div>
2026
</div>
2127
</section>
2228

2329
<section class="w-full px-8 lg:px-6 bg-grey-10">
24-
<div class="container mx-auto py-16">
30+
<div class="container mx-auto py-10">
2531
<div class="heading-wrapper" id="elastic-products">
2632
<h2 class="font-bold font-sans text-3xl text-ink-dark">
2733
<a href="#elastic-products">Elastic products</a>
@@ -35,7 +41,7 @@
3541
<p class="font-sans font-bold text-xl">Elasticsearch</p>
3642
<p class="mt-2 grow">Build powerful search and RAG applications using Elasticsearch's vector database, AI toolkit, and advanced retrieval capabilities.</p>
3743
<div class="grid grid-cols-2 mt-6">
38-
<a href="@Model.Link("/solutions/search/get-started")" class="text-blue-elastic hover:text-blue-elastic-100 font-sans font-semibold">Get started</a>
44+
<a href="@Model.Link("/solutions/search")" class="text-blue-elastic hover:text-blue-elastic-100 font-sans font-semibold">View docs</a>
3945
</div>
4046
</div>
4147
</div>
@@ -47,7 +53,7 @@
4753
<p class="font-sans font-bold text-xl">Observability</p>
4854
<p class="mt-2 grow">Resolve problems with open, flexible, and unified observability powered by advanced machine learning and analytics.</p>
4955
<div class="grid grid-cols-2 mt-6">
50-
<a href="@Model.Link("/solutions/observability/get-started")" class="text-blue-elastic hover:text-blue-elastic-100 font-sans font-semibold">Get started</a>
56+
<a href="@Model.Link("/solutions/observability")" class="text-blue-elastic hover:text-blue-elastic-100 font-sans font-semibold">View docs</a>
5157
</div>
5258
</div>
5359
</div>
@@ -60,7 +66,7 @@
6066
<p class="font-sans font-bold text-xl">Security</p>
6167
<p class="mt-2 grow">Detect, investigate, and respond to threats with AI-driven security analytics to protect your organization at scale.</p>
6268
<div class="grid grid-cols-2 mt-6">
63-
<a href="@Model.Link("/solutions/security/get-started")" class="text-blue-elastic hover:text-blue-elastic-100 font-sans font-semibold">Get started</a>
69+
<a href="@Model.Link("/solutions/security")" class="text-blue-elastic hover:text-blue-elastic-100 font-sans font-semibold">View docs</a>
6470
</div>
6571
</div>
6672
</div>
@@ -70,15 +76,15 @@
7076
</section>
7177

7278
<section class="w-full px-8 lg:px-6">
73-
<div class="container mx-auto py-16">
79+
<div class="container mx-auto py-10">
7480
<div class="heading-wrapper" id="how-to-guides">
7581
<h2 class="font-bold font-sans text-3xl text-ink-dark">
7682
<a href="#how-to-guides">
7783
How-to guides
7884
</a>
7985
</h2>
8086
</div>
81-
<div class="grid md:grid-cols-2 xl:grid-cols-4 gap-6 mt-6">
87+
<div class="grid md:grid-cols-2 gap-6 mt-6">
8288
<div class="grow rounded-xl border-1 border-grey-20 p-6">
8389
<div class="flex gap-6 h-full">
8490
<img loading="lazy" alt="Graph icon" src="@Model.Static("icon-graph-64-color.svg")" class="size-9"/>
@@ -130,136 +136,51 @@
130136
</div>
131137
</div>
132138
</div>
133-
134139
</div>
135140
</div>
136141
</section>
137142

138143
<section class="w-full px-8 lg:px-6">
139-
<div class="container mx-auto py-16">
144+
<div class="container mx-auto py-10">
140145
<div class="heading-wrapper" id="references">
141146
<h2 class="font-bold font-sans text-3xl text-ink-dark">
142-
<a href="#references">References</a>
147+
<a href="#references">Reference</a>
143148
</h2>
144149
</div>
145150
<div class="mt-6 grid md:grid-cols-2 lg:grid-cols-4 gap-6">
146-
<div class="flex flex-col rounded-xl bg-white border-1 border-grey-20 p-6">
151+
<div class="flex flex-col rounded-xl bg-white">
147152
<h3 class="font-bold font-sans text-ink-dark text-2xl">Elastic APIs</h3>
148-
<p class="grow mt-3">Browse the API documentation.</p>
149-
<ul>
150-
<li class="mt-3">
151-
<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">
152-
Elasticsearch API
153-
</a>
154-
</li>
155-
<li class="mt-3">
156-
<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">
157-
Kibana API
158-
</a>
159-
</li>
160-
<li class="mt-3">
161-
<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">
162-
Elastic Cloud API
163-
</a>
164-
</li>
165-
</ul>
153+
<p class="grow mt-3">Browse the API docs for Elasticsearch, Kibana, Elastic Cloud, and more.</p>
166154
<div class="mt-6">
167155
<a href="https://www.elastic.co/docs/api" target="_blank" rel="noopener noreferrer" class="link">
168-
Explore all
169-
<svg class="link-arrow"
170-
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
171-
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
172-
</svg>
156+
View docs
173157
</a>
174158
</div>
175159
</div>
176-
<div class="flex flex-col rounded-xl bg-white border-1 border-grey-20 p-6">
160+
<div class="flex flex-col rounded-xl bg-white">
177161
<h3 class="font-sans font-bold text-ink-dark text-2xl">Elasticsearch Clients</h3>
178-
<p class="grow mt-3">Browse the client libraries for Elasticsearch.</p>
179-
<ul>
180-
<li class="mt-3">
181-
<a href="@Model.Link("/reference/elasticsearch/clients/java")" class="font-sans font-bold hover:underline hover:text-black">
182-
Java
183-
</a>
184-
</li>
185-
<li class="mt-3">
186-
<a href="@Model.Link("/reference/elasticsearch/clients/dotnet")" class="font-sans font-bold hover:underline hover:text-black">
187-
.NET
188-
</a>
189-
</li>
190-
<li class="mt-3">
191-
<a href="@Model.Link("/reference/elasticsearch/clients/python")" class="font-sans font-bold hover:underline hover:text-black">
192-
Python
193-
</a>
194-
</li>
195-
</ul>
162+
<p class="grow mt-3">Browse the Elasticsearch client libraries for Java, .Net, Python, and more.</p>
196163
<div class="mt-6">
197164
<a href="@Model.Link("/reference/elasticsearch-clients/")" class="link">
198-
Explore all
199-
<svg class="link-arrow"
200-
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
201-
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
202-
</svg>
165+
View docs
203166
</a>
204167
</div>
205168
</div>
206-
<div class="flex flex-col rounded-xl bg-white border-1 border-grey-20 p-6">
169+
<div class="flex flex-col rounded-xl bg-white">
207170
<h3 class="font-sans font-bold text-ink-dark text-2xl">Query Languages</h3>
208-
<p class="grow mt-3">Browse the query language documentation.</p>
209-
<ul>
210-
<li class="mt-3">
211-
<a href="@Model.Link("/reference/query-languages/querydsl")" class="font-sans font-bold hover:underline hover:text-black">
212-
Query DSL
213-
</a>
214-
</li>
215-
<li class="mt-3">
216-
<a href="@Model.Link("reference/query-languages/esql")" class="font-sans font-bold hover:underline hover:text-black">
217-
ES/QL
218-
</a>
219-
</li>
220-
<li class="mt-3">
221-
<a href="@Model.Link("/reference/query-languages/kql")" class="font-sans font-bold hover:underline hover:text-black">
222-
KQL
223-
</a>
224-
</li>
225-
</ul>
171+
<p class="grow mt-3">Browse the docs for Query DSL, ES|QL, KQL, and more.</p>
226172
<div class="mt-6">
227173
<a href="@Model.Link("/reference/query-languages/")" class="link">
228-
Explore all
229-
<svg class="link-arrow"
230-
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
231-
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
232-
</svg>
174+
View docs
233175
</a>
234176
</div>
235177
</div>
236-
<div class="flex flex-col rounded-xl bg-white border-1 border-grey-20 p-6">
178+
<div class="flex flex-col rounded-xl bg-white">
237179
<h3 class="font-sans font-bold text-ink-dark text-2xl">APM Agents</h3>
238-
<p class="grow mt-3">Browse the agents for Elastic APM.</p>
239-
<ul>
240-
<li class="mt-3">
241-
<a href="@Model.Link("/reference/apm/agents/rum-js")" class="font-sans font-bold hover:underline hover:text-black">
242-
RUM JavaScript
243-
</a>
244-
</li>
245-
<li class="mt-3">
246-
<a href="@Model.Link("/reference/apm/agents/java")" class="font-sans font-bold hover:underline hover:text-black">
247-
Java
248-
</a>
249-
</li>
250-
<li class="mt-3">
251-
<a href="@Model.Link("/reference/apm/agents/dotnet")" class="font-sans font-bold hover:underline hover:text-black">
252-
.NET
253-
</a>
254-
</li>
255-
</ul>
180+
<p class="grow mt-3">Browse the APM Agent docs for RUM JavaScript, Java, .NET, and more.</p>
256181
<div class="mt-6">
257182
<a href="@Model.Link("/reference/apm-agents/")" class="link">
258-
Explore all
259-
<svg class="link-arrow"
260-
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
261-
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
262-
</svg>
183+
View docs
263184
</a>
264185
</div>
265186
</div>
@@ -276,73 +197,63 @@
276197
</div>
277198
</section>
278199

279-
<section class="w-full px-8 lg:px-6 bg-grey-10">
280-
<div class="container mx-auto py-16">
200+
<section class="w-full px-8 lg:px-6">
201+
<div class="container mx-auto py-10">
281202
<div class="heading-wrapper" id="product-resources">
282-
<h2 class="font-bold font-sans text-3xl text-ink-dark">
203+
<h2 class="font-bold font-sans text-3xl">
283204
<a href="#product-resources">
284205
Product resources
285206
</a>
286207
</h2>
287208
</div>
288-
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
289-
<div class="flex flex-col rounded-xl bg-black text-white p-6">
209+
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mt-6 bg-ink-dark text-white">
210+
<div class="flex flex-col p-6">
290211
<h3 class="font-sans font-bold text-2xl">Releases</h3>
291212
<p class="grow mt-4">Explore the latest features and changes in Elastic.</p>
292-
<div class="mt-6 grid grid-cols-1 gap-6 text-center">
293-
<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">
213+
<div class="mt-6">
214+
<a href="@Model.Link("/release-notes/")" class="link text-white">
294215
View release notes
295-
</a>
296-
<a href="@Model.Link("/deploy-manage/upgrade")" class="link text-white">
297-
Upgrade now
298216
<svg class="link-arrow"
299217
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
300218
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
301219
</svg>
302220
</a>
303221
</div>
304222
</div>
305-
<div class="flex flex-col rounded-xl bg-black text-white p-6">
223+
<div class="flex flex-col p-6">
306224
<h3 class="font-sans font-bold text-2xl">Troubleshoot and support</h3>
307-
<p class="grow mt-4">Check troubleshooting guides for common fixes or reach out to the experts.</p>
308-
<div class="mt-6 grid grid-cols-1 gap-6 text-center">
309-
<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">
310-
Start troubleshooting
311-
</a>
312-
<a href="https://support.elastic.co" target="_blank" rel="noopener noreferrer" class="link text-white">
313-
Get in touch
225+
<p class="grow mt-4">Check troubleshooting guides for common fixes.</p>
226+
<div class="mt-6">
227+
<a href="@Model.Link("/troubleshoot/")" target="_blank" rel="noopener noreferrer" class="link text-white wrap-break-word">
228+
View troubleshooting docs
314229
<svg class="link-arrow"
315230
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
316231
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
317232
</svg>
318233
</a>
319234
</div>
320235
</div>
321-
<div class="flex flex-col rounded-xl bg-black text-white p-6">
236+
<div class="flex flex-col p-6">
322237
<h3 class="font-sans font-bold text-2xl">Contribute and extend</h3>
323-
<p class="grow mt-4">Learn how to contribute to Elastic products and extend Elastic capabilities.</p>
324-
<div class="mt-6 grid grid-cols-1 gap-6 text-center">
325-
<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">
326-
Start contributing
327-
</a>
328-
<a href="@Model.Link("extend")" target="_blank" rel="noopener noreferrer" class="link text-white">
329-
Extend Elastic
238+
<p class="grow mt-4">Learn how to contribute to Elastic products and extend capabilities.</p>
239+
<div class="mt-6">
240+
<a href="@Model.Link("extend/kibana")" target="_blank" rel="noopener noreferrer" class="link text-white wrap-break-word">
241+
<span class="wrap-break-word">
242+
View contribute and extend docs
243+
</span>
330244
<svg class="link-arrow"
331245
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
332246
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
333247
</svg>
334248
</a>
335249
</div>
336250
</div>
337-
<div class="flex flex-col rounded-xl bg-black text-white p-6">
251+
<div class="flex flex-col p-6">
338252
<h3 class="font-sans font-bold text-2xl">Archive</h3>
339-
<p class="grow mt-4">Browse the archived documentation for older Elastic product releases.</p>
340-
<div class="mt-6 grid grid-cols-1 gap-6 text-center">
341-
<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">
342-
View archived docs
343-
</a>
344-
<a href="https://www.elastic.co/support/eol" target="_blank" rel="noopener noreferrer" class="link text-white">
345-
View version policy
253+
<p class="grow mt-4">Browse the archived docs for older Elastic product versions.</p>
254+
<div class="mt-6">
255+
<a href="@Model.Link("/archive")" target="_blank" rel="noopener noreferrer" class="link text-white">
256+
View archive docs
346257
<svg class="link-arrow"
347258
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
348259
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
@@ -355,7 +266,7 @@
355266
</section>
356267

357268
@* <section class="w-full px-8 lg:px-6 bg-grey-10"> *@
358-
@* <div class="container mx-auto py-16"> *@
269+
@* <div class="container mx-auto py-10"> *@
359270
@* <h2 class="font-bold text-3xl text-ink-dark">Instant Elasticsearch</h2> *@
360271
@* <div class="grid lg:grid-cols-2 gap-6 mt-6"> *@
361272
@* <div class="lg:basis-[50%]"> *@
@@ -378,9 +289,8 @@
378289
@* </section> *@
379290

380291
<section class="w-full px-8 lg:px-6">
381-
<div class="container mx-auto py-16">
382-
<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">
383-
<img loading="lazy" class="mx-auto" alt="Elastic Community logo" src="@Model.Static("community-logo.png")" />
292+
<div class="container mx-auto py-10">
293+
<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">
384294
<div>
385295
<h2 class="font-semibold font-sans text-4xl text-black leading-[1.2em]">Welcome to our community of developers</h2>
386296
<p class="mt-2">Learn from your peers and share code examples.</p>

0 commit comments

Comments
 (0)