Fix/seo (#155)

* Fixed contrast issue

* Replaced `png`s with `webp`s

* Improved loading of thrid-pary JS

* Structure improvements

* Fixed webmanifest

* Recompiled CSS

* Update wave/resources/views/checkout.blade.php

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Removed deferred loading of Paddle ;(

* Responsive images

* Preconnect

* Defer Clarity

* Defer Clarity 2

* Removed css preloading

* Got it back with low priority

* Responsive image for logo

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

public/site.webmanifest

@@ -5,15 +5,23 @@
         {
             "src": "/themes/bimbala/images/android-chrome-192x192.png",
             "sizes": "192x192",
-            "type": "image/png"
+            "type": "image/png",
+            "purpose": "any"
         },
         {
             "src": "/themes/bimbala/images/android-chrome-512x512.png",
             "sizes": "512x512",
-            "type": "image/png"
+            "type": "image/png",
+            "purpose": "any"
+        }
+        {
+            "src": "/themes/bimbala/images/maskable_icon.png",
+            "sizes": "714x714",
+            "type": "image/png",
+            "purpose": "maskable"
         }
     ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
+    "theme_color": "#11182700",
+    "background_color": "#11182700",
     "display": "standalone"
 }

public/themes/bimbala/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/js/app.js": "/js/app.js?id=31044e78bdf2a1f38951",
-    "/css/app.css": "/css/app.css?id=2b056b57e1d0ed6163fc"
+    "/css/app.css": "/css/app.css?id=33d9a3f74d0963b856cb"
 }

resources/views/themes/bimbala/home.blade.php

@@ -15,7 +15,23 @@
             <div class="relative flex items-center justify-center w-full mt-10 md:mt-0 md:w-1/2">
                 <svg class="absolute top-0 right-0 z-0 hidden w-32 h-32 -mt-12 -mr-12 text-blue-300 fill-current md:block" viewBox="0 0 91 91" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill-rule="evenodd"><g fill-rule="nonzero"><g><g><circle cx="3.261" cy="3.445" r="2.72"></circle><circle cx="15.296" cy="3.445" r="2.719"></circle><circle cx="27.333" cy="3.445" r="2.72"></circle><circle cx="39.369" cy="3.445" r="2.72"></circle><circle cx="51.405" cy="3.445" r="2.72"></circle><circle cx="63.441" cy="3.445" r="2.72"></circle><circle cx="75.479" cy="3.445" r="2.72"></circle><circle cx="87.514" cy="3.445" r="2.719"></circle></g><g transform="translate(0 12)"><circle cx="3.261" cy="3.525" r="2.72"></circle><circle cx="15.296" cy="3.525" r="2.719"></circle><circle cx="27.333" cy="3.525" r="2.72"></circle><circle cx="39.369" cy="3.525" r="2.72"></circle><circle cx="51.405" cy="3.525" r="2.72"></circle><circle cx="63.441" cy="3.525" r="2.72"></circle><circle cx="75.479" cy="3.525" r="2.72"></circle><circle cx="87.514" cy="3.525" r="2.719"></circle></g><g transform="translate(0 24)"><circle cx="3.261" cy="3.605" r="2.72"></circle><circle cx="15.296" cy="3.605" r="2.719"></circle><circle cx="27.333" cy="3.605" r="2.72"></circle><circle cx="39.369" cy="3.605" r="2.72"></circle><circle cx="51.405" cy="3.605" r="2.72"></circle><circle cx="63.441" cy="3.605" r="2.72"></circle><circle cx="75.479" cy="3.605" r="2.72"></circle><circle cx="87.514" cy="3.605" r="2.719"></circle></g><g transform="translate(0 36)"><circle cx="3.261" cy="3.686" r="2.72"></circle><circle cx="15.296" cy="3.686" r="2.719"></circle><circle cx="27.333" cy="3.686" r="2.72"></circle><circle cx="39.369" cy="3.686" r="2.72"></circle><circle cx="51.405" cy="3.686" r="2.72"></circle><circle cx="63.441" cy="3.686" r="2.72"></circle><circle cx="75.479" cy="3.686" r="2.72"></circle><circle cx="87.514" cy="3.686" r="2.719"></circle></g><g transform="translate(0 49)"><circle cx="3.261" cy="2.767" r="2.72"></circle><circle cx="15.296" cy="2.767" r="2.719"></circle><circle cx="27.333" cy="2.767" r="2.72"></circle><circle cx="39.369" cy="2.767" r="2.72"></circle><circle cx="51.405" cy="2.767" r="2.72"></circle><circle cx="63.441" cy="2.767" r="2.72"></circle><circle cx="75.479" cy="2.767" r="2.72"></circle><circle cx="87.514" cy="2.767" r="2.719"></circle></g><g transform="translate(0 61)"><circle cx="3.261" cy="2.846" r="2.72"></circle><circle cx="15.296" cy="2.846" r="2.719"></circle><circle cx="27.333" cy="2.846" r="2.72"></circle><circle cx="39.369" cy="2.846" r="2.72"></circle><circle cx="51.405" cy="2.846" r="2.72"></circle><circle cx="63.441" cy="2.846" r="2.72"></circle><circle cx="75.479" cy="2.846" r="2.72"></circle><circle cx="87.514" cy="2.846" r="2.719"></circle></g><g transform="translate(0 73)"><circle cx="3.261" cy="2.926" r="2.72"></circle><circle cx="15.296" cy="2.926" r="2.719"></circle><circle cx="27.333" cy="2.926" r="2.72"></circle><circle cx="39.369" cy="2.926" r="2.72"></circle><circle cx="51.405" cy="2.926" r="2.72"></circle><circle cx="63.441" cy="2.926" r="2.72"></circle><circle cx="75.479" cy="2.926" r="2.72"></circle><circle cx="87.514" cy="2.926" r="2.719"></circle></g><g transform="translate(0 85)"><circle cx="3.261" cy="3.006" r="2.72"></circle><circle cx="15.296" cy="3.006" r="2.719"></circle><circle cx="27.333" cy="3.006" r="2.72"></circle><circle cx="39.369" cy="3.006" r="2.72"></circle><circle cx="51.405" cy="3.006" r="2.72"></circle><circle cx="63.441" cy="3.006" r="2.72"></circle><circle cx="75.479" cy="3.006" r="2.72"></circle><circle cx="87.514" cy="3.006" r="2.719"></circle></g></g></g></g></svg>
                 <div class="relative cursor-pointer group">
