Skip to content

Commit b5bd301

Browse files
simonhampclaude
simonhamp
and
claude
committed
Add ad rotation to blog and docs, improve mobile menu UX
- Extract blog sidebar ads into shared ad-rotation component with configurable ad filtering - Add Ultra ad to rotation with NativePHP branding and config-driven pricing - Add ad rotation to docs sidebar and mobile view, filtered by platform - Add logout button and shadow to main website mobile menu - Improve menu item contrast in light mode Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 1812575 commit b5bd301

File tree

7 files changed

+218
-129
lines changed

7 files changed

+218
-129
lines changed

‎resources/views/article.blade.php‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -102,10 +102,13 @@ class="prose min-w-0 max-w-none grow text-gray-600 dark:text-gray-400 dark:prose
102102
<x-blog.sidebar />
103103
</div>
104104

105-
{{-- Mobile partner card --}}
106-
<div class="mt-5 min-[850px]:hidden">
107-
<x-sponsors.lists.docs.featured-sponsors />
108-
<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>
105+
{{-- Mobile ad & partner card --}}
106+
<div class="mt-5 space-y-5 min-[850px]:hidden">
107+
<x-blog.ad-rotation class="mx-auto max-w-52" />
108+
<div>
109+
<x-sponsors.lists.docs.featured-sponsors />
110+
<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>
111+
</div>
109112
</div>
110113
</section>
111114
</x-layout>

‎resources/views/blog.blade.php‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -113,10 +113,13 @@ class="flex grow flex-col gap-5"
113113
<x-blog.sidebar />
114114
</div>
115115

