From c41697065a44de8048569b6062aba9123a75c955 Mon Sep 17 00:00:00 2001
From: Simon Hamp <simon.hamp@me.com>
Date: Thu, 23 Jul 2026 03:51:04 +0100
Subject: [PATCH] Add ticket-sales countdown to The Vibes banner

The site-wide Vibes banner now shows a live d/h/m/s countdown to ticket
sales closing at midnight Boston time on July 30 (04:00 UTC). The
deadline is defined once and drives both a server-side render guard and
the Alpine timer, so the whole banner disappears the moment sales close
- on page loads after the deadline and live in already-open tabs.

Also adds the php attribute to the webview example on the SuperNative
docs page, matching the documented PHP mode.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/the-vibes-banner.blade.php     | 169 ++++++++++++------
 .../mobile/4/architecture/super-native.md     |   2 +-
 tests/Feature/TheVibesBannerTest.php          |  53 ++++++
 3 files changed, 166 insertions(+), 58 deletions(-)
 create mode 100644 tests/Feature/TheVibesBannerTest.php

diff --git a/resources/views/components/the-vibes-banner.blade.php b/resources/views/components/the-vibes-banner.blade.php
index a258503d..184ed9c2 100644
--- a/resources/views/components/the-vibes-banner.blade.php
+++ b/resources/views/components/the-vibes-banner.blade.php
@@ -1,65 +1,120 @@
-<a
-    href="/the-vibes"
-    onclick="fathom.trackEvent('the_vibes_banner_click');"
-    data-site-banner
-    class="group relative z-30 flex flex-col items-center justify-center gap-x-3 gap-y-2.5 overflow-hidden bg-gradient-to-r from-violet-100 via-indigo-50 to-violet-100 px-5 py-3 select-none 3xs:flex-row dark:from-violet-950/50 dark:via-indigo-950/50 dark:to-violet-950/50"
->
-    {{-- Label --}}
-    <div
-        class="flex items-center justify-center gap-3 transition duration-200 ease-in-out will-change-transform group-hover:-translate-x-0.5"
+@php
+    $ticketSalesEndAt = '2026-07-30T00:00:00-04:00';
+@endphp
+
+@if (now()->isBefore($ticketSalesEndAt))
+    <a
+        href="/the-vibes"
+        onclick="fathom.trackEvent('the_vibes_banner_click');"
+        data-site-banner
+        x-data="{
+            deadline: new Date('{{ $ticketSalesEndAt }}').getTime(),
+            expired: false,
+            days: '0',
+            hours: '00',
+            minutes: '00',
+            seconds: '00',
+            tick() {
+                const diff = this.deadline - Date.now()
+
+                if (diff <= 0) {
+                    this.expired = true
+                    return
+                }
+
+                this.days = String(Math.floor(diff / 86400000))
+                this.hours = String(Math.floor((diff % 86400000) / 3600000)).padStart(2, '0')
+                this.minutes = String(Math.floor((diff % 3600000) / 60000)).padStart(2, '0')
+                this.seconds = String(Math.floor((diff % 60000) / 1000)).padStart(2, '0')
+            },
+            init() {
+                this.tick()
+                setInterval(() => this.tick(), 1000)
+            },
+        }"
+        x-show="! expired"
+        class="group relative z-30 flex flex-col flex-wrap items-center justify-center gap-x-3 gap-y-2.5 overflow-hidden bg-gradient-to-r from-violet-100 via-indigo-50 to-violet-100 px-5 py-3 select-none 3xs:flex-row dark:from-violet-950/50 dark:via-indigo-950/50 dark:to-violet-950/50"
     >
-        {{-- Icon --}}
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            class="size-5 shrink-0 text-violet-600 dark:text-violet-400"
+        {{-- Label --}}
+        <div
+            class="flex items-center justify-center gap-3 transition duration-200 ease-in-out will-change-transform group-hover:-translate-x-0.5"
         >
