Fix SEO and Accessibility issues

data/products/appscode.json

@@ -12,7 +12,7 @@
     "themeColor": ""
   },
   "heroImage": {
-    "src": "/assets/images/products/appscode/appscode-hero.png",
+    "src": "/assets/images/products/appscode/appscode-hero.webp",
     "alt": "AppsCode"
   },
   "logo": {
@@ -47,7 +47,7 @@
       "summary": "Our Mission is to Accelerate the transition to Containers by building a Kubernetes-native Data Platform",
       "get_in_touch_url": "https://appscode.com/contact/",
       "intro": "8az5rYUxyGs",
-      "hero_image": "/assets/images/products/appscode/appscode-hero.png"
+      "hero_image": "/assets/images/products/appscode/appscode-hero.webp"
     },
     "main_products": [
       {

layouts/_default/baseof.html

@@ -64,7 +64,7 @@
   <!-- ========================  call to action area end  ======================== -->
 
   <!-- ========================  top to button start  ======================== -->
-  <button class="go-to-top" id="goTop">
+  <button class="go-to-top" id="goTop" aria-label="Go to top Button">
     <i class="fa fa-angle-up" aria-hidden="true"></i>
   </button>
   <!-- top to button end -->

layouts/_default/embed_console.html

@@ -100,7 +100,7 @@
      <span class="sign-in-text">SIGN IN</span><span id="betaTag" class="tag is-hidden">BETA</span> <span class="smooth spinner"></span>
   </a>
 
-  <script src="/assets/js/jquery-3.6.0.min.js"></script>
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
     const acSignInButton = document.getElementById('ac-sign-in-button');
 
@@ -162,7 +162,7 @@
           acSignInButton.querySelector("#betaTag").classList.remove("is-hidden")
         }
       } catch(error) {
-        console.log("Failed to fetch user", error)
+        // console.log("Failed to fetch user", error)
       }
       // remove the loader
       acSignInButton.classList.remove('is-loading');

layouts/_default/webinar.html

@@ -1,6 +1,7 @@
 {{ define "head-footer" }}
 <!-- Slim Select CSS  -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.0/slimselect.min.css">
+<script src="https://www.google.com/recaptcha/enterprise.js" async defer></script>
 {{ end }}
 
 {{ define "main" }}

layouts/partials/components/press-area.html

@@ -0,0 +1,38 @@
+<!-- press-area start -->
+<section class="press-area section-padding is-hidden">
+    <div class="container">
+      <div class="columns">
+        <div class="column is-10-tablet is-8 is-10-desktop is-8-widescreen">
+          <!-- section title start -->
+          <div class="section-title has-text-centered-tablet mb-10" data-aos="fade-up">
+            <h2>WHAT THEY PUBLISHED</h2>
+          </div>
+          <!-- section title end -->
+        </div>
+      </div>
+      <div class="columns is-multiline" data-aos="fade-up" data-aos-duration="800">
+        {{ range $idx, $article := $.Site.Data.press }}
+        <!-- single press start -->
+        <div class="column is-one-quarter-widescreen is-one-quarter-fullhd is-half-tablet is-full-mobile">
+          <div class="single-press-wrapper">
+            <div class="press-image press-image-{{ add $idx 1 }}"></div>
+            <div class="press-content">
+              <p class="read-meta">{{ $article.timeToRead }}</p>
+              <h3>
+                <a href="{{ $article.link }}">{{ $article.title }}</a>
+              </h3>
+              <p class="is-ellipsis-3">
+                {{ $article.summary }}
+              </p>
+              <div class="press-button-wrapper">
+                <a href="{{ $article.link }}" class="press-button">READ MORE</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- single press end -->
+        {{ end }}
+      </div>
+    </div>
+  </section>
+  <!-- press-area end -->

layouts/partials/components/testimonial.html

@@ -29,7 +29,7 @@ <h2 class="is-gradient" data-aos="fade-up" data-aos-duration="500">What They Are
                 <img class="is-rounded" src="{{ $user.profile }}" alt="{{ $user.name }}">
               </figure>
               <div class="user-info">