116-
{{-- Mobile partner card --}}
117-
<div class="mt-5 min-[850px]:hidden">
118-
<x-sponsors.lists.docs.featured-sponsors />
119-
<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>
116+
{{-- Mobile ad & partner card --}}
117+
<div class="mt-5 space-y-5 min-[850px]:hidden">
118+
<x-blog.ad-rotation class="mx-auto max-w-52" />
119+
<div>
120+
<x-sponsors.lists.docs.featured-sponsors />
121+
<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>
122+
</div>
120123
</div>
121124
{{-- Pagination --}}
122125
<nav

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

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
@props(['ads' => ['mobile', 'devkit', 'ultra']])
2+
3+
@php
4+
$adsJson = json_encode($ads);
5+
@endphp
6+
7+
<div
8+
x-data="{ ad: {{ $adsJson }}[Math.floor(Math.random() * {{ count($ads) }})] }"
9+
{{ $attributes }}
10+
>
11+
{{-- NativePHP Mobile Ad --}}
12+
@if (in_array('mobile', $ads))
13+
<a
14+
x-show="ad === 'mobile'"
15+
x-cloak
16+
href="/docs/mobile"
17+
class="group relative z-0 grid place-items-center overflow-hidden rounded-2xl bg-gray-100 px-4 pt-10 text-center text-pretty 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"
18+
>
19+
{{-- Logo --}}
20+
<div>
21+
<x-logo class="h-5" />
22+
<span class="sr-only">NativePHP</span>
23+
</div>
24+
25+
{{-- Tagline --}}
26+
<div class="mt-3">
27+
Bring your
28+
<strong>Laravel</strong>
29+
skills to
30+
<strong>mobile apps.</strong>
31+
</div>
32+
33+
{{-- Iphone --}}
34+
<div class="mt-4 -mb-25">
35+
<img
36+
src="{{ Vite::asset('resources/images/home/iphone.webp') }}"
37+
alt=""
38+
aria-hidden="true"
39+
class="w-25 transition duration-200 will-change-transform group-hover:-translate-y-1 dark:brightness-80 dark:contrast-150"
40+
width="92"
41+
height="190"
42+
loading="lazy"
43+
/>
44+
</div>
45+
46+
{{-- Star 1 --}}
47+
<x-icons.star
48+
class="absolute top-6 right-3 z-10 w-4 -rotate-7 text-white dark:w-3 dark:text-slate-300"
49+
/>
50+
{{-- Star 2 --}}
51+
<x-icons.star
52+
class="absolute top-3 right-14 z-10 w-3 rotate-5 text-white dark:w-2 dark:text-slate-300"
53+
/>
54+
{{-- Star 3 --}}
55+
<x-icons.star
56+
class="absolute top-2.5 right-7.5 z-10 w-2.5 text-white dark:w-2 dark:text-slate-300"
57+
/>
58+
{{-- White blur --}}
59+
<div class="absolute top-5 -right-10 -z-5">
60+
<div
61+
class="h-5 w-36 rotate-30 rounded-full bg-white/80 blur-md dark:bg-white/5"
62+
></div>
63+
</div>
64+
{{-- Sky blur --}}
65+
<div class="absolute top-5 -right-20 -z-10">
66+
<div
67+
class="h-15 w-36 rotate-30 rounded-full bg-sky-300 blur-xl dark:bg-sky-500/30"
68+
></div>
69+
</div>
70+
{{-- Violet blur --}}
71+
<div class="absolute -top-10 -right-5 -z-10">
72+
<div
73+
class="h-15 w-36 rotate-30 rounded-full bg-violet-300 blur-xl dark:bg-violet-400/30"
74+
></div>
75+
</div>
76+
</a>
77+
@endif
78+
79+
{{-- Plugin Dev Kit Ad --}}
80+
@if (in_array('devkit', $ads))
81+
<a
82+
x-show="ad === 'devkit'"
83+
x-cloak
84+
href="{{ route('products.show', 'plugin-dev-kit') }}"
85+
class="group relative z-0 grid place-items-center overflow-hidden rounded-2xl bg-gradient-to-br from-purple-600 to-indigo-700 px-4 py-8 text-center text-pretty transition duration-200 hover:from-purple-500 hover:to-indigo-600 hover:ring-1 hover:ring-purple-400"
86+
>
87+
{{-- Icon --}}
88+
<div class="grid size-14 place-items-center rounded-xl bg-white/20 text-white backdrop-blur-sm">
89+
<x-heroicon-s-cube class="size-8" />
90+
</div>
91+
92+
{{-- Title --}}
93+
<div class="mt-3 text-lg font-bold text-white">
94+
Plugin Dev Kit
95+
</div>
96+
97+
{{-- Tagline --}}
98+
<div class="mt-2 text-sm text-purple-100">
99+
Build native plugins with
100+
<strong class="text-white">Claude Code</strong>
101+
</div>
102+
103+
{{-- CTA --}}
104+
<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">
105+
Learn More
106+
</div>
107+
108+
{{-- Decorative stars --}}
109+
<x-icons.star
110+
class="absolute top-4 right-3 z-10 w-3 -rotate-7 text-purple-300"
111+
/>
112+
<x-icons.star
113+
class="absolute top-8 left-4 z-10 w-2 rotate-12 text-indigo-300"
114+
/>
115+
<x-icons.star
116+
class="absolute bottom-12 right-6 z-10 w-2.5 text-purple-200"
117+
/>
118+
</a>
119+
@endif
120+
121+
{{-- Ultra Ad --}}
122+
@if (in_array('ultra', $ads))
123+
<a
124+
x-show="ad === 'ultra'"
125+
x-cloak
126+
href="{{ route('pricing') }}"
127+
class="group relative z-0 grid place-items-center overflow-hidden rounded-2xl bg-gradient-to-br from-amber-400 to-orange-500 px-4 py-8 text-center text-pretty transition duration-200 hover:from-amber-300 hover:to-orange-400 hover:ring-1 hover:ring-amber-300"
128+
>
129+
{{-- Icon --}}
130+
<div class="grid size-14 place-items-center rounded-xl bg-white/20 text-white backdrop-blur-sm">
131+
<x-heroicon-s-bolt class="size-8" />
132+
</div>
133+
134+
{{-- Title --}}
135+
<div class="mt-3 text-lg font-bold text-white">
136+
NativePHP Ultra
137+
</div>
138+
139+
{{-- Tagline --}}
140+
<div class="mt-2 text-sm text-amber-50">
141+
All NativePHP plugins, teams &amp; priority support from
142+
<strong class="text-white">${{ config('subscriptions.plans.max.price_monthly') }}/mo</strong>
143+
</div>
144+
145+
{{-- CTA --}}
146+
<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">
147+
Learn More
148+
</div>
149+
150+
{{-- Decorative stars --}}
151+
<x-icons.star
152+
class="absolute top-4 right-3 z-10 w-3 -rotate-7 text-amber-200"
153+
/>
154+
<x-icons.star
155+
class="absolute top-8 left-4 z-10 w-2 rotate-12 text-orange-200"
156+
/>
157+
<x-icons.star
158+
class="absolute bottom-12 right-6 z-10 w-2.5 text-amber-100"
159+
/>
160+
</a>
161+
@endif
162+
</div>

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

