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

@@ -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>

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>

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"
 />

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>

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>

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}

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>

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"

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>

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"
       >