feat: added footer (#125)

Author: lamATnginx

assets/css/v2/style.css

@@ -16,6 +16,8 @@
     --color-background: #FFFFFF;
     --color-foreground: #000000;
     --color-shadow: #D2D2D2;
+    --color-footer: #1D1D1D;
+    --color-footer-text: #E2E2E2;
     --color-product-title: #8D8D8D;
 
     --sidebar-margin: 3rem;
@@ -99,8 +101,51 @@ header {
 
 /* footer */
 footer {
-    background-color: #32302f;
-    padding: 0.5rem;
+    background-color: var(--color-footer);
+    padding: 1rem;
+}
+
+.footer-layout {
+    display: grid;
+    grid-template-columns: 1fr;
+    font-size: 0.875rem;
+    gap: 24px;
+}
+
+.footer-f5-trademark {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.footer-f5-trademark p {
+    margin: 0;
+    color: var(--color-footer-text);
+}
+
+.footer-useful-links {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 18px;
+}
+
+.footer-useful-links a {
+    color: var(--color-footer-text);
+    text-decoration: none;
+}
+
+@media (min-width: 814px) {
+    .footer-layout {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        font-size: 0.875rem;
+    }
+
+    .footer-useful-links {
+        gap: 4px;
+    }
+    
 }
 
 /* breadcrumbs */

layouts/_default/baseof.html

@@ -55,7 +55,7 @@
       });
 
       // swap out v1 and v2 elements
-      const v1ElementIds = ["sidebar", "toc"]
+      const v1ElementIds = ["sidebar", "footer", "toc"]
 
       v1ElementIds.forEach((elementId) => {
         const element =  document.getElementById(elementId);
@@ -145,14 +145,20 @@
       </div>
   </section>
 
-    <footer>
+    <footer id="footer">
 
       {{ block "footer" . }}
       {{ partial "footer.html" . }}
       {{ end }}
 
     </footer>
-  
+
+    <footer data-mf="true" id="footer-v2" style="display:none;">
+      {{ block "footer-v2" . }}
+      {{ partial "footer-v2.html" . }}
+      {{ end }}
+    </footer>
+
   {{ partial "scripts.html" . }} 
   <div id="consent_blackbar"></div>
 </body>

layouts/partials/footer-v2.html

@@ -0,0 +1,46 @@
+<footer id="footer">
+    <div class="footer-layout">
+        <div class="footer-f5-trademark">
+            <img class="f5-logo-footer" src="{{ "/images/icons/Logo_F5.svg" | absURL }}" alt="F5 logo">
+            <p>©2025 F5, Inc. All rights reserved. NGINX is a registered trademark of F5, Inc.</p>
+        </div>
+        <div class="footer-useful-links">
+            <a
+                href="https://www.f5.com/company/policies/trademarks"
+                rel="noopener"
+                target="_blank"
+                >Trademarks
+            </a>
+            <a
+                href="https://www.f5.com/company/policies"
+                rel="noopener"
+                target="_blank"
+                >Policies
+            </a>
+            <a
+                href="https://www.f5.com/company/policies/privacy-notice"
+                rel="noopener"
+                target="_blank"
+                >Privacy
+            </a>
+            <a
+                href="https://www.f5.com/company/policies/F5-California-privacy-summary"
+                rel="noopener"
+                target="_blank"
+                >California Privacy
+            </a>
+            <a
+                href="https://www.f5.com/company/policies/privacy-notice#no-sell"
+                rel="noopener"
+                target="_blank"
+                >Do Not Sell My Personal Information
+            </a>
+            <a
+                href="https://docs.nginx.com"
+                rel="noopener"
+                target="_blank"
+                >Cookie Preference
+            </a>
+        </div>
+    </div>
+</footer>