Skip to content

Commit 2cdc57e

Browse files
HassanZahirniasimonhamp
HassanZahirnia
and
simonhamp
authored
🚀 Design a banner for Bifrost Product Hunt launch (#208)
* 🚀 Add Product Hunt banner component * ♿️ Improve accessibility * Tweak --------- Co-authored-by: Simon Hamp <simon.hamp@me.com>
1 parent a6f8e6f commit 2cdc57e

File tree

2 files changed

+177
-1
lines changed

2 files changed

+177
-1
lines changed

‎resources/views/components/bifrost-product-hunt-banner.blade.php‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
<a
2+
href="https://www.producthunt.com/products/nativephp?launch=bifrost-3"
3+
target="_blank"
4+
onclick="fathom.trackEvent('alert_click');"
5+
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"
6+
aria-label="Bifrost is on Product Hunt. Please give us an upvote."
7+
>
8+
{{-- Decorative left arrows --}}
9+
<div
10+
class="hidden flex-row-reverse gap-2 min-[31rem]:flex"
11+
aria-hidden="true"
12+
>
13+
<svg
14+
x-data="{
15+
init() {
16+
gsap.to($el, {
17+
keyframes: { autoAlpha: [0, 1, 0], y: [0, -10] },
18+
repeat: -1,
19+
ease: 'sine.in',
20+
duration: 2,
21+
})
22+
},
23+
}"
24+
xmlns="http://www.w3.org/2000/svg"
25+
class="w-2.5 mask-b-from-20% text-[var(--product-hunt)]"
26+
viewBox="0 0 9 16"
27+
fill="none"
28+
aria-hidden="true"
29+
focusable="false"
30+
>
31+
<path
32+
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+
fill="currentColor"
34+
/>
35+
</svg>
36+
<svg
37+
x-data="{
38+
init() {
39+
gsap.to($el, {
40+
keyframes: { autoAlpha: [0, 1, 0], y: [8, 0] },
41+
repeat: -1,
42+
ease: 'sine.in',
43+
duration: 2,
44+
})
45+
},
46+
}"
47+
xmlns="http://www.w3.org/2000/svg"
48+
class="w-3 mask-b-from-20% text-[var(--blue-ribbon)]"
49+
viewBox="0 0 9 16"
50+
fill="none"
51+
aria-hidden="true"
52+
focusable="false"
53+
>
54+
<path
55+
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"
56+
fill="currentColor"
57+
/>
58+
</svg>
59+
</div>
60+
61+
{{-- Text: part 1 --}}
62+
<span
63+
class="transition duration-200 ease-out will-change-transform group-hover:translate-x-0.5 dark:text-slate-200"
64+
>
65+
Bifrost is on
66+
</span>
67+
68+
{{-- Product Hunt badge --}}
69+
<span
70+
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"
71+
>
72+
<svg
73+
xmlns="http://www.w3.org/2000/svg"
74+
class="size-6 shrink-0"
75+
viewBox="0 0 21 20"
76+
fill="none"
77+
aria-hidden="true"
78+
focusable="false"
79+
>
80+
<path
81+
fill-rule="evenodd"
82+
clip-rule="evenodd"
83+
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"
84+
fill="currentColor"
85+
class="text-[var(--product-hunt)]"
86+
/>
87+
<path
88+
fill-rule="evenodd"
89+
clip-rule="evenodd"
90+
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"
91+
fill="white"
92+
/>
93+
</svg>
94+
<span class="font-medium whitespace-nowrap text-[var(--product-hunt)]">
95+
Product Hunt
96+
</span>
97+
</span>
98+
99+
{{-- Text: part 2 --}}
100+
<span
101+
class="w-full transition duration-200 ease-out will-change-transform group-hover:-translate-x-0.5 xs:w-auto dark:text-slate-200"
102+
>
103+
Please give us an upvote!
104+
</span>
105+
106+
{{-- Decorative right arrows --}}
107+
<div
108+
class="hidden gap-2 min-[31rem]:flex"
109+
aria-hidden="true"
110+
>
111+
<svg
112+
x-data="{
113+
init() {
114+
gsap.to($el, {
115+
keyframes: { autoAlpha: [0, 1, 0], y: [0, -10] },
116+
repeat: -1,
117+
ease: 'sine.in',
118+
duration: 2,
119+
})
120+
},
121+
}"
122+
xmlns="http://www.w3.org/2000/svg"
123+
class="w-2.5 mask-b-from-20% text-[var(--product-hunt)]"
124+
viewBox="0 0 9 16"
125+
fill="none"
126+
aria-hidden="true"
127+
focusable="false"
128+
>
129+
<path
130+
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"
131+
fill="currentColor"
132+
/>
133+
</svg>
134+
<svg
135+
x-data="{
136+
init() {
137+
gsap.to($el, {
138+
keyframes: { autoAlpha: [0, 1, 0], y: [8, 0] },
139+
repeat: -1,
140+
ease: 'sine.in',
141+
duration: 2,
142+
})
143+
},
144+
}"
145+
xmlns="http://www.w3.org/2000/svg"
146+
class="w-3 mask-b-from-20% text-[var(--blue-ribbon)]"
147+
viewBox="0 0 9 16"
148+
fill="none"
149+
aria-hidden="true"
150+
focusable="false"
151+
>
152+
<path
153+
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"
154+
fill="currentColor"
155+
/>
156+
</svg>
157+
</div>
158+
159+
{{-- Decorative blurs --}}
160+
<div
161+
class="absolute -top-5 right-1/2 -z-10 translate-x-1/2"
162+
aria-hidden="true"
163+
>
164+
<div
165+
class="h-12 w-40 -translate-x-36 rotate-30 rounded-full bg-[var(--product-hunt)] blur-[30px] dark:bg-red-500/60"
166+
></div>
167+
</div>
168+
<div
169+
class="absolute -top-5 right-1/2 -z-10 translate-x-1/2"
170+
aria-hidden="true"
171+
>
172+
<div
173+
class="h-12 w-40 translate-x-4 rotate-30 rounded-full bg-[var(--blue-ribbon)] blur-[30px] dark:bg-blue-400/60"
174+
></div>
175+
</div>
176+
</a>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
x-show="!showMobileMenu"
44
>
55
{{-- Announcement banner goes here --}}
6-
<x-bifrost-banner />
6+
<x-bifrost-product-hunt-banner />
77
</div>
88
<nav
99
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"

0 commit comments

Comments
 (0)