-                <h5>{{ $user.name }}</h5>
+                <p class="name">{{ $user.name }}</p>
                 <p>{{ $user.job }}{{ if $user.companyKey }} at
                   {{ index $.Site.Data.customers $user.companyKey "name" }}{{ end }}</p>
               </div>

layouts/partials/footer/footer.html

@@ -16,7 +16,7 @@
             <div class="subscription-form">
               <form method="post" action="https://listmonk.appscode.com/subscription/form"
                 id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="navbar-form" target="_blank"
-                novalidate role="email" role="email">
+                novalidate>
                 <label for="email">Subscribe to Our Newsletter</label>
                 <p class="spam-message">No spam, we promise. Your mail address is secure</p>
                 <div class="field has-addons">
@@ -25,7 +25,7 @@
                     <input type="hidden" id="afbbc" name="l" value="d6a7b3b4-15ec-419e-beaf-a503d0bc1b41" />
                     <input class="input" name="email" id="mce-EMAIL" type="email"
                       placeholder="Your work email address" required />
-                    <button id="mc-embedded-subscribe" type="submit" name="subscribe" class="button">
+                    <button id="mc-embedded-subscribe" type="submit" name="subscribe" class="button" aria-label="Subscribe Button">
                       <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
                     </button>
                   </div>
@@ -36,7 +36,7 @@
 
             <!-- contact information start -->
             <div class="contact-information">
-              <h4>Have any Inquiry?</h4>
+              <p class="has-text-weight-semibold">Have any Inquiry?</p>
               <ul class="all-contact-info">
                 <li>
                   <a href="callto:{{.Site.Params.contact_phone}}"><span><i class="fa fa-phone"
@@ -57,7 +57,7 @@ <h4>Have any Inquiry?</h4>
           <div class="single-footer-widget">
             <!-- footer menu start -->
             <div class="footer-menu is-info">
-              <h4>Products</h4>
+              <label>Products</label>
               <ul class="footer-link">
                 {{ range $item := $.Site.Data.config.footerLinks }}
                 {{ $p := (index $.Site.Data.products $item) }}
@@ -80,7 +80,7 @@ <h4>Products</h4>
           <div class="single-footer-widget">
             <!-- footer menu start -->
             <div class="footer-menu is-success">
-              <h4>Services</h4>
+              <label>Services</label>
               <ul class="footer-link">
                 <!-- <li><a href="{{.Site.Params.domain_appscode}}/pricing/">Pricing</a></li> -->
                 <li>
@@ -119,7 +119,7 @@ <h4>Services</h4>
           <div class="single-footer-widget">
             <!-- footer menu start -->
             <div class="footer-menu is-warning">
-              <h4>Company</h4>
+              <label>Company</label>
               <ul class="footer-link">
                 <li><a href="{{.Site.Params.domain_appscode}}/about/" class="is-flex is-gap-4">
                  <span> About Us</span>
@@ -155,7 +155,7 @@ <h4>Company</h4>
           <div class="single-footer-widget">
             <!-- footer menu start -->
             <div class="footer-menu is-danger">
-              <h4>Legal</h4>
+              <label>Legal</label>
               <ul class="footer-link">
                 <li>
                   <a href="{{.Site.Params.domain_appscode}}/legal/tos/" class="is-flex is-gap-4">
@@ -227,21 +227,21 @@ <h4>Legal</h4>
           <div class="socail-link-inline">
             <ul>
               <li>
-                <a href="{{.Site.Params.twitter_url}}">
+                <a href="{{.Site.Params.twitter_url}}" title="{{.Site.Params.twitter_url}}">
                   <i class="fa" aria-hidden="true">
                     <svg xmlns="http://www.w3.org/2000/svg" height="12" width="12" viewBox="0 0 512 512"><path fill="currentColor" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
                   </i>
                 </a>
               </li>
               <li>
