feat(newsletter): add floating signup button and sale rotation CTA

resources/views/components/newsletter/floating.blade.php

@@ -0,0 +1,90 @@
+@if (!request()->routeIs('sales.index'))
+    <div id="newsletter-float" class="fixed z-50 hidden bottom-5 right-5 animate-fade-in">
+        {{-- Main Button --}}
+        <a data-formkit-toggle="2a19408fe7" data-umami-event="clicked_stay_updated"
+            class="hover:cursor-pointer flex items-center gap-2 px-4 py-3 text-sm font-medium text-white transition-all duration-300 rounded-full shadow-lg bg-orange-500 hover:bg-orange-500/90 hover:shadow-xl group">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 animate-wiggle" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            </svg>
+            <span>Stay Updated</span>
+        </a>
+
+        <button id="newsletter-float-dismiss" type="button"
+            class="absolute flex items-center justify-center w-5 h-5 text-xs text-white transition-opacity rounded-full opacity-0 -top-1 -right-1 bg-stone-700 hover:bg-stone-600 group-hover:opacity-100"
+            title="Don't show again">
+            ×
+        </button>
+    </div>
+
+    <script async data-uid="2a19408fe7" src="https://zenso.kit.com/2a19408fe7/index.js"></script>
+
+    <style>
+        @keyframes fade-in {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        @keyframes wiggle {
+
+            0%,
+            100% {
+                transform: rotate(0deg);
+            }
+
+            25% {
+                transform: rotate(8deg);
+            }
+
+            75% {
+                transform: rotate(-8deg);
+            }
+        }
+
+        .animate-fade-in {
+            animation: fade-in 0.4s ease-out forwards;
+        }
+
+        .animate-wiggle {
+            animation: wiggle 0.5s ease-in-out 3s 3;
+        }
+
+        #newsletter-float:hover #newsletter-float-dismiss {
+            opacity: 1;
+        }
+    </style>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const floatEl = document.getElementById('newsletter-float');
+            const dismissBtn = document.getElementById('newsletter-float-dismiss');
+
+            if (localStorage.getItem('hideNewsletterFloat') === 'true') {
+                return;
+            }
+
+            setTimeout(function () {
+                floatEl.classList.remove('hidden');
+            }, 2000);
+
+            dismissBtn.addEventListener('click', function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                localStorage.setItem('hideNewsletterFloat', 'true');
+                floatEl.style.opacity = '0';
+                floatEl.style.transform = 'translateY(10px)';
+                setTimeout(function () {
+                    floatEl.remove();
+                }, 300);
+            });
+        });
+    </script>
+@endif

resources/views/layouts/app.blade.php

@@ -63,6 +63,7 @@
     <x-navbar />
     @yield('content')
     <x-footer />
+    <x-newsletter.floating />
     @stack('bottom_scripts')
 </body>
 

resources/views/sales/index.blade.php

@@ -9,12 +9,23 @@
     @isset($sales)
         <x-sales.current_sales :sales="$sales" />
     @else
-        <section class="max-w-screen-xl mx-auto mt-12">
+        <section class="max-w-screen-xl px-4 mx-auto mt-12">
             <h1
                 class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
                 Sale Rotation</h1>
-            <p class="mt-6 text-lg text-center text-white">Sale Rotation is currently under construction due to breaking changes. We are sorry</p>
+            <p class="max-w-2xl mx-auto mt-6 text-lg text-center text-white/80">
+                Sale Rotation is currently under construction due to breaking changes. We're working hard to bring it back!
+            </p>
+
+            <h2 class="mt-10 text-2xl font-semibold text-center text-white/80">Get Notified When It's Back</h2>
+
+            <div class="flex justify-center mt-3">
+                <script async data-uid="b1690d605e" src="https://zenso.kit.com/b1690d605e/index.js"></script>
+            </div>
+
+            <p class="mt-2 text-sm text-center text-white/30">
+                By signing up, you'll automatically be notified when Sale Rotation is back online.
+            </p>
         </section>
     @endisset
-    <x-buymeacoffee.floating />
 @endsection