Introduce an interstitial for selecting install mode (#16426)

* Introduce an interstitial for selecting install mode

* remove leftover span

* fix libt

* update the order

* Better CSS

Author: craigbox

content/en/_index.html

@@ -39,7 +39,7 @@ <h1 id="title">
         <div class="panels">
             {{< content_panel type="dark" title="latest_news" text="Fast, secure and simple: Istio's ambient mode is now Generally Available." button="read_more" url="/blog/2024/ambient-reaches-ga/" >}}
             {{< content_panel type="dark" title="join_the_community" text="Connect with over 10,000+ of your peers using, testing and innovating with Istio." button="connect_with_us" url="/get-involved" >}}
-            {{< content_panel type="dark" title="get_started" text="Try Istio today. Quickly evaluate the project in four steps." button="learn_more" url="/docs/setup/getting-started" >}}
+            {{< content_panel type="dark" title="get_started" text="Try Istio today. Quickly evaluate the project in four steps." button="learn_more" url="/docs/overview/quickstart" >}}
         </div>
     </section>
 

content/en/docs/overview/quickstart/index.md

@@ -0,0 +1,33 @@
+---
+title: "Quickstart"
+description: Learn how to get started with a simple example installation.
+weight: 50
+keywords: [introduction]
+owner: istio/wg-docs-maintainers-english
+skip_seealso: true
+test: n/a
+---
+
+Thanks for your interest in Istio!
+
+Istio has two primary modes: **ambient mode** and **sidecar mode**.
+
+* [Ambient mode](/docs/overview/dataplane-modes/#ambient-mode) is the new and improved model, created to address the shortcomings of sidecar mode. In ambient mode, a secure tunnel is installed on each node, and you can opt in to the full feature set with proxies you install, (generally) per-namespace.
+* [Sidecar mode](/docs/overview/dataplane-modes/#sidecar-mode) is the traditional model of service mesh pioneered by Istio in 2017. In sidecar mode, a proxy is deployed along with every Kubernetes pod or other workload.
+
+Most of the energy in the Istio community is going towards improvement of ambient mode, although sidecar mode remains fully supported. Any major new feature contributed to the project is expected to work in both modes.
+
+In general, **we recommend that new users start with ambient mode**. It is faster, cheaper, and easier to manage. There are [advanced use cases](/docs/overview/dataplane-modes/#unsupported-features) that still require the use of sidecar mode, but closing these gaps is on our 2025 roadmap.
+
+<div style="text-align: center;">
+  <div style="display: inline-block;">
+    <a href="/docs/ambient/getting-started"
+       style="display: inline-block; min-width: 18em; margin: 0.5em;"
+       class="btn btn--secondary"
+       id="get-started-ambient">Get started with ambient mode</a>
+    <a href="/docs/setup/getting-started"
+       style="display: inline-block; min-width: 18em; margin: 0.5em;"
+       class="btn btn--secondary"
+       id="get-started-sidecar">Get started with sidecar mode</a>
+  </div>
+</div>

layouts/partials/header.html

@@ -50,7 +50,7 @@
 
             <div class="main-navigation-footer">
                 <button id="search-show" class="search-show" title='{{ i18n "search" }}' aria-label='{{ i18n "search_label" }}'>{{ partial "icon.html" "magnifier" }}</button>
-                <a href='{{ "/docs/setup/getting-started" | relLangURL }}' class="btn btn--primary" id="try-istio">{{ i18n "try_istio" }}</a>
+                <a href='{{ "/docs/overview/quickstart" | relLangURL }}' class="btn btn--primary" id="try-istio">{{ i18n "try_istio" }}</a>
             </div>
 
         </div>