Add Artisan Build sponsor across site

resources/views/blog.blade.php

@@ -119,6 +119,11 @@ class="flex grow flex-col gap-5"
                 <div>
                     <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 class="mt-5 border-t border-t-black/20 pt-5 dark:border-t-white/15">
+                        <x-sponsors.lists.docs.sponsors />
+                        <a href="/sponsor" 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 sponsor</a>
+                    </div>
                 </div>
             </div>
             {{-- Pagination --}}

resources/views/components/blog/sidebar.blade.php

@@ -14,9 +14,15 @@ class="sticky top-20 right-0 hidden max-w-52 shrink-0 min-[850px]:block"
 >
     <x-blog.ad-rotation />
 
-    {{-- Sponsors --}}
+    {{-- Partners --}}
     <div class="mt-3 space-y-3">
         <x-sponsors.lists.docs.featured-sponsors />
     </div>
     <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>
+
+    {{-- Sponsors --}}
+    <div class="mt-5 border-t border-t-black/20 pt-5 dark:border-t-white/15">
+        <x-sponsors.lists.docs.sponsors />
+        <a href="/sponsor" 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 sponsor</a>
+    </div>
 </aside>

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

@@ -19,10 +19,15 @@
                 {{-- Main content --}}
                 <div class="mt-3">{{ $slot }}</div>
 
-                {{-- Mobile partner card --}}
+                {{-- Mobile partner & sponsor cards --}}
                 <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 class="mx-auto mt-5 max-w-52 border-t border-t-black/20 pt-5 dark:border-t-white/15">
+                        <x-sponsors.lists.docs.sponsors />
+                        <a href="/sponsor" 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 sponsor</a>
+                    </div>
                 </div>
             </article>
 

resources/views/components/docs/toc-and-sponsors.blade.php

@@ -6,10 +6,17 @@ class="mt-3 max-w-52 border-t border-t-black/20 pt-5 dark:border-t-white/15"
 >
     {{ $slot }}
 
-    {{-- Sponsors --}}
+    {{-- Partners --}}
     <div class="mt-4 space-y-3">
         <x-sponsors.lists.docs.featured-sponsors />
     </div>
 
     <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>
+
+    {{-- Sponsors --}}
+    <div class="mt-5 border-t border-t-black/20 pt-5 dark:border-t-white/15">
+        <x-sponsors.lists.docs.sponsors />
+
+        <a href="/sponsor" 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 sponsor</a>
+    </div>
 </div>

resources/views/components/home/sponsors.blade.php

@@ -0,0 +1,77 @@
+@php
+    $sponsors = [
+        [
+            'url' => 'https://artisan.build/?utm_source=nativephp&utm_medium=logo&utm_campaign=nativephp',
+            'name' => 'Artisan Build',
+            'image' => '/img/sponsors/artisan-build.webp',
+            'imageDark' => '/img/sponsors/artisan-build-dark.webp',
+        ],
+    ];
+@endphp
+
+<section
+    class="my-16 lg:my-24"
+    aria-labelledby="home-sponsors-title"
+    role="region"
+>
+    <div
+        x-init="
+            () => {
+                motion.inView($el, (element) => {
+                    gsap.fromTo(
+                        $el,
+                        { y: 10, autoAlpha: 0 },
+                        {
+                            y: 0,
+                            autoAlpha: 1,
+                            duration: 0.7,
+                            ease: 'power2.out',
+                        },
+                    )
+                })
+            }
+        "
+        class="flex flex-col items-center gap-6"
+    >
+        <h2
+            id="home-sponsors-title"
+            class="text-sm font-medium tracking-wide text-gray-500 uppercase dark:text-zinc-500"
+        >
+            Sponsored by
+        </h2>
+
+        <div class="flex flex-wrap items-center justify-center gap-x-10 gap-y-5">
+            @foreach ($sponsors as $sponsor)
+                <a
+                    wire:key="home-sponsor-{{ \Illuminate\Support\Str::slug($sponsor['name']) }}"
+                    href="{{ $sponsor['url'] }}"
+                    title="Learn more about {{ $sponsor['name'] }}"
+                    aria-label="Visit {{ $sponsor['name'] }} website"
+                    target="_blank"
+                    rel="noopener noreferrer sponsored"
+                    class="opacity-70 transition duration-200 hover:opacity-100"
+                >
+                    <img
+                        src="{{ $sponsor['image'] }}"
+                        class="block h-6 w-auto dark:hidden"
+                        loading="lazy"
+                        alt="{{ $sponsor['name'] }} logo"
+                    />
+                    <img
+                        src="{{ $sponsor['imageDark'] }}"
+                        class="hidden h-6 w-auto dark:block"
+                        loading="lazy"
+                        alt="{{ $sponsor['name'] }} logo"
+                    />
+                </a>
+            @endforeach
+
+            <a
+                href="{{ route('sponsoring') }}"
+                class="text-sm text-gray-500 underline decoration-gray-300 underline-offset-4 transition duration-200 hover:text-gray-700 dark:text-zinc-500 dark:decoration-zinc-700 dark:hover:text-zinc-300"
+            >
+                Become a sponsor
+            </a>
+        </div>
+    </div>
+</section>

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

