From f7f2f38d32c9cde3b9732ec28de7958508e966f8 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Sun, 18 Feb 2024 23:16:41 +0400
Subject: [PATCH] Update various UI elements and improve form error handling

This commit introduces adjustments to several UI elements, including title alignment, font sizes, and avatars loading. The updates aim to improve the overall visual appeal and user experience on the website. In addition, better error handling has been added to form inputs, including adding unique error IDs for each form's email input to enhance user feedback and accessibility.
---
 src/components/ClientsSection.astro                  | 12 ++++++------
 src/components/FeaturesStatsAlt.astro                |  2 +-
 src/components/ui/avatars/Avatar.astro               |  1 +
 .../ui/avatars/AvatarTestimonialSection.astro        |  1 +
 src/components/ui/cards/CardRelated.astro            |  3 ++-
 src/components/ui/forms/LoginModal.astro             |  2 +-
 src/components/ui/forms/RecoverModal.astro           |  2 +-
 src/components/ui/forms/RegisterModal.astro          |  2 +-
 src/components/ui/forms/input/EmailInput.astro       |  7 ++++---
 src/pages/blog/index.astro                           |  2 +-
 10 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/ClientsSection.astro b/src/components/ClientsSection.astro
index 455eec4..15badcf 100644
--- a/src/components/ClientsSection.astro
+++ b/src/components/ClientsSection.astro
@@ -22,12 +22,12 @@ const subTitle: string =
   </div>
 
   <div
-    class="flex flex-col items-center justify-center gap-x-6 sm:flex-row sm:gap-x-12 lg:gap-x-24"
+    class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0 lg:gap-x-24"
   >
     <!-- Clients Group SVGs -->
     <!-- First -->
     <svg
-      class="mx-auto h-auto w-24 py-3 sm:mx-0 md:w-32 lg:w-40 lg:py-5"
+      class="mx-auto h-auto w-32 py-3 sm:mx-0 lg:w-40 lg:py-5"
       viewBox="0 0 150 38"
       fill="none"
     >
@@ -2424,7 +2424,7 @@ const subTitle: string =
 
     <!-- Second -->
     <svg
-      class="mx-auto h-auto w-24 py-3 sm:mx-0 md:w-32 lg:w-40 lg:py-5"
+      class="mx-auto h-auto w-32 py-3 sm:mx-0 lg:w-40 lg:py-5"
       viewBox="0 0 150 40"
       fill="none"
     >
@@ -2451,11 +2451,11 @@ const subTitle: string =
 
     <!-- Third -->
     <svg
-      class="mx-auto h-auto w-24 py-3 sm:mx-0 md:w-32 lg:w-40 lg:py-5"
+      class="mx-auto h-auto w-32 py-3 sm:mx-0 lg:w-40 lg:py-5"
       viewBox="0 0 150 39"
       fill="none"
     >
-      <g clip-path="url(#a)">
+      <g clip-path="url(#n)">
         <path
           fill="#6B7280"
           d="M66.454 14.419v12.11s4.413 1.098 11.32 1.098c6.855 0 11.316-1.093 11.316-1.093V22.42s-4.793.943-11.364.943c-3.19 0-5.304-.375-6.44-.489 0-.992.003-3.792 0-4.793 1.272-.127 3.412-.493 6.488-.493 6.397.026 11.316.974 11.316.974v-4.146s-4.39-1.093-11.316-1.093c-6.977 0-11.32 1.097-11.32 1.097ZM94.464 27.356h4.955V13.55h-4.955v13.806ZM28.155 27.356h4.954V13.55h-4.954v13.806ZM56.17 27.351s-3.583-2.896-8.852-5.627c-1.468-.76-2.71-1.267-3.863-1.734v7.361h-4.797V13.576s4.06.786 8.669 3.176c5.269 2.73 8.847 5.378 8.847 5.378v-8.58h4.81V27.35H56.17ZM24.843 16.678l-12.29 11.045L.245 16.669l3.68-3.351s7.518 7.235 8.628 8.27c1.11-1.035 8.624-8.27 8.624-8.27l3.666 3.36ZM110.599 13.558h6.899c2.516-.004 4.098-1.284 4.679-1.896.586-.612 1.94-2.14 1.94-3.92V2.007c0-1.061.861-1.922 1.922-1.922h7.48c1.062 0 1.923.86 1.923 1.927v7.48a1.923 1.923 0 0 1-1.923 1.922h-5.736c-1.779 0-3.308 1.354-3.919 1.94-.612.58-1.892 2.162-1.897 4.68v6.898h-11.368V13.558Z"
@@ -2480,7 +2480,7 @@ const subTitle: string =
         </g>
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="n">
           <path fill="#fff" d="M0 0h150v38.764H0z"></path>
         </clipPath>
       </defs>
