Skip to content

Commit cc281a4

Browse files
HassanZahirniaHassanZahirnia
committed
🚀 Add Product Hunt banner component
1 parent a6f8e6f commit cc281a4

File tree

2 files changed

+167
-1
lines changed

2 files changed

+167
-1
lines changed

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

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