-                    <img src="{{URL::asset('themes/bimbala/images/hero-photo.jpg')}}" class="rounded-lg" fetchpriority="high" alt="{{ theme('home_subheadline') }}"  width="600" height="400">
+                    <img
+                        src="{{URL::asset('themes/bimbala/images/hero-photo/hero-photo-sm.webp')}}"
+                        srcset="
+                           {{ asset('themes/bimbala/images/hero-photo/hero-photo-xs.webp') }} 320w,
+                           {{ asset('themes/bimbala/images/hero-photo/hero-photo-sm.webp') }} 375w,
+                           {{ asset('themes/bimbala/images/hero-photo/hero-photo-md.webp') }} 768w,
+                           {{ asset('themes/bimbala/images/hero-photo/hero-photo-lg.webp') }} 1024w,
+                           {{ asset('themes/bimbala/images/hero-photo/hero-photo-lg.webp') }} 1024w,
+                           {{ asset('themes/bimbala/images/hero-photo/hero-photo-xl.webp') }} 1500w,
+                           {{ asset('themes/bimbala/images/hero-photo/hero-photo-2xl.webp') }} 2000w,
+                       "
+                        class="rounded-lg"
+                        fetchpriority="high"
+                        alt="{{ theme('home_subheadline') }}"
+                        width="600"
+                        height="400"
+                    />
                 </div>
             </div>
         </div>
@@ -81,7 +97,20 @@ class="p-3 md:p-6 w-full"
         <div class="md:h-96 lg:w-2/4 w-full">
           <div x-show="openTab === 1">
             <div class="mt-4 md:mt-10 overflow-hidden rounded-xl bg-slate-50 shadow-xl shadow-blue-900/20 lg:mt-0 lg:w-[45rem]">
-                  <img alt="Roadmap demonstation image" class="w-full" src="{{ asset('themes/bimbala/images/features/full-res/roadmap.webp') }}" loading="lazy" />
+                  <img alt="Roadmap demonstation image" class="w-full"
+                       src="{{ asset('themes/bimbala/images/features/full-res/roadmap/roadmap-sm.webp') }}"
+                       srcset="
+                           {{ asset('themes/bimbala/images/features/full-res/roadmap/roadmap-xs.webp') }} 320w,
+                           {{ asset('themes/bimbala/images/features/full-res/roadmap/roadmap-sm.webp') }} 375w,
+                           {{ asset('themes/bimbala/images/features/full-res/roadmap/roadmap-md.webp') }} 768w,
+                           {{ asset('themes/bimbala/images/features/full-res/roadmap/roadmap-lg.webp') }} 1024w,
+                           {{ asset('themes/bimbala/images/features/full-res/roadmap/roadmap-lg.webp') }} 1024w,
+                           {{ asset('themes/bimbala/images/features/full-res/roadmap/roadmap-xl.webp') }} 1500w,
+                           {{ asset('themes/bimbala/images/features/full-res/roadmap/roadmap-2xl.webp') }} 2000w,
+                       "
+                       loading="lazy"
+                       width="100%"
+                  />
                 </div>
               </div>
               <div x-show="openTab === 2">