@@ -0,0 +1,43 @@
+@php
+    $sponsors = [
+        [
+            'url' => 'https://artisan.build/?utm_source=nativephp&utm_medium=logo&utm_campaign=nativephp',
+            'name' => 'Artisan Build',
+            'image' => '/img/sponsors/artisan-build.webp',
+            'imageDark' => '/img/sponsors/artisan-build-dark.webp',
+            'class' => 'w-full',
+        ],
+    ];
+
+    $sponsor = $sponsors[array_rand($sponsors)];
+@endphp
+
+<a
+    href="{{ $sponsor['url'] }}"
+    title="Learn more about {{ $sponsor['name'] }}"
+    aria-label="Visit {{ $sponsor['name'] }} website"
+    target="_blank"
+    rel="noopener sponsored"
+    class="mx-auto flex w-full max-w-40 items-center justify-center px-2 opacity-70 transition duration-200 hover:opacity-100"
+>
+    @if (isset($sponsor['component']))
+        <x-dynamic-component
+            :component="$sponsor['component']"
+            class="{{ $sponsor['class'] }}"
+            aria-hidden="true"
+        />
+    @else
+        <img
+            src="{{ $sponsor['image'] }}"
+            alt="{{ $sponsor['name'] }} logo"
+            class="{{ $sponsor['class'] }} dark:hidden"
+            loading="lazy"
+        />
+        <img
+            src="{{ $sponsor['imageDark'] }}"
+            alt="{{ $sponsor['name'] }} logo"
+            class="{{ $sponsor['class'] }} hidden dark:block"
+            loading="lazy"
+        />
+    @endif
+</a>

resources/views/the-vibes.blade.php

@@ -931,6 +931,34 @@ class="grid h-28 place-items-center rounded-2xl bg-gray-100 px-6 transition dura
                     </div>
                     <span class="sr-only">The PHP Foundation</span>
                 </a>
+
+                {{-- Artisan Build --}}
+                <a
+                    href="https://artisan.build/?utm_source=nativephp&utm_medium=sponsorship&utm_campaign=thevibes"
+                    target="_blank"
+                    rel="noopener noreferrer sponsored"
+                    class="grid h-28 place-items-center rounded-2xl bg-gray-100 px-6 transition duration-200 will-change-transform hover:-translate-y-0.5 hover:bg-gray-200/80 hover:shadow-lg hover:shadow-gray-200/70 dark:bg-[#1a1a2e] dark:hover:bg-slate-800/80 dark:hover:shadow-transparent"
+                >
+                    <div class="grid h-15 w-35 place-items-center">
+                        <img
+                            src="/img/sponsors/artisan-build.webp"
+                            class="block dark:hidden"
+                            loading="lazy"
+                            alt="Artisan Build logo"
+                            width="160"
+                            height="20"
+                        />
+                        <img
+                            src="/img/sponsors/artisan-build-dark.webp"
+                            class="hidden dark:block"
+                            loading="lazy"
+                            alt="Artisan Build logo"
+                            width="160"
+                            height="20"
+                        />
+                    </div>
+                    <span class="sr-only">Artisan Build</span>
+                </a>
             </div>
 
             {{-- Become a Sponsor CTA --}}

resources/views/welcome.blade.php

@@ -14,6 +14,9 @@
     {{-- Partners --}}
     <x-home.partners />
 
+    {{-- Sponsors --}}
+    <x-home.sponsors />
+
     {{-- Feedback --}}
     <x-home.feedback />
 </x-layout>