Add sidebar ads for The Vibes and Masterclass

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: simonhamp

resources/views/components/blog/ad-rotation.blade.php

@@ -1,4 +1,4 @@
-@props(['ads' => ['mobile', 'devkit', 'ultra']])
+@props(['ads' => ['mobile', 'devkit', 'ultra', 'vibes', 'masterclass']])
 
 @php
     $adsJson = json_encode($ads);
@@ -159,4 +159,101 @@ class="absolute bottom-12 right-6 z-10 w-2.5 text-amber-100 animate-pulse "
             />
         </a>
     @endif
+
+    {{-- The Vibes Ad --}}
+    @if (in_array('vibes', $ads))
+        <a
+            x-show="ad === 'vibes'"
+            x-cloak
+            href="{{ route('the-vibes') }}"
+            class="group relative z-0 grid place-items-center overflow-hidden rounded-2xl px-4 py-8 text-center text-pretty transition duration-200 hover:ring-1 hover:ring-violet-400"
+        >
+            {{-- Background image --}}
+            <img
+                src="{{ Vite::asset('resources/images/the-vibes/what-is-vibes.webp') }}"
+                alt=""
+                aria-hidden="true"
+                class="absolute inset-0 -z-10 size-full object-cover blur-[1px] contrast-75 brightness-65"
+                loading="lazy"
+            />
+
+            {{-- Title --}}
+            <div class="z-10 text-lg font-bold text-white drop-shadow">
+                The Vibes
+            </div>
+
+            {{-- Tagline --}}
+            <div class="z-10 mt-2 text-sm text-violet-100 drop-shadow">
+                The unofficial Laracon US
+                <strong class="text-white">Day 3</strong>
+            </div>
+
+            {{-- CTA --}}
+            <div class="z-10 mt-4 rounded-lg bg-white/20 px-4 py-1.5 text-sm font-medium text-white backdrop-blur-sm transition group-hover:bg-white/30">
+                Grab Your Spot
+            </div>
+
+            {{-- Scarcity Label --}}
+            <div class="z-10 mt-2 text-xs text-violet-100 drop-shadow">
+                Only 100 tickets!
+            </div>
+
+            {{-- Decorative stars --}}
+            <x-icons.star
+                class="absolute top-4 right-3 z-10 w-3 -rotate-7 text-violet-300 animate-ping "
+            />
+            <x-icons.star
+                class="absolute top-8 left-4 z-10 w-2 rotate-12 text-indigo-300 animate-spin "
+            />
+        </a>
+    @endif
+
+    {{-- Masterclass Ad --}}
+    @if (in_array('masterclass', $ads))
+        <a
+            x-show="ad === 'masterclass'"
+            x-cloak
+            href="{{ route('course') }}"
+            class="group relative z-0 grid place-items-center overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-600 px-4 py-8 text-center text-pretty transition duration-200 hover:from-emerald-400 hover:to-teal-500 hover:ring-1 hover:ring-emerald-400"
+        >
+            {{-- Icon --}}
+            <div class="grid size-14 place-items-center rounded-xl bg-white/20 text-white backdrop-blur-sm">
+                <x-heroicon-s-academic-cap class="size-8" />
+            </div>
+
+            {{-- Title --}}
+            <div class="mt-3 text-lg font-bold text-white">
+                The Masterclass
+            </div>
+
+            {{-- Tagline --}}
+            <div class="mt-2 text-sm text-emerald-50">
+                Go from zero to
+                <strong class="text-white">published app</strong>
+                <br />
+                in no time
+            </div>
+
+            {{-- CTA --}}
+            <div class="mt-4 rounded-lg bg-white/20 px-4 py-1.5 text-sm font-medium text-white backdrop-blur-sm transition group-hover:bg-white/30">
+                Learn More
+            </div>
+
+            {{-- Early Bird Label --}}
+            <div class="mt-2 text-xs text-emerald-100">
+                Early Bird Pricing
+            </div>
+
+            {{-- Decorative stars --}}
+            <x-icons.star
+                class="absolute top-4 right-3 z-10 w-3 -rotate-7 text-emerald-200 animate-ping "
+            />
+            <x-icons.star
+                class="absolute top-8 left-4 z-10 w-2 rotate-12 text-teal-200 animate-spin "
+            />
+            <x-icons.star
+                class="absolute bottom-12 right-6 z-10 w-2.5 text-emerald-100 animate-pulse "
+            />
+        </a>
+    @endif
 </div>

resources/views/docs/index.blade.php

@@ -26,7 +26,7 @@
         <x-docs.toc-and-sponsors :tableOfContents="$tableOfContents">
             {{-- Ad rotation --}}
             <x-blog.ad-rotation
-                :ads="$platform === 'desktop' ? ['mobile', 'ultra'] : ['devkit', 'ultra']"
+                :ads="$platform === 'desktop' ? ['mobile', 'ultra', 'vibes', 'masterclass'] : ['devkit', 'ultra', 'vibes', 'masterclass']"
             />
         </x-docs.toc-and-sponsors>
     </x-slot>
@@ -156,6 +156,6 @@ class="flex items-center justify-end gap-1.5 opacity-60"
     {{-- Mobile ad rotation --}}
     <x-blog.ad-rotation
         class="mx-auto mt-5 max-w-52 xl:hidden"
-        :ads="$platform === 'desktop' ? ['mobile', 'ultra'] : ['devkit', 'ultra']"
+        :ads="$platform === 'desktop' ? ['mobile', 'ultra', 'vibes', 'masterclass'] : ['devkit', 'ultra', 'vibes', 'masterclass']"
     />
 </x-docs-layout>