Skip to content

Commit f5d9e0b

Browse files
HassanZahirniaHassanZahirnia
authored
✨ Add countdown to EAP banner (#128)
* ✨ Add countdown to EAP banner * 💄 Fix layout and spacing in EAP banner countdown component * 💄 Update spacing and layout for social networks section in sidebar navigation * 💄 Update button styles and icon sizes in documentation navigation toggle * 💄 Adjust padding for countdown labels in EAP banner
1 parent fc46041 commit f5d9e0b

File tree

6 files changed

+170
-76
lines changed

6 files changed

+170
-76
lines changed

‎package-lock.json

Lines changed: 50 additions & 32 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,19 @@
1010
"@alpinejs/persist": "^3.14.9",
1111
"@alpinejs/resize": "^3.14.9",
1212
"@docsearch/js": "^3.9.0",
13-
"@fontsource/poppins": "^5.2.5",
13+
"@fontsource/poppins": "^5.2.6",
1414
"@tailwindcss/typography": "^0.5.16",
1515
"alpinejs": "^3.14.9",
1616
"autoprefixer": "^10.4.21",
17-
"axios": "^1.8.3",
17+
"axios": "^1.9.0",
1818
"laravel-vite-plugin": "^0.7.8",
19-
"motion": "^12.5.0",
19+
"motion": "^12.10.4",
20+
"number-flow": "^0.5.7",
2021
"postcss": "^8.5.3",
21-
"prettier": "^3.3.3",
22-
"prettier-plugin-blade": "^2.1.16",
23-
"prettier-plugin-tailwindcss": "^0.6.5",
22+
"prettier": "^3.5.3",
23+
"prettier-plugin-blade": "^2.1.21",
24+
"prettier-plugin-tailwindcss": "^0.6.11",
2425
"tailwindcss": "^3.4.17",
25-
"vite": "^4.5.9"
26+
"vite": "^4.5.14"
2627
}
2728
}

‎resources/js/app.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import './fonts'
22
import './bootstrap'
3+
import 'number-flow'
34
import {
45
Livewire,
56
Alpine,
@@ -55,6 +56,49 @@ Alpine.magic('refAll', (el) => {
5556
return Array.from(el.querySelectorAll(`[x-ref="${refName}"]`))
5657
}
5758
})
59+
Alpine.data('countdown', (iso) => ({
60+
flows: {},
61+
init() {
62+
// Parse target date from ISO string and ensure it's treated as a specific point in time
63+
this.targetDate = new Date(iso).getTime()
64+
65+
// refs to the number-flow elements
66+
this.flows = {
67+
dd: this.$refs.dd, // days
68+
hh: this.$refs.hh, // hours
69+
mm: this.$refs.mm, // minutes
70+
ss: this.$refs.ss, // seconds
71+
}
72+
73+
// limit the rolling wheels so 59 ➜ 00 animates smoothly
74+
this.flows.hh.digits = { 1: { max: 2 }, 0: { max: 9 } } // hours 0-23
75+
this.flows.mm.digits = { 1: { max: 5 }, 0: { max: 9 } } // minutes 0-59
76+
this.flows.ss.digits = { 1: { max: 5 }, 0: { max: 9 } } // seconds 0-59
77+
78+
this.tick() // draw immediately
79+
this.timer = setInterval(() => this.tick(), 1_000)
80+
},
81+
tick() {
82+
const now = Date.now()
83+
const diff = Math.max(0, this.targetDate - now)
84+
85+
if (diff === 0) clearInterval(this.timer) // stop at zero
86+
87+
// Calculate days, hours, minutes, and seconds properly
88+
const days = Math.floor(diff / (24 * 3600 * 1000))
89+
const hours = Math.floor((diff % (24 * 3600 * 1000)) / (3600 * 1000))
90+
const minutes = Math.floor((diff % (3600 * 1000)) / (60 * 1000))
91+
const seconds = Math.floor((diff % (60 * 1000)) / 1000)
92+
93+
this.flows.dd.update(days)
94+
this.flows.hh.update(hours)
95+
this.flows.mm.update(minutes)
96+
this.flows.ss.update(seconds)
97+
},
98+
destroy() {
99+
clearInterval(this.timer)
100+
}, // tidy up
101+
}))
58102

59103
Livewire.start()
60104

‎resources/views/components/eap-banner.blade.php