-            <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z" clip-rule="evenodd" />
-        </svg>
+            {{-- Icon --}}
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                class="size-5 shrink-0 text-violet-600 dark:text-violet-400"
+            >
+                <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z" clip-rule="evenodd" />
+            </svg>
 
-        {{-- Text --}}
-        <div>
-            <style>
-                .vibes-gradient-text {
-                    background-image: linear-gradient(
-                        90deg,
-                        var(--color-black) 0%,
-                        var(--color-violet-600) 35%,
-                        var(--color-black) 70%
-                    );
-                    background-size: 200% 100%;
-                    animation: vibes-shine 2s linear infinite;
-                }
-                .dark .vibes-gradient-text {
-                    background-image: linear-gradient(
-                        90deg,
-                        var(--color-white) 0%,
-                        var(--color-violet-400) 35%,
-                        var(--color-white) 70%
-                    );
-                }
-                @keyframes vibes-shine {
-                    from {
-                        background-position: 200% center;
+            {{-- Text --}}
+            <div>
+                <style>
+                    .vibes-gradient-text {
+                        background-image: linear-gradient(
+                            90deg,
+                            var(--color-black) 0%,
+                            var(--color-violet-600) 35%,
+                            var(--color-black) 70%
+                        );
+                        background-size: 200% 100%;
+                        animation: vibes-shine 2s linear infinite;
                     }
-                    to {
-                        background-position: 0% center;
+                    .dark .vibes-gradient-text {
+                        background-image: linear-gradient(
+                            90deg,
+                            var(--color-white) 0%,
+                            var(--color-violet-400) 35%,
+                            var(--color-white) 70%
+                        );
                     }
-                }
-            </style>
-            <div
-                class="vibes-gradient-text bg-clip-text tracking-tight text-pretty text-transparent sm:text-center"
-            >
-                <b>July 30, 2026</b> &mdash; The unofficial Laracon US Day 3. Get your ticket to <b>The Vibes</b>
+                    @keyframes vibes-shine {
+                        from {
+                            background-position: 200% center;
+                        }
+                        to {
+                            background-position: 0% center;
+                        }
+                    }
+                </style>
+                <div
+                    class="vibes-gradient-text bg-clip-text tracking-tight text-pretty text-transparent sm:text-center"
+                >
+                    <b>July 30, 2026</b> &mdash; The unofficial Laracon US Day 3. Get your ticket to <b>The Vibes</b>
+                </div>
             </div>
         </div>
-    </div>
 
-    {{-- Arrow --}}
-    <div
-        class="transition duration-200 ease-in-out will-change-transform group-hover:translate-x-0.5"
-    >
-        <x-icons.right-arrow class="size-3 shrink-0" />
-    </div>
-</a>
+        {{-- Countdown to ticket sales closing, midnight in Boston --}}
+        <div
+            x-cloak
+            class="flex shrink-0 items-center gap-1"
+        >
+            <span class="flex items-baseline gap-0.5 rounded-md bg-white/70 px-1.5 py-0.5 ring-1 ring-violet-200 dark:bg-white/10 dark:ring-white/10">
+                <span class="text-sm font-bold text-violet-900 tabular-nums dark:text-violet-100" x-text="days">0</span>
+                <span class="text-[10px] font-semibold text-violet-500 dark:text-violet-400">d</span>
+            </span>
+            <span class="flex items-baseline gap-0.5 rounded-md bg-white/70 px-1.5 py-0.5 ring-1 ring-violet-200 dark:bg-white/10 dark:ring-white/10">
+                <span class="text-sm font-bold text-violet-900 tabular-nums dark:text-violet-100" x-text="hours">00</span>
+                <span class="text-[10px] font-semibold text-violet-500 dark:text-violet-400">h</span>
+            </span>
+            <span class="flex items-baseline gap-0.5 rounded-md bg-white/70 px-1.5 py-0.5 ring-1 ring-violet-200 dark:bg-white/10 dark:ring-white/10">
+                <span class="text-sm font-bold text-violet-900 tabular-nums dark:text-violet-100" x-text="minutes">00</span>
+                <span class="text-[10px] font-semibold text-violet-500 dark:text-violet-400">m</span>
+            </span>
+            <span class="flex items-baseline gap-0.5 rounded-md bg-white/70 px-1.5 py-0.5 ring-1 ring-violet-200 dark:bg-white/10 dark:ring-white/10">
+                <span class="text-sm font-bold text-violet-900 tabular-nums dark:text-violet-100" x-text="seconds">00</span>
+                <span class="text-[10px] font-semibold text-violet-500 dark:text-violet-400">s</span>
+            </span>
+        </div>
+
+        {{-- Arrow --}}
+        <div
+            class="transition duration-200 ease-in-out will-change-transform group-hover:translate-x-0.5"
+        >
+            <x-icons.right-arrow class="size-3 shrink-0" />
+        </div>
+    </a>
+@endif
diff --git a/resources/views/docs/mobile/4/architecture/super-native.md b/resources/views/docs/mobile/4/architecture/super-native.md
index 22cb8bf0..0b622f5b 100644
--- a/resources/views/docs/mobile/4/architecture/super-native.md
+++ b/resources/views/docs/mobile/4/architecture/super-native.md
@@ -110,7 +110,7 @@ the same way that NativePHP for Mobile versions before v4 did, you can do someth
 Route::native('/home', WebViewScreen::class);
 
 // webviewscreen.blade.php
-<webview url="/" fullscreen />
+<webview php url="/" fullscreen />
 
 // routes/web.php
 Route::view('/', 'welcome');
diff --git a/tests/Feature/TheVibesBannerTest.php b/tests/Feature/TheVibesBannerTest.php
new file mode 100644
index 00000000..980bdf5b
--- /dev/null
+++ b/tests/Feature/TheVibesBannerTest.php
@@ -0,0 +1,53 @@
+<?php
+
+namespace Tests\Feature;
+
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Support\Carbon;
+use PHPUnit\Framework\Attributes\Test;
+use Tests\TestCase;
+
+class TheVibesBannerTest extends TestCase
+{
+    use RefreshDatabase;
+
+    #[Test]
+    public function the_banner_counts_down_to_ticket_sales_closing_at_midnight_in_boston()
+    {
+        $this->travelTo(Carbon::parse('2026-07-29T23:59:59-04:00'));
+
+        $this->blade('<x-the-vibes-banner />')
+            ->assertSee('2026-07-30T00:00:00-04:00', false)
+            ->assertSeeInOrder(['x-text="days"', 'x-text="hours"', 'x-text="minutes"', 'x-text="seconds"'], false);
+    }
+
+    #[Test]
+    public function the_banner_disappears_once_ticket_sales_close()
+    {
+        $this->travelTo(Carbon::parse('2026-07-30T00:00:00-04:00'));
+
+        $this->blade('<x-the-vibes-banner />')
+            ->assertDontSee('2026-07-30T00:00:00-04:00', false)
+            ->assertDontSee('Get your ticket');
+    }
+
+    #[Test]
+    public function the_homepage_shows_the_countdown_while_tickets_are_on_sale()
+    {
+        $this->travelTo(Carbon::parse('2026-07-23T12:00:00-04:00'));
+
+        $this->get('/')
+            ->assertOk()
+            ->assertSee('2026-07-30T00:00:00-04:00', false);
+    }
+
+    #[Test]
+    public function the_homepage_hides_the_banner_once_ticket_sales_close()
+    {
+        $this->travelTo(Carbon::parse('2026-07-30T04:00:00Z'));
+
+        $this->get('/')
+            ->assertOk()
+            ->assertDontSee('2026-07-30T00:00:00-04:00', false);
+    }
+}