💄 Enhance primary logo section with hover effect and update download button styling for improved user experience

Author: HassanZahirnia

resources/views/brand.blade.php

@@ -113,30 +113,36 @@ class="mx-auto max-w-3xl pt-4 text-base/relaxed text-pretty text-gray-600 sm:tex
             class="mx-auto mt-10 flex w-full max-w-md flex-col items-stretch gap-5"
         >
             {{-- Primary logo --}}
-            <div class="flex flex-col items-center gap-5">
+            <div
+                x-data="{ isHovered: false }"
+                class="flex flex-col items-center gap-5"
+            >
                 {{-- Asset --}}
                 <div
-                    class="grid h-50 w-full place-items-center rounded-xl bg-white p-5 ring-1 ring-gray-300"
+                    class="grid h-50 w-full place-items-center rounded-xl bg-gray-100 p-5 ring-1 ring-gray-300"
                 >
                     <img
                         src="/brand-assets/logo/nativephp.svg"
                         alt=""
                         loading="lazy"
-                        class="h-8"
+                        class="h-8 transition duration-200 will-change-transform"
+                        x-bind:class="{
+                            'scale-105': isHovered,
+                        }"
                     />
                 </div>
 
                 {{-- Download button --}}
-                <div class="flex w-full justify-center">
-                    <a
-                        href="/brand-assets/logo/nativephp.svg"
-                        download
-                        class="inline-flex items-center gap-2 rounded-xl bg-haiti py-3 pr-5 pl-3.5 text-sm font-medium text-white shadow-sm transition duration-200 hover:bg-gray-800"
-                    >
-                        <x-icons.download class="size-5" />
-                        <div>Download</div>
-                    </a>
-                </div>
+                <a
+                    download
+                    href="/brand-assets/logo/nativephp.svg"
+                    class="inline-flex items-center gap-2 rounded-xl bg-white py-3 pr-5 pl-3.5 text-sm font-medium ring-1 ring-gray-300 transition duration-200 ring-inset hover:bg-gray-100 dark:bg-cloud/60 dark:text-white dark:ring-transparent dark:hover:bg-cloud"
+                    x-on:mouseenter="isHovered = true"
+                    x-on:mouseleave="isHovered = false"
+                >
+                    <x-icons.download class="size-5" />
+                    <div>Download</div>
+                </a>
             </div>
         </div>
     </section>