go/sonr
go/sonr
1
1
Fork 0
mirror of https://github.com/onsonr/sonr.git synced 2025-03-10 21:09:11 +00:00
Code Issues Actions 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pkg/nebula/components/blocks/layout.templ
View File

@ -39,7 +39,11 @@ templ LayoutNoBody(title string, remote bool) {
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
</head> </head>
<main class="grow"> <main class="grow">
<body class="font-inter antialiased bg-white text-zinc-900 tracking-tight">
<div class="flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip">
{ children... } { children... }
</div>
</body>
</main> </main>
</html> </html>
} }

4
pkg/nebula/components/blocks/layout_templ.go
View File

@ -124,7 +124,7 @@ func LayoutNoBody(title string, remote bool) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</title><!-- Sets the status bar style to transparent --><meta name=\"apple-mobile-web-app-capable\" content=\"yes\"><meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\"></head><main class=\"grow\">") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</title><!-- Sets the status bar style to transparent --><meta name=\"apple-mobile-web-app-capable\" content=\"yes\"><meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\"></head><main class=\"grow\"><body class=\"font-inter antialiased bg-white text-zinc-900 tracking-tight\"><div class=\"flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -132,7 +132,7 @@ func LayoutNoBody(title string, remote bool) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</main></html>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></body></main></html>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }

29
pkg/nebula/components/sections/hero.templ
View File

@ -44,14 +44,30 @@ templ SectionHero(hero Hero) {
</div> </div>
</div> </div>
</div> </div>
@heroImage()
@stats()
</div> </div>
</div>
</section>
}
templ heroImage() {
<!-- Image --> <!-- 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"> <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"/> <img
class="rounded-lg"
src="https://cdn.sonr.id/img/hero-clipped.svg"
width="560"
height="560"
alt="Hero"
/>
</div> </div>
}
templ stats() {
<!-- Stats --> <!-- Stats -->
<div class="max-w-5xl mx-auto px-4 sm:px-6"> <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-start md:max-w-none"> <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 --> <!-- 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"> <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> <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>
@ -67,16 +83,9 @@ templ SectionHero(hero Hero) {
<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> <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> <p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
</div> </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> </div>
@counterAnimation() @counterAnimation()
</div> </div>
</div>
</section>
} }
script counterAnimation() { script counterAnimation() {

82
pkg/nebula/components/sections/hero_templ.go
View File

@ -138,11 +138,15 @@ func SectionHero(hero Hero) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a></div></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>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a></div></div></div></div>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = counterAnimation().Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = heroImage().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = stats().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -154,10 +158,76 @@ func SectionHero(hero Hero) templ.Component {
}) })
} }
func heroImage() templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var10 := templ.GetChildren(ctx)
if templ_7745c5c3_Var10 == nil {
templ_7745c5c3_Var10 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- 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>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return templ_7745c5c3_Err
})
}
func stats() templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var11 := templ.GetChildren(ctx)
if templ_7745c5c3_Var11 == nil {
templ_7745c5c3_Var11 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- 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>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = counterAnimation().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return templ_7745c5c3_Err
})
}
func counterAnimation() templ.ComponentScript { func counterAnimation() templ.ComponentScript {
return templ.ComponentScript{ return templ.ComponentScript{
Name: `__templ_counterAnimation_57a0`, Name: `__templ_counterAnimation_524d`,
Function: `function __templ_counterAnimation_57a0(){document.addEventListener('alpine:init', () => { Function: `function __templ_counterAnimation_524d(){document.addEventListener('alpine:init', () => {
Alpine.data('counter', (target = 0, duration = 3000) => ({ Alpine.data('counter', (target = 0, duration = 3000) => ({
startTimestamp: null, startTimestamp: null,
step: null, step: null,
@ -206,8 +276,8 @@ func counterAnimation() templ.ComponentScript {
})) }))
}) })
}`, }`,
Call: templ.SafeScript(`__templ_counterAnimation_57a0`), Call: templ.SafeScript(`__templ_counterAnimation_524d`),
CallInline: templ.SafeScriptInline(`__templ_counterAnimation_57a0`), CallInline: templ.SafeScriptInline(`__templ_counterAnimation_524d`),
} }
} }