From e6a9de764b880ebeb2b29fd4b0277ec64c8fd418 Mon Sep 17 00:00:00 2001
From: Erica Hughberg <erica.sundberg.90@gmail.com>
Date: Wed, 25 Jun 2025 17:16:40 -0400
Subject: [PATCH] add tools page

Signed-off-by: Erica Hughberg <erica.sundberg.90@gmail.com>
---
 site/content/en/about/index.md                |  2 +-
 site/content/en/tools/_index.md               | 32 ++++++++
 .../tools/benchmark-report-explorer/index.md  |  2 +-
 site/hugo.toml                                |  5 ++
 site/layouts/partials/navbar.html             | 25 ++++++
 site/layouts/partials/tools-grid.html         | 78 +++++++++++++++++++
 site/layouts/shortcodes/tools-grid.html       |  1 +
 7 files changed, 143 insertions(+), 2 deletions(-)
 create mode 100644 site/content/en/tools/_index.md
 create mode 100644 site/layouts/partials/tools-grid.html
 create mode 100644 site/layouts/shortcodes/tools-grid.html

diff --git a/site/content/en/about/index.md b/site/content/en/about/index.md
index 6e25e4d6b4..639a2c219a 100644
--- a/site/content/en/about/index.md
+++ b/site/content/en/about/index.md
@@ -26,7 +26,7 @@ Envoy Gateway democratizes the power of <a href="https://www.envoyproxy.io/">Env
 <p class="text-center mb-5 lead">
 Envoy Gateway was created with a clear mission: to make Envoy Proxy's powerful features accessible to all users while providing a robust implementation of the Kubernetes Gateway API. We believe that managing application
 traffic should be straightforward, allowing teams to focus on building great applications rather than wrestling with complex proxy configurations.
-</p
+</p>
 
 </div>
 {{% /blocks/section %}}
diff --git a/site/content/en/tools/_index.md b/site/content/en/tools/_index.md
new file mode 100644
index 0000000000..e75fd762e6
--- /dev/null
+++ b/site/content/en/tools/_index.md
@@ -0,0 +1,32 @@
++++
+title = "Tools"
+description = "Explore tools available on Envoy Gateway site"
++++
+{{% blocks/cover title="Envoy Gateway Tools" height="auto" color="primary" %}}
+<div class="container">
+    <p class="lead">
+        Tools for learning about and exploring the Envoy Gateway project.
+    </p>
+</div>
+{{% /blocks/cover %}}
+{{% blocks/section color="white" %}}
+{{% /blocks/section %}}
+<div class="col-12">
+    <h2 class="text-center mb-5">Available Tools</h2>
+</div>
+
+<div class="col-12">
+    {{< tools-grid >}}
+</div>
+
+{{% blocks/section color="white" %}}
+<div class="row justify-content-center">
+        <h2 class="text-center mb-5">Contribute to more tools</h2>
+        <p class="text-center mb-5 lead">
+                Our tools ecosystem is new and evolving and we welcome your contributions!<br/>
+                Get involved with the Envoy Gateway community and expand our tooling library.<br/>
+                Join us on <a href="https://communityinviter.com/apps/envoyproxy/envoy"><i class="fab fa-slack me-2"></i>Slack</a> and <a href="https://github.com/envoyproxy/gateway"> <i class="fab fa-github me-2"></i>GitHub</a>.
+        </p>
+
+</div>
+{{% /blocks/section %}}
diff --git a/site/content/en/tools/benchmark-report-explorer/index.md b/site/content/en/tools/benchmark-report-explorer/index.md
index e250d8d753..9fa7e0e90a 100644
--- a/site/content/en/tools/benchmark-report-explorer/index.md
+++ b/site/content/en/tools/benchmark-report-explorer/index.md
@@ -1,6 +1,6 @@
 ---
 title: "Performance Benchmark Report Explorer"
-description: "Envoy Gateway Performance Benchmark Report Explorer Tool"
+description: "Explore the Benchmark Reports from Envoy Gateway Releases"
 type: "tools"
 includeBenchmark: true
 ---
diff --git a/site/hugo.toml b/site/hugo.toml
index a7ec1f7cf5..4ffc5bb13e 100644
--- a/site/hugo.toml
+++ b/site/hugo.toml
@@ -223,6 +223,11 @@ enable = true
     name = "Documentation"
     weight = -102
     url = "/docs"
+  [[menu.main]]
+    name = "Tools"
+    weight = -99
+    url = "/tools"
+    hasChildren = true
 
 [[params.versions]]
   version = "latest"
