From cc281a43f2d3634be4fb9433ee6321969fc57245 Mon Sep 17 00:00:00 2001
From: HassanZahirnia <m.hassan.zahirnia@gmail.com>
Date: Mon, 8 Sep 2025 00:16:55 +0330
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=9A=80=20Add=20Product=20Hunt=20banne?=
 =?UTF-8?q?r=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bifrost-product-hunt-banner.blade.php     | 166 ++++++++++++++++++
 .../views/components/navigation-bar.blade.php |   2 +-
 2 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 resources/views/components/bifrost-product-hunt-banner.blade.php

diff --git a/resources/views/components/bifrost-product-hunt-banner.blade.php b/resources/views/components/bifrost-product-hunt-banner.blade.php
new file mode 100644
index 00000000..dff7bc89
--- /dev/null
+++ b/resources/views/components/bifrost-product-hunt-banner.blade.php
@@ -0,0 +1,166 @@
+<a
+    href="https://www.producthunt.com/"
+    onclick="fathom.trackEvent('alert_click');"
+    class="group relative z-30 flex flex-wrap items-center justify-center gap-x-2 gap-y-2.5 overflow-hidden bg-gray-100 px-5 py-2.5 text-center text-sm tracking-tight text-pretty select-none [--blue-ribbon:#3B63FE] [--product-hunt:#FF6154] sm:text-base dark:bg-gray-950/50"
+>
+    {{-- Left arrows --}}
+    <div class="hidden flex-row-reverse gap-2 min-[31rem]:flex">
+        <svg
+            x-data="{
+                init() {
+                    gsap.to($el, {
+                        keyframes: {
+                            autoAlpha: [0, 1, 0],
+                            y: [0, -10],
+                        },
+                        repeat: -1,
+                        ease: 'sine.in',
+                        duration: 2,
+                    })
+                },
+            }"
+            xmlns="http://www.w3.org/2000/svg"
+            class="w-2.5 mask-b-from-20% text-[var(--product-hunt)]"
+            viewBox="0 0 9 16"
+            fill="none"
+        >
+            <path
+                d="M4.5 0.749999L0.169873 8.25L8.83013 8.25L4.5 0.749999ZM4.5 15.75L5.25 15.75L5.25 7.5L4.5 7.5L3.75 7.5L3.75 15.75L4.5 15.75Z"
+                fill="currentColor"
+            />
+        </svg>
+        <svg
+            x-data="{
+                init() {
+                    gsap.to($el, {
+                        keyframes: {
+                            autoAlpha: [0, 1, 0],
+                            y: [8, 0],
+                        },
+                        repeat: -1,
+                        ease: 'sine.in',
+                        duration: 2,
+                    })
+                },
+            }"
+            xmlns="http://www.w3.org/2000/svg"
+            class="w-3 mask-b-from-20% text-[var(--blue-ribbon)]"
+            viewBox="0 0 9 16"
+            fill="none"
+        >
+            <path
+                d="M4.5 0.749999L0.169873 8.25L8.83013 8.25L4.5 0.749999ZM4.5 15.75L5.25 15.75L5.25 7.5L4.5 7.5L3.75 7.5L3.75 15.75L4.5 15.75Z"
+                fill="currentColor"
+            />
+        </svg>
+    </div>
+
+    {{-- Label --}}
+    <div
+        class="transition duration-200 ease-out will-change-transform group-hover:translate-x-0.5 dark:text-slate-200"
+    >
+        Bifrost dropped on
+    </div>
+
+    {{-- Product Hunt --}}
+    <div
+        class="flex items-center gap-1.5 rounded-full bg-white/50 py-1 pr-3 pl-1 transition duration-200 ease-out will-change-transform group-hover:scale-95 dark:bg-black/50"
+    >
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-6 shrink-0"
+            viewBox="0 0 21 20"
+            fill="none"
+        >
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M20.5 10C20.5 15.523 16.023 20 10.5 20C4.977 20 0.5 15.523 0.5 10C0.5 4.477 4.977 0 10.5 0C16.023 0 20.5 4.477 20.5 10Z"
+                fill="currentColor"
+                class="text-[var(--product-hunt)]"
+            />
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M11.8335 10H9V7H11.8335C12.2313 7 12.6129 7.15804 12.8942 7.43934C13.1755 7.72064 13.3335 8.10218 13.3335 8.5C13.3335 8.89782 13.1755 9.27936 12.8942 9.56066C12.6129 9.84196 12.2313 10 11.8335 10ZM11.8335 5H7V15H9V12H11.8335C12.7618 12 13.652 11.6313 14.3084 10.9749C14.9648 10.3185 15.3335 9.42826 15.3335 8.5C15.3335 7.57174 14.9648 6.6815 14.3084 6.02513C13.652 5.36875 12.7618 5 11.8335 5Z"
+                fill="white"
+            />
+        </svg>
+        <span class="font-medium whitespace-nowrap text-[var(--product-hunt)]">
+            Product Hunt
+        </span>
+    </div>
+
+    {{-- Label --}}
+    <div
+        class="w-full transition duration-200 ease-out will-change-transform group-hover:-translate-x-0.5 xs:w-auto dark:text-slate-200"
+    >
+        Please upvote!
+    </div>
+
+    {{-- Right arrows --}}
+    <div class="hidden gap-2 min-[31rem]:flex">
+        <svg
+            x-data="{
+                init() {
+                    gsap.to($el, {
+                        keyframes: {
+                            autoAlpha: [0, 1, 0],
+                            y: [0, -10],
+                        },
+                        repeat: -1,
+                        ease: 'sine.in',
+                        duration: 2,
+                    })
+                },
+            }"
+            xmlns="http://www.w3.org/2000/svg"
+            class="w-2.5 mask-b-from-20% text-[var(--product-hunt)]"
+            viewBox="0 0 9 16"
+            fill="none"
+        >
+            <path
+                d="M4.5 0.749999L0.169873 8.25L8.83013 8.25L4.5 0.749999ZM4.5 15.75L5.25 15.75L5.25 7.5L4.5 7.5L3.75 7.5L3.75 15.75L4.5 15.75Z"
+                fill="currentColor"
+            />
+        </svg>
+        <svg
+            x-data="{
+                init() {
+                    gsap.to($el, {
+                        keyframes: {
+                            autoAlpha: [0, 1, 0],
+                            y: [8, 0],
+                        },
+                        repeat: -1,
+                        ease: 'sine.in',
+                        duration: 2,
+                    })
+                },
+            }"
+            xmlns="http://www.w3.org/2000/svg"
+            class="w-3 mask-b-from-20% text-[var(--blue-ribbon)]"
+            viewBox="0 0 9 16"
+            fill="none"
+        >
+            <path
+                d="M4.5 0.749999L0.169873 8.25L8.83013 8.25L4.5 0.749999ZM4.5 15.75L5.25 15.75L5.25 7.5L4.5 7.5L3.75 7.5L3.75 15.75L4.5 15.75Z"
+                fill="currentColor"
+            />
+        </svg>
+    </div>
+
+    {{-- Left blur --}}
+    <div class="absolute -top-5 right-1/2 -z-10 translate-x-1/2">
+        <div
+            class="h-12 w-40 -translate-x-20 rotate-30 rounded-full bg-[var(--product-hunt)] blur-[30px] dark:bg-red-500/60"
+        ></div>
+    </div>
+
+    {{-- Right blur --}}
+    <div class="absolute -top-5 right-1/2 -z-10 translate-x-1/2">
+        <div
+            class="h-12 w-40 translate-x-20 rotate-30 rounded-full bg-[var(--blue-ribbon)] blur-[30px] dark:bg-blue-400/60"
+        ></div>
+    </div>
+</a>
diff --git a/resources/views/components/navigation-bar.blade.php b/resources/views/components/navigation-bar.blade.php
index 7024a9dd..8b7d8061 100644
--- a/resources/views/components/navigation-bar.blade.php
+++ b/resources/views/components/navigation-bar.blade.php
@@ -3,7 +3,7 @@
     x-show="!showMobileMenu"
 >
     {{-- Announcement banner goes here --}}