@@ -111,7 +140,7 @@ class="p-3 md:p-6 w-full"
 <section class="relative box-border w-full border-0 border-solid border-gray-200 bg-white leading-6 text-gray-700">
   <div class="mx-auto box-border flex max-w-7xl flex-col items-center border-solid px-8 py-20 leading-6 md:items-stretch md:justify-center md:py-24 xl:px-16">
     <div class="relative pb-10">
-      <h4 class="w-full text-center text-2xl font-bold tracking-wide sm:text-2xl">We also provide</h4>
+      <h2 class="w-full text-center text-2xl font-bold tracking-wide sm:text-2xl">We also provide</h2>
     </div>
     <div class="text-bold z-10 grid gap-5 md:grid-cols-6 lg:grid-cols-9">
       @foreach(config('features') as $feature)
@@ -121,7 +150,7 @@ class="p-3 md:p-6 w-full"
             <img src="{{ $feature->image }}" class="h-7 w-7 stroke-current text-center align-middle leading-6 text-gray-700" loading="lazy" alt="{{ $feature->title }} - {{ $feature->description }}" width="28" height="28" />
           </div>
           <div class="mt-4 border-0 border-gray-200 sm:ml-4 sm:mt-2">
-            <h6 class="box-border border-solid text-left text-2xl font-bold leading-none tracking-wide">{{ $feature->title }}</h6>
+            <h3 class="box-border border-solid text-left text-2xl font-bold leading-none tracking-wide">{{ $feature->title }}</h3>
             <p class="mx-0 mb-0 mt-1 box-border border-solid text-left font-medium leading-loose text-gray-600 sm:mt-4">{{ $feature->description }}</p>
           </div>
         </div>
@@ -173,7 +202,7 @@ class="p-3 md:p-6 w-full"
 
             <!-- Right Image -->
             <div class="relative w-full mt-20 lg:w-1/2 lg:mt-0 ">
-                <img src="{{URL::asset('themes/bimbala/images/demo.bimbala.jpg')}}" class="relative z-10 p-0 mt-10 transform shadow-2xl rounded-xl lg:scale-110" data-rounded="rounded-xl" data-rounded-max="rounded-full" class="lazyload" alt="Upvote demo image">
+                <img src="{{URL::asset('themes/bimbala/images/demo.bimbala.webp')}}" class="relative z-10 p-0 mt-10 transform shadow-2xl rounded-xl lg:scale-110 w-100" data-rounded="rounded-xl" data-rounded-max="rounded-full" loading="lazy" alt="Upvote demo image">
 
                 <div class="absolute top-0 right-0 w-full h-full mt-4 -mr-5 transform scale-125 rotate-45">
                     <svg class="absolute top-0 w-full h-full transform fill-current lg:scale-x-150 text-purple-50" data-primary="purple-600" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

resources/views/themes/bimbala/layouts/app.blade.php

@@ -15,6 +15,8 @@
     <meta name="facebook-domain-verification" content="i8nvt9l8tdw2jqc1t55cdoq3c6znvi" />
     <meta name="msvalidate.01" content="C0A3EBD94A574266297F779F912F41C6" />
     <link rel="canonical" href="{{ url('/') }}" />
+    <link rel="preconnect" href="https://client.crisp.chat">
+    <link rel="preconnect" href="https://analytics.bimbala.com">
 
     <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('themes/bimbala/images/apple-touch-icon.png') }}">
     <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('themes/bimbala/images/favicon-32x32.png') }}">
@@ -69,7 +71,7 @@
     <meta name="keywords" content="{{ $seo['keywords'] ?? setting('site.keywords', 'product development, customer feedback, customers, integrations, bimbala, SaaS, support, roadmap, knowledge board, FAQ, feedback-based product') }}">
     <meta name="google-site-verification" content="173vXOSU7DHgNz9UkFqBkQ1_yThKQPBGvoZrIKoEm6U" />
     {{-- Styles --}}
-    <link href="{{ mix('css/app.css', 'themes/' . $theme->folder) }}" rel="stylesheet" rel="preload" as="style">
+    <link href="{{ mix('css/app.css', 'themes/' . $theme->folder) }}" rel="preload" as="style" fetchpriority="low" onload="this.rel='stylesheet'">
 </head>
 <body>
 

resources/views/themes/bimbala/partials/cta.blade.php

@@ -1,6 +1,6 @@
 
 {{-- CTA --}}
