docs: add tools page for navigating to tools

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 %}}

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 %}}

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
 ---

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"

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" . }}

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>

site/layouts/shortcodes/tools-grid.html

@@ -0,0 +1 @@
+{{ partial "tools-grid.html" . }}