-    <x-bifrost-banner />
+    <x-bifrost-product-hunt-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"

From bb41019dd032da13c32f74904d7575ea31c7f673 Mon Sep 17 00:00:00 2001
From: HassanZahirnia <m.hassan.zahirnia@gmail.com>
Date: Mon, 8 Sep 2025 00:43:48 +0330
Subject: [PATCH 2/3] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20Improve=20accessibilit?=
 =?UTF-8?q?y?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bifrost-product-hunt-banner.blade.php     | 79 +++++++++++--------
 1 file changed, 44 insertions(+), 35 deletions(-)

diff --git a/resources/views/components/bifrost-product-hunt-banner.blade.php b/resources/views/components/bifrost-product-hunt-banner.blade.php
index dff7bc89..b891f198 100644
--- a/resources/views/components/bifrost-product-hunt-banner.blade.php
+++ b/resources/views/components/bifrost-product-hunt-banner.blade.php
@@ -1,18 +1,19 @@
 <a
     href="https://www.producthunt.com/"
     onclick="fathom.trackEvent('alert_click');"
-    class="group relative z-30 flex flex-wrap items-center justify-center gap-x-2 gap-y-2.5 overflow-hidden bg-gray-100 px-5 py-2.5 text-center text-sm tracking-tight text-pretty select-none [--blue-ribbon:#3B63FE] [--product-hunt:#FF6154] sm:text-base dark:bg-gray-950/50"
+    class="group relative z-30 flex flex-wrap items-center justify-center gap-x-2 gap-y-2.5 overflow-hidden bg-gray-100 px-5 py-2 text-center text-sm tracking-tight text-pretty select-none [--blue-ribbon:#3B63FE] [--product-hunt:#FF6154] sm:text-base dark:bg-gray-950/50"
+    aria-label="Bifrost dropped on Product Hunt. Please upvote."
 >