Lines changed: 49 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,59 @@
11
<a
22
href="/mobile"
33
onclick="fathom.trackEvent('alert_click');"
4-
class="group relative z-30 flex items-center justify-center gap-2 bg-gradient-to-r from-[#352F5B] to-[#6056AA] px-5 py-2.5 text-center"
4+
class="group relative z-30 flex flex-col items-center justify-center gap-x-3 gap-y-2.5 bg-gradient-to-tl from-[#211d3a] to-[#6f64c3] px-5 py-3 md:flex-row"
55
>
6-
{{-- Text --}}
7-
<div
8-
class="transition duration-200 ease-in-out will-change-transform group-hover:-translate-x-1"
9-
>
6+
<div class="flex items-center justify-center gap-3">
7+
{{-- Text --}}
108
<div
11-
class="bg-clip-text tracking-tight text-transparent"
12-
style="
13-
background-image: linear-gradient(
14-
90deg,
15-
#8d89b5 0%,
16-
white 35%,
17-
#8d89b5 70%
18-
);
19-
background-size: 200% 100%;
20-
animation: shine 2s linear infinite;
21-
"
9+
class="transition duration-200 ease-in-out will-change-transform group-hover:-translate-x-1"
2210
>
23-
Join our Mobile Early Access Program
11+
<div
12+
class="bg-clip-text tracking-tight text-transparent"
13+
style="
14+
background-image: linear-gradient(
15+
90deg,
16+
#8d89b5 0%,
17+
white 35%,
18+
#8d89b5 70%
19+
);
20+
background-size: 200% 100%;
21+
animation: shine 2s linear infinite;
22+
"
23+
>
24+
Join our Mobile Early Access Program
25+
</div>
2426
</div>
27+
{{-- Arrow --}}
28+
<x-icons.right-arrow
29+
class="size-3 shrink-0 text-white transition duration-200 ease-in-out will-change-transform group-hover:translate-x-0.5"
30+
/>
2531
</div>
2632

27-
{{-- Arrow --}}
28-
<x-icons.right-arrow
29-
class="size-3 shrink-0 text-white transition duration-200 ease-in-out will-change-transform group-hover:translate-x-1"
30-
/>
33+
{{-- Countdown --}}
34+
<div
35+
x-data="countdown('2025-05-31T23:59:59')"
36+
class="flex items-center gap-1 rounded-lg px-2.5 py-1 text-sm text-white ring-1 ring-white/45 md:text-base"
37+
>
38+
<div class="pr-1 opacity-70">Ends in</div>
39+
<div class="flex min-w-8 justify-center gap-0.5">
40+
<number-flow x-ref="dd"></number-flow>
41+
<div class="pt-px text-sm opacity-70 md:pt-[3px]">d</div>
42+
</div>
43+
<div>:</div>
44+
<div class="flex min-w-8 justify-center gap-0.5">
45+
<number-flow x-ref="hh"></number-flow>
46+
<div class="pt-px text-sm opacity-70 md:pt-[3px]">h</div>
47+
</div>
48+
<div>:</div>
49+
<div class="flex min-w-8 justify-center gap-0.5">
50+
<number-flow x-ref="mm"></number-flow>
51+
<div class="pt-px text-sm opacity-70 md:pt-[3px]">m</div>
52+
</div>
53+
<div>:</div>
54+
<div class="flex min-w-8 justify-center gap-0.5">
55+
<number-flow x-ref="ss"></number-flow>
56+
<div class="pt-px text-sm opacity-70 md:pt-[3px]">s</div>
57+
</div>
58+
</div>
3159
</a>

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

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<x-eap-banner />
77
</div>
88
<nav
9-
class="sticky top-0 z-50 flex flex-col items-center justify-center px-3"
9+
class="sticky top-0 z-50 flex flex-col items-center justify-center px-3 pt-px"
1010
aria-label="Main Navigation"
1111
>
1212
<div
@@ -139,20 +139,20 @@ class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 transition duration-20
139139
<button
140140
type="button"
141141
@click="showDocsNavigation = !showDocsNavigation"
142-
class="-m-2 block p-2 focus:outline-none focus:ring-0 lg:hidden"
142+
class="-m-2 block p-2 text-gray-600 focus:outline-none focus:ring-0 lg:hidden dark:text-gray-300"
143143
aria-expanded="false"
144144
aria-controls="docs-navigation"
145145
aria-label="Toggle documentation menu"
146146
>
147147
<div x-show="!showDocsNavigation">
148148
<x-icons.menu
149-
class="h-6 w-6 text-gray-600 dark:text-gray-300"
149+
class="size-6"
150150
aria-hidden="true"
151151
/>
152152
</div>
153153
<div x-show="showDocsNavigation">
154154
<x-icons.close
155-
class="h-6 w-6 text-gray-600"
155+
class="size-6"
156156
aria-hidden="true"
157157
/>
158158
</div>
@@ -188,24 +188,25 @@ class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 transition duration-20
188188
aria-hidden="true"
189189
></div>
190190

191-
{{-- Link
192-
<a
191+
{{--
192+
Link
193+
<a
193194
href="{{ route('blog') }}"
194195
@class([
195-
'hidden transition duration-200 lg:block',
196-
'font-medium' => request()->routeIs('blog*'),
197-
'opacity-60 hover:opacity-100' => ! request()->routeIs('blog*'),
196+
'hidden transition duration-200 lg:block',
197+
'font-medium' => request()->routeIs('blog*'),
198+
'opacity-60 hover:opacity-100' => ! request()->routeIs('blog*'),
198199
])
199200
aria-current="{{ request()->routeIs('blog*') ? 'page' : 'false' }}"
200-
>
201+
>
201202
Blog
202-
</a>
203-
204-
{{-- Decorative circle -- }}
205-
<div
203+
</a>
204+
205+
{{-- Decorative circle -- }}
206+
<div
206207
class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 transition duration-200 lg:block dark:opacity-60"
207208
aria-hidden="true"
208-
></div>
209+
></div>
209210
--}}
210211

211212
{{-- Link --}}

0 commit comments

Comments
 (0)