go/sonr
1
0
Fork 0
mirror of https://github.com/sonr-io/sonr.git synced 2026-08-03 01:41:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add registration page

Browse Source
This commit is contained in:
Prad Nukala
2024-09-29 18:38:41 -04:00
parent acdd0eae39
commit e764cce90a
8 changed files with 74 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg/nebula/components/sections/hero.templ
+51 -51
View File
@@ -46,11 +46,11 @@ templ SectionHero(hero Hero) {
</div>
</div>
<!-- Image -->
<div class="max-w-6xl 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-safe.svg" width="620" height="620" alt="Hero"/>
<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-6xl mx-auto px-4 sm:px-6">
<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">
@@ -80,52 +80,52 @@ templ SectionHero(hero Hero) {
}
script counterAnimation() {
document.addEventListener('alpine:init', () => {
Alpine.data('counter', (target = 0, duration = 3000) => ({
startTimestamp: null,
step: null,
rawValue: 0,
counterValue: 0,
target: target,
precision: (target % 1 === 0) ? 0 : (target.toString().split('.')[1] || []).length,
animationRequestId: null,
animationCompleted: false,
observer: null,
init() {
// Intersection observer to watch visibility
this.observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
// Check if element is in view
if (entry.isIntersecting && !this.animationCompleted) {
this.startAnimation()
}
})
})
this.observer.observe(this.$el)
},
startAnimation() {
this.step = (timestamp) => {
if (!this.startTimestamp) this.startTimestamp = timestamp
const progress = Math.min((timestamp - this.startTimestamp) / duration, 1)
const easedProgress = this.easeOut(progress)
this.rawValue = parseFloat((easedProgress * this.target).toFixed(this.precision))
this.counterValue = this.rawValue.toFixed(this.precision)
if (progress < 1) {
this.animationRequestId = window.requestAnimationFrame(this.step)
} else {
this.animationCompleted = true
}
}
this.animationRequestId = window.requestAnimationFrame(this.step);
},
easeOut(t) {
return 1 - Math.pow(1 - t, 5)
},
destroy() {
// Detach the handler, avoiding memory and side-effect leakage
this.animationRequestId && window.cancelAnimationFrame(this.step)
this.observer && this.observer.disconnect()
},
}))
})
document.addEventListener('alpine:init', () => {
Alpine.data('counter', (target = 0, duration = 3000) => ({
startTimestamp: null,
step: null,
rawValue: 0,
counterValue: 0,
target: target,
precision: (target % 1 === 0) ? 0 : (target.toString().split('.')[1] || []).length,
animationRequestId: null,
animationCompleted: false,
observer: null,
init() {
// Intersection observer to watch visibility
this.observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
// Check if element is in view
if (entry.isIntersecting && !this.animationCompleted) {
this.startAnimation()
}
})
})
this.observer.observe(this.$el)
},
startAnimation() {
this.step = (timestamp) => {
if (!this.startTimestamp) this.startTimestamp = timestamp
const progress = Math.min((timestamp - this.startTimestamp) / duration, 1)
const easedProgress = this.easeOut(progress)
this.rawValue = parseFloat((easedProgress * this.target).toFixed(this.precision))
this.counterValue = this.rawValue.toFixed(this.precision)
if (progress < 1) {
this.animationRequestId = window.requestAnimationFrame(this.step)
} else {
this.animationCompleted = true
}
}
this.animationRequestId = window.requestAnimationFrame(this.step);
},
easeOut(t) {
return 1 - Math.pow(1 - t, 5)
},
destroy() {
// Detach the handler, avoiding memory and side-effect leakage
this.animationRequestId && window.cancelAnimationFrame(this.step)
this.observer && this.observer.disconnect()
},
}))
})
}