Show partners on mobile

Author: simonhamp

resources/views/article.blade.php

@@ -101,5 +101,11 @@ class="prose max-w-none grow text-gray-600 dark:text-gray-400 dark:prose-heading
             {{-- Sidebar --}}
             <x-blog.sidebar />
         </div>
+
+        {{-- Mobile partner card --}}
+        <div class="mt-5 min-[850px]:hidden">
+            <x-sponsors.lists.docs.featured-sponsors />
+            <a href="/partners" class="mt-3 block text-center text-xs text-gray-500 transition hover:text-gray-800 dark:text-gray-400 dark:hover:text-white">Become a Partner</a>
+        </div>
     </section>
 </x-layout>

resources/views/blog.blade.php

@@ -112,6 +112,12 @@ class="flex grow flex-col gap-5"
                 {{-- Sidebar --}}
                 <x-blog.sidebar />
             </div>
+
+            {{-- Mobile partner card --}}
+            <div class="mt-5 min-[850px]:hidden">
+                <x-sponsors.lists.docs.featured-sponsors />
+                <a href="/partners" class="mt-3 block text-center text-xs text-gray-500 transition hover:text-gray-800 dark:text-gray-400 dark:hover:text-white">Become a Partner</a>
+            </div>
             {{-- Pagination --}}
             <nav
                 class="flex items-center justify-between gap-5 pt-2.5"

resources/views/components/docs-layout.blade.php

@@ -18,6 +18,12 @@
 
                 {{-- Main content --}}
                 <div class="mt-3">{{ $slot }}</div>
+
+                {{-- Mobile partner card --}}
+                <div class="mt-5 xl:hidden">
+                    <x-sponsors.lists.docs.featured-sponsors />
+                    <a href="/partners" class="mt-3 block text-center text-xs text-gray-500 transition hover:text-gray-800 dark:text-gray-400 dark:hover:text-white">Become a Partner</a>
+                </div>
             </article>
 
             {{-- Right sidebar --}}

resources/views/components/sponsors/lists/docs/featured-sponsors.blade.php

@@ -46,7 +46,7 @@
     href="{{ $partner['url'] }}"
     title="Learn more about {{ $partner['name'] }}"
     aria-label="Visit {{ $partner['name'] }} website"
-    class="flex w-full shrink-0 flex-col items-center gap-2 rounded-2xl bg-gray-100 px-5 py-4 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
+    class="mx-auto flex w-full max-w-64 shrink-0 flex-col items-center gap-2 rounded-2xl bg-gray-100 px-5 py-4 transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
     rel="noopener sponsored"
 >
     <div class="flex w-full items-center justify-center px-2">