💄 Refactor footer links for improved organization and clarity; update navigation structure and aria labels

Author: HassanZahirnia

resources/views/components/footer.blade.php

@@ -9,7 +9,7 @@ class="sr-only"
         Footer
     </h2>
     <div
-        class="flex flex-col flex-wrap items-end gap-x-6 gap-y-4 md:flex-row md:justify-between"
+        class="flex flex-col flex-wrap gap-x-6 gap-y-4 md:flex-row md:items-end md:justify-between"
     >
         {{-- Left side --}}
         <div class="flex flex-col items-center gap-6 md:items-start">
@@ -95,7 +95,7 @@ class="flex flex-wrap items-center justify-center gap-2.5 *:opacity-0"
             >
                 <a
                     href="/newsletter"
-                    class="group dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud relative z-0 flex items-center gap-6 overflow-hidden rounded-2xl bg-cyan-50/50 py-5 pr-7 pl-6 ring-1 ring-black/5 transition duration-300 ease-in-out hover:bg-cyan-50 hover:ring-black/10 md:max-w-lg"
+                    class="group dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud relative z-0 flex max-w-105 items-center gap-6 overflow-hidden rounded-2xl bg-cyan-50/50 py-5 pr-7 pl-6 ring-1 ring-black/5 transition duration-300 ease-in-out hover:bg-cyan-50 hover:ring-black/10"
                 >
                     {{-- Decorative circle --}}
                     <div
@@ -119,7 +119,7 @@ class="transition duration-300 will-change-transform group-hover:scale-105"
 
                         {{-- Message --}}
                         <p
-                            class="leading-relaxed opacity-50 transition duration-300 will-change-transform group-hover:translate-x-0.5"
+                            class="leading-relaxed opacity-70 transition duration-300 will-change-transform group-hover:translate-x-0.5"
                         >
                             Get the latest NativePHP updates and news delivered
                             to your inbox.
@@ -153,7 +153,7 @@ class="size-4 shrink-0"
 
         {{-- Right side --}}
         <nav
-            class="flex flex-1 flex-wrap justify-center gap-x-10 gap-y-3 lg:justify-around"
+            class="flex w-full flex-wrap justify-center gap-x-5 gap-y-3 sm:w-auto lg:justify-around"
             aria-label="Footer navigation"
         >
             {{-- Column --}}
@@ -189,67 +189,58 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
                             Shop
                         </a>
                     </li>
-                </ul>
-            </div>
-
-            {{-- Column --}}
-            <div class="flex grow flex-col items-start gap-1 sm:grow-0">
-                <h2 class="text-lg font-medium">Mobile</h2>
-                <ul
-                    class="flex flex-col items-start text-sm text-gray-500 dark:text-gray-400"
-                >
                     <li>
                         <a
-                            href="/docs/mobile/1/getting-started/introduction"
-                            aria-label="Mobile Documentation"
+                            href="https://bifrost.nativephp.com/"
+                            aria-label="Bifrost"
                             class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-300"
                         >
-                            Documentation
+                            Bifrost
                         </a>
                     </li>
                     <li>
                         <a
-                            href="{{ route('pricing') }}"
-                            aria-label="Pricing"
+                            href="{{ route('privacy-policy') }}"
+                            aria-label="Privacy Policy"
                             class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-300"
                         >
-                            Pricing
+                            Privacy Policy
                         </a>
                     </li>
                     <li>
                         <a
-                            href="https://github.com/nativephp"
-                            aria-label="GitHub"
+                            href="{{ route('terms-of-service') }}"
+                            aria-label="Terms of Service"
                             class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-300"
                         >
-                            GitHub
+                            Terms of Service
                         </a>
                     </li>
                 </ul>
             </div>
 
             {{-- Column --}}
             <div class="flex grow flex-col items-start gap-1 sm:grow-0">
-                <h2 class="text-lg font-medium">Desktop</h2>
+                <h2 class="text-lg font-medium">Mobile</h2>
                 <ul
                     class="flex flex-col items-start text-sm text-gray-500 dark:text-gray-400"
                 >
                     <li>
                         <a
-                            href="/docs/desktop/1/getting-started/introduction"
-                            aria-label="Desktop Documentation"
+                            href="/docs/mobile/1/getting-started/introduction"
+                            aria-label="Mobile Documentation"
                             class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-300"
                         >
                             Documentation
                         </a>
                     </li>
                     <li>
                         <a
-                            href="{{ route('sponsoring') }}"
-                            aria-label="Sponsoring"
+                            href="{{ route('pricing') }}"
+                            aria-label="Pricing"
                             class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-300"
                         >
-                            Sponsoring
+                            Pricing
                         </a>
                     </li>
                     <li>
@@ -266,35 +257,35 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
 
             {{-- Column --}}
             <div class="flex grow flex-col items-start gap-1 sm:grow-0">
-                <h2 class="text-lg font-medium">Company</h2>
+                <h2 class="text-lg font-medium">Desktop</h2>
                 <ul
                     class="flex flex-col items-start text-sm text-gray-500 dark:text-gray-400"
                 >
                     <li>
                         <a
-                            href="https://bifrost.nativephp.com/"
-                            aria-label="Bifrost"
+                            href="/docs/desktop/1/getting-started/introduction"
+                            aria-label="Desktop Documentation"
                             class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-300"
                         >
-                            Bifrost
+                            Documentation
                         </a>
                     </li>
                     <li>
                         <a
-                            href="{{ route('privacy-policy') }}"
-                            aria-label="Privacy Policy"
+                            href="{{ route('sponsoring') }}"
+                            aria-label="Sponsoring"
                             class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-300"
                         >
-                            Privacy Policy
+                            Sponsoring
                         </a>
                     </li>
                     <li>
                         <a
-                            href="{{ route('terms-of-service') }}"
-                            aria-label="Terms of Service"
+                            href="https://github.com/nativephp"
+                            aria-label="GitHub"
                             class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-300"
                         >
-                            Terms of Service
+                            GitHub
                         </a>
                     </li>
                 </ul>