-                <a href="https://www.linkedin.com/company/appscode"><i class="fa fa-linkedin"
+                <a href="https://www.linkedin.com/company/appscode" title="https://www.linkedin.com/company/appscode"><i class="fa fa-linkedin"
                     aria-hidden="true"></i></a>
               </li>
               <li>
-                <a href="{{.Site.Params.facebook_url}}"><i class="fa fa-facebook" aria-hidden="true"></i></a>
+                <a href="{{.Site.Params.facebook_url}}" title="{{.Site.Params.facebook_url}}"><i class="fa fa-facebook" aria-hidden="true"></i></a>
               </li>
               <li>
-                <a href="{{.Site.Params.youtube_url}}"><i class="fa fa-youtube" aria-hidden="true"></i></a>
+                <a href="{{.Site.Params.youtube_url}}" title="{{.Site.Params.youtube_url}}"><i class="fa fa-youtube" aria-hidden="true"></i></a>
               </li>
             </ul>
           </div>

layouts/partials/header/header.html

@@ -8,7 +8,7 @@
   <div class="navbar-area header--fixed">
 
     <!-- iframe for top notification  -->
-    <iframe src="/notification-top/" id="notification" frameborder="0" scrolling="no" style="width: 100%; display: flex; overflow: hidden; height: 0px;"></iframe>
+    <iframe src="/notification-top/" id="notification" frameborder="0" scrolling="no" style="width: 100%; display: flex; overflow: hidden; height: 0px;" title="notification"></iframe>
     <script>
       window.addEventListener("message", receiveMessageFromIframe, false);
 
@@ -38,7 +38,7 @@
             <div class="navbar-brand">
               <a href="{{.Site.Params.domain_appscode}}">
                 <img src="{{$.Site.Data.products.appscode.logo.src}}"
-                  alt="{{$.Site.Data.products.appscode.logo.alt}}" />
+                  alt="{{$.Site.Data.products.appscode.logo.alt}}" loading="eager" height="30" width="auto"/>
               </a>
               <a role="button" class="navbar-burger is-hidden-desktop" aria-label="menu" aria-expanded="false">
                 <span aria-hidden="true"></span>
@@ -73,7 +73,7 @@
                             <img src="{{ $p.icon.src }}" alt="{{ $p.icon.alt }}">
                           </div>
                           <div class="product-info">
-                            <h6>{{ $p.name }}</h6>
+                            <h2 class="is-size-6">{{ $p.name }}</h2>
                             <p>{{ $p.tagline | plainify }}</p>
                           </div>
                           <div class="navigate-icon">
@@ -94,7 +94,7 @@ <h6>{{ $p.name }}</h6>
                             <img src="{{ $p.icon.src }}" alt="{{ $p.icon.alt }}">
                           </div>
                           <div class="product-info">
-                            <h6>{{ $p.name }}</h6>
+                            <h2 class="is-size-6">{{ $p.name }}</h2>
                             <p>{{ $p.tagline | plainify }}</p>
                           </div>
                           <div class="navigate-icon">
@@ -115,7 +115,7 @@ <h6>{{ $p.name }}</h6>
                             <img src="{{ $p.icon.src }}" alt="{{ $p.icon.alt }}">
                           </div>
                           <div class="product-info">
-                            <h6>{{ $p.name }}</h6>
+                            <h2 class="is-size-6">{{ $p.name }}</h2>
                             <p>{{ $p.tagline | plainify }}</p>
                           </div>
                           <div class="navigate-icon">
@@ -241,7 +241,7 @@ <h6>{{ $p.name }}</h6>
                       <div class="resources-list">
                         <!-- single resources list  -->
                         <div class="list-items">
-                          <h6>RESOURCES</h6>
+                          <h2>RESOURCES</h2>
                           <ul>
                             <!-- <li><a href="#" target="_blank">Forum</a></li> -->
                             <li><a href="{{.Site.Params.blog_url}}" class="is-flex is-gap-4">
