go/sonr
1
0
Fork 0
mirror of https://github.com/sonr-io/sonr.git synced 2026-08-04 02:11:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add counter animation to hero section

Browse Source
This commit is contained in:
Prad Nukala
2024-09-29 21:42:46 -04:00
parent e764cce90a
commit 9fcdfe5243
4 changed files with 169 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg/nebula/components/sections/hero.templ
+39 -30
View File
@@ -44,41 +44,50 @@ templ SectionHero(hero Hero) {
</div>
</div>
</div>
</div>
<!-- Image -->
<div class="max-w-5xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10">
<img class="rounded-lg shadow-2xl" src="https://cdn.sonr.id/img/hero-portrait.png" width="700" height="700" alt="Hero"/>
</div>
<!-- Stats -->
<div class="max-w-5xl mx-auto px-4 sm:px-6">
<div class="max-w-sm mx-auto grid gap-12 sm:grid-cols-2 md:grid-cols-4 md:-mx-5 md:gap-0 items-start md:max-w-none">
<!-- 1st item -->
<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(476)" x-text="counterValue">0</span>K</h4>
<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
</div>
<!-- 2nd item -->
<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(1.44)" x-text="counterValue">0</span>K</h4>
<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
</div>
<!-- 3rd item -->
<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(1.5)" x-text="counterValue">0</span>M+</h4>
<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
</div>
<!-- 4th item -->
<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(192)" x-text="counterValue">0</span>K</h4>
<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
</div>
</div>
@counterAnimation()
@heroImage()
@stats()
</div>
</div>
</section>
}
templ heroImage() {
<!-- Image -->
<div class="max-w-5xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10">
<img
class="rounded-lg"
src="https://cdn.sonr.id/img/hero-clipped.svg"
width="560"
height="560"
alt="Hero"
/>
</div>
}
templ stats() {
<!-- Stats -->
<div class="max-w-4xl mx-auto px-4 sm:px-6 justify-center items-center">
<div class="max-w-sm mx-auto grid gap-12 sm:grid-cols-2 md:grid-cols-4 md:-mx-5 md:gap-0 items-end md:max-w-none">
<!-- 1st item -->
<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(476)" x-text="counterValue">0</span>K</h4>
<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
</div>
<!-- 2nd item -->
<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(1.44)" x-text="counterValue">0</span>K</h4>
<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
</div>
<!-- 3rd item -->
<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(1.5)" x-text="counterValue">0</span>M+</h4>
<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
</div>
</div>
@counterAnimation()
</div>
}
script counterAnimation() {
document.addEventListener('alpine:init', () => {
Alpine.data('counter', (target = 0, duration = 3000) => ({