Style: Add Mainframe homepage

Author: danielledeleo

assets/css/v2/style.css

@@ -60,7 +60,6 @@
   --color-shadow: #d2d2d2;
   --color-codeblock-border: #888;
   --color-codeblock-shadow: #e5e5e5;
-  --color-codeblock-highlight: #fffed9;
   --color-footer: #1d1d1d;
   --color-footer-text: #e2e2e2;
   --color-product-title: #8d8d8d;
@@ -281,6 +280,86 @@ header {
   }
 }
 
+/* MARK: Home page
+*/
+.home-layout {
+  display: grid;
+  grid-template-columns: var(--grid-content);
+  margin: 4rem 2rem;
+
+  row-gap: var(--flow-gap);
+}
+
+.home-layout h1 {
+  margin: 0;
+}
+
+.cta {
+  margin: 1rem 0;
+}
+
+.jump-links {
+  display: flex;
+  column-gap: 2.5rem;
+
+  margin: 1rem 0;
+}
+
+.jump-links ul {
+  list-style: none;
+}
+
+.get-started-button {
+  background-color: white;
+  border: 1px solid black;
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+  font-size: 1.25rem;
+  font-weight: 400;
+  color: #000;
+  margin-top: 8px;
+  z-index: 1;
+  --color-codeblock-shadow: 0% 0 0;
+  box-shadow: 0px 2px 0px oklch(var(--color-codeblock-shadow) / 0.15);
+
+  text-decoration: none;
+}
+
+#products {
+  margin: 2rem 0 0 0;
+}
+
+.product-grid {
+  margin: 1.5rem 0 0 0;
+}
+
+.product-grid ul {
+  list-style: none;
+}
+
+.tiny-pill {
+  display: inline-block;
+  font-size: 0.625rem;
+  font-weight: 800;
+
+  margin: 0 0.25rem;
+  vertical-align: 2px;
+
+  border-radius: 3px;
+  padding: 0 2px;
+  background-color: oklch(var(--color-brand) / 0.8);
+  color: var(--color-background);
+}
+
+.get-started-button:hover {
+  box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.3);
+}
+
+.get-started-button:focus {
+  outline: none;
+  box-shadow: 0px 2px 0px oklch(var(--color-brand) / 0.8);
+}
+
 /* MARK: Footer
 */
 footer {
@@ -437,7 +516,7 @@ nav {
 
   .text-content {
     grid-template-columns: var(--grid-content) var(--grid-side-callout);
-    grid-template-rows: 70px max-content;
+    grid-template-rows: 70px auto;
     column-gap: var(--grid-column-gutter);
   }
 
@@ -484,7 +563,7 @@ nav {
 
 /* Handles different flow-gap of list page  */
 .list-page.text-content {
-  grid-template-rows: calc(70px + var(--flow-gap)) max-content;
+  grid-template-rows: calc(70px + var(--flow-gap)) auto;
 }
 
 .api {
@@ -505,7 +584,7 @@ nav {
 }
 
 .main {
-  display: flex;
+  margin: 0 auto;
 }
 
 /* MARK: Coveo
@@ -1461,12 +1540,6 @@ ul .code-block {
   padding: 0;
 }
 
-.highlight code .hl {
-  width: fit-content;
-  min-width: 100%;
-  background-color: var(--color-codeblock-highlight);
-}
-
 /* MARK: Images
 */
 figure {

exampleSite/layouts/index.html

@@ -1,16 +1,83 @@
 {{ define "main" }}
+{{ $nginxProducts := slice 
+    (dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one")
+    (dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one")
+    (dict "title" "NGINX Instance Manager" "url" "/nginx-instance-manager" "type" "nginx-one")
+    (dict "title" "NGINX Ingress Controller" "url" "/nginx-ingress-controller" "type" "nginx-one")
+    (dict "title" "NGINX Gateway Fabric" "url" "/nginx-gateway-fabric" "type" "nginx-one")
+    (dict "title" "NGINX Open Source" "url" "https://nginx.org/en/docs/" "type" "nginx-one")
+    (dict "title" "NGINX Agent" "url" "/nginx-agent" "type" "nginx-one")
+    (dict "title" "NGINX App Protect WAF" "url" "/nginx-app-protect-waf" "type" "nginx-app-protect")
+    (dict "title" "NGINX App Protect DoS" "url" "/nginx-app-protect-dos" "type" "nginx-app-protect")
+    (dict "title" "NGINX as a Service for Azure" "url" "/nginxaas/azure/" "type" "nginx-as-a-service")
+    (dict "title" "NGINX Unit" "url" "https://unit.nginx.org/" "type" "nginx-other")
+}}
 
-<h1>Homepage Example</h1>
-<p>
-    <ul>
-        <li>
-            <a href="{{ relref . "nginx" }}">NGINX and NGINX Plus</a>
-        </li>
-        <li>
-            <a href="{{ relref . "test-product" }}">Test Product</a>
-        </li>
-    </ul>
-</p>
+{{ $nginxCategories := 
+    (dict
+        "nginx-one" "NGINX One"
+        "nginx-app-protect" "NGINX App Protect" 
+        "nginx-as-a-service" "NGINX as a Service"
+        "nginx-other" "Other NGINX Projects"
+    )
+}}
 
+<div class="main">
+<div class="home-layout">
+    <h1>Documentation</h1>
+    <p>This is a short call to action to explore our examples and guides.</p>
+    
+    <div class="cta">
+        <a href="https://nginx.org" class="get-started-button">Get started with NGINX One →</a> or <a href="#products">explore all products</a>.    
+    </div>
+    
+    <div class="jump-links">
+        <ul>
+            <h3>Instance management</h3>
+            <li><a href="https://docs.nginx.com/nginx-one/how-to/certificates/manage-certificates/">Manage certificates<span class="tiny-pill">One</span></a></li>
+            <li><a href="#">Role-based access control</a></li>
+            <li><a href="#">Create a new data plane key</a></li>
+        </ul>
+        <ul>
+            <h3>Kubernetes</h3>
+            <li><a href="https://docs.nginx.com/nginx-one/how-to/certificates/manage-certificates/">Manage certificates</a></li>
+            <li><a href="#">Role-based access control</a></li>
+            <li><a href="#">Create a new data plane key</a></li>
+        </ul>
+        <ul>
+            <h3>Load balancing</h3>
+            <li><a href="#">NGINX HTTP Load Balancing</a></li>
+            <li><a href="#">NGINX TCP and UDP Load Balancing</a></li>
+            <li><a href="#">GSLB with NS1 and NGINX Plus<span class="tiny-pill">N+</span></a></li>
+        </ul>
+    </div>
 
+    <p>The F5 NGINX One Console makes it easy to manage NGINX instances across locations and environments. The console lets you monitor and control your NGINX fleet from one place—you can check configurations, track performance metrics, identify security vulnerabilities, manage SSL certificates, and more.</p>
+
+    <div id="products">
+        <h2>All products</h2>
+        {{ $groupedProducts := dict 
+            "nginx-one" (where $nginxProducts "type" "nginx-one")
+            "nginx-app-protect" (where $nginxProducts "type" "nginx-app-protect")
+            "nginx-as-a-service" (where $nginxProducts "type" "nginx-as-a-service")
+            "nginx-other" (where $nginxProducts "type" "nginx-other")
+        }}
+        {{ $orderedKeys := slice "nginx-one" "nginx-app-protect" "nginx-as-a-service" "nginx-other" }}
+        {{ range $orderedKeys }}
+        {{ $type := . }}
+        {{ $products := index $groupedProducts $type }}
+            <div class="product-grid">
+                <p>{{ index $nginxCategories $type }}</p>
+                <ul>
+                {{ range $products }}
+                    <li>
+                        <a href="{{ .url }}">{{ .title }}</a>
+                    </li>
+                {{ end }}
+                </ul>
+            </div>
+        {{ end }}
+    </div>
+</div>
+</div>
 {{end}}