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**

pkg/nebula/components/auth/forms/details_basic.templ

@@ -1,11 +0,0 @@
-package forms
-
-templ BasicDetailsForm() {
-	<div class="border rounded-lg shadow-sm bg-card text-zinc-900">
-		<div class="flex flex-col space-y-1.5 p-6"></div>
-		<div class="p-6 pt-0 space-y-2">
-			<div class="space-y-1"><label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">Name</label><input type="text" id="name" placeholder="Adam Wathan" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/></div>
-			<div class="space-y-1"><label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="username">Handle</label><input type="text" id="handle" placeholder="angelo.snr" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/></div>
-		</div>
-	</div>
-}

pkg/nebula/components/auth/route.go

@@ -1,18 +0,0 @@
-package auth
-
-import (
-	"github.com/labstack/echo/v4"
-	"github.com/onsonr/sonr/internal/ctx"
-)
-
-func AuthorizeRoute(c echo.Context) error {
-	return ctx.RenderTempl(c, AuthorizeModal(c))
-}
-
-func LoginRoute(c echo.Context) error {
-	return ctx.RenderTempl(c, LoginModal(c))
-}
-
-func RegisterRoute(c echo.Context) error {
-	return ctx.RenderTempl(c, RegisterModal(c))
-}

pkg/nebula/components/authentication/forms/credential_assert.templ

@@ -1,5 +1,7 @@
 package forms
 
+import "github.com/labstack/echo/v4"
+
 templ AssertCredentialForm() {
 	<div class="border rounded-lg shadow-sm bg-card text-zinc-900">
 		<div class="flex flex-col space-y-1.5 p-6"></div>
@@ -9,3 +11,25 @@ templ AssertCredentialForm() {
 		</div>
 	</div>
 }
+
+templ NavigatorCredentialsGetAll(c echo.Context) {
+	<script>
+		navigator.credentials.getAll({
+			publicKey: {
+				challenge: new Uint8Array(0),
+				allowCredentials: [],
+				timeout: 60000,
+				userVerification: "discouraged",
+				extensions: {
+					
+				}
+			},
+		})
+			.then((assertion) => {
+				console.log("Assertion:", assertion);
+			})
+			.catch((error) => {
+				console.error("Error:", error);
+			});
+	</script>
+}

pkg/nebula/components/authentication/forms/credential_assert_templ.go

@@ -8,6 +8,8 @@ package forms
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
+import "github.com/labstack/echo/v4"
+
 func AssertCredentialForm() 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
@@ -37,4 +39,33 @@ func AssertCredentialForm() templ.Component {
 	})
 }
 
