fix: add lazy loading to images and improve accessibility attributes

Author: devopvoid

layouts/_partials/app-screenshots.html

@@ -40,7 +40,7 @@ <h2 class="text-base/7 font-semibold text-blue-600 dark:text-blue-400">{{ i18n "
         </div>
         <div class="relative overflow-hidden pt-8">
             <div class="mx-auto max-w-5xl px-6 lg:px-8">
-                <img src="{{- (resources.Get "images/app/lecturePresenter.png" | fingerprint).RelPermalink -}}" alt="lecturePresenter screenshot" class="mb-16 rounded-xl shadow-2xl ring-1 ring-gray-900/10" width="2534" height="1620">
+                <img loading="lazy" src="{{- (resources.Get "images/app/lecturePresenter.png" | fingerprint).RelPermalink -}}" alt="lecturePresenter screenshot" class="mb-16 rounded-xl shadow-2xl ring-1 ring-gray-900/10" width="2534" height="1620">
             </div>
         </div>
     </div>
@@ -55,7 +55,7 @@ <h2 class="text-base/7 font-semibold text-blue-600 dark:text-blue-400">{{ i18n "
         </div>
         <div class="relative overflow-hidden pt-8">
             <div class="mx-auto max-w-5xl px-6 lg:px-8">
-                <img src="{{- (resources.Get (printf "images/app/lectureEditor.%s.png" .Site.Language.Lang) | fingerprint).RelPermalink -}}" alt="lectureEditor screenshot" class="mb-16 rounded-xl shadow-2xl ring-1 ring-gray-900/10" width="1538" height="965">
+                <img loading="lazy" src="{{- (resources.Get (printf "images/app/lectureEditor.%s.png" .Site.Language.Lang) | fingerprint).RelPermalink -}}" alt="lectureEditor screenshot" class="mb-16 rounded-xl shadow-2xl ring-1 ring-gray-900/10" width="1538" height="965">
             </div>
         </div>
     </div>
@@ -97,14 +97,14 @@ <h2 class="text-base/7 font-semibold text-blue-600 dark:text-blue-400">{{ i18n "
                         </div>
 
                         <div class="bg-gray-800 rounded-b-lg">
-                            <img src="{{- (resources.Get (printf "images/app/web-browser.%s.png" .Site.Language.Lang) | fingerprint).RelPermalink -}}" alt="lectureStreaming mobile screenshot" class="max-w-full h-auto rounded-b-lg">
+                            <img loading="lazy" src="{{- (resources.Get (printf "images/app/web-browser.%s.png" .Site.Language.Lang) | fingerprint).RelPermalink -}}" alt="lectureStreaming desktop screenshot" class="max-w-full h-auto rounded-b-lg">
                         </div>
                     </figure>
 
                     <!-- Mobile Device -->
                     <figure class="hidden absolute bottom-0 start-0 z-2 max-w-full w-60 h-auto mb-20 ms-20 lg:block">
                         <div class="p-1.5 bg-gray-100 rounded-3xl shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(45_55_75_/_20%),_0_2rem_4rem_-2rem_rgb(45_55_75_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(45_55_75_/_20%)] dark:shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(0_0_0_/_20%),_0_2rem_4rem_-2rem_rgb(0_0_0_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(0_0_0_/_20%)] dark:bg-neutral-700">
-                            <img src="{{- (resources.Get (printf "images/app/web-mobile.%s.png" .Site.Language.Lang) | fingerprint).RelPermalink -}}" alt="lectureStreaming mobile screenshot" class="border-black max-w-full rounded-[1.25rem] h-auto" style="border-width: medium;">
+                            <img loading="lazy" src="{{- (resources.Get (printf "images/app/web-mobile.%s.png" .Site.Language.Lang) | fingerprint).RelPermalink -}}" alt="lectureStreaming mobile screenshot" class="border-black max-w-full rounded-[1.25rem] h-auto" style="border-width: medium;">
                         </div>
                     </figure>
                 </div>

layouts/_partials/hero.html

@@ -421,7 +421,7 @@ <h2 class="mb-6 text-2xl font-light text-slate-700 dark:text-slate-300 md:text-3
                                                             <input type="text"
                                                                    class="w-full text-[10px] px-2 py-1 bg-slate-100 dark:bg-slate-700 rounded-l border-0 focus:ring-0 text-slate-800 dark:text-slate-200"
                                                                    placeholder="{{ i18n "image_content.chat.input_placeholder" }}">
-                                                            <button class="bg-sky-500 text-white px-2 rounded-r">
+                                                            <button class="bg-sky-500 text-white px-2 rounded-r" aria-label="submit-chat">
                                                                 <svg class="w-3 h-3 transform rotate-45 -mt-px">
                                                                     <use href="#paper-airplane"/>
                                                                 </svg>

layouts/_partials/nav.html

@@ -13,7 +13,7 @@
                 </div>
             </a>
             <button class="rounded-lg md:hidden focus:outline-none focus:shadow-outline" @click="open = !open"
-                    role="menu" aria-expanded="false" aria-label="Main" aria-controls="menuItems">
+                    role="menuitem" aria-expanded="false" aria-label="Main" aria-controls="menuItems">
                 <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
                     <path x-show="!open" fill-rule="evenodd"
                           d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"