diff --git a/site/layouts/partials/navbar.html b/site/layouts/partials/navbar.html
index 4060ba40c7..bda421244e 100644
--- a/site/layouts/partials/navbar.html
+++ b/site/layouts/partials/navbar.html
@@ -11,6 +11,30 @@
     <ul class="navbar-nav mt-2 mt-lg-0">
       {{ $p := . }}
       {{ range .Site.Menus.main }}
+      {{ if .HasChildren }}
+      <li class="nav-item dropdown">
+        {{ $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) }}
+        {{ with .Page }}
+        {{ $active = or $active ( $.IsDescendant .)  }}
+        {{ end }}
+        {{ $pre := .Pre }}
+        {{ $post := .Post }}
+        <a class="nav-link dropdown-toggle{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" id="navbarDropdown{{ .Name }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+          {{ with .Pre}}{{ $pre }}{{ end }}<span{{if $active }} class="active"{{end}}>{{ .Name }}</span>{{ with .Post}}{{ $post }}{{ end }}
+        </a>
+        <ul class="dropdown-menu" aria-labelledby="navbarDropdown{{ .Name }}">
+          <li><a class="dropdown-item" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}">All {{ .Name }}</a></li>
+          <li><hr class="dropdown-divider"></li>
+          {{ if eq .Name "Tools" }}
+          {{ range where $p.Site.Pages "Section" "tools" }}
+          {{ if not .IsSection }}
+          <li><a class="dropdown-item" href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+          {{ end }}
+          {{ end }}
+          {{ end }}
+        </ul>
+      </li>
+      {{ else }}
       <li class="nav-item">
         {{ $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) }}
         {{ with .Page }}
@@ -23,6 +47,7 @@
         <a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}"{{ if ne $url.Host $baseurl.Host }} target="_blank" rel="noopener"{{ end }}>{{ with .Pre}}{{ $pre }}{{ end }}<span{{if $active }} class="active"{{end}}>{{ .Name }}</span>{{ with .Post}}{{ $post }}{{ end }}</a>
       </li>
       {{ end }}
+      {{ end }}
       {{ if .Site.Params.versions }}
       <li class="nav-item dropdown d-none d-lg-block">
         {{ partial "navbar-version-selector.html" . }}
diff --git a/site/layouts/partials/tools-grid.html b/site/layouts/partials/tools-grid.html
new file mode 100644
index 0000000000..c1547d665e
--- /dev/null
+++ b/site/layouts/partials/tools-grid.html
@@ -0,0 +1,78 @@
+<style>
+  .tools-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-top: 2rem;
+  }
+  .tool-card {
+    background: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+    border: 1px solid #e5e7eb;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .tool-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .tool-card h3 {
+    color: #1f2937;
+    margin-bottom: 0.5rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+  .tool-card p {
+    color: #6b7280;
+    margin-bottom: 1rem;
+    line-height: 1.5;
+    flex-grow: 1;
+  }
+  .tool-card a {
+    display: inline-flex;
+    align-items: center;
+    color: #4f46e5;
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.2s ease-in-out;
+    margin-top: auto;
+  }
+  .tool-card a:hover {
+    color: #3730a3;
+  }
+  .tool-card a i {
+    margin-left: 0.5rem;
+  }
+</style>
+<div class="container">
+  <div class="tools-grid">
+    {{ $currentPage := . }}
+    {{ range where .Site.Pages "Section" "tools" }}
+    {{ if not .IsSection }}
+    <div class="tool-card">
+      <h3>{{ .Title }}</h3>
+      <p>{{ with .Description }}{{ . }}{{ else }}{{ .Summary | plainify | truncate 120 }}{{ end }}</p>
+      <a href="{{ .RelPermalink }}">
+        Try Tool <i class="fas fa-arrow-right"></i>
+      </a>
+    </div>
+    {{ end }}
+    {{ end }}
+  </div>
+  {{ $toolPages := where .Site.Pages "Section" "tools" }}
+  {{ $toolsCount := 0 }}
+  {{ range $toolPages }}
+    {{ if not .IsSection }}
+      {{ $toolsCount = add $toolsCount 1 }}
+    {{ end }}
+  {{ end }}
+  {{ if eq $toolsCount 0 }}
+  <div class="text-center mt-5">
+    <p class="text-muted">No tools are currently available. Check back soon!</p>
+  </div>
+  {{ end }}
+</div>
diff --git a/site/layouts/shortcodes/tools-grid.html b/site/layouts/shortcodes/tools-grid.html
new file mode 100644
index 0000000000..dfbf98ed62
--- /dev/null
+++ b/site/layouts/shortcodes/tools-grid.html
@@ -0,0 +1 @@
+{{ partial "tools-grid.html" . }}