-    {{-- Left arrows --}}
-    <div class="hidden flex-row-reverse gap-2 min-[31rem]:flex">
+    {{-- Decorative left arrows --}}
+    <div
+        class="hidden flex-row-reverse gap-2 min-[31rem]:flex"
+        aria-hidden="true"
+    >
         <svg
             x-data="{
                 init() {
                     gsap.to($el, {
-                        keyframes: {
-                            autoAlpha: [0, 1, 0],
-                            y: [0, -10],
-                        },
+                        keyframes: { autoAlpha: [0, 1, 0], y: [0, -10] },
                         repeat: -1,
                         ease: 'sine.in',
                         duration: 2,
@@ -23,6 +24,8 @@ class="group relative z-30 flex flex-wrap items-center justify-center gap-x-2 ga
             class="w-2.5 mask-b-from-20% text-[var(--product-hunt)]"
             viewBox="0 0 9 16"
             fill="none"
+            aria-hidden="true"
+            focusable="false"
         >
             <path
                 d="M4.5 0.749999L0.169873 8.25L8.83013 8.25L4.5 0.749999ZM4.5 15.75L5.25 15.75L5.25 7.5L4.5 7.5L3.75 7.5L3.75 15.75L4.5 15.75Z"
@@ -33,10 +36,7 @@ class="w-2.5 mask-b-from-20% text-[var(--product-hunt)]"
             x-data="{
                 init() {
                     gsap.to($el, {
-                        keyframes: {
-                            autoAlpha: [0, 1, 0],
-                            y: [8, 0],
-                        },
+                        keyframes: { autoAlpha: [0, 1, 0], y: [8, 0] },
                         repeat: -1,
                         ease: 'sine.in',
                         duration: 2,
@@ -47,6 +47,8 @@ class="w-2.5 mask-b-from-20% text-[var(--product-hunt)]"
             class="w-3 mask-b-from-20% text-[var(--blue-ribbon)]"
             viewBox="0 0 9 16"
             fill="none"
+            aria-hidden="true"
+            focusable="false"
         >
             <path
                 d="M4.5 0.749999L0.169873 8.25L8.83013 8.25L4.5 0.749999ZM4.5 15.75L5.25 15.75L5.25 7.5L4.5 7.5L3.75 7.5L3.75 15.75L4.5 15.75Z"
@@ -55,15 +57,15 @@ class="w-3 mask-b-from-20% text-[var(--blue-ribbon)]"
         </svg>
     </div>
 
-    {{-- Label --}}
-    <div
+    {{-- Text: part 1 --}}
+    <span
         class="transition duration-200 ease-out will-change-transform group-hover:translate-x-0.5 dark:text-slate-200"
     >
         Bifrost dropped on
-    </div>
+    </span>
 
-    {{-- Product Hunt --}}
-    <div
+    {{-- Product Hunt badge --}}
+    <span
         class="flex items-center gap-1.5 rounded-full bg-white/50 py-1 pr-3 pl-1 transition duration-200 ease-out will-change-transform group-hover:scale-95 dark:bg-black/50"
     >
         <svg
@@ -71,6 +73,8 @@ class="flex items-center gap-1.5 rounded-full bg-white/50 py-1 pr-3 pl-1 transit
             class="size-6 shrink-0"
             viewBox="0 0 21 20"
             fill="none"
+            aria-hidden="true"
+            focusable="false"
         >
             <path
                 fill-rule="evenodd"
@@ -89,25 +93,25 @@ class="text-[var(--product-hunt)]"
         <span class="font-medium whitespace-nowrap text-[var(--product-hunt)]">
             Product Hunt
         </span>
-    </div>
+    </span>
 
-    {{-- Label --}}
-    <div
+    {{-- Text: part 2 --}}
+    <span
         class="w-full transition duration-200 ease-out will-change-transform group-hover:-translate-x-0.5 xs:w-auto dark:text-slate-200"
     >
         Please upvote!
-    </div>
+    </span>
 
-    {{-- Right arrows --}}
-    <div class="hidden gap-2 min-[31rem]:flex">
+    {{-- Decorative right arrows --}}
+    <div
+        class="hidden gap-2 min-[31rem]:flex"
+        aria-hidden="true"
+    >
         <svg
             x-data="{
                 init() {
                     gsap.to($el, {
-                        keyframes: {
-                            autoAlpha: [0, 1, 0],
-                            y: [0, -10],
-                        },
+                        keyframes: { autoAlpha: [0, 1, 0], y: [0, -10] },
                         repeat: -1,
                         ease: 'sine.in',
                         duration: 2,
@@ -118,6 +122,8 @@ class="w-full transition duration-200 ease-out will-change-transform group-hover
             class="w-2.5 mask-b-from-20% text-[var(--product-hunt)]"
             viewBox="0 0 9 16"
             fill="none"
+            aria-hidden="true"
+            focusable="false"
         >
             <path
                 d="M4.5 0.749999L0.169873 8.25L8.83013 8.25L4.5 0.749999ZM4.5 15.75L5.25 15.75L5.25 7.5L4.5 7.5L3.75 7.5L3.75 15.75L4.5 15.75Z"
@@ -128,10 +134,7 @@ class="w-2.5 mask-b-from-20% text-[var(--product-hunt)]"
             x-data="{
                 init() {
                     gsap.to($el, {
-                        keyframes: {
-                            autoAlpha: [0, 1, 0],
-                            y: [8, 0],
-                        },
+                        keyframes: { autoAlpha: [0, 1, 0], y: [8, 0] },
                         repeat: -1,
                         ease: 'sine.in',
                         duration: 2,
@@ -142,6 +145,8 @@ class="w-2.5 mask-b-from-20% text-[var(--product-hunt)]"
             class="w-3 mask-b-from-20% text-[var(--blue-ribbon)]"
             viewBox="0 0 9 16"
             fill="none"
+            aria-hidden="true"
+            focusable="false"
         >
             <path
                 d="M4.5 0.749999L0.169873 8.25L8.83013 8.25L4.5 0.749999ZM4.5 15.75L5.25 15.75L5.25 7.5L4.5 7.5L3.75 7.5L3.75 15.75L4.5 15.75Z"
@@ -150,15 +155,19 @@ class="w-3 mask-b-from-20% text-[var(--blue-ribbon)]"
         </svg>
     </div>
 
-    {{-- Left blur --}}
-    <div class="absolute -top-5 right-1/2 -z-10 translate-x-1/2">
+    {{-- Decorative blurs --}}
+    <div
+        class="absolute -top-5 right-1/2 -z-10 translate-x-1/2"
+        aria-hidden="true"
+    >
         <div
             class="h-12 w-40 -translate-x-20 rotate-30 rounded-full bg-[var(--product-hunt)] blur-[30px] dark:bg-red-500/60"
         ></div>
     </div>
-
-    {{-- Right blur --}}
-    <div class="absolute -top-5 right-1/2 -z-10 translate-x-1/2">
+    <div
+        class="absolute -top-5 right-1/2 -z-10 translate-x-1/2"
+        aria-hidden="true"
+    >
         <div
             class="h-12 w-40 translate-x-20 rotate-30 rounded-full bg-[var(--blue-ribbon)] blur-[30px] dark:bg-blue-400/60"
         ></div>

From 80f69f2438df263a8a2a7f88f5f46c6c225c98d5 Mon Sep 17 00:00:00 2001
From: Simon Hamp <simon.hamp@me.com>
Date: Tue, 9 Sep 2025 07:12:48 +0100
Subject: [PATCH 3/3] Tweak

---
 .../bifrost-product-hunt-banner.blade.php           | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/resources/views/components/bifrost-product-hunt-banner.blade.php b/resources/views/components/bifrost-product-hunt-banner.blade.php
index b891f198..52e6e4b4 100644
--- a/resources/views/components/bifrost-product-hunt-banner.blade.php
+++ b/resources/views/components/bifrost-product-hunt-banner.blade.php
@@ -1,8 +1,9 @@
 <a
-    href="https://www.producthunt.com/"
+    href="https://www.producthunt.com/products/nativephp?launch=bifrost-3"
+    target="_blank"
     onclick="fathom.trackEvent('alert_click');"
     class="group relative z-30 flex flex-wrap items-center justify-center gap-x-2 gap-y-2.5 overflow-hidden bg-gray-100 px-5 py-2 text-center text-sm tracking-tight text-pretty select-none [--blue-ribbon:#3B63FE] [--product-hunt:#FF6154] sm:text-base dark:bg-gray-950/50"
-    aria-label="Bifrost dropped on Product Hunt. Please upvote."
+    aria-label="Bifrost is on Product Hunt. Please give us an upvote."
 >
     {{-- Decorative left arrows --}}
     <div
@@ -61,7 +62,7 @@ class="w-3 mask-b-from-20% text-[var(--blue-ribbon)]"
     <span
         class="transition duration-200 ease-out will-change-transform group-hover:translate-x-0.5 dark:text-slate-200"
     >
-        Bifrost dropped on
+        Bifrost is on
     </span>
 
     {{-- Product Hunt badge --}}
@@ -99,7 +100,7 @@ class="text-[var(--product-hunt)]"
     <span
         class="w-full transition duration-200 ease-out will-change-transform group-hover:-translate-x-0.5 xs:w-auto dark:text-slate-200"
     >
-        Please upvote!
+        Please give us an upvote!
     </span>
 
     {{-- Decorative right arrows --}}
@@ -161,7 +162,7 @@ class="absolute -top-5 right-1/2 -z-10 translate-x-1/2"
         aria-hidden="true"
     >
         <div
-            class="h-12 w-40 -translate-x-20 rotate-30 rounded-full bg-[var(--product-hunt)] blur-[30px] dark:bg-red-500/60"
+            class="h-12 w-40 -translate-x-36 rotate-30 rounded-full bg-[var(--product-hunt)] blur-[30px] dark:bg-red-500/60"
         ></div>
     </div>
     <div
@@ -169,7 +170,7 @@ class="absolute -top-5 right-1/2 -z-10 translate-x-1/2"
         aria-hidden="true"
     >
         <div
-            class="h-12 w-40 translate-x-20 rotate-30 rounded-full bg-[var(--blue-ribbon)] blur-[30px] dark:bg-blue-400/60"
+            class="h-12 w-40 translate-x-4 rotate-30 rounded-full bg-[var(--blue-ribbon)] blur-[30px] dark:bg-blue-400/60"
         ></div>
     </div>
 </a>