mirror of
https://github.com/sonr-io/sonr.git
synced 2026-08-02 17:31:39 +00:00
refactor: adjust devbox configuration to reflect nebula changes
This commit is contained in:
Prad Nukala
@@ -0,0 +1,100 @@
|
||||
package blocks
|
||||
|
||||
templ FooterMarketingNav() {
|
||||
<!-- Site footer -->
|
||||
<footer>
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<!-- Top area: Blocks -->
|
||||
<div class="grid sm:grid-cols-12 gap-8 py-8 md:py-12 border-t border-zinc-200">
|
||||
<!-- 1st block -->
|
||||
<div class="sm:col-span-6 md:col-span-3 lg:col-span-6 max-sm:order-1 flex flex-col">
|
||||
<div class="mb-4">
|
||||
<!-- Logo -->
|
||||
<a class="flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20" href="index.html">
|
||||
<img src="./images/logo.png" width="24" height="24" alt="Logo"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="grow text-sm text-zinc-500">© Cruip.com. All rights reserved.</div>
|
||||
<!-- Social links -->
|
||||
<ul class="flex space-x-4 mt-4 mb-1">
|
||||
<li>
|
||||
<a class="flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition" href="#0" aria-label="Twitter">
|
||||
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
|
||||
<path d="m7.063 3 3.495 4.475L14.601 3h2.454l-5.359 5.931L18 17h-4.938l-3.866-4.893L4.771 17H2.316l5.735-6.342L2 3h5.063Zm-.74 1.347H4.866l8.875 11.232h1.36L6.323 4.347Z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition" href="#0" aria-label="Medium">
|
||||
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
|
||||
<path d="M17 2H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Zm-1.708 3.791-.858.823a.251.251 0 0 0-.1.241V12.9a.251.251 0 0 0 .1.241l.838.823v.181h-4.215v-.181l.868-.843c.085-.085.085-.11.085-.241V7.993L9.6 14.124h-.329l-2.81-6.13V12.1a.567.567 0 0 0 .156.472l1.129 1.37v.181h-3.2v-.181l1.129-1.37a.547.547 0 0 0 .146-.472V7.351A.416.416 0 0 0 5.683 7l-1-1.209V5.61H7.8l2.4 5.283 2.122-5.283h2.971l-.001.181Z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition" href="#0" aria-label="Telegram">
|
||||
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
|
||||
<path d="M17.968 3.276a.338.338 0 0 0-.232-.253 1.192 1.192 0 0 0-.63.045S3.087 8.106 2.286 8.664c-.172.121-.23.19-.259.272-.138.4.293.573.293.573l3.613 1.177a.388.388 0 0 0 .183-.011c.822-.519 8.27-5.222 8.7-5.38.068-.02.118 0 .1.049-.172.6-6.606 6.319-6.64 6.354a.138.138 0 0 0-.05.118l-.337 3.528s-.142 1.1.956 0a30.66 30.66 0 0 1 1.9-1.738c1.242.858 2.58 1.806 3.156 2.3a1 1 0 0 0 .732.283.825.825 0 0 0 .7-.622S17.894 5.292 17.98 3.909c.008-.135.021-.217.021-.317a1.177 1.177 0 0 0-.032-.316Z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 2nd block -->
|
||||
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
|
||||
<h6 class="text-sm text-zinc-800 font-medium mb-2">Company</h6>
|
||||
<ul class="text-sm space-y-2">
|
||||
<li>
|
||||
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">About us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Diversity & Inclusion</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Careers</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Financial statements</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 3rd block -->
|
||||
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
|
||||
<h6 class="text-sm text-zinc-800 font-medium mb-2">Resources</h6>
|
||||
<ul class="text-sm space-y-2">
|
||||
<li>
|
||||
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Community</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Terms of service</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Collaboration features</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 4th block -->
|
||||
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
|
||||
<h6 class="text-sm text-zinc-800 font-medium mb-2">Legals</h6>
|
||||
<ul class="text-sm space-y-2">
|
||||
<li>
|
||||
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Refund policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Terms & Conditions</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Privacy policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Brand Kit</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
package blocks
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
import "github.com/a-h/templ"
|
||||
import templruntime "github.com/a-h/templ/runtime"
|
||||
|
||||
func FooterMarketingNav() 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_Var1 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var1 == nil {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Site footer --><footer><div class=\"max-w-6xl mx-auto px-4 sm:px-6\"><!-- Top area: Blocks --><div class=\"grid sm:grid-cols-12 gap-8 py-8 md:py-12 border-t border-zinc-200\"><!-- 1st block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-6 max-sm:order-1 flex flex-col\"><div class=\"mb-4\"><!-- Logo --><a class=\"flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20\" href=\"index.html\"><img src=\"./images/logo.png\" width=\"24\" height=\"24\" alt=\"Logo\"></a></div><div class=\"grow text-sm text-zinc-500\">© Cruip.com. All rights reserved.</div><!-- Social links --><ul class=\"flex space-x-4 mt-4 mb-1\"><li><a class=\"flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition\" href=\"#0\" aria-label=\"Twitter\"><svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"m7.063 3 3.495 4.475L14.601 3h2.454l-5.359 5.931L18 17h-4.938l-3.866-4.893L4.771 17H2.316l5.735-6.342L2 3h5.063Zm-.74 1.347H4.866l8.875 11.232h1.36L6.323 4.347Z\"></path></svg></a></li><li><a class=\"flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition\" href=\"#0\" aria-label=\"Medium\"><svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"M17 2H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Zm-1.708 3.791-.858.823a.251.251 0 0 0-.1.241V12.9a.251.251 0 0 0 .1.241l.838.823v.181h-4.215v-.181l.868-.843c.085-.085.085-.11.085-.241V7.993L9.6 14.124h-.329l-2.81-6.13V12.1a.567.567 0 0 0 .156.472l1.129 1.37v.181h-3.2v-.181l1.129-1.37a.547.547 0 0 0 .146-.472V7.351A.416.416 0 0 0 5.683 7l-1-1.209V5.61H7.8l2.4 5.283 2.122-5.283h2.971l-.001.181Z\"></path></svg></a></li><li><a class=\"flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition\" href=\"#0\" aria-label=\"Telegram\"><svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"M17.968 3.276a.338.338 0 0 0-.232-.253 1.192 1.192 0 0 0-.63.045S3.087 8.106 2.286 8.664c-.172.121-.23.19-.259.272-.138.4.293.573.293.573l3.613 1.177a.388.388 0 0 0 .183-.011c.822-.519 8.27-5.222 8.7-5.38.068-.02.118 0 .1.049-.172.6-6.606 6.319-6.64 6.354a.138.138 0 0 0-.05.118l-.337 3.528s-.142 1.1.956 0a30.66 30.66 0 0 1 1.9-1.738c1.242.858 2.58 1.806 3.156 2.3a1 1 0 0 0 .732.283.825.825 0 0 0 .7-.622S17.894 5.292 17.98 3.909c.008-.135.021-.217.021-.317a1.177 1.177 0 0 0-.032-.316Z\"></path></svg></a></li></ul></div><!-- 2nd block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-2\"><h6 class=\"text-sm text-zinc-800 font-medium mb-2\">Company</h6><ul class=\"text-sm space-y-2\"><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">About us</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Diversity & Inclusion</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Blog</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Careers</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Financial statements</a></li></ul></div><!-- 3rd block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-2\"><h6 class=\"text-sm text-zinc-800 font-medium mb-2\">Resources</h6><ul class=\"text-sm space-y-2\"><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Community</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Terms of service</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Collaboration features</a></li></ul></div><!-- 4th block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-2\"><h6 class=\"text-sm text-zinc-800 font-medium mb-2\">Legals</h6><ul class=\"text-sm space-y-2\"><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Refund policy</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Terms & Conditions</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Privacy policy</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Brand Kit</a></li></ul></div></div></div></footer>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
var _ = templruntime.GeneratedTemplate
|
||||
@@ -0,0 +1,32 @@
|
||||
package blocks
|
||||
|
||||
templ HeaderMarketingNav() {
|
||||
<!-- Site header -->
|
||||
<header class="absolute top-2 md:top-6 w-full z-30">
|
||||
<div class="px-4 sm:px-6">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex items-center justify-between h-14 border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg px-3">
|
||||
<!-- Site branding -->
|
||||
<div class="shrink-0 mr-4">
|
||||
<!-- Logo -->
|
||||
<a class="flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20" href="index.html">
|
||||
<img src="./images/logo.png" width="24" height="24" alt="Logo"/>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Desktop navigation -->
|
||||
<nav class="flex grow">
|
||||
<!-- Desktop sign in links -->
|
||||
<ul class="flex grow justify-end flex-wrap items-center">
|
||||
<li>
|
||||
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition" href="login.html">Log in</a>
|
||||
</li>
|
||||
<li class="ml-1">
|
||||
<a class="btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow" href="request-demo.html">Request Demo</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.778
|
||||
package blocks
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
import "github.com/a-h/templ"
|
||||
import templruntime "github.com/a-h/templ/runtime"
|
||||
|
||||
func HeaderMarketingNav() 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_Var1 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var1 == nil {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Site header --><header class=\"absolute top-2 md:top-6 w-full z-30\"><div class=\"px-4 sm:px-6\"><div class=\"max-w-3xl mx-auto\"><div class=\"flex items-center justify-between h-14 border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg px-3\"><!-- Site branding --><div class=\"shrink-0 mr-4\"><!-- Logo --><a class=\"flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20\" href=\"index.html\"><img src=\"./images/logo.png\" width=\"24\" height=\"24\" alt=\"Logo\"></a></div><!-- Desktop navigation --><nav class=\"flex grow\"><!-- Desktop sign in links --><ul class=\"flex grow justify-end flex-wrap items-center\"><li><a class=\"text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition\" href=\"login.html\">Log in</a></li><li class=\"ml-1\"><a class=\"btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow\" href=\"request-demo.html\">Request Demo</a></li></ul></nav></div></div></div></header>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
var _ = templruntime.GeneratedTemplate
|
||||
@@ -0,0 +1,117 @@
|
||||
package blocks
|
||||
|
||||
templ SectionHero() {
|
||||
<!-- Hero -->
|
||||
<section class="relative before:absolute before:inset-0 before:h-80 before:pointer-events-none before:bg-gradient-to-b before:from-zinc-100 before:-z-10">
|
||||
<div class="pt-32 pb-12 md:pt-40 md:pb-20">
|
||||
<!-- Section content -->
|
||||
<div class="px-4 sm:px-6">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="text-center pb-12 md:pb-16">
|
||||
<h1 class="font-inter-tight text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-zinc-500 via-zinc-900 to-zinc-900 pb-4">
|
||||
The creative
|
||||
<em class="italic relative inline-flex justify-center items-center text-zinc-900">
|
||||
platform
|
||||
<svg class="absolute fill-zinc-300 w-[calc(100%+1rem)] -z-10" xmlns="http://www.w3.org/2000/svg" width="223" height="62" viewBox="0 0 223 62" aria-hidden="true" preserveAspectRatio="none">
|
||||
<path d="M45.654 53.62c17.666 3.154 35.622 4.512 53.558 4.837 17.94.288 35.91-.468 53.702-2.54 8.89-1.062 17.742-2.442 26.455-4.352 8.684-1.945 17.338-4.3 25.303-7.905 3.94-1.81 7.79-3.962 10.634-6.777 1.38-1.41 2.424-2.994 2.758-4.561.358-1.563-.078-3.143-1.046-4.677-.986-1.524-2.43-2.96-4.114-4.175a37.926 37.926 0 0 0-5.422-3.32c-3.84-1.977-7.958-3.563-12.156-4.933-8.42-2.707-17.148-4.653-25.95-6.145-8.802-1.52-17.702-2.56-26.622-3.333-17.852-1.49-35.826-1.776-53.739-.978-8.953.433-17.898 1.125-26.79 2.22-8.887 1.095-17.738 2.541-26.428 4.616-4.342 1.037-8.648 2.226-12.853 3.676-4.197 1.455-8.314 3.16-12.104 5.363-1.862 1.13-3.706 2.333-5.218 3.829-1.52 1.47-2.79 3.193-3.285 5.113-.528 1.912-.127 3.965.951 5.743 1.07 1.785 2.632 3.335 4.348 4.68 2.135 1.652 3.2 2.672 2.986 3.083-.18.362-1.674.114-4.08-1.638-1.863-1.387-3.63-3.014-4.95-5.09C.94 35.316.424 34.148.171 32.89c-.275-1.253-.198-2.579.069-3.822.588-2.515 2.098-4.582 3.76-6.276 1.673-1.724 3.612-3.053 5.57-4.303 3.96-2.426 8.177-4.278 12.457-5.868 4.287-1.584 8.654-2.89 13.054-4.036 8.801-2.292 17.74-3.925 26.716-5.19C70.777 2.131 79.805 1.286 88.846.723c18.087-1.065 36.236-.974 54.325.397 9.041.717 18.07 1.714 27.042 3.225 8.972 1.485 17.895 3.444 26.649 6.253 4.37 1.426 8.697 3.083 12.878 5.243a42.11 42.11 0 0 1 6.094 3.762c1.954 1.44 3.823 3.2 5.283 5.485a12.515 12.515 0 0 1 1.63 3.88c.164.706.184 1.463.253 2.193-.063.73-.094 1.485-.247 2.195-.652 2.886-2.325 5.141-4.09 6.934-3.635 3.533-7.853 5.751-12.083 7.688-8.519 3.778-17.394 6.09-26.296 7.998-8.917 1.86-17.913 3.152-26.928 4.104-18.039 1.851-36.17 2.295-54.239 1.622-18.062-.713-36.112-2.535-53.824-6.23-5.941-1.31-5.217-2.91.361-1.852"></path>
|
||||
</svg>
|
||||
</em>
|
||||
for cross-functional work
|
||||
</h1>
|
||||
<p class="text-lg text-zinc-500 mb-8">
|
||||
Turbocharge your creative process with a powerful AI design platform that gives creatives the power of creating without limits.
|
||||
</p>
|
||||
<div class="max-w-xs mx-auto sm:max-w-none sm:inline-flex sm:justify-center space-y-4 sm:space-y-0 sm:space-x-4">
|
||||
<div>
|
||||
<a class="btn text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow" href="request-demo.html">Request Demo</a>
|
||||
</div>
|
||||
<div>
|
||||
<a class="btn text-zinc-600 bg-white hover:text-zinc-900 w-full shadow" href="#0">Try for Free</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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="./images/hero-image.png" width="1104" height="620" alt="Hero"/>
|
||||
</div>
|
||||
<!-- Stats -->
|
||||
<div class="max-w-6xl 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>
|
||||
<!-- Animate counter functionality: https://github.com/alpinejs/alpine -->
|
||||
<script>
|
||||
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()
|
||||
},
|
||||
}))
|
||||
})
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user