🚀 Add new price drop banner component

resources/views/components/icons/banner/dollar-decrease.blade.php

@@ -0,0 +1,14 @@
+<svg
+    {{ $attributes }}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 14 14"
+>
+    <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M5 5.125C5 2.9849 6.7349 1.25 8.875 1.25s3.875 1.7349 3.875 3.875c0 1.68622 -1.0774 3.12241 -2.5833 3.65467 -0.32543 0.11503 -0.496 0.4721 -0.38098 0.79755 0.11503 0.32545 0.47208 0.49598 0.79758 0.381C12.573 9.25496 14 7.35743 14 5.125 14 2.29454 11.7055 0 8.875 0 6.04454 0 3.75 2.29454 3.75 5.125c0 0.84601 0.20548 1.64586 0.5698 2.35061 0.15851 0.30663 0.53558 0.42671 0.84221 0.26819 0.30663 -0.15851 0.4267 -0.53558 0.26819 -0.84221C5.15545 6.3701 5 5.76662 5 5.125Zm4.5 -2.75c0 -0.34518 -0.27982 -0.625 -0.625 -0.625s-0.625 0.27982 -0.625 0.625v0.13612c-0.75109 0.09109 -1.33301 0.73085 -1.33301 1.50652 0 0.71319 0.4966 1.33017 1.19333 1.48258l1.17848 0.25779c0.17195 0.03761 0.29487 0.19019 0.29487 0.36664 0 0.20741 -0.16819 0.37537 -0.375 0.37537h-0.32855L8.875 6.5l-0.00512 0.00002H8.542c-0.16231 0 -0.30205 -0.10345 -0.35383 -0.24995 -0.11503 -0.32545 -0.47211 -0.49602 -0.79755 -0.38099 -0.32545 0.11503 -0.49603 0.4721 -0.381 0.79755 0.19143 0.5416 0.66217 0.95235 1.24038 1.05724V7.875c0 0.34518 0.27982 0.625 0.625 0.625s0.625 -0.27982 0.625 -0.625v-0.15103c0.7586 -0.13737 1.3337 -0.80154 1.3337 -1.59932 0 -0.76343 -0.5315 -1.42453 -1.27777 -1.58776l-1.17849 -0.2578c-0.12287 -0.02688 -0.21045 -0.13568 -0.21045 -0.26145 0 -0.14781 0.11983 -0.26764 0.26764 -0.26764h0.43778l0.00259 0.00001 0.00259 -0.00001h0.33108c0.111 0 0.2101 0.04744 0.27966 0.12516 0.03267 0.03649 0.05794 0.07887 0.07417 0.12479 0.11502 0.32545 0.4721 0.49602 0.7975 0.381 0.3255 -0.11503 0.4961 -0.47211 0.381 -0.79756 -0.0715 -0.2025 -0.1817 -0.38601 -0.3213 -0.54188 -0.2353 -0.26298 -0.5566 -0.44954 -0.9197 -0.5154V2.375ZM5.64645 13.1464l1.05805 -1.058L5 10.3839l-1.05806 1.058c-0.24408 0.2441 -0.6398 0.2441 -0.88388 0L0.183058 8.56694c-0.2440774 -0.24408 -0.2440774 -0.6398 0 -0.88388 0.244078 -0.24408 0.639806 -0.24408 0.883882 0L3.5 10.1161l1.05806 -1.05804c0.24408 -0.24408 0.6398 -0.24408 0.88388 0l2.14645 2.14644 1.05806 -1.0581c0.143 -0.143 0.35805 -0.18573 0.54489 -0.1083 0.18684 0.0774 0.30866 0.2597 0.30866 0.4619v3c0 0.2761 -0.22386 0.5 -0.5 0.5H6c-0.20223 0 -0.38455 -0.1218 -0.46194 -0.3087 -0.07739 -0.1868 -0.03461 -0.4019 0.10839 -0.5449Z"
+        clip-rule="evenodd"
+        stroke-width="1"
+    ></path>
+</svg>

resources/views/components/navigation-bar.blade.php

@@ -3,7 +3,8 @@
     x-show="!showMobileMenu"
 >
     {{-- Announcement banner goes here --}}
-    <x-bifrost-banner />
+    {{-- <x-bifrost-banner /> --}}
+    <x-price-drop-banner />
 </div>
 <nav
     class="sticky top-0 z-50 flex flex-col items-center justify-center border-b px-2 transition duration-200 ease-out min-[500px]:px-3"