-<section class="relative block pt-16 overflow-hidden leading-6 text-left text-white bg-purple-900 bg-no-repeat bg-cover sm:pt-20 md:pt-24">
+<section class="relative block pt-16 overflow-hidden leading-6 text-left text-white bg-purple-950 bg-no-repeat bg-cover sm:pt-20 md:pt-24">
     <div class="w-full max-w-5xl px-8 mx-auto leading-6 text-left xl:px-0">
         <div class="flex flex-wrap items-center justify-center flex-1 text-center text-white lg:text-left">
             <div class="relative w-full px-4 leading-6 text-left lg:w-7/12 xl:w-1/2">
@@ -28,7 +28,7 @@
                     <div class="relative z-10 w-3 h-3 bg-gray-700 rounded-full"></div>
                 </div>
 
-                <img src="{{URL::asset('themes/bimbala/images/demo.bimbala.jpg')}}" alt="Designed with your client in mind" class=" max-w-full text-white align-middle border-none" loading="lazy">
+                <img src="{{ URL::asset('themes/bimbala/images/demo.bimbala.webp') }}" alt="Designed with your client in mind" class="max-w-full text-white align-middle border-none w-100" loading="lazy">
             </div>
         </div>
     </div>

resources/views/themes/bimbala/partials/footer.blade.php

@@ -7,7 +7,19 @@
             <div class="flex-initial w-1/2 px-2 pb-12 leading-tight md:w-1/4">
                 <div class="box-border">
                     <a href="{{ route('wave.home') }}" class="relative flex items-center">
-                        <img class="h-8 w-8" src="../../bimbala/img/logo-small.png" alt="Bimbala's logo" width="32" height="32">
+                        <img class="h-8 w-8"
+                             src="{{URL::asset('bimbala/img/logo/logo-sm.webp')}}"
+                             srcset="
+                               {{ asset('bimbala/img/logo/logo-xs.webp') }} 320w,
+                               {{ asset('bimbala/img/logo/logo-sm.webp') }} 375w,
+                               {{ asset('bimbala/img/logo/logo-md.webp') }} 768w,
+                               {{ asset('bimbala/img/logo/logo-lg.webp') }} 1024w,
+                               {{ asset('bimbala/img/logo/logo-xl.webp') }} 1500w,
+                               {{ asset('bimbala/img/logo/logo-2xl.webp') }} 2000w,
+                           "
+                            alt="Bimbala's logo"
+                             width="32"
+                             height="32">
                         <h2 class="mx-2 text-lg md:text-xl">Bimbala</h2>
                     </a>
                 </div>
@@ -189,13 +201,13 @@ function gtag(){dataLayer.push(arguments);}
     </script>
     <!-- End Matomo Code -->
     <!-- Crisp -->
-        <script type="text/javascript">window.$crisp=[];window.CRISP_WEBSITE_ID="8382cdf3-f8a1-4d6a-8f2a-a807f51bfb95";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>
+        <script type="text/javascript">window.$crisp=[];window.CRISP_WEBSITE_ID="8382cdf3-f8a1-4d6a-8f2a-a807f51bfb95";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;s.defer=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>
     <!-- End Crisp -->
     <!-- Microsoft Clarity -->
-    <script type="text/javascript">
+    <script type="text/javascript" defer async>
     (function(c,l,a,r,i,t,y){
         c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;t.defer=1;
         y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
     })(window, document, "clarity", "script", "5kue80nmru");
     </script>

resources/views/themes/bimbala/partials/header.blade.php

@@ -16,8 +16,18 @@
 
     <nav x-data="{ mobile: false }" class="relative z-40 px-10 py-6 mx-auto md:pb-6 max-w-7xl md:flex md:justify-between md:items-center">
         <div class="relative z-20 flex items-center justify-between">
-            <a href="{{ route('wave.home') }}" class="relative flex items-center">
-                    <img class="h-8 w-8" src="../../bimbala/img/logo-small.png" alt="Bimbala's logo" width="32" height="32">
+            <a href="{{ route('wave.home') }}" class="relative flex items-center">`
+                    <img class="h-8 w-8"
+                         src="{{URL::asset('bimbala/img/logo/logo-sm.webp')}}"
+                         srcset="
+                           {{ asset('bimbala/img/logo/logo-xs.webp') }} 320w,
+                           {{ asset('bimbala/img/logo/logo-sm.webp') }} 375w,
+                           {{ asset('bimbala/img/logo/logo-md.webp') }} 768w,
+                           {{ asset('bimbala/img/logo/logo-lg.webp') }} 1024w,
+                           {{ asset('bimbala/img/logo/logo-xl.webp') }} 1500w,
+                           {{ asset('bimbala/img/logo/logo-2xl.webp') }} 2000w,
+                       "
+                         alt="Bimbala's logo" width="32" height="32">
                     <h1 class="mx-2 text-lg font-semibold text-white md:text-xl">Bimbala</h1>
                 </a>
                 {{-- This is the homepage nav when a user is not logged in --}}