chore: Update landing page to use different card

Author: lamATnginx

content/ngf/_index.md

@@ -3,8 +3,9 @@
 title: NGINX Gateway Fabric
 # The URL is the base of the deployed path, becoming "docs.nginx.com/<url>/<other-pages>"
 url: /nginx-gateway-fabric/
+# The cascade directive applies its nested parameters down the page tree until overwritten
 cascade:
-  # The cascade directive applies its nested parameters down the page tree until overwritten
+  # The logo file is resolved from the theme, in the folder /static/images/icons/
   logo: NGINX-Gateway-Fabric-product-icon.svg
   nd-banner:
     enabled: true

layouts/index.html

@@ -90,16 +90,13 @@ <h3 class="card-title"><img class="card-img-top" src="{{ .Site.BaseURL }}/images
                 </div>
 
                 <div class="col-xs-12 col-sm-6 col-lg-4 card-holder">
-                    <a href="{{ .Site.BaseURL }}solutions" class="products-card" alt="NGINX Solutions">
-                        <div class="saas-card">
-                            <div class="saas-icon"><img style="width: auto; height: auto;" src="{{ .Site.BaseURL }}/images/icons/NGINX-product-icon.svg"></div>
-                            <div class="saas-description">
-                                <h3 class="saas-title">Subscription Licensing & Solutions</h3>
-                                <p>Stay compliant with your NGINX subscription licenses and see how you can use NGINX One to build secure, scalable, and high-performing applications and APIs.</p>
-                            </div>
-                        </div>
-                    </a>
-                </div>
+                  <a href="{{ .Site.BaseURL }}solutions" class="products-card" alt="NGINX Solutions">
+                      <h3 class="card-title"><img class="card-img-top" src="{{ .Site.BaseURL }}/images/icons/NGINX-product-icon.svg"> Subscription Licensing & Solutions</h3>
+                      <div class="card-description">
+                          <p>Stay compliant with your NGINX subscription licenses and see how you can use NGINX One to build secure, scalable, and high-performing applications and APIs.</p>
+                      </div>
+                  </a>
+              </div>
 
             </div>
         </div>
@@ -177,17 +174,14 @@ <h2 style="font-weight: 400; font-size: 1.5em; margin-top: 0px; margin-bottom: 0
     <section class="col-md-12 col-xl-12 py-md-3 pl-md-5" id="nginx-products">
         <div class="row justify-content-center">
             <div class="card-deck">
-             <div class="col-xs-12 col-sm-6 col-lg-4 card-holder">
-                 <a href="{{ .Site.BaseURL }}nginx-unit" class="products-card" alt="NGINX Unit">
-                     <div class="saas-card">
-                         <div class="saas-icon"><img style="width: auto; height: auto;" src="{{ .Site.BaseURL }}/images/icons/NGINX-Unit-product-icon-RGB.svg"></div>
-                         <div class="saas-description">
-                             <h3 class="saas-title">NGINX Unit</h3>
-                             <p>Dynamic app server that can run beside NGINX, NGINX Plus, or on its own</p>
-                         </div>
-                     </div>
-                 </a>
-             </div>
+              <div class="col-xs-12 col-sm-6 col-lg-4 card-holder">
+                <a href="{{ .Site.BaseURL }}nginx-unit" class="products-card" alt="NGINX Unit">
+                    <h3 class="card-title"><img class="card-img-top" src="{{ .Site.BaseURL }}/images/icons/NGINX-Unit-product-icon.svg"> NGINX Unit</h3>
+                    <div class="card-description">
+                        <p>Dynamic app server that can run beside NGINX, NGINX Plus, or on its own</p>
+                    </div>
+                </a>
+            </div>
           </div>
        </div>
     </section>