resources/views/components/price-drop-banner.blade.php

@@ -0,0 +1,59 @@
+<a
+    href="{{ route('pricing') }}#pricing"
+    onclick="fathom.trackEvent('alert_click');"
+    class="group relative z-30 flex flex-col items-center justify-center gap-x-3 gap-y-2.5 overflow-hidden bg-gradient-to-tl from-teal-100 to-gray-200/60 px-5 py-3 select-none 3xs:flex-row dark:from-sky-950/65 dark:to-gray-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"
+    >
+        {{-- Icon --}}
+        <x-icons.banner.dollar-decrease
+            class="h-5 shrink-0 dark:text-cyan-200"
+        />
+
+        {{-- Text --}}
+        <div>
+            <style>
+                .gradient-text {
+                    background-image: linear-gradient(
+                        90deg,
+                        var(--color-black) 0%,
+                        var(--color-teal-300) 35%,
+                        var(--color-black) 70%
+                    );
+                    background-size: 200% 100%;
+                    animation: shine 2s linear infinite;
+                }
+                .dark .gradient-text {
+                    background-image: linear-gradient(
+                        90deg,
+                        var(--color-white) 0%,
+                        var(--color-sky-300) 35%,
+                        var(--color-white) 70%
+                    );
+                }
+                @keyframes shine {
+                    from {
+                        background-position: 200% center;
+                    }
+                    to {
+                        background-position: 0% center;
+                    }
+                }
+            </style>
+            <div
+                class="gradient-text bg-clip-text tracking-tight text-pretty text-transparent sm:text-center"
+            >
+                Mobile <b>Pro</b> and <b>Max</b> licenses now up to <em>65% cheaper</em>!
+            </div>
+        </div>
+    </div>
+
+    {{-- Icon --}}
+    <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>

resources/views/livewire/mobile-pricing.blade.php

@@ -1,8 +1,9 @@
 <section
+    id="pricing"
     class="mx-auto mt-24 max-w-6xl"
     aria-labelledby="pricing-heading"
 >
-    @if(! $discounted)
+    @if (! $discounted)
         <header class="relative z-10 grid place-items-center text-center">
             {{-- Section Heading --}}
             <h2
@@ -75,21 +76,23 @@ class="mx-auto max-w-xl pt-2 text-base/relaxed text-gray-600 opacity-0"
                 })
             }
         "
-        class="mt-10 grid {{ $discounted ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-[repeat(auto-fill,minmax(19rem,1fr))]' }} items-start gap-x-6 gap-y-8"
+        class="{{ $discounted ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-[repeat(auto-fill,minmax(19rem,1fr))]' }} mt-10 grid items-start gap-x-6 gap-y-8"
         aria-label="Pricing plans"
     >
-        @if(! $discounted)
+        @if (! $discounted)
             {{-- Mini Plan --}}
             <div
-                class="dark:bg-mirage h-full rounded-2xl bg-gray-100 p-7 opacity-0"
+                class="h-full rounded-2xl bg-gray-100 p-7 opacity-0 dark:bg-mirage"
                 aria-labelledby="pro-plan-heading"
             >
                 {{-- Plan Name --}}
                 <h3
                     id="pro-plan-heading"
                     class="text-3xl font-semibold"
                 >
-                    <span class="rounded-full bg-zinc-300 dark:bg-zinc-600 px-4">
+                    <span
+                        class="rounded-full bg-zinc-300 px-4 dark:bg-zinc-600"
+                    >
                         Mini
                     </span>
                 </h3>
@@ -99,14 +102,14 @@ class="text-3xl font-semibold"
                     class="flex items-start gap-1.5 pt-5"
                     aria-label="Price: FREE (with Bifrost subscription)"
                 >
-                    <div class="text-5xl font-semibold">
-                        FREE
-                    </div>
+                    <div class="text-5xl font-semibold">FREE</div>
                     <div class="self-end pb-1.5 text-zinc-500">
                         with
-                        <a href="/bifrost"
-                           target="_blank"
-                           class="dark:text-zinc-300 underline underline-offset-2 hover:text-zinc-400 dark:hover:text-zinc-100 transition-colors">
+                        <a
+                            href="/bifrost"
+                            target="_blank"
+                            class="underline underline-offset-2 transition-colors hover:text-zinc-400 dark:text-zinc-300 dark:hover:text-zinc-100"
+                        >
                             Bifrost
                         </a>
                     </div>