@@ -296,46 +296,6 @@ <h6>RESOURCES</h6>
                         </div>
                         <!-- single resources list  -->
 
-                        <!-- single resources list  -->
-                        <div class="list-items is-hidden">
-                          <h6>RECENT NEWS/BLOG</h6>
-                          {{- $pctx := . -}}
-                          {{- if .IsHome -}}{{ $pctx = .Site }}{{- end -}}
-                          {{- $pages := $pctx.RegularPages -}}
-
-
-                          <div class="press-wrapper">
-                            {{ range $idx, $p := $pages.ByDate.Reverse }}
-                            {{ if lt $idx 2 }}
-                            <!-- single press start  -->
-                            <a class="single-press">
-                              <div class="calender">
-                                <span class="date">{{ $p.Date.Format "2" }}</span>
-                                <span class="month">{{ $p.Date.Format "Jan" }}</span>
-                              </div>
-
-                              <div class="description">
-                                <h6>{{ $p.Title }}</h6>
-                                {{ range $author := $p.Params.authors }}
-                                <a href="/authors/{{ $author | urlize }}"
-                                  class="author"><span>by</span>{{ $author }}</a>
-                                {{ end }}
-                                <p class="is-ellipsis-2">{{ $p.Summary }}</p>
-                              </div>
-                            </a>
-                            <!-- <a class="single-press">
-                          <div class="description">
-                            <h6><a href="{{ $p.RelPermalink }}">{{ $p.Title }}</a></h6>
-                          </div>
-                        </a> -->
-                            <!-- single press end -->
-                            {{ end }}
-                            {{ end }}
-                            <a href="#" class="button ac-button inline-button">See More <span
-                                class="material-icons">arrow_forward</span></a>
-                          </div>
-                        </div>
-                        <!-- single resources list  -->
                       </div>
                       <!-- list menu items end -->
                     </div>
@@ -382,7 +342,7 @@ <h6><a href="{{ $p.RelPermalink }}">{{ $p.Title }}</a></h6>
               </ul>
               <!-- navbar items end -->
               <div class="buttons">
-                <iframe src="/embed/?color=00a651" frameborder="0" scrolling="no" class="embeded-console-button"></iframe>
+                <iframe src="/embed/?color=00a651" frameborder="0" scrolling="no" class="embeded-console-button" title="embeded-console-button"></iframe>
                 <!-- <a id="ac-sign-in-button" href="https://accounts.appscode.com/user/login"
                 class="button ac-button is-loading {{ if eq $currentPageType "docs" }} is-hidden {{ end }}"><span>SIGN IN</span></a> -->
                 <a href="{{ $.Site.Params.domain_appscode }}/contact/"
@@ -460,7 +420,7 @@ <h6><a href="{{ $p.RelPermalink }}">{{ $p.Title }}</a></h6>
       <div class="navbar-left">
         <div class="navbar-brand">
           <a href="{{ index $.Site.Params $p.website.domainKey }}{{ $p.website.path }}"><img src="{{ $p.logo.src }}"
-              alt="{{ $p.logo.alt }}" alt="{{ $p.logo.alt }}"></a>
+              alt="{{ $p.logo.alt }}" alt="{{ $p.logo.alt }}" loading="eager" height="30" width="auto"></a>
 
           {{ if eq $currentPageType "docs" }}
           <!-- version select start  -->
@@ -543,7 +503,7 @@ <h6><a href="{{ $p.RelPermalink }}">{{ $p.Title }}</a></h6>
                     </div>
                     {{ end }}
                     <div class="product-info">
-                      <h6>{{ .Name }}</h6>
+                      <h2 class="is-size-6">{{ .Name }}</h2>
                       <!-- <p>static content</p> -->
                     </div>
                     <div class="navigate-icon">
@@ -647,4 +607,4 @@ <h6>{{ .Name }}</h6>
   <!-- navabar product end  -->
 </div>
 
-</header>
+</header>