Lines changed: 1 addition & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<aside
2-
x-data="{ ad: Math.random() < 0.5 ? 'mobile' : 'devkit' }"
32
x-init="
43
() => {
54
motion.inView($el, () => {
@@ -13,111 +12,7 @@
1312
"
1413
class="sticky top-20 right-0 hidden max-w-52 shrink-0 min-[850px]:block"
1514
>
16-
{{-- NativePHP Mobile Ad --}}
17-
<a
18-
x-show="ad === 'mobile'"
19-
x-cloak
20-
href="/docs/mobile"
21-
class="group relative z-0 grid place-items-center overflow-hidden rounded-2xl bg-gray-100 px-4 pt-10 text-center text-pretty 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"
22-
>
23-
{{-- Logo --}}
24-
<div>
25-
<x-logo class="h-5" />
26-
<span class="sr-only">NativePHP</span>
27-
</div>
28-
29-
{{-- Tagline --}}
30-
<div class="mt-3">
31-
Bring your
32-
<strong>Laravel</strong>
33-
skills to
34-
<strong>mobile apps.</strong>
35-
</div>
36-
37-
{{-- Iphone --}}
38-
<div class="mt-4 -mb-25">
39-
<img
40-
src="{{ Vite::asset('resources/images/home/iphone.webp') }}"
41-
alt=""
42-
aria-hidden="true"
43-
class="w-25 transition duration-200 will-change-transform group-hover:-translate-y-1 dark:brightness-80 dark:contrast-150"
44-
width="92"
45-
height="190"
46-
loading="lazy"
47-
/>
48-
</div>
49-
50-
{{-- Star 1 --}}
51-
<x-icons.star
52-
class="absolute top-6 right-3 z-10 w-4 -rotate-7 text-white dark:w-3 dark:text-slate-300"
53-
/>
54-
{{-- Star 2 --}}
55-
<x-icons.star
56-
class="absolute top-3 right-14 z-10 w-3 rotate-5 text-white dark:w-2 dark:text-slate-300"
57-
/>
58-
{{-- Star 3 --}}
59-
<x-icons.star
60-
class="absolute top-2.5 right-7.5 z-10 w-2.5 text-white dark:w-2 dark:text-slate-300"
61-
/>
62-
{{-- White blur --}}
63-
<div class="absolute top-5 -right-10 -z-5">
64-
<div
65-
class="h-5 w-36 rotate-30 rounded-full bg-white/80 blur-md dark:bg-white/5"
66-
></div>
67-
</div>
68-
{{-- Sky blur --}}
69-
<div class="absolute top-5 -right-20 -z-10">
70-
<div
71-
class="h-15 w-36 rotate-30 rounded-full bg-sky-300 blur-xl dark:bg-sky-500/30"
72-
></div>
73-
</div>
74-
{{-- Violet blur --}}
75-
<div class="absolute -top-10 -right-5 -z-10">
76-
<div
77-
class="h-15 w-36 rotate-30 rounded-full bg-violet-300 blur-xl dark:bg-violet-400/30"
78-
></div>
79-
</div>
80-
</a>
81-
82-
{{-- Plugin Dev Kit Ad --}}
83-
<a
84-
x-show="ad === 'devkit'"
85-
x-cloak
86-
href="{{ route('products.show', 'plugin-dev-kit') }}"
87-
class="group relative z-0 grid place-items-center overflow-hidden rounded-2xl bg-gradient-to-br from-purple-600 to-indigo-700 px-4 py-8 text-center text-pretty transition duration-200 hover:from-purple-500 hover:to-indigo-600 hover:ring-1 hover:ring-purple-400"
88-
>
89-
{{-- Icon --}}
90-
<div class="grid size-14 place-items-center rounded-xl bg-white/20 text-white backdrop-blur-sm">
91-
<x-heroicon-s-cube class="size-8" />
92-
</div>
93-
94-
{{-- Title --}}
95-
<div class="mt-3 text-lg font-bold text-white">
96-
Plugin Dev Kit
97-
</div>
98-
99-
{{-- Tagline --}}
100-
<div class="mt-2 text-sm text-purple-100">
101-
Build native plugins with
102-
<strong class="text-white">Claude Code</strong>
103-
</div>
104-
105-
{{-- CTA --}}
106-
<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">
107-
Learn More
108-
</div>
109-
110-
{{-- Decorative stars --}}
111-
<x-icons.star
112-
class="absolute top-4 right-3 z-10 w-3 -rotate-7 text-purple-300"
113-
/>
114-
<x-icons.star
115-
class="absolute top-8 left-4 z-10 w-2 rotate-12 text-indigo-300"
116-
/>
117-
<x-icons.star
118-
class="absolute bottom-12 right-6 z-10 w-2.5 text-purple-200"
119-
/>
120-
</a>
15+
<x-blog.ad-rotation />
12116

12217
{{-- Sponsors --}}
12318
<div class="mt-3 space-y-3">

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@
44
<div
55
class="mt-3 max-w-52 border-t border-t-black/20 pt-5 dark:border-t-white/15"
66
>
7+
{{ $slot }}
8+
79
{{-- Sponsors --}}
8-
<div class="space-y-3">
10+
<div class="mt-4 space-y-3">
911
<x-sponsors.lists.docs.featured-sponsors />
1012
</div>
1113

0 commit comments

Comments
 (0)