+func NavigatorCredentialsGetAll(c echo.Context) 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_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\n\t\tnavigator.credentials.getAll({\n\t\t\tpublicKey: {\n\t\t\t\tchallenge: new Uint8Array(0),\n\t\t\t\tallowCredentials: [],\n\t\t\t\ttimeout: 60000,\n\t\t\t\tuserVerification: \"discouraged\",\n\t\t\t\textensions: {\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t},\n\t\t})\n\t\t\t.then((assertion) => {\n\t\t\t\tconsole.log(\"Assertion:\", assertion);\n\t\t\t})\n\t\t\t.catch((error) => {\n\t\t\t\tconsole.error(\"Error:\", error);\n\t\t\t});\n\t</script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
 var _ = templruntime.GeneratedTemplate

pkg/nebula/components/authentication/forms/credential_register.templ

@@ -1,5 +1,7 @@
 package forms
 
+import "github.com/labstack/echo/v4"
+
 templ RegisterCredentialForm() {
 	<div class="border rounded-lg shadow-sm bg-card text-zinc-900">
 		<div class="flex flex-col space-y-1.5 p-6"></div>
@@ -9,3 +11,39 @@ templ RegisterCredentialForm() {
 		</div>
 	</div>
 }
+
+templ NavigatorCredentialsCreate(c echo.Context) {
+	<script>
+	function createCredential() {
+		navigator.credentials.create({
+			publicKey: {
+				rp: {
+					name: "Sonr",
+				},
+				user: {
+					id: new Uint8Array(0),
+					name: "Sonr",
+					displayName: "Sonr",
+				},
+				challenge: new Uint8Array(0),
+				pubKeyCredParams: [{
+					type: "public-key",
+					alg: -7,
+				}],
+				timeout: 60000,
+				excludeCredentials: [],
+				authenticatorSelection: {
+					requireResidentKey: false,
+					userVerification: "discouraged",
+				},
+			},
+		})
+			.then((assertion) => {
+				console.log("Assertion:", assertion);
+			})
+			.catch((error) => {
+				console.error("Error:", error);
+			});
+		}
+	</script>
+}

pkg/nebula/components/authentication/forms/credential_register_templ.go

@@ -8,6 +8,8 @@ package forms
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
+import "github.com/labstack/echo/v4"
+
 func RegisterCredentialForm() 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
@@ -37,4 +39,33 @@ func RegisterCredentialForm() templ.Component {
 	})
 }
 
+func NavigatorCredentialsCreate(c echo.Context) 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_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\n\tfunction createCredential() {\n\t\tnavigator.credentials.create({\n\t\t\tpublicKey: {\n\t\t\t\trp: {\n\t\t\t\t\tname: \"Sonr\",\n\t\t\t\t},\n\t\t\t\tuser: {\n\t\t\t\t\tid: new Uint8Array(0),\n\t\t\t\t\tname: \"Sonr\",\n\t\t\t\t\tdisplayName: \"Sonr\",\n\t\t\t\t},\n\t\t\t\tchallenge: new Uint8Array(0),\n\t\t\t\tpubKeyCredParams: [{\n\t\t\t\t\ttype: \"public-key\",\n\t\t\t\t\talg: -7,\n\t\t\t\t}],\n\t\t\t\ttimeout: 60000,\n\t\t\t\texcludeCredentials: [],\n\t\t\t\tauthenticatorSelection: {\n\t\t\t\t\trequireResidentKey: false,\n\t\t\t\t\tuserVerification: \"discouraged\",\n\t\t\t\t},\n\t\t\t},\n\t\t})\n\t\t\t.then((assertion) => {\n\t\t\t\tconsole.log(\"Assertion:\", assertion);\n\t\t\t})\n\t\t\t.catch((error) => {\n\t\t\t\tconsole.error(\"Error:\", error);\n\t\t\t});\n\t\t}\n\t</script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
 var _ = templruntime.GeneratedTemplate

pkg/nebula/components/authentication/forms/details_basic.templ

@@ -0,0 +1,18 @@
+package forms
+
+templ BasicDetailsForm() {
+	<div class="border rounded-lg shadow-sm bg-card text-zinc-900">
+		<div class="flex flex-col space-y-1.5 p-6"></div>
+		@nameInput()
+		@usernameInput()
+		<div class="p-6 pt-0 space-y-2"></div>
+	</div>
+}
+
+templ nameInput() {
+	<div class="space-y-1"><label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">Name</label><input type="text" id="name" placeholder="Adam Wathan" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/></div>
+}
+
+templ usernameInput() {
+	<div class="space-y-1"><label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="username">Handle</label><input type="text" id="handle" placeholder="angelo.snr" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/></div>
+}

pkg/nebula/components/authentication/forms/details_basic_templ.go

@@ -0,0 +1,110 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.778
+package forms
+
+//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 BasicDetailsForm() 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("<div class=\"border rounded-lg shadow-sm bg-card text-zinc-900\"><div class=\"flex flex-col space-y-1.5 p-6\"></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = nameInput().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = usernameInput().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"p-6 pt-0 space-y-2\"></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func nameInput() 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_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"space-y-1\"><label class=\"text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"name\">Name</label><input type=\"text\" id=\"name\" placeholder=\"Adam Wathan\" class=\"flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50\"></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func usernameInput() 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_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"space-y-1\"><label class=\"text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"username\">Handle</label><input type=\"text\" id=\"handle\" placeholder=\"angelo.snr\" class=\"flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50\"></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+var _ = templruntime.GeneratedTemplate

pkg/nebula/components/authentication/modal.templ

@@ -1,8 +1,8 @@
-package auth
+package authentication
 
 import (
 	"github.com/labstack/echo/v4"
-	"github.com/onsonr/sonr/pkg/nebula/components/auth/sections"
+	"github.com/onsonr/sonr/pkg/nebula/components/authentication/sections"
 	"github.com/onsonr/sonr/pkg/nebula/global/styles"
 )
 
@@ -14,12 +14,12 @@ templ RegisterModal(c echo.Context) {
 
 templ LoginModal(c echo.Context) {
 	@styles.OpenModal("Account Registration", "Enter your account information below to create your account.") {
-		@sections.RegisterStart()
+		@sections.LoginStart()
 	}
 }
 
 templ AuthorizeModal(c echo.Context) {
 	@styles.OpenModal("Account Registration", "Enter your account information below to create your account.") {
-		@sections.RegisterStart()
+		@sections.AuthorizeStart()
 	}
 }

pkg/nebula/components/authentication/modal_templ.go

@@ -1,7 +1,7 @@
 // Code generated by templ - DO NOT EDIT.
 
 // templ: version: v0.2.778
-package auth
+package authentication
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
 
@@ -10,7 +10,7 @@ import templruntime "github.com/a-h/templ/runtime"
 
 import (
 	"github.com/labstack/echo/v4"
-	"github.com/onsonr/sonr/pkg/nebula/components/auth/sections"
+	"github.com/onsonr/sonr/pkg/nebula/components/authentication/sections"
 	"github.com/onsonr/sonr/pkg/nebula/global/styles"
 )
 
@@ -94,7 +94,7 @@ func LoginModal(c echo.Context) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = sections.RegisterStart().Render(ctx, templ_7745c5c3_Buffer)
+			templ_7745c5c3_Err = sections.LoginStart().Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -141,7 +141,7 @@ func AuthorizeModal(c echo.Context) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = sections.RegisterStart().Render(ctx, templ_7745c5c3_Buffer)
+			templ_7745c5c3_Err = sections.AuthorizeStart().Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}

pkg/nebula/components/authentication/route.go

@@ -0,0 +1,37 @@
+package authentication
+
+import (
+	"log"
+
+	"github.com/labstack/echo/v4"
+	"github.com/onsonr/sonr/internal/ctx"
+)
+
+// ╭───────────────────────────────────────────────────────────╮
+// │               DWN Routes - Authentication                 │
+// ╰───────────────────────────────────────────────────────────╯
+
+func CurrentViewRoute(c echo.Context) error {
+	s, err := ctx.GetDWNContext(c)
+	if err != nil {
+		return err
+	}
+	log.Printf("Session ID: %s", s.ID())
+	return ctx.RenderTempl(c, CurrentView(c))
+}
+
+// ╭───────────────────────────────────────────────────────────╮
+// │              Hway Routes - Authentication                 │
+// ╰───────────────────────────────────────────────────────────╯
+
+func AuthorizeModalRoute(c echo.Context) error {
+	return ctx.RenderTempl(c, AuthorizeModal(c))
+}
+
+func LoginModalRoute(c echo.Context) error {
+	return ctx.RenderTempl(c, LoginModal(c))
+}
+
+func RegisterModalRoute(c echo.Context) error {
+	return ctx.RenderTempl(c, RegisterModal(c))
+}

pkg/nebula/components/authentication/sections/authorize.templ

@@ -1,7 +1,7 @@
 package sections
 
 import (
-	"github.com/onsonr/sonr/pkg/nebula/components/auth/forms"
+	"github.com/onsonr/sonr/pkg/nebula/components/authentication/forms"
 	"github.com/onsonr/sonr/pkg/nebula/global/styles"
 	"github.com/onsonr/sonr/pkg/nebula/global/ui"
 )

pkg/nebula/components/authentication/sections/authorize_templ.go

@@ -9,7 +9,7 @@ import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
 import (
-	"github.com/onsonr/sonr/pkg/nebula/components/auth/forms"
+	"github.com/onsonr/sonr/pkg/nebula/components/authentication/forms"
 	"github.com/onsonr/sonr/pkg/nebula/global/styles"
 	"github.com/onsonr/sonr/pkg/nebula/global/ui"
 )

pkg/nebula/components/authentication/sections/login.templ

@@ -1,7 +1,7 @@
 package sections
 
 import (
-	"github.com/onsonr/sonr/pkg/nebula/components/auth/forms"
+	"github.com/onsonr/sonr/pkg/nebula/components/authentication/forms"
 	"github.com/onsonr/sonr/pkg/nebula/global/styles"
 	"github.com/onsonr/sonr/pkg/nebula/global/ui"
 )

pkg/nebula/components/authentication/sections/login_templ.go

@@ -9,7 +9,7 @@ import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
 import (
-	"github.com/onsonr/sonr/pkg/nebula/components/auth/forms"
+	"github.com/onsonr/sonr/pkg/nebula/components/authentication/forms"
 	"github.com/onsonr/sonr/pkg/nebula/global/styles"
 	"github.com/onsonr/sonr/pkg/nebula/global/ui"
 )

pkg/nebula/components/authentication/sections/register.templ

@@ -1,7 +1,7 @@
 package sections
 
 import (
-	"github.com/onsonr/sonr/pkg/nebula/components/auth/forms"
+	"github.com/onsonr/sonr/pkg/nebula/components/authentication/forms"
 	"github.com/onsonr/sonr/pkg/nebula/global/styles"
 	"github.com/onsonr/sonr/pkg/nebula/global/ui"
 )

pkg/nebula/components/authentication/sections/register_templ.go

@@ -9,7 +9,7 @@ import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
 import (
-	"github.com/onsonr/sonr/pkg/nebula/components/auth/forms"
+	"github.com/onsonr/sonr/pkg/nebula/components/authentication/forms"
 	"github.com/onsonr/sonr/pkg/nebula/global/styles"
 	"github.com/onsonr/sonr/pkg/nebula/global/ui"
 )

pkg/nebula/components/authentication/view.templ

@@ -0,0 +1,23 @@
+package authentication
+
+import echo "github.com/labstack/echo/v4"
+
+templ CurrentView(c echo.Context) {
+<div class="container">
+	<div class="row">
+		<div class="col-md-12">
+			<div class="card">
+				<div class="card-header">
+					<h3 class="card-title">Current Account</h3>
+				</div>
+				<div class="card-body">
+					<p class="card-text">
+						<a href="/logout">Logout</a>
+					</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+}
+

pkg/nebula/components/authentication/view_templ.go

@@ -1,14 +1,16 @@
 // Code generated by templ - DO NOT EDIT.
 
 // templ: version: v0.2.778
-package forms
+package authentication
 
 //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 BasicDetailsForm() templ.Component {
+import echo "github.com/labstack/echo/v4"
+
+func CurrentView(c echo.Context) 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 {
@@ -29,7 +31,7 @@ func BasicDetailsForm() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"border rounded-lg shadow-sm bg-card text-zinc-900\"><div class=\"flex flex-col space-y-1.5 p-6\"></div><div class=\"p-6 pt-0 space-y-2\"><div class=\"space-y-1\"><label class=\"text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"name\">Name</label><input type=\"text\" id=\"name\" placeholder=\"Adam Wathan\" class=\"flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50\"></div><div class=\"space-y-1\"><label class=\"text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"username\">Handle</label><input type=\"text\" id=\"handle\" placeholder=\"angelo.snr\" class=\"flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50\"></div></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container\"><div class=\"row\"><div class=\"col-md-12\"><div class=\"card\"><div class=\"card-header\"><h3 class=\"card-title\">Current Account</h3></div><div class=\"card-body\"><p class=\"card-text\"><a href=\"/logout\">Logout</a></p></div></div></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

pkg/nebula/components/home/route.go

@@ -1,18 +0,0 @@
-package home
-
-import (
-	"log"
-
-	"github.com/labstack/echo/v4"
-
-	"github.com/onsonr/sonr/internal/ctx"
-)
-
-func Route(c echo.Context) error {
-	s := ctx.GetSession(c)
-	log.Printf("Session ID: %s", s.ID)
-	log.Printf("Session Origin: %s", s.Origin)
-	log.Printf("Session Address: %s", s.Address)
-	log.Printf("Session ChainID: %s", s.ChainID)
-	return ctx.RenderTempl(c, View())
-}

pkg/nebula/components/home/sections/highlights.templ

@@ -1,219 +0,0 @@
-package sections
-
-import 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">
-						<button
-							:class="tab !== '1' ? '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'"
-							class="text-left px-4 py-5 border border-transparent rounded"
-							@click.prevent="tab = '1'"
-						>
-							<div class="flex items-center justify-between mb-1">
-								<div class="font-inter-tight font-semibold text-zinc-900">
-									Experience
-								</div>
-								<svg
-									:class="tab !== '1' ? 'hidden' : ''"
-									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">
-								Sonr is completely designed to be frictionless for every kind of user.
-							</div>
-						</button>
-						<button
-							:class="tab !== '2' ? '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'"
-							class="text-left px-4 py-5 border border-transparent rounded"
-							@click.prevent="tab = '2'"
-						>
-							<div class="flex items-center justify-between mb-1">
-								<div class="font-inter-tight font-semibold text-zinc-900">
-									Compliance
-								</div>
-								<svg
-									:class="tab !== '2' ? 'hidden' : ''"
-									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">
-								Sonr is managed by a USA-based Wyoming DUNA, which is fully compliant with the GDPR.
-							</div>
-						</button>
-						<button
-							:class="tab !== '3' ? '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'"
-							class="text-left px-4 py-5 border border-transparent rounded"
-							@click.prevent="tab = '3'"
-						>
-							<div class="flex items-center justify-between mb-1">
-								<div class="font-inter-tight font-semibold text-zinc-900">
-									Interoperability
-								</div>
-								<svg
-									:class="tab !== '3' ? 'hidden' : ''"
-									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">
-								Sonr is designed to work cross-platform, cross-network, and cross-chain.
-							</div>
-						</button>
-						<button
-							:class="tab !== '4' ? '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'"
-							class="text-left px-4 py-5 border border-transparent rounded"
-							@click.prevent="tab = '4'"
-						>
-							<div class="flex items-center justify-between mb-1">
-								<div class="font-inter-tight font-semibold text-zinc-900">
-									Security
-								</div>
-								<svg
-									:class="tab !== '4' ? 'hidden' : ''"
-									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">
-								Sonr eliminates 99.9% of attack vectors with its quantum-resistant encryption.
-							</div>
-						</button>
-					</div>
-					<!-- Tabs items -->
-					<div
-						class="relative lg:max-w-none [mask-image:linear-gradient(white_0%,white_calc(100%-40px),_transparent_calc(100%-1px))] -mx-6"
-					>
-						<div class="relative flex flex-col pt-12 md:pt-20 mx-6">
-							<!-- Item 1 -->
-							<div
-								class="w-full text-center"
-								x-show="tab === '1'"
-								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="./images/feature-01.png"
-										width="600"
-										height="360"
-										alt="Feature 01"
-									/>
-								</div>
-							</div>
-							<!-- Item 2 -->
-							<div
-								class="w-full text-center"
-								x-show="tab === '2'"
-								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="./images/feature-01.png"
-										width="600"
-										height="360"
-										alt="Feature 02"
-									/>
-								</div>
-							</div>
-							<!-- Item 3 -->
-							<div
-								class="w-full text-center"
-								x-show="tab === '3'"
-								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="./images/feature-01.png"
-										width="600"
-										height="360"
-										alt="Feature 03"
-									/>
-								</div>
-							</div>
-							<!-- Item 4 -->
-							<div
-								class="w-full text-center"
-								x-show="tab === '4'"
-								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="./images/feature-01.png"
-										width="600"
-										height="360"
-										alt="Feature 04"
-									/>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
-}

pkg/nebula/components/marketing/page.templ

@@ -1,7 +1,7 @@
-package home
+package marketing
 
 import (
-	"github.com/onsonr/sonr/pkg/nebula/components/home/sections"
+	"github.com/onsonr/sonr/pkg/nebula/components/marketing/sections"
 	"github.com/onsonr/sonr/pkg/nebula/global/styles"
 )
 

pkg/nebula/components/marketing/page_templ.go

@@ -1,7 +1,7 @@
 // Code generated by templ - DO NOT EDIT.
 
 // templ: version: v0.2.778
-package home
+package marketing
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
 
@@ -9,7 +9,7 @@ import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
 import (
-	"github.com/onsonr/sonr/pkg/nebula/components/home/sections"
+	"github.com/onsonr/sonr/pkg/nebula/components/marketing/sections"
 	"github.com/onsonr/sonr/pkg/nebula/global/styles"
 )
 

pkg/nebula/components/marketing/route.go

@@ -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())
+}

pkg/nebula/components/marketing/sections/hero.templ

@@ -1,6 +1,7 @@
 package sections
 
 import (
+	"fmt"
 	models "github.com/onsonr/sonr/internal/orm/marketing"
 	"github.com/onsonr/sonr/pkg/nebula/global/ui"
 )
@@ -13,7 +14,7 @@ templ Hero(hero *models.Hero) {
 			<div class="px-4 sm:px-6">
 				<div class="max-w-3xl mx-auto">
 					<div class="text-center pb-12 md:pb-16">
-						<h1 class="font-inter-tight text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-zinc-500 via-zinc-900 to-zinc-900 pb-4">
+						<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 }
@@ -58,7 +59,7 @@ templ stats(stats []*models.Stat) {
 		<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="counter(476)" x-text="counterValue">{ item.Value }</span>{ item.Denom }</h4>
+					<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>
 			}
@@ -67,6 +68,10 @@ templ stats(stats []*models.Stat) {
 	</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) => ({

pkg/nebula/components/marketing/sections/hero_templ.go

@@ -9,6 +9,7 @@ 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"
 )
@@ -34,14 +35,14 @@ func Hero(hero *models.Hero) templ.Component {
 			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-inter-tight text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-zinc-500 via-zinc-900 to-zinc-900 pb-4\">")
+		_, 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/home/sections/hero.templ`, Line: 17, Col: 24}
+			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 {
@@ -54,7 +55,7 @@ func Hero(hero *models.Hero) templ.Component {
 		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/home/sections/hero.templ`, Line: 19, Col: 28}
+			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 {
@@ -67,7 +68,7 @@ func Hero(hero *models.Hero) templ.Component {
 		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/home/sections/hero.templ`, Line: 24, Col: 25}
+			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 {
@@ -80,7 +81,7 @@ func Hero(hero *models.Hero) templ.Component {
 		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/home/sections/hero.templ`, Line: 27, Col: 22}
+			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 {
@@ -146,7 +147,7 @@ func heroImage(hero *models.Hero) templ.Component {
 		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/home/sections/hero.templ`, Line: 47, Col: 23}
+			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 {
@@ -159,7 +160,7 @@ func heroImage(hero *models.Hero) templ.Component {
 		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/home/sections/hero.templ`, Line: 48, Col: 27}
+			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 {
@@ -172,7 +173,7 @@ func heroImage(hero *models.Hero) templ.Component {
 		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/home/sections/hero.templ`, Line: 49, Col: 29}
+			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 {
@@ -212,29 +213,42 @@ func stats(stats []*models.Stat) templ.Component {
 			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=\"counter(476)\" x-text=\"counterValue\">")
+			_, 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(item.Value)
+			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/home/sections/hero.templ`, Line: 61, Col: 145}
+				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_Var12 string
-			templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(item.Denom)
+			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/home/sections/hero.templ`, Line: 61, Col: 166}
+				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_Var12))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -242,12 +256,12 @@ func stats(stats []*models.Stat) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var13 string
-			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(item.Label)
+			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/home/sections/hero.templ`, Line: 62, Col: 50}
+				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_Var13))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -272,6 +286,10 @@ func stats(stats []*models.Stat) templ.Component {
 	})
 }
 
+func getCounter(value string) string {
+	return fmt.Sprintf("counter(%s)", value)
+}
+
 func counterAnimation() templ.ComponentScript {
 	return templ.ComponentScript{
 		Name: `__templ_counterAnimation_cac3`,

pkg/nebula/components/marketing/sections/highlights.templ

@@ -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)
+}

pkg/nebula/components/marketing/sections/highlights_templ.go

@@ -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

pkg/nebula/components/marketing/static.go

@@ -1,4 +1,4 @@
-package home
+package marketing
 
 import models "github.com/onsonr/sonr/internal/orm/marketing"
 
@@ -27,22 +27,22 @@ var highlights = &models.Highlights{
 	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: "Infinite-Factor Authentication",
+			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: "Self-Custody BTC & ETH",
+			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: "mAiNsTrEaM Ready",
+			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: "DAO Governed",
+			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,
 		},
@@ -54,25 +54,18 @@ var mission = &models.Mission{
 	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: "Experience",
+		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: "Compliance",
+		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: "Interoperability",
+		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,
 	},
-	Standards: []*models.Feature{
-		{
-			Title: "Standards",
-			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,
-		},
-	},
 }

pkg/nebula/components/vaultindex/file.go

@@ -1,21 +1,16 @@
-package index
+package vaultindex
 
 import (
 	"bytes"
 	"context"
-	"encoding/json"
 
 	"github.com/ipfs/boxo/files"
 	"github.com/onsonr/sonr/internal/dwn/gen"
 )
 
 func BuildFile(cnfg *gen.Config) (files.Node, error) {
-	_, err := json.Marshal(cnfg)
-	if err != nil {
-		return nil, err
-	}
 	w := bytes.NewBuffer(nil)
-	err = IndexFile().Render(context.Background(), w)
+	err := IndexFile().Render(context.Background(), w)
 	if err != nil {
 		return nil, err
 	}

pkg/nebula/components/vaultindex/index.templ

@@ -1,31 +1,29 @@
-package index
+package vaultindex
 
 import (
-	"github.com/onsonr/sonr/internal/dwn/gen"
 	"github.com/onsonr/sonr/pkg/nebula/global/state"
 	"github.com/onsonr/sonr/pkg/nebula/global/styles"
 )
 
-func ConfigFile(dwnConfig *gen.Config) {
-}
-
 templ IndexFile() {
 	<!DOCTYPE html>
 	<html lang="en">
 		<head>
+			@styles.Styles()
 			@styles.Alpine()
 			@styles.Htmx()
-			@styles.Styles()
 			<meta charset="UTF-8"/>
 			<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 			<title>Sonr DWN</title>
 			@state.RegisterServiceWorker()
 		</head>
-		<body class="flex items-center justify-center h-full bg-neutral-50 lg:p-24 md:16 p-4">
-			<main class="flex-row items-center justify-center mx-auto w-fit max-w-screen-sm gap-y-3">
-				<div id="output">Loading...</div>
-			</main>
-		</body>
+		@styles.Toaster() {
+			<body class="flex items-center justify-center h-full bg-zinc-50 lg:p-24 md:16 p-4">
+				<main class="flex-row items-center justify-center mx-auto w-fit max-w-screen-sm gap-y-3">
+					<div hx-get="/#" swap="outerHTML">Loading...</div>
+				</main>
+			</body>
+		}
 	</html>
 }

pkg/nebula/components/vaultindex/index_templ.go

@@ -1,7 +1,7 @@
 // Code generated by templ - DO NOT EDIT.
 
 // templ: version: v0.2.778
-package index
+package vaultindex
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
 
@@ -9,14 +9,10 @@ import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
 import (
-	"github.com/onsonr/sonr/internal/dwn/gen"
 	"github.com/onsonr/sonr/pkg/nebula/global/state"
 	"github.com/onsonr/sonr/pkg/nebula/global/styles"
 )
 
-func ConfigFile(dwnConfig *gen.Config) {
-}
-
 func IndexFile() 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
@@ -42,6 +38,10 @@ func IndexFile() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		templ_7745c5c3_Err = styles.Styles().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		templ_7745c5c3_Err = styles.Alpine().Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -50,10 +50,6 @@ func IndexFile() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = styles.Styles().Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<meta charset=\"UTF-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Sonr DWN</title>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -62,7 +58,33 @@ func IndexFile() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</head><body class=\"flex items-center justify-center h-full bg-neutral-50 lg:p-24 md:16 p-4\"><main class=\"flex-row items-center justify-center mx-auto w-fit max-w-screen-sm gap-y-3\"><div id=\"output\">Loading...</div></main></body></html>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</head>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		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 = templ_7745c5c3_Buffer.WriteString("<body class=\"flex items-center justify-center h-full bg-zinc-50 lg:p-24 md:16 p-4\"><main class=\"flex-row items-center justify-center mx-auto w-fit max-w-screen-sm gap-y-3\"><div hx-get=\"/#\" swap=\"outerHTML\">Loading...</div></main></body>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = styles.Toaster().Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}