feature/1111 sync chain dwn endpoint (#1143)

- **feat(did): add assertion type to DID spec** - **refactor: update build process to include assets generation** - **refactor: update import paths for to** - **feat: introduce new authentication state management** - **feat: add current account route** - **feat: implement global toasts with custom HTML** - **refactor: remove unused session code** - **feat: add config.json to embedded assets** - **refactor: remove unused dependency on gorilla/sessions** - **refactor: simplify session management and remove unnecessary fields** - **fix: remove unnecessary import for unused protobuf types** - **feat: introduce separate HTTP contexts for Highway and DWN** - **fix(keeper): Handle missing controller during initial sync** - **refactor: extract DWN configuration from DWNContext** - **feat: add view route** - **fix: update configuration file name in embed.go** - **feat: improve vaultindex page loading experience** - **feat(hway): add highway context to echo context** - **chore(deps): bump onsonr/crypto from 1.32.0 to 1.33.0** - **refactor: rename DWNSessionMiddleware to WebNodeSessionMiddleware** - **feat: rename client API to web node API** - **refactor: separate API and view routes** - **refactor: remove unused build targets in Makefile** - **feat: add Devbox integration to container** - **feat: add wasm support for dwn** - **refactor: update module proto import** - **feat: add default first and third party caveats** - **feat: Add target vault allocation mechanism** - **refactor: introduce standardized session cookie handling** - **fix: update service worker installation and ready states** - **feat: add worker handlers** - **feat: Enable SSH access to devcontainer** - **refactor: rename HighwayContext to HwayContext** - **feat: add block expiration calculation to sonr context** - **feat: remove config from cookie and header** - **feat(gen): Remove generated code for IPFS, Motr and Sonr** - **refactor: remove unused createMotrConfig function** - **feat: add project analytics with Repobeats** - **docs: Remove component details from README** - **refactor: rename SetConfig to injectConfig**
2026-08-02 17:31:39 +00:00 · 2024-10-15 14:31:19 -04:00
parent 104df074e9
commit b6c49828ed
146 changed files with 18035 additions and 4202 deletions
@@ -0,0 +1,19 @@
+package marketing
+
+import (
+	"github.com/onsonr/sonr/pkg/nebula/components/marketing/sections"
+	"github.com/onsonr/sonr/pkg/nebula/global/styles"
+)
+
+templ View() {
+	@styles.LayoutNoBody("Sonr.ID", true) {
+		@sections.Header()
+		@sections.Hero(hero)
+		@sections.Highlights(highlights)
+		@sections.Mission()
+		@sections.Architecture()
+		@sections.Lowlights()
+		@sections.CallToAction()
+		@sections.Footer()
+	}
+}
@@ -0,0 +1,119 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.778
+package marketing
+
+//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"
+
+import (
+	"github.com/onsonr/sonr/pkg/nebula/components/marketing/sections"
+	"github.com/onsonr/sonr/pkg/nebula/global/styles"
+)
+
+func View() 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_Var2 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+			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_Err = sections.Header().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = sections.Hero(hero).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = sections.Highlights(highlights).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = sections.Mission().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = sections.Architecture().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = sections.Lowlights().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = sections.CallToAction().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = sections.Footer().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = styles.LayoutNoBody("Sonr.ID", true).Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+var _ = templruntime.GeneratedTemplate
@@ -0,0 +1,18 @@
+package marketing
+
+import (
+	"log"
+
+	"github.com/labstack/echo/v4"
+
+	"github.com/onsonr/sonr/internal/ctx"
+)
+
+func HomeRoute(c echo.Context) error {
+	s, err := ctx.GetHWAYContext(c)
+	if err != nil {
+		return err
+	}
+	log.Printf("Session ID: %s", s.ID())
+	return ctx.RenderTempl(c, View())
+}
@@ -0,0 +1,197 @@
+package sections
+
+templ Architecture() {
+	<!-- Features #2 -->
+	<section>
+		<div class="py-12 md:py-20">
+			<div class="max-w-5xl mx-auto px-4 sm:px-6">
+				<div
+					class="relative max-w-3xl mx-auto text-center pb-12 md:pb-20"
+				>
+					<h2
+						class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4"
+					>
+						Onchain Security with Offchain Privacy
+					</h2>
+					<p class="text-lg text-zinc-500">
+						Whenever you are ready, just hit publish to turn your site
+						sketches into an actual designs. No creating, no skills, no
+						reshaping.
+					</p>
+				</div>
+				<div
+					class="max-w-xs mx-auto sm:max-w-none grid sm:grid-cols-2 md:grid-cols-3 gap-8 sm:gap-4 lg:gap-8"
+				>
+					<article
+						class="sm:col-span-2 flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg"
+					>
+						<div class="grow flex flex-col p-5 pt-6">
+							<div class="flex items-center space-x-3 mb-1">
+								<svg
+									class="inline-flex fill-zinc-400"
+									xmlns="http://www.w3.org/2000/svg"
+									width="20"
+									height="20"
+								>
+									<path
+										d="M17 9c.6 0 1 .4 1 1v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h6c.6 0 1 .4 1 1s-.4 1-1 1H4v12h12v-6c0-.6.4-1 1-1Zm-.7-6.7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-8 8c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l8-8Z"
+									></path>
+								</svg>
+								<h3 class="font-inter-tight font-semibold text-zinc-900">
+									Decentralized Identity
+								</h3>
+							</div>
+							<p class="grow max-w-md text-sm text-zinc-500">
+								Create teams and organize your designs into folders using
+								project specs and insights.
+							</p>
+						</div>
+						<figure>
+							<img
+								class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
+								src="./images/feature-post-01.png"
+								width="721"
+								height="280"
+								alt="Feature Post 01"
+							/>
+						</figure>
+					</article>
+					<article
+						class="flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg"
+					>
+						<div class="grow flex flex-col p-5 pt-6">
+							<div class="flex items-center space-x-3 mb-1">
+								<svg
+									class="inline-flex fill-zinc-400"
+									xmlns="http://www.w3.org/2000/svg"
+									width="20"
+									height="20"
+								>
+									<path
+										d="m6.035 17.335-4-14c-.2-.8.5-1.5 1.3-1.3l14 4c.9.3 1 1.5.1 1.9l-6.6 2.9-2.8 6.6c-.5.9-1.7.8-2-.1Zm-1.5-12.8 2.7 9.5 1.9-4.4c.1-.2.3-.4.5-.5l4.4-1.9-9.5-2.7Z"
+									></path>
+								</svg>
+								<h3 class="font-inter-tight font-semibold text-zinc-900">
+									IPFS Vaults
+								</h3>
+							</div>
+							<p class="grow max-w-md text-sm text-zinc-500">
+								Generate images and explore new ways of presenting your
+								designs with AI.
+							</p>
+						</div>
+						<figure>
+							<img
+								class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
+								src="./images/feature-post-02.png"
+								width="342"
+								height="280"
+								alt="Feature Post 02"
+							/>
+						</figure>
+					</article>
+					<article
+						class="flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg"
+					>
+						<div class="grow flex flex-col p-5 pt-6">
+							<div class="flex items-center space-x-3 mb-1">
+								<svg
+									class="inline-flex fill-zinc-400"
+									xmlns="http://www.w3.org/2000/svg"
+									width="20"
+									height="20"
+								>
+									<path
+										d="M8.974 16c-.3 0-.7-.2-.9-.5l-2.2-3.7-2.1 2.8c-.3.4-1 .5-1.4.2-.4-.3-.5-1-.2-1.4l3-4c.2-.3.5-.4.9-.4.3 0 .6.2.8.5l2 3.3 3.3-8.1c0-.4.4-.7.8-.7s.8.2.9.6l4 8c.2.5 0 1.1-.4 1.3-.5.2-1.1 0-1.3-.4l-3-6-3.2 7.9c-.2.4-.6.6-1 .6Z"
+									></path>
+								</svg>
+								<h3 class="font-inter-tight font-semibold text-zinc-900">
+									Service Records
+								</h3>
+							</div>
+							<p class="grow max-w-md text-sm text-zinc-500">
+								Get your scenes inside your projects using simple embed
+								code/snippets.
+							</p>
+						</div>
+						<figure>
+							<img
+								class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
+								src="./images/feature-post-03.png"
+								width="342"
+								height="280"
+								alt="Feature Post 03"
+							/>
+						</figure>
+					</article>
+					<article
+						class="flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg"
+					>
+						<div class="grow flex flex-col p-5 pt-6">
+							<div class="flex items-center space-x-3 mb-1">
+								<svg
+									class="inline-flex fill-zinc-400"
+									xmlns="http://www.w3.org/2000/svg"
+									width="20"
+									height="20"
+								>
+									<path
+										d="M9.3 11.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM9.3 17.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM2.3 12.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0Z"
+									></path>
+								</svg>
+								<h3 class="font-inter-tight font-semibold text-zinc-900">
+									Authentication & Authorization
+								</h3>
+							</div>
+							<p class="grow max-w-md text-sm text-zinc-500">
+								Easily make drag and drop interactions without coding.
+							</p>
+						</div>
+						<figure>
+							<img
+								class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
+								src="./images/feature-post-04.png"
+								width="342"
+								height="280"
+								alt="Feature Post 04"
+							/>
+						</figure>
+					</article>
+					<article
+						class="flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg"
+					>
+						<div class="grow flex flex-col p-5 pt-6">
+							<div class="flex items-center space-x-3 mb-1">
+								<svg
+									class="inline-flex fill-zinc-400"
+									xmlns="http://www.w3.org/2000/svg"
+									width="20"
+									height="20"
+								>
+									<path
+										d="M16 2H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h8.667l3.733 2.8A1 1 0 0 0 18 17V4a2 2 0 0 0-2-2Zm0 13-2.4-1.8a1 1 0 0 0-.6-.2H4V4h12v11Z"
+									></path>
+								</svg>
+								<h3 class="font-inter-tight font-semibold text-zinc-900">
+									Decentralized Exchange
+								</h3>
+							</div>
+							<p class="grow max-w-md text-sm text-zinc-500">
+								Create tasks, projects, issues and more in just seconds.
+							</p>
+						</div>
+						<figure>
+							<img
+								class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
+								src="./images/feature-post-05.png"
+								width="342"
+								height="280"
+								alt="Feature Post 05"
+							/>
+						</figure>
+					</article>
+				</div>
+			</div>
+		</div>
+	</section>
+}
@@ -0,0 +1,71 @@
+package sections
+
+
+templ CallToAction() {
+	<section>
+		<div class="py-12 md:py-20">
+			<div class="max-w-5xl mx-auto px-4 sm:px-6">
+				<div class="relative max-w-3xl mx-auto text-center pb-12 md:pb-16">
+					<div class="inline-flex items-center justify-center w-20 h-20 bg-white rounded-xl shadow-md mb-8 relative before:absolute before:-top-12 before:w-52 before:h-52 before:bg-zinc-900 before:opacity-[.08] before:rounded-full before:blur-3xl before:-z-10">
+						<a href="index.html">
+							<img src="https://cdn.sonr.id/logo-zinc.svg" width="60" height="60" alt="Logo"/>
+						</a>
+					</div>
+					<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
+						Take control of your Identity
+						<em class="relative not-italic inline-flex justify-center items-end">
+							today
+							<svg class="absolute fill-zinc-300 w-[calc(100%+1rem)] -z-10" xmlns="http://www.w3.org/2000/svg" width="120" height="10" viewBox="0 0 120 10" aria-hidden="true" preserveAspectRatio="none">
+								<path d="M118.273 6.09C79.243 4.558 40.297 5.459 1.305 9.034c-1.507.13-1.742-1.521-.199-1.81C39.81-.228 79.647-1.568 118.443 4.2c1.63.233 1.377 1.943-.17 1.89Z"></path>
+							</svg>
+						</em>
+					</h2>
+					<p class="text-lg text-zinc-500 mb-8">Sonr removes creative distances by connecting beginners, pros, and every team in between. Are you ready to start your journey?</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">Register</a>
+						</div>
+						<div>
+							<a class="btn text-zinc-600 bg-white hover:text-zinc-900 w-full shadow" href="#0">Log in</a>
+						</div>
+					</div>
+				</div>
+				<!-- Clients -->
+				<div class="text-center">
+					<ul class="inline-flex flex-wrap items-center justify-center -m-2 [mask-image:linear-gradient(to_right,transparent_8px,_theme(colors.white/.7)_64px,_theme(colors.white)_50%,_theme(colors.white/.7)_calc(100%-64px),_transparent_calc(100%-8px))]">
+						<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
+							<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40" aria-label="Adobe">
+								<path d="m21.966 31-1.69-4.231h-4.154l3.892-9.037L25.676 31h-3.71Zm-5.082-21H8v21l8.884-21ZM32 10h-8.884L32 31V10Z"></path>
+							</svg>
+						</li>
+						<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
+							<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40" aria-label="Unsplash">
+								<path d="M16.119 9h8.762v6.571h-8.762zM24.881 18.857H32V32H9V18.857h7.119v6.572h8.762z"></path>
+							</svg>
+						</li>
+						<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
+							<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40" aria-label="Google">
+								<path d="M8.407 26.488a13.458 13.458 0 0 1 0-11.98A13.48 13.48 0 0 1 29.63 10.57l-4.012 3.821a7.934 7.934 0 0 0-5.12-1.87 7.986 7.986 0 0 0-7.568 5.473 7.94 7.94 0 0 0-.408 2.504A7.94 7.94 0 0 0 12.93 23a7.986 7.986 0 0 0 7.567 5.472 8.577 8.577 0 0 0 4.566-1.127l4.489 3.459a13.415 13.415 0 0 1-9.055 3.19 13.512 13.512 0 0 1-12.09-7.507Zm25.036-8.444c.664 6.002-1.021 10.188-3.89 12.762l-4.488-3.46a6.581 6.581 0 0 0 2.795-3.78h-7.301v-5.522h12.884Z"></path>
+							</svg>
+						</li>
+						<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
+							<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40" aria-label="WordPress">
+								<path d="M8.061 20.5c0-1.804.387-3.516 1.077-5.063l5.934 16.257c-4.15-2.016-7.01-6.271-7.01-11.194Zm20.836-.628c0 1.065-.41 2.3-.946 4.021L26.71 28.04l-4.496-13.371c.749-.04 1.424-.119 1.424-.119.67-.079.591-1.064-.08-1.025 0 0-2.014.158-3.315.158-1.222 0-3.276-.158-3.276-.158-.67-.039-.75.986-.079 1.025 0 0 .635.08 1.305.119l1.938 5.31-2.723 8.163-4.53-13.473c.75-.04 1.424-.119 1.424-.119.67-.079.591-1.064-.08-1.025 0 0-2.014.158-3.314.158-.234 0-.509-.005-.801-.015A12.425 12.425 0 0 1 20.5 8.061c3.238 0 6.187 1.238 8.4 3.266-.054-.004-.106-.01-.162-.01-1.221 0-2.088 1.064-2.088 2.207 0 1.025.591 1.893 1.221 2.918.474.828 1.026 1.892 1.026 3.43Zm-8.179 1.716 3.824 10.475c.025.061.056.118.089.171a12.434 12.434 0 0 1-7.645.198l3.732-10.844Zm10.697-7.056a12.378 12.378 0 0 1 1.524 5.968c0 4.589-2.487 8.595-6.185 10.751l3.799-10.985c.71-1.774.946-3.193.946-4.455 0-.458-.03-.883-.084-1.279ZM20.5 6C28.495 6 35 12.504 35 20.5 35 28.495 28.495 35 20.5 35S6 28.495 6 20.5C6 12.504 12.505 6 20.5 6Zm0 28.335c7.628 0 13.835-6.207 13.835-13.835 0-7.629-6.207-13.835-13.835-13.835-7.629 0-13.835 6.206-13.835 13.835 0 7.628 6.206 13.835 13.835 13.835Z"></path>
+							</svg>
+						</li>
+						<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
+							<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40" aria-label="Windows">
+								<path d="m8 11.408 9.808-1.335.004 9.46-9.803.056L8 11.41Zm9.803 9.215.008 9.47-9.803-1.348-.001-8.185 9.796.063Zm1.19-10.725L31.996 8v11.413l-13.005.103V9.898ZM32 20.712l-.003 11.362-13.005-1.835-.018-9.548L32 20.712Z"></path>
+							</svg>
+						</li>
+						<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
+							<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40" aria-label="Pinterest">
+								<path d="M19.482 6.455c-7.757 0-14.045 6.288-14.045 14.045 0 5.95 3.702 11.032 8.926 13.079-.123-1.112-.233-2.816.05-4.03.254-1.095 1.646-6.98 1.646-6.98s-.42-.842-.42-2.086c0-1.953 1.132-3.41 2.541-3.41 1.198 0 1.777.899 1.777 1.978 0 1.205-.767 3.006-1.163 4.676-.33 1.398.701 2.538 2.08 2.538 2.496 0 4.415-2.632 4.415-6.431 0-3.363-2.416-5.714-5.867-5.714-3.996 0-6.342 2.997-6.342 6.095 0 1.207.466 2.501 1.046 3.205a.42.42 0 0 1 .097.403c-.107.443-.343 1.397-.39 1.592-.061.258-.204.312-.47.188-1.754-.816-2.85-3.38-2.85-5.44 0-4.431 3.218-8.5 9.28-8.5 4.872 0 8.658 3.472 8.658 8.112 0 4.84-3.052 8.736-7.288 8.736-1.423 0-2.761-.74-3.22-1.613l-.874 3.339c-.317 1.22-1.173 2.749-1.746 3.682a14.04 14.04 0 0 0 4.159.626c7.757 0 14.045-6.288 14.045-14.045S27.238 6.455 19.482 6.455Z"></path>
+							</svg>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</section>
+}
@@ -0,0 +1,78 @@
+package sections
+
+templ Footer() {
+	<!-- 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 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"></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">Documentation</a>
+						</li>
+						<li>
+							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Privacy policy</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">About the DAO</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="https://brandfetch.io/sonr.io">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 sections
+
+//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 Footer() 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-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 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\"></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\">Documentation</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Privacy policy</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\">About the DAO</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=\"https://brandfetch.io/sonr.io\">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 sections
+
+templ Header() {
+	<!-- 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-zinc-800 border-zinc-600 border-1 w-8 h-8 rounded shadow-sm shadow-zinc-950/20" href="/">
+							<img src="https://cdn.sonr.id/logo-ivory.svg" width="20" height="20" 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>
+								<div class="text-sm cursor-pointer font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition" hx-swap="afterend" hx-get="/login">Log in</div>
+							</li>
+							<li class="ml-1">
+								<div class="btn-sm text-zinc-100 cursor-pointer bg-zinc-900 hover:bg-zinc-800 w-full shadow" hx-swap="afterend" hx-get="/register">Register</div>
+							</li>
+						</ul>
+					</nav>
+				</div>
+			</div>
+		</div>
+	</header>
+}
@@ -0,0 +1,40 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.778
+package sections
+
+//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 Header() 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-zinc-800 border-zinc-600 border-1 w-8 h-8 rounded shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/logo-ivory.svg\" width=\"20\" height=\"20\" 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><div class=\"text-sm cursor-pointer font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition\" hx-swap=\"afterend\" hx-get=\"/login\">Log in</div></li><li class=\"ml-1\"><div class=\"btn-sm text-zinc-100 cursor-pointer bg-zinc-900 hover:bg-zinc-800 w-full shadow\" hx-swap=\"afterend\" hx-get=\"/register\">Register</div></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,124 @@
+package sections
+
+import (
+	"fmt"
+	models "github.com/onsonr/sonr/internal/orm/marketing"
+	"github.com/onsonr/sonr/pkg/nebula/global/ui"
+)
+
+templ Hero(hero *models.Hero) {
+	<!-- 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-fancy 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">
+							{ hero.TitleFirst }
+							<em class="italic relative inline-flex justify-center items-center text-zinc-900">
+								{ hero.TitleEmphasis }
+								<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>
+							{ hero.TitleSecond }
+						</h1>
+						<p class="text-lg text-zinc-500 mb-8">
+							{ hero.Subtitle }
+						</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">
+							@ui.PrimaryButton("/register", "Get Started")
+							@ui.SecondaryButton("/about", "Learn More")
+						</div>
+					</div>
+				</div>
+				@heroImage(hero)
+				@stats(hero.Stats)
+			</div>
+		</div>
+	</section>
+}
+
+templ heroImage(hero *models.Hero) {
+	<!-- Image -->
+	<div class="max-w-5xl motion-preset-slide-up motion-opacity-in-0 motion-scale-in-50 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 from-zinc-100 to-white">
+		<img
+			class="rounded-lg "
+			src={ hero.Image.Src }
+			width={ hero.Image.Width }
+			height={ hero.Image.Height }
+			alt="Hero"
+		/>
+	</div>
+}
+
+templ stats(stats []*models.Stat) {
+	<!-- 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">
+			for _, item := range stats {
+				<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={ getCounter(item.Value) } x-text="counterValue">{ item.Value }</span>{ item.Denom }</h4>
+					<p class="text-sm text-zinc-500">{ item.Label }</p>
+				</div>
+			}
+		</div>
+		@counterAnimation()
+	</div>
+}
+
+func getCounter(value string) string {
+	return fmt.Sprintf("counter(%s)", value)
+}
+
+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()
+                          },
+                      }))
+                  })
+}
@@ -0,0 +1,350 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.778
+package sections
+
+//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"
+
+import (
+	"fmt"
+	models "github.com/onsonr/sonr/internal/orm/marketing"
+	"github.com/onsonr/sonr/pkg/nebula/global/ui"
+)
+
+func Hero(hero *models.Hero) 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("<!-- 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-fancy 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\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(hero.TitleFirst)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/hero.templ`, Line: 18, Col: 24}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" <em class=\"italic relative inline-flex justify-center items-center text-zinc-900\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(hero.TitleEmphasis)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/hero.templ`, Line: 20, Col: 28}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" <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> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(hero.TitleSecond)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/hero.templ`, Line: 25, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h1><p class=\"text-lg text-zinc-500 mb-8\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(hero.Subtitle)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/hero.templ`, Line: 28, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</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\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ui.PrimaryButton("/register", "Get Started").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ui.SecondaryButton("/about", "Learn More").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = heroImage(hero).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = stats(hero.Stats).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></section>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func heroImage(hero *models.Hero) 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_Var6 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var6 == nil {
+			templ_7745c5c3_Var6 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Image --><div class=\"max-w-5xl motion-preset-slide-up motion-opacity-in-0 motion-scale-in-50 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 from-zinc-100 to-white\"><img class=\"rounded-lg \" src=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hero.Image.Src)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/hero.templ`, Line: 48, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" width=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(hero.Image.Width)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/hero.templ`, Line: 49, Col: 27}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" height=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hero.Image.Height)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/hero.templ`, Line: 50, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" alt=\"Hero\"></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func stats(stats []*models.Stat) 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("<!-- 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\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, item := range stats {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<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=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var11 string
+			templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(getCounter(item.Value))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/hero.templ`, Line: 62, Col: 120}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" x-text=\"counterValue\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var12 string
+			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(item.Value)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/hero.templ`, Line: 62, Col: 157}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var13 string
+			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(item.Denom)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/hero.templ`, Line: 62, Col: 178}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h4><p class=\"text-sm text-zinc-500\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var14 string
+			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(item.Label)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/hero.templ`, Line: 63, Col: 50}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div>")
+			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
+		}
+		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 getCounter(value string) string {
+	return fmt.Sprintf("counter(%s)", value)
+}
+
+func counterAnimation() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_counterAnimation_cac3`,
+		Function: `function __templ_counterAnimation_cac3(){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()
+                          },
+                      }))
+                  })
+}`,
+		Call:       templ.SafeScript(`__templ_counterAnimation_cac3`),
+		CallInline: templ.SafeScriptInline(`__templ_counterAnimation_cac3`),
+	}
+}
+
+var _ = templruntime.GeneratedTemplate
@@ -0,0 +1,102 @@
+package sections
+
+import (
+	"fmt"
+	models "github.com/onsonr/sonr/internal/orm/marketing"
+)
+
+templ Highlights(highlights *models.Highlights) {
+	<!-- Features -->
+	<section class="relative bg-zinc-50">
+		<div class="py-12 md:py-20">
+			<div class="max-w-5xl mx-auto px-4 sm:px-6">
+				<div class="max-w-3xl mx-auto text-center pb-12">
+					<h2
+						class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4"
+					>
+						{ highlights.Heading }
+					</h2>
+					<p class="text-lg text-zinc-500">
+						{ highlights.Subtitle }
+					</p>
+				</div>
+				<div x-data="{ tab: '1' }">
+					<!-- Tabs buttons -->
+					<div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
+						@highlightTab(1, highlights.Features[0])
+						@highlightTab(2, highlights.Features[1])
+						@highlightTab(3, highlights.Features[2])
+						@highlightTab(4, highlights.Features[3])
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+}
+
+templ highlightTab(index int, highlight *models.Feature) {
+	<button
+		:class={ getSelectedClass(index) }
+		class="text-left px-4 py-5 border border-transparent rounded"
+		@click.prevent={ getClickPrevent(index) }
+	>
+		<div class="flex items-center justify-between mb-1">
+			<div class="font-inter-tight font-semibold text-zinc-900">
+				{ highlight.Title }
+			</div>
+			<svg
+				:class={ getShowBorder(index) }
+				class="fill-zinc-400 shrink-0 ml-2"
+				xmlns="http://www.w3.org/2000/svg"
+				width="10"
+				height="10"
+			>
+				<path
+					d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"
+				></path>
+			</svg>
+		</div>
+		<div class="text-sm text-zinc-500">
+			{ highlight.Desc }
+		</div>
+	</button>
+}
+
+templ highlightCard(index int, highlight *models.Feature) {
+	<div
+		class="w-full text-center"
+		x-show={ getXShow(index) }
+		x-transition:enter="transition ease-in-out duration-700 transform order-first"
+		x-transition:enter-start="opacity-0 -translate-y-4"
+		x-transition:enter-end="opacity-100 translate-y-0"
+		x-transition:leave="transition ease-in-out duration-300 transform absolute"
+		x-transition:leave-start="opacity-100 translate-y-0"
+		x-transition:leave-end="opacity-0 translate-y-4"
+	>
+		<div class="inline-flex relative align-top">
+			<img
+				class="rounded-t-lg 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] box-content shadow-2xl"
+				src={ highlight.Image.Src }
+				width={ highlight.Image.Width }
+				height={ highlight.Image.Height }
+				alt={ highlight.Title }
+			/>
+		</div>
+	</div>
+}
+
+func getSelectedClass(index int) string {
+	return fmt.Sprintf("tab === '%d' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[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] shadow-sm rotate-1'", index+1)
+}
+
+func getShowBorder(index int) string {
+	return fmt.Sprintf("tab === '%d' ? 'hidden' : ''", index+1)
+}
+
+func getClickPrevent(index int) string {
+	return fmt.Sprintf("tab = '%d'", index+1)
+}
+
+func getXShow(index int) string {
+	return fmt.Sprintf("tab === '%d'", index+1)
+}
@@ -0,0 +1,287 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.778
+package sections
+
+//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"
+
+import (
+	"fmt"
+	models "github.com/onsonr/sonr/internal/orm/marketing"
+)
+
+func Highlights(highlights *models.Highlights) 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("<!-- Features --><section class=\"relative bg-zinc-50\"><div class=\"py-12 md:py-20\"><div class=\"max-w-5xl mx-auto px-4 sm:px-6\"><div class=\"max-w-3xl mx-auto text-center pb-12\"><h2 class=\"font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(highlights.Heading)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/highlights.templ`, Line: 17, Col: 26}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h2><p class=\"text-lg text-zinc-500\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(highlights.Subtitle)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/highlights.templ`, Line: 20, Col: 27}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div><div x-data=\"{ tab: &#39;1&#39; }\"><!-- Tabs buttons --><div class=\"grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = highlightTab(1, highlights.Features[0]).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = highlightTab(2, highlights.Features[1]).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div></div></section>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func highlightTab(index int, highlight *models.Feature) 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_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button :class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(getSelectedClass(index))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/highlights.templ`, Line: 37, Col: 34}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"text-left px-4 py-5 border border-transparent rounded\" @click.prevent=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(getClickPrevent(index))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/highlights.templ`, Line: 39, Col: 41}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><div class=\"flex items-center justify-between mb-1\"><div class=\"font-inter-tight font-semibold text-zinc-900\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(highlight.Title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/highlights.templ`, Line: 43, Col: 21}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><svg :class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(getShowBorder(index))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/highlights.templ`, Line: 46, Col: 33}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"fill-zinc-400 shrink-0 ml-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><path d=\"M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z\"></path></svg></div><div class=\"text-sm text-zinc-500\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(highlight.Desc)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/highlights.templ`, Line: 58, Col: 19}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></button>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func highlightCard(index int, highlight *models.Feature) 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("<div class=\"w-full text-center\" x-show=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(getXShow(index))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/highlights.templ`, Line: 66, Col: 26}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" x-transition:enter=\"transition ease-in-out duration-700 transform order-first\" x-transition:enter-start=\"opacity-0 -translate-y-4\" x-transition:enter-end=\"opacity-100 translate-y-0\" x-transition:leave=\"transition ease-in-out duration-300 transform absolute\" x-transition:leave-start=\"opacity-100 translate-y-0\" x-transition:leave-end=\"opacity-0 translate-y-4\"><div class=\"inline-flex relative align-top\"><img class=\"rounded-t-lg 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] box-content shadow-2xl\" src=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(highlight.Image.Src)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/highlights.templ`, Line: 77, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" width=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 string
+		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(highlight.Image.Width)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/highlights.templ`, Line: 78, Col: 33}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" height=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var14 string
+		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(highlight.Image.Height)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/highlights.templ`, Line: 79, Col: 35}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" alt=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var15 string
+		templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(highlight.Title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/marketing/sections/highlights.templ`, Line: 80, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func getSelectedClass(index int) string {
+	return fmt.Sprintf("tab === '%d' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[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] shadow-sm rotate-1'", index+1)
+}
+
+func getShowBorder(index int) string {
+	return fmt.Sprintf("tab === '%d' ? 'hidden' : ''", index+1)
+}
+
+func getClickPrevent(index int) string {
+	return fmt.Sprintf("tab = '%d'", index+1)
+}
+
+func getXShow(index int) string {
+	return fmt.Sprintf("tab === '%d'", index+1)
+}
+
+var _ = templruntime.GeneratedTemplate
@@ -0,0 +1,161 @@
+package sections
+
+templ Lowlights() {
+	<section class="bg-zinc-800">
+		<div class="py-12 md:py-20">
+			<div class="max-w-5xl mx-auto px-4 sm:px-6">
+				<div class="max-w-3xl mx-auto text-center pb-12 md:pb-20">
+					<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-200">The Fragmentation Problem in the Existing Web is seeping into Crypto</h2>
+				</div>
+			</div>
+			<div class="max-w-[94rem] mx-auto space-y-6">
+				<!-- Row #1 -->
+				<div
+					x-data="{}"
+					x-init="$nextTick(() => {
+                                let ul = $refs.testimonials;
+                                ul.insertAdjacentHTML('afterend', ul.outerHTML);
+                                ul.nextSibling.setAttribute('aria-hidden', 'true');
+                            })"
+					class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_28%,_black_calc(100%-28%),transparent_100%)] group"
+				>
+					<div x-ref="testimonials" class="flex items-start justify-center md:justify-start [&>div]:mx-3 animate-infinite-scroll group-hover:[animation-play-state:paused]">
+						<!-- Item #1 -->
+						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
+							<div class="flex items-center mb-4">
+								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-01.jpg" width="44" height="44" alt="Testimonial 01"/>
+								<div>
+									<div class="font-inter-tight font-bold text-zinc-200">Lina James</div>
+									<div>
+										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">linaj87</a>
+									</div>
+								</div>
+							</div>
+							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
+								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
+							</div>
+						</div>
+						<!-- Item #2 -->
+						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
+							<div class="flex items-center mb-4">
+								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-02.jpg" width="44" height="44" alt="Testimonial 02"/>
+								<div>
+									<div class="font-inter-tight font-bold text-zinc-200">Sarah Mendes</div>
+									<div>
+										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">saramendes</a>
+									</div>
+								</div>
+							</div>
+							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
+								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
+							</div>
+						</div>
+						<!-- Item #3 -->
+						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
+							<div class="flex items-center mb-4">
+								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-03.jpg" width="44" height="44" alt="Testimonial 03"/>
+								<div>
+									<div class="font-inter-tight font-bold text-zinc-200">Michał Rutt</div>
+									<div>
+										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">michrutt</a>
+									</div>
+								</div>
+							</div>
+							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
+								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
+							</div>
+						</div>
+						<!-- Item #4 -->
+						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
+							<div class="flex items-center mb-4">
+								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-04.jpg" width="44" height="44" alt="Testimonial 04"/>
+								<div>
+									<div class="font-inter-tight font-bold text-zinc-200">Mary Kahl</div>
+									<div>
+										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">marykahl</a>
+									</div>
+								</div>
+							</div>
+							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
+								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
+							</div>
+						</div>
+					</div>
+				</div>
+				<!-- Row #2 -->
+				<div
+					x-data="{}"
+					x-init="$nextTick(() => {
+                                let ul = $refs.testimonials;
+                                ul.insertAdjacentHTML('afterend', ul.outerHTML);
+                                ul.nextSibling.setAttribute('aria-hidden', 'true');
+                            })"
+					class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_28%,_black_calc(100%-28%),transparent_100%)] group"
+				>
+					<div x-ref="testimonials" class="flex items-start justify-center md:justify-start [&>div]:mx-3 animate-infinite-scroll-inverse group-hover:[animation-play-state:paused] [animation-delay:-7.5s]">
+						<!-- Item #5 -->
+						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
+							<div class="flex items-center mb-4">
+								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-05.jpg" width="44" height="44" alt="Testimonial 05"/>
+								<div>
+									<div class="font-inter-tight font-bold text-zinc-200">Katy Dragán</div>
+									<div>
+										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">katyd</a>
+									</div>
+								</div>
+							</div>
+							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
+								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
+							</div>
+						</div>
+						<!-- Item #6 -->
+						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
+							<div class="flex items-center mb-4">
+								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-06.jpg" width="44" height="44" alt="Testimonial 06"/>
+								<div>
+									<div class="font-inter-tight font-bold text-zinc-200">Karl Ahmed</div>
+									<div>
+										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">karl87</a>
+									</div>
+								</div>
+							</div>
+							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
+								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
+							</div>
+						</div>
+						<!-- Item #7 -->
+						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
+							<div class="flex items-center mb-4">
+								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-07.jpg" width="44" height="44" alt="Testimonial 07"/>
+								<div>
+									<div class="font-inter-tight font-bold text-zinc-200">Carlotta Grech</div>
+									<div>
+										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">carlagrech</a>
+									</div>
+								</div>
+							</div>
+							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
+								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
+							</div>
+						</div>
+						<!-- Item #8 -->
+						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
+							<div class="flex items-center mb-4">
+								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-08.jpg" width="44" height="44" alt="Testimonial 08"/>
+								<div>
+									<div class="font-inter-tight font-bold text-zinc-200">Alejandra Gok</div>
+									<div>
+										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">alejandraIT</a>
+									</div>
+								</div>
+							</div>
+							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
+								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+}
@@ -0,0 +1,335 @@
+package sections
+
+templ Mission() {
+	<!-- Features #3 -->
+	<section
+		class="relative bg-zinc-800 after:absolute after:top-0 after:right-0 after:h-full after:w-96 after:pointer-events-none after:bg-gradient-to-l after:from-zinc-800 max-lg:after:hidden"
+	>
+		<div class="py-12 md:py-20">
+			<!-- Carousel -->
+			<div class="max-w-xl lg:max-w-6xl mx-auto px-8 sm:px-6">
+				<div
+					class="lg:flex space-y-12 lg:space-y-0 lg:space-x-12 xl:space-x-24"
+					x-data="{ tab: '1' }"
+				>
+					<!-- Content -->
+					<div class="lg:max-w-none lg:min-w-[524px]">
+						<div class="mb-8">
+							<div
+								class="inline-flex text-sm font-medium text-zinc-400 px-4 py-0.5 border border-transparent [background:linear-gradient(theme(colors.zinc.800),theme(colors.zinc.800))_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] rounded-full mb-4"
+							>
+								L1 Blockchain
+							</div>
+							<h3
+								class="font-inter-tight text-3xl font-bold text-zinc-200 mb-4"
+							>
+								The Protocol for Decentralized Identity & Authentication
+							</h3>
+							<p class="text-lg text-zinc-500">
+								We're creating the Global Standard for Decentralized Identity. 
+								Authenticate users with PassKeys, Issue Crypto Wallets, Build 
+								Payment flows, Send Encrypted Messages - all on a single platform.
+							</p>
+						</div>
+						<!-- Tabs buttons -->
+						<div class="mb-8 md:mb-0 space-y-2">
+							<button
+								:class="tab !== '1' ? '' : '[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]'"
+								class="text-left flex items-center px-6 py-4 rounded border border-transparent"
+								@click.prevent="tab = '1'"
+							>
+								<svg
+									class="shrink-0 fill-zinc-400 mr-3"
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+								>
+									<path
+										d="m7.951 14.537 6.296-7.196 1.506 1.318-7.704 8.804-3.756-3.756 1.414-1.414 2.244 2.244Zm11.296-7.196 1.506 1.318-7.704 8.804-1.756-1.756 1.414-1.414.244.244 6.296-7.196Z"
+									></path>
+								</svg>
+								<div>
+									<div
+										class="font-inter-tight text-lg font-semibold text-zinc-200 mb-1"
+									>
+										Make designs feel real
+									</div>
+									<div class="text-zinc-500">
+										Save time and keep things consistent with reusable
+										images, and 3D assets in shared libraries.
+									</div>
+								</div>
+							</button>
+							<button
+								:class="tab !== '2' ? '' : '[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]'"
+								class="text-left flex items-center px-6 py-4 rounded border border-transparent"
+								@click.prevent="tab = '2'"
+							>
+								<svg
+									class="shrink-0 fill-zinc-400 mr-3"
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+								>
+									<path
+										d="m16.997 19.056-1.78-.912A13.91 13.91 0 0 0 16.75 11.8c0-2.206-.526-4.38-1.533-6.344l1.78-.912A15.91 15.91 0 0 1 18.75 11.8c0 2.524-.602 5.01-1.753 7.256Zm-3.616-1.701-1.77-.93A9.944 9.944 0 0 0 12.75 11.8c0-1.611-.39-3.199-1.14-4.625l1.771-.93c.9 1.714 1.37 3.62 1.369 5.555 0 1.935-.47 3.841-1.369 5.555Zm-3.626-1.693-1.75-.968c.49-.885.746-1.881.745-2.895a5.97 5.97 0 0 0-.745-2.893l1.75-.968a7.968 7.968 0 0 1 .995 3.861 7.97 7.97 0 0 1-.995 3.863Zm-3.673-1.65-1.664-1.11c.217-.325.333-.709.332-1.103 0-.392-.115-.776-.332-1.102L6.082 9.59c.437.655.67 1.425.668 2.21a3.981 3.981 0 0 1-.668 2.212Z"
+									></path>
+								</svg>
+								<div>
+									<div
+										class="font-inter-tight text-lg font-semibold text-zinc-200 mb-1"
+									>
+										Bring creatives closer
+									</div>
+									<div class="text-zinc-500">
+										Save time and keep things consistent with reusable
+										images, and 3D assets in shared libraries.
+									</div>
+								</div>
+							</button>
+							<button
+								:class="tab !== '3' ? '' : '[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]'"
+								class="text-left flex items-center px-6 py-4 rounded border border-transparent"
+								@click.prevent="tab = '3'"
+							>
+								<svg
+									class="shrink-0 fill-zinc-400 mr-3"
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+								>
+									<path
+										d="m11.293 5.293 1.414 1.414-8 8-1.414-1.414 8-8Zm7-1 1.414 1.414-8 8-1.414-1.414 8-8Zm0 6 1.414 1.414-8 8-1.414-1.414 8-8Z"
+									></path>
+								</svg>
+								<div>
+									<div
+										class="font-inter-tight text-lg font-semibold text-zinc-200 mb-1"
+									>
+										Scale and align your design team
+									</div>
+									<div class="text-zinc-500">
+										Save time and keep things consistent with reusable
+										images, and 3D assets in shared libraries.
+									</div>
+								</div>
+							</button>
+						</div>
+					</div>
+					<!-- Tabs items -->
+					<div class="relative lg:max-w-none">
+						<div class="relative flex flex-col">
+							<!-- Item 1 -->
+							<div
+								class="w-full"
+								x-show="tab === '1'"
+								x-transition:enter="transition ease-in-out duration-700 transform order-first"
+								x-transition:enter-start="opacity-0 translate-x-8"
+								x-transition:enter-end="opacity-100 translate-x-0"
+								x-transition:leave="transition ease-in-out duration-300 transform absolute"
+								x-transition:leave-start="opacity-100 translate-x-0"
+								x-transition:leave-end="opacity-0 -translate-x-8"
+							>
+								<div>
+									<img
+										class="lg:max-w-none mx-auto rounded-lg shadow-2xl"
+										src="./images/carousel-illustration-01.jpg"
+										width="800"
+										height="620"
+										alt="Carousel 01"
+									/>
+								</div>
+							</div>
+							<!-- Item 2 -->
+							<div
+								class="w-full"
+								x-show="tab === '2'"
+								x-transition:enter="transition ease-in-out duration-700 transform order-first"
+								x-transition:enter-start="opacity-0 translate-x-8"
+								x-transition:enter-end="opacity-100 translate-x-0"
+								x-transition:leave="transition ease-in-out duration-300 transform absolute"
+								x-transition:leave-start="opacity-100 translate-x-0"
+								x-transition:leave-end="opacity-0 -translate-x-8"
+							>
+								<div>
+									<img
+										class="lg:max-w-none mx-auto rounded-lg shadow-2xl"
+										src="./images/carousel-illustration-01.jpg"
+										width="800"
+										height="620"
+										alt="Carousel 02"
+									/>
+								</div>
+							</div>
+							<!-- Item 3 -->
+							<div
+								class="w-full"
+								x-show="tab === '3'"
+								x-transition:enter="transition ease-in-out duration-700 transform order-first"
+								x-transition:enter-start="opacity-0 translate-x-8"
+								x-transition:enter-end="opacity-100 translate-x-0"
+								x-transition:leave="transition ease-in-out duration-300 transform absolute"
+								x-transition:leave-start="opacity-100 translate-x-0"
+								x-transition:leave-end="opacity-0 -translate-x-8"
+							>
+								<div>
+									<img
+										class="lg:max-w-none mx-auto rounded-lg shadow-2xl"
+										src="./images/carousel-illustration-01.jpg"
+										width="800"
+										height="620"
+										alt="Carousel 03"
+									/>
+								</div>
+							</div>
+						</div>
+						<!-- Gear illustration -->
+						<img
+							class="absolute left-0 bottom-0 -translate-x-1/2 translate-y-1/3 mix-blend-exclusion max-lg:w-32"
+							src="https://cdn.sonr.id/img/secure-vault.svg"
+							alt="Features 02 illustration"
+							width="224"
+							height="224"
+							aria-hidden="true"
+						/>
+					</div>
+				</div>
+			</div>
+			@featuresBlocks()
+		</div>
+	</section>
+}
+
+templ featuresBlocks() {
+	<div class="max-w-6xl mx-auto px-4 sm:px-6 mt-24 lg:mt-32">
+		<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-16">
+			<!-- Block #1 -->
+			<div>
+				<div class="flex items-center mb-1">
+					<svg
+						class="fill-zinc-400 mr-2"
+						xmlns="http://www.w3.org/2000/svg"
+						width="16"
+						height="16"
+					>
+						<path
+							d="M15 9a1 1 0 0 1 0 2c-.441 0-1.243.92-1.89 1.716.319 1.005.529 1.284.89 1.284a1 1 0 0 1 0 2 2.524 2.524 0 0 1-2.339-1.545A3.841 3.841 0 0 1 9 16a1 1 0 0 1 0-2c.441 0 1.243-.92 1.89-1.716C10.57 11.279 10.361 11 10 11a1 1 0 0 1 0-2 2.524 2.524 0 0 1 2.339 1.545A3.841 3.841 0 0 1 15 9Zm-5-1H7.51l-.02.142C6.964 11.825 6.367 16 3 16a3 3 0 0 1-3-3 1 1 0 0 1 2 0 1 1 0 0 0 1 1c1.49 0 1.984-2.48 2.49-6H3a1 1 0 1 1 0-2h2.793c.52-3.1 1.4-6 4.207-6a3 3 0 0 1 3 3 1 1 0 0 1-2 0 1 1 0 0 0-1-1C8.808 2 8.257 3.579 7.825 6H10a1 1 0 0 1 0 2Z"
+						></path>
+					</svg>
+					<h3 class="font-inter-tight font-semibold text-zinc-200">
+						Multi-party Computation
+					</h3>
+				</div>
+				<p class="text-sm text-zinc-500">
+					Eliminate the need for seed-phrases, and browser extensions for crypto wallets.
+				</p>
+			</div>
+			<!-- Block #2 -->
+			<div>
+				<div class="flex items-center mb-1">
+					<svg
+						class="fill-zinc-400 mr-2"
+						xmlns="http://www.w3.org/2000/svg"
+						width="16"
+						height="16"
+					>
+						<path
+							d="M13 16c-.153 0-.306-.035-.447-.105l-3.851-1.926c-.231.02-.465.031-.702.031-4.411 0-8-3.14-8-7s3.589-7 8-7 8 3.14 8 7c0 1.723-.707 3.351-2 4.63V15a1.003 1.003 0 0 1-1 1Zm-4.108-4.054c.155 0 .308.036.447.105L12 13.382v-2.187c0-.288.125-.562.341-.752C13.411 9.506 14 8.284 14 7c0-2.757-2.691-5-6-5S2 4.243 2 7s2.691 5 6 5c.266 0 .526-.02.783-.048a1.01 1.01 0 0 1 .109-.006Z"
+						></path>
+					</svg>
+					<h3 class="font-inter-tight font-semibold text-zinc-200">
+						Matrix Protocol
+					</h3>
+				</div>
+				<p class="text-sm text-zinc-500">
+					End-to-end encrypted messaging with <a class="text-zinc-500 hover:text-zinc-300 transition" href="https://sonr.chat">sonr.chat</a>.
+				</p>
+			</div>
+			<!-- Block #3 -->
+			<div>
+				<div class="flex items-center mb-1">
+					<svg
+						class="fill-zinc-400 mr-2"
+						xmlns="http://www.w3.org/2000/svg"
+						width="14"
+						height="16"
+					>
+						<path
+							d="M13 0H1C.4 0 0 .4 0 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1ZM2 2h10v8H8v4H2V2Z"
+						></path>
+					</svg>
+					<h3 class="font-inter-tight font-semibold text-zinc-200">
+						OpenID Connect
+					</h3>
+				</div>
+				<p class="text-sm text-zinc-500">
+					Seamless integration with Web2 Applications with the OpenID Standard.
+				</p>
+			</div>
+			<!-- Block #4 -->
+			<div>
+				<div class="flex items-center mb-1">
+					<svg
+						class="fill-zinc-400 mr-2"
+						xmlns="http://www.w3.org/2000/svg"
+						width="16"
+						height="16"
+					>
+						<path
+							d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7ZM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm8.707 12.293a.999.999 0 1 1-1.414 1.414L11.9 13.314a8.019 8.019 0 0 0 1.414-1.414l2.393 2.393Z"
+						></path>
+					</svg>
+					<h3 class="font-inter-tight font-semibold text-zinc-200">
+						Native ETH & BTC
+					</h3>
+				</div>
+				<p class="text-sm text-zinc-500">
+					Keep workflows efficient with tools that give teams
+					visibility throughout the process.
+				</p>
+			</div>
+			<!-- Block #5 -->
+			<div>
+				<div class="flex items-center mb-1">
+					<svg
+						class="fill-zinc-400 mr-2"
+						xmlns="http://www.w3.org/2000/svg"
+						width="16"
+						height="16"
+					>
+						<path
+							d="M14.6.085 8 2.885 1.4.085c-.5-.2-1.4-.1-1.4.9v11c0 .4.2.8.6.9l7 3c.3.1.5.1.8 0l7-3c.4-.2.6-.5.6-.9v-11c0-1-.9-1.1-1.4-.9ZM2 2.485l5 2.1v8.8l-5-2.1v-8.8Zm12 8.8-5 2.1v-8.7l5-2.1v8.7Z"
+						></path>
+					</svg>
+					<h3 class="font-inter-tight font-semibold text-zinc-200">
+						Developer Integrations
+					</h3>
+				</div>
+				<p class="text-sm text-zinc-500">
+					Quickly integrate with Sonr by leveraging modern web APIs.
+				</p>
+			</div>
+			<!-- Block #6 -->
+			<div>
+				<div class="flex items-center mb-1">
+					<svg
+						class="fill-zinc-400 mr-2"
+						xmlns="http://www.w3.org/2000/svg"
+						width="14"
+						height="16"
+					>
+						<path
+							d="M13 14a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2h12Zm-6.707-2.293-5-5a1 1 0 0 1 1.414-1.414L6 8.586V1a1 1 0 1 1 2 0v7.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-5 5a1 1 0 0 1-1.414 0Z"
+						></path>
+					</svg>
+					<h3 class="font-inter-tight font-semibold text-zinc-200">
+						Secure Backups
+					</h3>
+				</div>
+				<p class="text-sm text-zinc-500">
+					Uniformly accessible user keyshare access on/off network.
+				</p>
+			</div>
+		</div>
+	</div>
+}
@@ -0,0 +1,71 @@
+package marketing
+
+import models "github.com/onsonr/sonr/internal/orm/marketing"
+
+var hero = &models.Hero{
+	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.",
+	PrimaryButton:   &models.Button{Text: "Get Started", Href: "/register"},
+	SecondaryButton: &models.Button{Text: "Learn More", Href: "/about"},
+	Image: &models.Image{
+		Src:    "https://cdn.sonr.id/img/hero-clipped.svg",
+		Width:  "500",
+		Height: "500",
+	},
+	Stats: []*models.Stat{
+		{Value: "476", Label: "Assets packed with power beyond your imagination.", Denom: "K"},
+		{Value: "1.44", Label: "Assets packed with power beyond your imagination.", Denom: "K"},
+		{Value: "1.5", Label: "Assets packed with power beyond your imagination.", Denom: "M+"},
+		{Value: "750", Label: "Assets packed with power beyond your imagination.", Denom: "K"},
+	},
+}
+
+var highlights = &models.Highlights{
+	Heading:  "The Internet Rebuilt for You",
+	Subtitle: "Sonr is a comprehensive system for Identity Management which proteects users across their digital personas while providing Developers a cost-effective solution for decentralized authentication.",
+	Features: []*models.Feature{
+		{
+			Title: "∞-Factor Auth",
+			Desc:  "Sonr is designed to work across all platforms and devices, building a encrypted and anonymous identity layer for each user on the internet.",
+			Icon:  nil,
+		},
+		{
+			Title: "Data Ownership",
+			Desc:  "Sonr leverages advanced cryptography to permit facilitating Wallet Operations directly on-chain, without the need for a centralized server.",
+			Icon:  nil,
+		},
+		{
+			Title: "Everyday Transactions",
+			Desc:  "Sonr follows the latest specifications from W3C, DIF, and ICF to essentially have an Interchain-Connected, Smart Account System - seamlessly authenticated with PassKeys.",
+			Icon:  nil,
+		},
+		{
+			Title: "Limitless Possibilities",
+			Desc:  "Sonr is a proudly American Project which operates under the new Wyoming DUNA Legal Framework, ensuring the protection of your digital rights.",
+			Icon:  nil,
+		},
+	},
+}
+
+var mission = &models.Mission{
+	Eyebrow:  "L1 Blockchain",
+	Heading:  "The Protocol for Decentralized Identity & Authentication",
+	Subtitle: "We're creating the Global Standard for Decentralized Identity. Authenticate users with PassKeys, Issue Crypto Wallets, Build Payment flows, Send Encrypted Messages - all on a single platform.",
+	Experience: &models.Feature{
+		Title: "Less is More",
+		Desc:  "Sonr is a comprehensive system for Identity Management which proteects users across their digital personas while providing Developers a cost-effective solution for decentralized authentication.",
+		Icon:  nil,
+	},
+	Compliance: &models.Feature{
+		Title: "Works where there's Internet",
+		Desc:  "Sonr is designed to work across all platforms and devices, building a encrypted and anonymous identity layer for each user on the internet.",
+		Icon:  nil,
+	},
+	Interoperability: &models.Feature{
+		Title: "American Made DUNA",
+		Desc:  "Sonr follows the latest specifications from W3C, DIF, and ICF to essentially have an Interchain-Connected, Smart Account System - seamlessly authenticated with PassKeys.",
+		Icon:  nil,
+	},
+}