docs: use tabs to show different installation types

site/content/en/docs/install/_index.md

@@ -2,4 +2,4 @@
 title: "Installation"
 description: This section includes installation related contents of Envoy Gateway.
 weight: 70
----
+---

site/content/en/docs/install/install-helm.md → site/content/en/docs/install/install.md

@@ -1,7 +1,11 @@
-+++
-title = "Install with Helm"
-weight = -100
-+++
+---
+title: "Install"
+description: This section includes installation related contents of Envoy Gateway.
+weight: -100
+---
+
+{{< tabpane text=true >}}
+{{% tab header="Install with Helm" %}}
 
 [Helm](https://helm.sh) is a package manager for Kubernetes that automates the release and management of software on Kubernetes. 
 
@@ -10,7 +14,7 @@ Envoy Gateway can be installed via a Helm chart with a few simple steps, dependi
 ## Before you begin
 
 {{% alert title="Compatibility Matrix" color="warning" %}}
-Refer to the [Version Compatibility Matrix](/news/releases/matrix) to learn more.
+Refer to the [Version Compatibility Matrix](../../news/releases/matrix) to learn more.
 {{% /alert %}}
 
 The Envoy Gateway Helm chart is hosted by DockerHub.
@@ -142,3 +146,113 @@ These are the ports used by Envoy Gateway and the managed Envoy Proxy.
 {{% alert title="Next Steps" color="warning" %}}
 Envoy Gateway should now be successfully installed and running, but in order to experience more abilities of Envoy Gateway, you can refer to [Tasks](../tasks).
 {{% /alert %}}
+
+{{% /tab %}}
+{{% tab header="Install with Kubernetes YAML" %}}
+In this guide, we'll walk you through installing Envoy Gateway in your Kubernetes cluster.
+
+The manual install process does not allow for as much control over configuration
+as the [Helm install method](./install-helm), so if you need more control over your Envoy Gateway
+installation, it is recommended that you use helm.
+
+## Before you begin
+
+Envoy Gateway is designed to run in Kubernetes for production. The most essential requirements are:
+
+* Kubernetes 1.25 or later
+* The `kubectl` command-line tool
+
+{{% alert title="Compatibility Matrix" color="warning" %}}
+Refer to the [Version Compatibility Matrix](/news/releases/matrix) to learn more.
+{{% /alert %}}
+
+## Install with YAML
+
+Envoy Gateway is typically deployed to Kubernetes from the command line. If you don't have Kubernetes, you should use `kind` to create one.
+
+{{% alert title="Developer Guide" color="primary" %}}
+Refer to the [Developer Guide](../../contributions/develop) to learn more.
+{{% /alert %}}
+
+1. In your terminal, run the following command:
+
+    ```shell
+    kubectl apply --server-side -f https://github.com/envoyproxy/gateway/releases/download/v1.0.2/install.yaml
+    ```
+
+2. Next Steps
+
+   Envoy Gateway should now be successfully installed and running, but in order to experience more abilities of Envoy Gateway, you can refer to [Tasks](/latest/tasks).
+
+{{% /tab %}}
+{{% tab header="Install with egctl" %}}
+{{% alert title="What is egctl?" color="primary" %}}
+
+`egctl` is a command line tool to provide additional functionality for Envoy Gateway users.
+
+{{% /alert %}}
+
+
+This task shows how to install the egctl CLI. egctl can be installed either from source, or from pre-built binary releases.
+
+### From The Envoy Gateway Project
+
+The Envoy Gateway project provides two ways to fetch and install egctl. These are the official methods to get egctl releases. Installation through those methods can be found below the official methods.
+
+{{< tabpane text=true >}}
+{{% tab header="From the Binary Releases" %}}
+
+Every [release](https://github.com/envoyproxy/gateway/releases) of egctl provides binary releases for a variety of OSes. These binary versions can be manually downloaded and installed.
+
+1. Download your [desired version](https://github.com/envoyproxy/gateway/releases)
+2. Unpack it (tar -zxvf egctl_latest_linux_amd64.tar.gz)
+3. Find the egctl binary in the unpacked directory, and move it to its desired destination (mv bin/linux/amd64/egctl /usr/local/bin/egctl)
+
+From there, you should be able to run: `egctl help`.
+
+{{% /tab %}}
+{{% tab header="From Script" %}}
+
+`egctl` now has an installer script that will automatically grab the latest release version of egctl and install it locally.
+
+You can fetch that script, and then execute it locally. It's well documented so that you can read through it and understand what it is doing before you run it.
+
+```shell
+curl -fsSL -o get-egctl.sh https://gateway.envoyproxy.io/get-egctl.sh
+
+chmod +x get-egctl.sh
+
+# get help info of the 
+bash get-egctl.sh --help
+
+# install the latest development version of egctl
+bash VERSION=latest get-egctl.sh
+```
+
+Yes, you can just use the below command if you want to live on the edge.
+
+```shell
+curl -fsSL https://gateway.envoyproxy.io/get-egctl.sh | VERSION=latest bash 
+```
+
+{{% /tab %}}
+
+{{% tab header="From Homebrew" %}}
+
+You can also install egctl using homebrew:
+
+```shell
+brew install egctl
+```
+
+{{% /tab %}}
+{{< /tabpane >}}
+
+{{% alert title="Next Steps" color="warning" %}}
+
+You can refer to the [Use egctl task](../tasks/operations/egctl) for more details about egctl.
+
+{{% /alert %}}
+
+{{% /tab %}}
+{{< /tabpane >}}

site/layouts/shortcodes/alert.html

@@ -0,0 +1,6 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+{{ $color := .Get "color" | default "primary" }}
+<div class="alert alert-{{ $color }}" role="alert">
+{{ with .Get "title" }}<h4 class="alert-heading">{{ . | safeHTML }}</h4>{{ end }}
+{{ .Inner }}
+</div>