feat(docs): add adopter section in doc main page (#3466)

* Add adopter section in doc main page

Signed-off-by: Wilson Wu <[email protected]>

* Add adopters and fix style

Signed-off-by: Wilson Wu <[email protected]>

---------

Signed-off-by: Wilson Wu <[email protected]>

site/content/en/_index.md

@@ -78,6 +78,8 @@ For announcement of latest features etc.
 
 {{% /blocks/section %}}
 
+{{< adopters >}}
+
 {{% blocks/lead type="row" color="white" %}}
 
 <img src="/img/cncf.svg" alt="CNCF" width="40%">

site/content/zh/_index.md

@@ -77,6 +77,8 @@ title: Envoy Gateway
 
 {{% /blocks/section %}}
 
+{{< adopters >}}
+
 {{% blocks/lead type="row" color="white" %}}
 
 <img src="/img/cncf.svg" alt="CNCF" width="40%">

site/data/adopters.yaml

@@ -0,0 +1,13 @@
+adopters:
+  - name: "AllFactors"
+    logo: "/logos/allfactors.svg"
+    url: "https://allfactors.com/"
+    description: "Routing all customer traffic to our various backends. Every time a new customer signs up we dynamically add a route to a new hostname so Envoy Gateway is deeply integrated with our product."
+  - name: "Tetrate"
+    logo: "/logos/tetrate.svg"
+    url: "https://www.tetrate.io"
+    description: "Tetrate provides Enterprise Gateway (TEG) to end users, which includes a 100% upstream distribution of Envoy Gateway, and management to deliver applications securely, authenticate user traffic, protect services with rate limiting and WAF, and integrate with your observability stack to monitor and observe activity."
+  - name: "Airspace Link"
+    logo: "/logos/airspacelink.svg"
+    url: "https://airspacelink.com/"
+    description: "Airspace Link is using Envoy Gateway to route all public APIs to Kubernetes clusters, developers are manipulating routes descriptions using agnostic manifest files, which are then automatically provisioned using Envoy Gateway."

site/layouts/shortcodes/adopters.html

@@ -0,0 +1,84 @@
+{{ $adopters := .Site.Data.adopters.adopters }}
+<section id="adopters">
+  <h2 class="adopter-head">Our Adopters</h2>
+  <div class="adopters-list">
+    {{ range $adopters }}
+    <a class="adopter" href="{{ .url }}" target="_blank">
+        <img src="{{ .logo | relURL }}" alt="{{ .name }} logo">
+        <div class="adopter-info">
+            <p>{{ .description }}</p>
+        </div>
+    </a>
+    {{ end }}
+  </div>
+</section>
+
+<style>
+#adopters {
+  text-align: center;
+  padding: 0px;
+}
+
+.adopter-head {
+  padding: 50px;
+}
+
+.adopters-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start; /* Center items horizontally */
+  gap: 20px;
+  max-width: 1200px; /* Adjust to fit the container width */
+  margin: 0 auto; /* Center the container */
+}
+
+.adopter {
+  position: relative;
+  flex: 0 1 calc(25% - 20px); /* Adjust width to fit 4 items per row */
+  max-width: calc(25% - 20px);
+  box-sizing: border-box;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  text-align: center;
+  transition: transform 0.3s ease;
+  display: grid;
+  place-items: center;
+  width: 100%;
+}
+
+.adopter img {
+  max-width: 100%;
+  height: auto;
+}
+
+.adopter-info {
+  display: none;
+  position: absolute;
+  bottom: 100%; /* Position above the logo */
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 10px 10px 0px 15px;
+  border-radius: 5px;
+  width: 500px; /* Adjust the width as needed */
+  z-index: 10;
+  text-align: left;
+}
+
+.adopter:hover .adopter-info {
+  display: block;
+}
+
+/* Responsive design for mobile devices */
+@media (max-width: 768px) {
+  .adopters-list {
+    justify-content: center; /* Ensure center alignment on mobile */
+  }
+  .adopter {
+    flex: 0 1 100%; /* Each item takes full width */
+    max-width: 100%;
+  }
+}
+</style>