From e764cce90a618d3e167007a3e4e6790d6442eba1 Mon Sep 17 00:00:00 2001
From: Prad Nukala <prad@sonr.io>
Date: Sun, 29 Sep 2024 18:38:41 -0400
Subject: [PATCH] feat: add registration page

---
 pkg/nebula/components/sections/footer.templ   |   4 +-
 .../components/sections/footer_templ.go       |   2 +-
 pkg/nebula/components/sections/header.templ   |   4 +-
 .../components/sections/header_templ.go       |   2 +-
 pkg/nebula/components/sections/hero.templ     | 102 +++++++++---------
 pkg/nebula/components/sections/hero_templ.go  |   2 +-
 pkg/nebula/pages/home.templ                   |  16 +--
 pkg/nebula/pages/home_templ.go                |  16 +--
 8 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/pkg/nebula/components/sections/footer.templ b/pkg/nebula/components/sections/footer.templ
index 5e8ac1142..991b3da30 100644
--- a/pkg/nebula/components/sections/footer.templ
+++ b/pkg/nebula/components/sections/footer.templ
@@ -3,7 +3,7 @@ package sections
 templ FooterMarketingNav() {
 	<!-- Site footer -->
 	<footer>
-		<div class="max-w-6xl mx-auto px-4 sm:px-6">
+		<div class="max-w-5xl 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 -->
@@ -14,7 +14,7 @@ templ FooterMarketingNav() {
 							<img src="https://cdn.sonr.id/logo-zinc.svg" width="24" height="24" alt="Logo"/>
 						</a>
 					</div>
-					<div class="grow text-sm text-zinc-500">&copy; Cruip.com. All rights reserved.</div>
+					<div class="grow text-sm text-zinc-500">&copy; diDAO DUNA. All rights reserved.</div>
 					<!-- Social links -->
 					<ul class="flex space-x-4 mt-4 mb-1">
 						<li>
diff --git a/pkg/nebula/components/sections/footer_templ.go b/pkg/nebula/components/sections/footer_templ.go
index 5f22cb597..5932e93a3 100644
--- a/pkg/nebula/components/sections/footer_templ.go
+++ b/pkg/nebula/components/sections/footer_templ.go
@@ -29,7 +29,7 @@ func FooterMarketingNav() templ.Component {
 			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-full shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/logo-zinc.svg\" width=\"24\" height=\"24\" alt=\"Logo\"></a></div><div class=\"grow text-sm text-zinc-500\">&copy; 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>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Site footer --><footer><div class=\"max-w-5xl 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-full shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/logo-zinc.svg\" width=\"24\" height=\"24\" alt=\"Logo\"></a></div><div class=\"grow text-sm text-zinc-500\">&copy; diDAO DUNA. 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
 		}
diff --git a/pkg/nebula/components/sections/header.templ b/pkg/nebula/components/sections/header.templ
index 2bd244dfc..1cdaff1fe 100644
--- a/pkg/nebula/components/sections/header.templ
+++ b/pkg/nebula/components/sections/header.templ
@@ -18,10 +18,10 @@ templ HeaderMarketingNav() {
 						<!-- 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>
+								<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">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>
+								<a class="btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow" href="/register">Register</a>
 							</li>
 						</ul>
 					</nav>
diff --git a/pkg/nebula/components/sections/header_templ.go b/pkg/nebula/components/sections/header_templ.go
index 4c782e2fd..fad89ae6c 100644
--- a/pkg/nebula/components/sections/header_templ.go
+++ b/pkg/nebula/components/sections/header_templ.go
@@ -29,7 +29,7 @@ func HeaderMarketingNav() templ.Component {
 			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-full shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/logo-zinc.svg\" 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>")
+		_, 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-full shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/logo-zinc.svg\" 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\">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=\"/register\">Register</a></li></ul></nav></div></div></div></header>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/pkg/nebula/components/sections/hero.templ b/pkg/nebula/components/sections/hero.templ
index 3fb404ba2..7badb9372 100644
--- a/pkg/nebula/components/sections/hero.templ
+++ b/pkg/nebula/components/sections/hero.templ
@@ -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()
+                          },
+                      }))
+                  })
 }
diff --git a/pkg/nebula/components/sections/hero_templ.go b/pkg/nebula/components/sections/hero_templ.go
index 2a248bda9..949c313b5 100644
--- a/pkg/nebula/components/sections/hero_templ.go
+++ b/pkg/nebula/components/sections/hero_templ.go
@@ -138,7 +138,7 @@ func SectionHero(hero Hero) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</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=\"https://cdn.sonr.id/img/hero-safe.svg\" width=\"620\" 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>")
+		_, 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>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/pkg/nebula/pages/home.templ b/pkg/nebula/pages/home.templ
index 940cba5ec..f5817f642 100644
--- a/pkg/nebula/pages/home.templ
+++ b/pkg/nebula/pages/home.templ
@@ -8,14 +8,14 @@ import (
 
 func Home(c echo.Context) error {
 	hero := sections.Hero{
-		TitleFirst:          "Sonr.ID",
-		TitleEmphasis:       "platform",
-		TitleSecond:         "for cross-functional work",
-		Subtitle:            "Turbocharge your creative process with a powerful AI design platform that gives creatives the power of creating without limits.",
-		PrimaryButtonText:   "Request Demo",
-		PrimaryButtonLink:   "request-demo.html",
-		SecondaryButtonText: "Try for Free",
-		SecondaryButtonLink: "#0",
+		TitleFirst:          "Simplified",
+		TitleEmphasis:       "self-custody",
+		TitleSecond:         "for everyone",
+		Subtitle:            "Sonr is a modern re-imagination of online user identity, empowering users to take ownership of their digital footprint and unlocking a new era of self-sovereignty.",
+		PrimaryButtonText:   "Get Started",
+		PrimaryButtonLink:   "/register",
+		SecondaryButtonText: "Learn More",
+		SecondaryButtonLink: "/about",
 	}
 	return echoResponse(c, homeView(hero))
 }
diff --git a/pkg/nebula/pages/home_templ.go b/pkg/nebula/pages/home_templ.go
index 80f9e660f..7cc378b56 100644
--- a/pkg/nebula/pages/home_templ.go
+++ b/pkg/nebula/pages/home_templ.go
@@ -16,14 +16,14 @@ import (
 
 func Home(c echo.Context) error {
 	hero := sections.Hero{
-		TitleFirst:          "Sonr.ID",
-		TitleEmphasis:       "platform",
-		TitleSecond:         "for cross-functional work",
-		Subtitle:            "Turbocharge your creative process with a powerful AI design platform that gives creatives the power of creating without limits.",
-		PrimaryButtonText:   "Request Demo",
-		PrimaryButtonLink:   "request-demo.html",
-		SecondaryButtonText: "Try for Free",
-		SecondaryButtonLink: "#0",
+		TitleFirst:          "Simplified",
+		TitleEmphasis:       "self-custody",
+		TitleSecond:         "for everyone",
+		Subtitle:            "Sonr is a modern re-imagination of online user identity, empowering users to take ownership of their digital footprint and unlocking a new era of self-sovereignty.",
+		PrimaryButtonText:   "Get Started",
+		PrimaryButtonLink:   "/register",
+		SecondaryButtonText: "Learn More",
+		SecondaryButtonLink: "/about",
 	}
 	return echoResponse(c, homeView(hero))
 }