diff --git a/src/components/FeaturesStatsAlt.astro b/src/components/FeaturesStatsAlt.astro
index e40ca9e..5371b24 100644
--- a/src/components/FeaturesStatsAlt.astro
+++ b/src/components/FeaturesStatsAlt.astro
@@ -43,7 +43,7 @@ const ListItemMarker: string = `<svg fill="none" viewBox="0 0 24 24" stroke-widt
               <li class="flex space-x-3">
                 <Fragment set:html={ListItemMarker} />
 
-                <span class="text-pretty text-sm font-medium text-neutral-600 dark:text-neutral-400 sm:text-base">
+                <span class="text-pretty text-base font-medium text-neutral-600 dark:text-neutral-400">
                   {item}
                 </span>
               </li>
diff --git a/src/components/ui/avatars/Avatar.astro b/src/components/ui/avatars/Avatar.astro
index 5f67be6..426a2d8 100644
--- a/src/components/ui/avatars/Avatar.astro
+++ b/src/components/ui/avatars/Avatar.astro
@@ -13,4 +13,5 @@ interface Props {
   class="inline-block h-8 w-8 rounded-full ring-2 ring-neutral-50 dark:ring-zinc-800"
   src={src}
   alt={alt}
+  loading="lazy"
 />
diff --git a/src/components/ui/avatars/AvatarTestimonialSection.astro b/src/components/ui/avatars/AvatarTestimonialSection.astro
index 2ad43bf..350a156 100644
--- a/src/components/ui/avatars/AvatarTestimonialSection.astro
+++ b/src/components/ui/avatars/AvatarTestimonialSection.astro
@@ -12,5 +12,6 @@ interface Props {
     class="size-8 rounded-full sm:h-[2.875rem] sm:w-[2.875rem]"
     src={src}
     alt={alt}
+    loading="lazy"
   />
 </div>
diff --git a/src/components/ui/cards/CardRelated.astro b/src/components/ui/cards/CardRelated.astro
index a609f1f..e72daef 100644
--- a/src/components/ui/cards/CardRelated.astro
+++ b/src/components/ui/cards/CardRelated.astro
@@ -15,7 +15,8 @@ interface Props {
      You might want to change it to the corresponding blog post's URL. -->
 <a
   class="group block rounded-xl outline-none ring-zinc-500 transition duration-300 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
-  href="#"
+  href={`/blog/${blogEntry.slug}/`}
+  data-astro-prefetch
 >
   <!-- The blog post's cover image. It uses astro:assets' Image for loading the image optimally -->
   <div>
diff --git a/src/components/ui/forms/LoginModal.astro b/src/components/ui/forms/LoginModal.astro
index 234efac..a8f669c 100644
--- a/src/components/ui/forms/LoginModal.astro
+++ b/src/components/ui/forms/LoginModal.astro
@@ -58,7 +58,7 @@ const config = {
               <!-- A grid layout for the form fields -->
               <div class="grid gap-y-4">
                 <!-- The email input field -->
-                <EmailInput id="login-email" />
+                <EmailInput id="login-email" errorId="login-email-error" />
                 <!-- The password input field -->
                 <PasswordInput
                   forgot={true}
diff --git a/src/components/ui/forms/RecoverModal.astro b/src/components/ui/forms/RecoverModal.astro
index cb65431..25519ab 100644
--- a/src/components/ui/forms/RecoverModal.astro
+++ b/src/components/ui/forms/RecoverModal.astro
@@ -51,7 +51,7 @@ const config = {
             <form>
               <div class="grid gap-y-4">
                 <!-- Email input field imported from EmailInput component -->
-                <EmailInput id="recover-email" />
+                <EmailInput id="recover-email" errorId="recover-email-error"/>
                 <!-- Reset password button imported from AuthBtn component -->
                 <AuthBtn title="Reset password" />
               </div>
diff --git a/src/components/ui/forms/RegisterModal.astro b/src/components/ui/forms/RegisterModal.astro
index a9155f7..843ae43 100644
--- a/src/components/ui/forms/RegisterModal.astro
+++ b/src/components/ui/forms/RegisterModal.astro
@@ -59,7 +59,7 @@ const config = {
             <form>
               <div class="grid gap-y-4">
                 <!-- Email input field -->
-                <EmailInput id="register-email" />
+                <EmailInput id="register-email" errorId="register-email-error"/>
                 <!-- Password input field -->
                 <PasswordInput
                   id="create-password"
diff --git a/src/components/ui/forms/input/EmailInput.astro b/src/components/ui/forms/input/EmailInput.astro
index dbb0fea..650dd07 100644
--- a/src/components/ui/forms/input/EmailInput.astro
+++ b/src/components/ui/forms/input/EmailInput.astro
@@ -1,11 +1,12 @@
 ---
 // Destructure the properties from Astro.props, setting default value for label
-const { label = "Email address", id } = Astro.props;
+const { label = "Email address", id, errorId } = Astro.props;
 
 // Define TypeScript interface for the properties
 interface Props {
   label?: string;
   id: string;
+  errorId: string;
 }
 ---
 
@@ -27,7 +28,7 @@ interface Props {
       autocomplete="email"
       class="block w-full rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm text-neutral-700 focus:border-neutral-200 focus:outline-none focus:ring focus:ring-neutral-400 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-700/30 dark:text-neutral-300 dark:focus:ring-1"
       required
-      aria-describedby="email-error"
+      aria-describedby={id}
     />
     <!-- Hidden error icon -->
     <div class="pointer-events-none absolute inset-y-0 end-0 hidden pe-3">
@@ -46,7 +47,7 @@ interface Props {
     </div>
   </div>
   <!-- Validation message which is hidden by default -->
-  <p class="mt-2 hidden text-xs text-red-600" id="valid-email-error">
+  <p class="mt-2 hidden text-xs text-red-600" id={errorId}>
     Please include a valid email address so we can get back to you
   </p>
 </div>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 4275573..815cb91 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -37,7 +37,7 @@ const secondSubTitle: string =
     class="mx-auto max-w-[85rem] space-y-8 px-4 pt-16 sm:px-6 lg:px-8 2xl:max-w-full"
   >
     <!--Page header-->
-    <div class="mx-auto max-w-3xl text-center">
+    <div class="mx-auto max-w-3xl text-left sm:text-center">
       <h1
         class="block text-balance text-4xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-5xl lg:text-6xl"
       >