bump: version 0.4.0 → 0.4.1

.air.toml

@@ -10,11 +10,10 @@ exclude_file = []
 exclude_regex = ["_test.go"]
 exclude_unchanged = true
 follow_symlink = false
-full_bin = "make start-proxy"
+full_bin = "devbox run start"
 include_dir = ["cmd/dwn", "cmd/motr", "internal", "models", "pkl"]
-include_ext = ["go", "templ", "html", "pkl", "js", "mjs"]
+include_ext = ["go", "templ", "html", "pkl", "js", "mjs", "proto"]
 include_file = [
-  "wrangler.toml",
   "Dockerfile",
   ".goreleaser.yaml",
   "go.mod",
@@ -25,7 +24,7 @@ kill_delay = "10s"
 log = "build-errors.log"
 poll = false
 poll_interval = 0
-post_cmd = []
+post_cmd = ["devbox run stop"]
 pre_cmd = ["templ generate"]
 rerun = false
 rerun_delay = 1000

.cz.toml

@@ -2,6 +2,6 @@
 name = "cz_conventional_commits"
 tag_format = "v$version"
 version_scheme = "semver"
-version = "0.3.0"
+version = "0.4.1"
 update_changelog_on_bump = true
 major_version_zero = true

.github/workflows/docker-release.yml

@@ -1,73 +0,0 @@
-name: Publish Docker Image
-
-on:
-  push:
-    branches:
-      - master
-    tags:
-      - "v[0-9]+.[0-9]+.[0-9]+" # ignore rc
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-env:
-  GO_VERSION: 1.22
-  REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
-
-permissions:
-  contents: read
-  packages: write
-
-jobs:
-  release-image:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      # all lowercase ghcr registry
-      - run: |
-          DOCKER_REGISTRY=`echo "${{ env.REGISTRY }}/${{ github.repository_owner }}" | tr '[:upper:]' '[:lower:]'`
-          echo "DOCKER_REGISTRY=$DOCKER_REGISTRY" >> $GITHUB_ENV
-
-          REPO_NAME=`echo "${{ github.repository }}" | awk -F'/' '{print $2}' | tr '[:upper:]' '[:lower:]'`
-          echo "REPO_NAME=$REPO_NAME" >> $GITHUB_ENV
-
-      - name: Parse tag
-        id: tag
-        run: |
-          # v0.0.1
-          VERSION=$(echo ${{ github.ref_name }} | sed "s/v//")
-          # 0.0.1
-          echo "VERSION=$VERSION" >> $GITHUB_ENV
-
-      # build and publish package to ghcr (public) with codebase remaining private
-      - name: Log in to the Container registry
-        uses: docker/login-action@v2
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.GH_PAT_TOKEN }}
-
-      # make sure to update package to be public in repo ghcr settings
-      - name: Build and push Docker image
-        uses: strangelove-ventures/heighliner-build-action@v1.0.0
-        with:
-          # v0.0.1
-          git-ref: ${{ github.ref_name }}
-          chain: ${{ env.REPO_NAME}}
-          dockerfile: cosmos
-          registry: ${{ env.DOCKER_REGISTRY }}
-          build-target: |
-            cd ..
-            make install
-          local: true
-          binaries: |
-            - /go/bin/sonrd
-          build-env: |
-            - BUILD_TAGS=muslc

.github/workflows/publish-assets.yml

@@ -1,4 +1,4 @@
-name: Publish to buf.build/didao/sonr
+name: Upload Public Assets
 on:
   push:
     branches:
@@ -10,6 +10,7 @@ permissions:
 
 jobs:
   buf_push:
+    name: Publish to buf.build/onsonr/sonr
     runs-on: ubuntu-latest
     steps:
       # Run `git checkout`
@@ -25,6 +26,7 @@ jobs:
 
   upload_pkl:
     runs-on: ubuntu-latest
+    name: Publish to pkl.sh
     steps:
       - name: checkout
         uses: actions/checkout@v4
@@ -40,6 +42,7 @@ jobs:
 
   upload_nebula_cdn:
     runs-on: ubuntu-latest
+    name: Publish to cdn.sonr.id
     steps:
       - name: checkout
         uses: actions/checkout@v4

.github/workflows/run-goreleaser.yml

@@ -1,47 +0,0 @@
-name: "Release Binary"
-
-# Pairs with .goreleaser.yaml file for configuration.
-
-on:
-  push:
-    branches:
-      - master
-    tags:
-      - v*
-
-permissions:
-  contents: write
-
-jobs:
-  goreleaser:
-    if: false
-    permissions: write-all
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - uses: actions/setup-go@v5
-        with:
-          go-version: "1.22"
-          check-latest: true
-
-      - name: Clean up dist directory
-        run: rm -rf dist
-
-      - name: Build
-        uses: goreleaser/goreleaser-action@v5
-        with:
-          version: latest
-          args: build --skip-validate
-
-      - name: Release
-        uses: goreleaser/goreleaser-action@v5
-        if: startsWith(github.ref, 'refs/tags/')
-        with:
-          version: latest
-          args: release --skip-validate --clean
-        env:
-          GITHUB_TOKEN: ${{ secrets.GH_PAT_TOKEN }}

.github/workflows/scheduled-release.yml

@@ -0,0 +1,39 @@
+name: Scheduled Release
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - v*
+
+permissions:
+  contents: write
+
+jobs:
+  goreleaser:
+    name: Release motr, sonrd, and DWN
+    permissions: write-all
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          repository: onsonr/sonr
+          fetch-depth: 0
+          fetch-tags: true
+
+      - uses: actions/setup-go@v5
+        with:
+          go-version: "1.22"
+          check-latest: true
+
+      - name: Release
+        uses: goreleaser/goreleaser-action@v6
+        with:
+          distribution: goreleaser-pro
+          version: latest
+          args: release --clean
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GORELEASER_KEY: ${{ secrets.GORELEASER_KEY }}
+          GITHUB_PERSONAL_AUTH_TOKEN: ${{ secrets.GH_PAT_TOKEN }}

.github/workflows/version-bump.yml

@@ -1,4 +1,4 @@
-name: Bump Version
+name: Update Version
 
 on:
   push:
@@ -11,27 +11,38 @@ permissions:
 
 jobs:
   run-tests:
-    runs-on: ubuntu-latest
     name: "Run tests"
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          fetch-depth: 0
-
       - uses: actions/setup-go@v5
         with:
           go-version: "1.22"
           check-latest: true
-
       - name: Run tests
         run: make test
 
+  check-proto-changes:
+    name: "Check Proto Changes"
+    runs-on: ubuntu-latest
+    outputs:
+      proto_changed: ${{ steps.check_proto.outputs.proto_changed }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Check for changes in proto directory
+        id: check_proto
+        run: |
+          git diff --name-only ${{ github.event.before }} ${{ github.sha }} | grep -q '^proto/' && \
+          echo "proto_changed=true" >> $GITHUB_OUTPUT || \
+          echo "proto_changed=false" >> $GITHUB_OUTPUT
+
   bump-version:
-    if: "!startsWith(github.event.head_commit.message, 'bump:')"
+    needs: [run-tests, check-proto-changes]
     runs-on: ubuntu-latest
     name: "Bump Version"
-    needs: run-tests
+    if: ${{ !startsWith(github.event.head_commit.message, 'bump:') }}
     steps:
       - uses: actions/checkout@v4
         with:
@@ -41,3 +52,4 @@ jobs:
         uses: commitizen-tools/commitizen-action@master
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
+          increment: ${{ needs.check-proto-changes.outputs.proto_changed == 'true' && 'MINOR' || 'PATCH' }}

.gitignore

@@ -9,6 +9,7 @@
 .DS_Store
 .session.vim
 aof*
+dist
 
 # Test binary
 *.test
@@ -73,7 +74,7 @@ buildenv*
 nebula/node_modules
 
 mprocs.yaml
+build
 
 !devbox.lock
-!motr/build
 !buf.lock

.goreleaser.yaml

@@ -1,20 +1,10 @@
-project_name: core
+version: 2
+project_name: sonr
 
-release:
-  github:
-    owner: onsonr
-    name: core
-  name_template: "{{.Tag}}"
-
-# Only uncomment os, arch, and targets if you are NOT using cosmwasm / wasm-light-client.
-# Windows, 386 (32bit), and ARM are not Wasm compatible.
 builds:
-  - id: core
-    goos:
-      - linux
-      - darwin
-    goarch:
-      - amd64
+  - id: sonr
+    goos: [linux, darwin]
+    goarch: [amd64, arm64]
     main: ./cmd/sonrd
     binary: sonrd
     builder: go
@@ -22,51 +12,88 @@ builds:
     command: build
     ldflags:
       - -s -w -X main.version={{.Version}} -X main.commit={{.Commit}} -X main.date={{.Date}}
+
+  - id: motr
+    goos: [linux, darwin]
+    goarch: [amd64, arm64]
+    main: ./cmd/motr
+    binary: motr
+    builder: go
+    gobinary: go
+    command: build
+    ldflags:
+      - -s -w -X main.version={{.Version}} -X main.commit={{.Commit}} -X main.date={{.Date}}
+
+  - id: dwn
+    goos: [js]
+    goarch: [wasm]
+    main: ./cmd/dwn/dwn.go
+    binary: dwn
+    builder: go
+    gobinary: go
+    command: build
+
 archives:
-  - id: default
+  - id: sonr
+    builds: [sonr]
     name_template: '{{ .ProjectName }}_{{ .Version }}_{{ .Os }}_{{ .Arch }}{{ with .Arm }}v{{ . }}{{ end }}{{ with .Mips }}_{{ . }}{{ end }}{{ if not (eq .Amd64 "v1") }}{{ .Amd64 }}{{ end }}'
     format: tar.gz
     files:
-      - src: LICENSE*
       - src: README*
       - src: CHANGELOG*
-snapshot:
-  name_template: "{{ .Version }}-SNAPSHOT-{{ .ShortCommit }}"
-checksum:
-  name_template: "{{ .ProjectName }}_{{ .Version }}_checksums.txt"
-  algorithm: sha256
-dist: dist
-env_files:
-  github_token: ~/.config/goreleaser/github_token
-  gitlab_token: ~/.config/goreleaser/gitlab_token
-  gitea_token: ~/.config/goreleaser/gitea_token
-source:
-  name_template: "{{ .ProjectName }}-{{ .Version }}"
-  format: tar.gz
-gomod:
-  gobinary: go
-announce:
-  twitter:
-    message_template: "{{ .ProjectName }} {{ .Tag }} is out! Check it out at {{ .ReleaseURL }}"
-  mastodon:
-    message_template: "{{ .ProjectName }} {{ .Tag }} is out! Check it out at {{ .ReleaseURL }}"
-    server: ""
-  reddit:
-    title_template: "{{ .ProjectName }} {{ .Tag }} is out!"
-    url_template: "{{ .ReleaseURL }}"
-  discord:
-    message_template: "{{ .ProjectName }} {{ .Tag }} is out! Check it out at {{ .ReleaseURL }}"
-    author: GoReleaser
-    color: "3888754"
-    icon_url: https://goreleaser.com/static/avatar.png
-  telegram:
-    message_template: "{{ .ProjectName }} {{ .Tag }} is out! Check it out at {{ .ReleaseURL }}"
-  webhook:
-    message_template: '{ "message": "{{ .ProjectName }} {{ .Tag }} is out! Check it out at {{ .ReleaseURL }}"}'
-    content_type: application/json; charset=utf-8
-git:
-  tag_sort: -version:refname
-github_urls:
-  download: https://github.com
-gitlab_urls:
-  download: https://gitlab.com
+
+  - id: motr
+    builds: [motr]
+    name_template: '{{ .Binary }}_{{ .Version }}_{{ .Os }}_{{ .Arch }}{{ with .Arm }}v{{ . }}{{ end }}{{ with .Mips }}_{{ . }}{{ end }}{{ if not (eq .Amd64 "v1") }}{{ .Amd64 }}{{ end }}'
+    format: tar.gz
+    files:
+      - src: README*
+      - src: CHANGELOG*
+
+release:
+  github:
+    owner: onsonr
+    name: sonr
+  name_template: '{{.Now.Format "2006.01.02"}}'
+  draft: false
+  replace_existing_draft: true
+  replace_existing_artifacts: true
+  extra_files:
+    - glob: ./CHANGELOG*
+    - glob: ./README*
+    - glob: ./LICENSE*
+    - glob: ./pkl/*
+
+brews:
+  - name: sonr
+    ids: [sonr]
+    commit_author:
+      name: goreleaserbot
+      email: bot@goreleaser.com
+    directory: Formula
+    caveats: "Run a local sonr node and access it with the motr proxy"
+    homepage: "https://sonr.io/"
+    description: "Sonr is a decentralized, permissionless, and censorship-resistant identity network."
+    dependencies:
+      - name: ipfs
+    repository:
+      owner: onsonr
+      name: homebrew-tap
+      branch: master
+      token: "{{ .Env.GITHUB_PERSONAL_AUTH_TOKEN }}"
+
+  - name: motr
+    ids: [motr]
+    commit_author:
+      name: goreleaserbot
+      email: bot@goreleaser.com
+    directory: Formula
+    caveats: "Use motr to interact with the Sonr network"
+    homepage: "https://sonr.io/"
+    description: "Motr is a proxy for interacting with the Sonr network."
+    dependencies:
+      - name: ipfs
+    repository:
+      owner: onsonr
+      name: homebrew-tap
+      branch: master

CHANGELOG.md

@@ -1,3 +1,70 @@
+## v0.4.1 (2024-10-01)
+
+### Feat
+
+- Implement session management
+- allow manual release triggers
+- add Input and RegistrationForm models
+- add new utility classes
+- add login and registration pages
+- add tailwindcss utilities
+- add support for ARM64 architecture
+- add DWN resolver field
+- add stats section to homepage
+- implement hero section using Pkl
+- add PKL schema for message formats
+- add Homebrew tap for sonr
+- update release workflow to use latest tag
+
+### Fix
+
+- **version**: update version number to 0.4.0
+- update release workflow to use latest tag
+- **versioning**: revert version to 0.9.0
+- **cta**: Fix typo in CTA title
+- change bento section title to reflect security focus
+- adjust hero image dimensions
+- **Input**: Change  type from  to
+- update hero image height in config.pkl
+
+### Refactor
+
+- move home page sections to home package
+- rename motrd to motr
+- update hero image dimensions
+- move nebula configuration to static file
+- rename buf-publish.yml to publish-assets.yml
+- remove unused  field from
+
+## v0.4.0 (2024-09-30)
+
+### Feat
+
+- **dwn**: add wasm build for dwn
+- add macaroon and oracle genesis states
+- add scheduled binary release workflow
+- introduce process-compose for process management
+- add counter animation to hero section
+- add registration page
+
+### Fix
+
+- Enable scheduled release workflow
+
+### Refactor
+
+- remove old changelog entries
+- remove unnecessary checkout in scheduled-release workflow
+- rename build ID to sonr
+- remove unnecessary release existence check
+- move dwn wasm build to pkg directory
+
+## v0.3.1 (2024-09-29)
+
+### Refactor
+
+- move nebula/pages to pkg/nebula/pages
+
 ## v0.3.0 (2024-09-29)
 
 ### Feat
@@ -105,7 +172,7 @@
 - extract root command creation to separate file
 - move ipfs setup to function
 - remove unnecessary proxy config
-- rename  script to
+- rename script to
 - move DWN proxy server logic to separate file
 - use htmx instead of dwn for vault client
 - remove unused environment variables
@@ -113,7 +180,7 @@
 - use staking keeper in DID keeper
 - remove unused dependencies
 - remove unused image building workflow
-- add  field to
+- add field to
 - Update KeyKind Enum to have proper naming conventions
 - Update `DIDNamespace` to have proper naming convention
 - expose ports directly in docker-compose

Makefile

@@ -94,6 +94,7 @@ endif
 
 install: go.sum
 	go install -mod=readonly $(BUILD_FLAGS) ./cmd/sonrd
+	go install -mod=readonly $(BUILD_FLAGS) ./cmd/motr
 
 ########################################
 ### Tools & dependencies
@@ -302,7 +303,7 @@ motr:
 
 dwn:
 	@echo "(dwn) Building dwn.wasm -> IPFS Vault"
-	GOOS=js GOARCH=wasm go build -o ./x/vault/types/internal/app.wasm ./x/vault/client/dwn/dwn.go
+	GOOS=js GOARCH=wasm go build -o ./pkg/dwn/app.wasm ./cmd/dwn/dwn.go
 
 templ:
 	@echo "(templ) Generating templ files"
@@ -317,6 +318,8 @@ pkl:
 	@echo "(pkl) Building PKL"
 	go run github.com/apple/pkl-go/cmd/pkl-gen-go ./pkl/dwn.pkl
 	go run github.com/apple/pkl-go/cmd/pkl-gen-go ./pkl/orm.pkl
+	go run github.com/apple/pkl-go/cmd/pkl-gen-go ./pkl/txns.pkl
+	go run github.com/apple/pkl-go/cmd/pkl-gen-go ./pkl/uiux.pkl
 
 start-caddy:
 	@echo "(start-caddy) Starting caddy"
@@ -324,7 +327,7 @@ start-caddy:
 
 start-motr: motr
 	@echo "(start-proxy) Starting proxy server"
-	./build/motr proxy
+	./build/motr start
 
 ###############################################################################
 ###                                     help                                ###

api/vault/v1/genesis.pulsar.go

@@ -1002,7 +1002,6 @@ var (
 	fd_Schema_jwk        protoreflect.FieldDescriptor
 	fd_Schema_grant      protoreflect.FieldDescriptor
 	fd_Schema_keyshare   protoreflect.FieldDescriptor
-	fd_Schema_publicKey  protoreflect.FieldDescriptor
 	fd_Schema_profile    protoreflect.FieldDescriptor
 )
 
@@ -1017,7 +1016,6 @@ func init() {
 	fd_Schema_jwk = md_Schema.Fields().ByName("jwk")
 	fd_Schema_grant = md_Schema.Fields().ByName("grant")
 	fd_Schema_keyshare = md_Schema.Fields().ByName("keyshare")
-	fd_Schema_publicKey = md_Schema.Fields().ByName("publicKey")
 	fd_Schema_profile = md_Schema.Fields().ByName("profile")
 }
 
@@ -1134,12 +1132,6 @@ func (x *fastReflection_Schema) Range(f func(protoreflect.FieldDescriptor, proto
 			return
 		}
 	}
-	if x.PublicKey != "" {
-		value := protoreflect.ValueOfString(x.PublicKey)
-		if !f(fd_Schema_publicKey, value) {
-			return
-		}
-	}
 	if x.Profile != "" {
 		value := protoreflect.ValueOfString(x.Profile)
 		if !f(fd_Schema_profile, value) {
@@ -1177,8 +1169,6 @@ func (x *fastReflection_Schema) Has(fd protoreflect.FieldDescriptor) bool {
 		return x.Grant != ""
 	case "vault.v1.Schema.keyshare":
 		return x.Keyshare != ""
-	case "vault.v1.Schema.publicKey":
-		return x.PublicKey != ""
 	case "vault.v1.Schema.profile":
 		return x.Profile != ""
 	default:
@@ -1213,8 +1203,6 @@ func (x *fastReflection_Schema) Clear(fd protoreflect.FieldDescriptor) {
 		x.Grant = ""
 	case "vault.v1.Schema.keyshare":
 		x.Keyshare = ""
-	case "vault.v1.Schema.publicKey":
-		x.PublicKey = ""
 	case "vault.v1.Schema.profile":
 		x.Profile = ""
 	default:
@@ -1257,9 +1245,6 @@ func (x *fastReflection_Schema) Get(descriptor protoreflect.FieldDescriptor) pro
 	case "vault.v1.Schema.keyshare":
 		value := x.Keyshare
 		return protoreflect.ValueOfString(value)
-	case "vault.v1.Schema.publicKey":
-		value := x.PublicKey
-		return protoreflect.ValueOfString(value)
 	case "vault.v1.Schema.profile":
 		value := x.Profile
 		return protoreflect.ValueOfString(value)
@@ -1299,8 +1284,6 @@ func (x *fastReflection_Schema) Set(fd protoreflect.FieldDescriptor, value proto
 		x.Grant = value.Interface().(string)
 	case "vault.v1.Schema.keyshare":
 		x.Keyshare = value.Interface().(string)
-	case "vault.v1.Schema.publicKey":
-		x.PublicKey = value.Interface().(string)
 	case "vault.v1.Schema.profile":
 		x.Profile = value.Interface().(string)
 	default:
@@ -1339,8 +1322,6 @@ func (x *fastReflection_Schema) Mutable(fd protoreflect.FieldDescriptor) protore
 		panic(fmt.Errorf("field grant of message vault.v1.Schema is not mutable"))
 	case "vault.v1.Schema.keyshare":
 		panic(fmt.Errorf("field keyshare of message vault.v1.Schema is not mutable"))
-	case "vault.v1.Schema.publicKey":
-		panic(fmt.Errorf("field publicKey of message vault.v1.Schema is not mutable"))
 	case "vault.v1.Schema.profile":
 		panic(fmt.Errorf("field profile of message vault.v1.Schema is not mutable"))
 	default:
@@ -1372,8 +1353,6 @@ func (x *fastReflection_Schema) NewField(fd protoreflect.FieldDescriptor) protor
 		return protoreflect.ValueOfString("")
 	case "vault.v1.Schema.keyshare":
 		return protoreflect.ValueOfString("")
-	case "vault.v1.Schema.publicKey":
-		return protoreflect.ValueOfString("")
 	case "vault.v1.Schema.profile":
 		return protoreflect.ValueOfString("")
 	default:
@@ -1476,10 +1455,6 @@ func (x *fastReflection_Schema) ProtoMethods() *protoiface.Methods {
 		if l > 0 {
 			n += 1 + l + runtime.Sov(uint64(l))
 		}
-		l = len(x.PublicKey)
-		if l > 0 {
-			n += 1 + l + runtime.Sov(uint64(l))
-		}
 		l = len(x.Profile)
 		if l > 0 {
 			n += 1 + l + runtime.Sov(uint64(l))
@@ -1518,13 +1493,6 @@ func (x *fastReflection_Schema) ProtoMethods() *protoiface.Methods {
 			copy(dAtA[i:], x.Profile)
 			i = runtime.EncodeVarint(dAtA, i, uint64(len(x.Profile)))
 			i--
-			dAtA[i] = 0x52
-		}
-		if len(x.PublicKey) > 0 {
-			i -= len(x.PublicKey)
-			copy(dAtA[i:], x.PublicKey)
-			i = runtime.EncodeVarint(dAtA, i, uint64(len(x.PublicKey)))
-			i--
 			dAtA[i] = 0x4a
 		}
 		if len(x.Keyshare) > 0 {
@@ -1874,38 +1842,6 @@ func (x *fastReflection_Schema) ProtoMethods() *protoiface.Methods {
 				x.Keyshare = string(dAtA[iNdEx:postIndex])
 				iNdEx = postIndex
 			case 9:
-				if wireType != 2 {
-					return protoiface.UnmarshalOutput{NoUnkeyedLiterals: input.NoUnkeyedLiterals, Flags: input.Flags}, fmt.Errorf("proto: wrong wireType = %d for field PublicKey", wireType)
-				}
-				var stringLen uint64
-				for shift := uint(0); ; shift += 7 {
-					if shift >= 64 {
-						return protoiface.UnmarshalOutput{NoUnkeyedLiterals: input.NoUnkeyedLiterals, Flags: input.Flags}, runtime.ErrIntOverflow
-					}
-					if iNdEx >= l {
-						return protoiface.UnmarshalOutput{NoUnkeyedLiterals: input.NoUnkeyedLiterals, Flags: input.Flags}, io.ErrUnexpectedEOF
-					}
-					b := dAtA[iNdEx]
-					iNdEx++
-					stringLen |= uint64(b&0x7F) << shift
-					if b < 0x80 {
-						break
-					}
-				}
-				intStringLen := int(stringLen)
-				if intStringLen < 0 {
-					return protoiface.UnmarshalOutput{NoUnkeyedLiterals: input.NoUnkeyedLiterals, Flags: input.Flags}, runtime.ErrInvalidLength
-				}
-				postIndex := iNdEx + intStringLen
-				if postIndex < 0 {
-					return protoiface.UnmarshalOutput{NoUnkeyedLiterals: input.NoUnkeyedLiterals, Flags: input.Flags}, runtime.ErrInvalidLength
-				}
-				if postIndex > l {
-					return protoiface.UnmarshalOutput{NoUnkeyedLiterals: input.NoUnkeyedLiterals, Flags: input.Flags}, io.ErrUnexpectedEOF
-				}
-				x.PublicKey = string(dAtA[iNdEx:postIndex])
-				iNdEx = postIndex
-			case 10:
 				if wireType != 2 {
 					return protoiface.UnmarshalOutput{NoUnkeyedLiterals: input.NoUnkeyedLiterals, Flags: input.Flags}, fmt.Errorf("proto: wrong wireType = %d for field Profile", wireType)
 				}
@@ -2087,8 +2023,7 @@ type Schema struct {
 	Jwk        string `protobuf:"bytes,6,opt,name=jwk,proto3" json:"jwk,omitempty"`
 	Grant      string `protobuf:"bytes,7,opt,name=grant,proto3" json:"grant,omitempty"`
 	Keyshare   string `protobuf:"bytes,8,opt,name=keyshare,proto3" json:"keyshare,omitempty"`
-	PublicKey  string `protobuf:"bytes,9,opt,name=publicKey,proto3" json:"publicKey,omitempty"`
-	Profile    string `protobuf:"bytes,10,opt,name=profile,proto3" json:"profile,omitempty"`
+	Profile    string `protobuf:"bytes,9,opt,name=profile,proto3" json:"profile,omitempty"`
 }
 
 func (x *Schema) Reset() {
@@ -2167,13 +2102,6 @@ func (x *Schema) GetKeyshare() string {
 	return ""
 }
 
-func (x *Schema) GetPublicKey() string {
-	if x != nil {
-		return x.PublicKey
-	}
-	return ""
-}
-
 func (x *Schema) GetProfile() string {
 	if x != nil {
 		return x.Profile
@@ -2203,7 +2131,7 @@ var file_vault_v1_genesis_proto_rawDesc = []byte{
 	0x04, 0x20, 0x01, 0x28, 0x0b, 0x32, 0x10, 0x2e, 0x76, 0x61, 0x75, 0x6c, 0x74, 0x2e, 0x76, 0x31,
 	0x2e, 0x53, 0x63, 0x68, 0x65, 0x6d, 0x61, 0x52, 0x06, 0x73, 0x63, 0x68, 0x65, 0x6d, 0x61, 0x3a,
 	0x19, 0x98, 0xa0, 0x1f, 0x00, 0xe8, 0xa0, 0x1f, 0x01, 0x8a, 0xe7, 0xb0, 0x2a, 0x0c, 0x76, 0x61,
-	0x75, 0x6c, 0x74, 0x2f, 0x70, 0x61, 0x72, 0x61, 0x6d, 0x73, 0x22, 0x84, 0x02, 0x0a, 0x06, 0x53,
+	0x75, 0x6c, 0x74, 0x2f, 0x70, 0x61, 0x72, 0x61, 0x6d, 0x73, 0x22, 0xe6, 0x01, 0x0a, 0x06, 0x53,
 	0x63, 0x68, 0x65, 0x6d, 0x61, 0x12, 0x18, 0x0a, 0x07, 0x76, 0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e,
 	0x18, 0x01, 0x20, 0x01, 0x28, 0x05, 0x52, 0x07, 0x76, 0x65, 0x72, 0x73, 0x69, 0x6f, 0x6e, 0x12,
 	0x18, 0x0a, 0x07, 0x61, 0x63, 0x63, 0x6f, 0x75, 0x6e, 0x74, 0x18, 0x02, 0x20, 0x01, 0x28, 0x09,
@@ -2216,20 +2144,18 @@ var file_vault_v1_genesis_proto_rawDesc = []byte{
 	0x28, 0x09, 0x52, 0x03, 0x6a, 0x77, 0x6b, 0x12, 0x14, 0x0a, 0x05, 0x67, 0x72, 0x61, 0x6e, 0x74,
 	0x18, 0x07, 0x20, 0x01, 0x28, 0x09, 0x52, 0x05, 0x67, 0x72, 0x61, 0x6e, 0x74, 0x12, 0x1a, 0x0a,
 	0x08, 0x6b, 0x65, 0x79, 0x73, 0x68, 0x61, 0x72, 0x65, 0x18, 0x08, 0x20, 0x01, 0x28, 0x09, 0x52,
-	0x08, 0x6b, 0x65, 0x79, 0x73, 0x68, 0x61, 0x72, 0x65, 0x12, 0x1c, 0x0a, 0x09, 0x70, 0x75, 0x62,
-	0x6c, 0x69, 0x63, 0x4b, 0x65, 0x79, 0x18, 0x09, 0x20, 0x01, 0x28, 0x09, 0x52, 0x09, 0x70, 0x75,
-	0x62, 0x6c, 0x69, 0x63, 0x4b, 0x65, 0x79, 0x12, 0x18, 0x0a, 0x07, 0x70, 0x72, 0x6f, 0x66, 0x69,
-	0x6c, 0x65, 0x18, 0x0a, 0x20, 0x01, 0x28, 0x09, 0x52, 0x07, 0x70, 0x72, 0x6f, 0x66, 0x69, 0x6c,
-	0x65, 0x42, 0x8a, 0x01, 0x0a, 0x0c, 0x63, 0x6f, 0x6d, 0x2e, 0x76, 0x61, 0x75, 0x6c, 0x74, 0x2e,
-	0x76, 0x31, 0x42, 0x0c, 0x47, 0x65, 0x6e, 0x65, 0x73, 0x69, 0x73, 0x50, 0x72, 0x6f, 0x74, 0x6f,
-	0x50, 0x01, 0x5a, 0x2b, 0x67, 0x69, 0x74, 0x68, 0x75, 0x62, 0x2e, 0x63, 0x6f, 0x6d, 0x2f, 0x6f,
-	0x6e, 0x73, 0x6f, 0x6e, 0x72, 0x2f, 0x73, 0x6f, 0x6e, 0x72, 0x2f, 0x61, 0x70, 0x69, 0x2f, 0x76,
-	0x61, 0x75, 0x6c, 0x74, 0x2f, 0x76, 0x31, 0x3b, 0x76, 0x61, 0x75, 0x6c, 0x74, 0x76, 0x31, 0xa2,
-	0x02, 0x03, 0x56, 0x58, 0x58, 0xaa, 0x02, 0x08, 0x56, 0x61, 0x75, 0x6c, 0x74, 0x2e, 0x56, 0x31,
-	0xca, 0x02, 0x08, 0x56, 0x61, 0x75, 0x6c, 0x74, 0x5c, 0x56, 0x31, 0xe2, 0x02, 0x14, 0x56, 0x61,
-	0x75, 0x6c, 0x74, 0x5c, 0x56, 0x31, 0x5c, 0x47, 0x50, 0x42, 0x4d, 0x65, 0x74, 0x61, 0x64, 0x61,
-	0x74, 0x61, 0xea, 0x02, 0x09, 0x56, 0x61, 0x75, 0x6c, 0x74, 0x3a, 0x3a, 0x56, 0x31, 0x62, 0x06,
-	0x70, 0x72, 0x6f, 0x74, 0x6f, 0x33,
+	0x08, 0x6b, 0x65, 0x79, 0x73, 0x68, 0x61, 0x72, 0x65, 0x12, 0x18, 0x0a, 0x07, 0x70, 0x72, 0x6f,
+	0x66, 0x69, 0x6c, 0x65, 0x18, 0x09, 0x20, 0x01, 0x28, 0x09, 0x52, 0x07, 0x70, 0x72, 0x6f, 0x66,
+	0x69, 0x6c, 0x65, 0x42, 0x8a, 0x01, 0x0a, 0x0c, 0x63, 0x6f, 0x6d, 0x2e, 0x76, 0x61, 0x75, 0x6c,
+	0x74, 0x2e, 0x76, 0x31, 0x42, 0x0c, 0x47, 0x65, 0x6e, 0x65, 0x73, 0x69, 0x73, 0x50, 0x72, 0x6f,
+	0x74, 0x6f, 0x50, 0x01, 0x5a, 0x2b, 0x67, 0x69, 0x74, 0x68, 0x75, 0x62, 0x2e, 0x63, 0x6f, 0x6d,
+	0x2f, 0x6f, 0x6e, 0x73, 0x6f, 0x6e, 0x72, 0x2f, 0x73, 0x6f, 0x6e, 0x72, 0x2f, 0x61, 0x70, 0x69,
+	0x2f, 0x76, 0x61, 0x75, 0x6c, 0x74, 0x2f, 0x76, 0x31, 0x3b, 0x76, 0x61, 0x75, 0x6c, 0x74, 0x76,
+	0x31, 0xa2, 0x02, 0x03, 0x56, 0x58, 0x58, 0xaa, 0x02, 0x08, 0x56, 0x61, 0x75, 0x6c, 0x74, 0x2e,
+	0x56, 0x31, 0xca, 0x02, 0x08, 0x56, 0x61, 0x75, 0x6c, 0x74, 0x5c, 0x56, 0x31, 0xe2, 0x02, 0x14,
+	0x56, 0x61, 0x75, 0x6c, 0x74, 0x5c, 0x56, 0x31, 0x5c, 0x47, 0x50, 0x42, 0x4d, 0x65, 0x74, 0x61,
+	0x64, 0x61, 0x74, 0x61, 0xea, 0x02, 0x09, 0x56, 0x61, 0x75, 0x6c, 0x74, 0x3a, 0x3a, 0x56, 0x31,
+	0x62, 0x06, 0x70, 0x72, 0x6f, 0x74, 0x6f, 0x33,
 }
 
 var (

api/vault/v1/state.pulsar.go

@@ -14,10 +14,11 @@ import (
 )
 
 var (
-	md_DWN       protoreflect.MessageDescriptor
-	fd_DWN_id    protoreflect.FieldDescriptor
-	fd_DWN_alias protoreflect.FieldDescriptor
-	fd_DWN_cid   protoreflect.FieldDescriptor
+	md_DWN          protoreflect.MessageDescriptor
+	fd_DWN_id       protoreflect.FieldDescriptor
+	fd_DWN_alias    protoreflect.FieldDescriptor
+	fd_DWN_cid      protoreflect.FieldDescriptor
+	fd_DWN_resolver protoreflect.FieldDescriptor
 )
 
 func init() {
@@ -26,6 +27,7 @@ func init() {
 	fd_DWN_id = md_DWN.Fields().ByName("id")
 	fd_DWN_alias = md_DWN.Fields().ByName("alias")
 	fd_DWN_cid = md_DWN.Fields().ByName("cid")
+	fd_DWN_resolver = md_DWN.Fields().ByName("resolver")
 }
 
 var _ protoreflect.Message = (*fastReflection_DWN)(nil)
@@ -111,6 +113,12 @@ func (x *fastReflection_DWN) Range(f func(protoreflect.FieldDescriptor, protoref
 			return
 		}
 	}
+	if x.Resolver != "" {
+		value := protoreflect.ValueOfString(x.Resolver)
+		if !f(fd_DWN_resolver, value) {
+			return
+		}
+	}
 }
 
 // Has reports whether a field is populated.
@@ -132,6 +140,8 @@ func (x *fastReflection_DWN) Has(fd protoreflect.FieldDescriptor) bool {
 		return x.Alias != ""
 	case "vault.v1.DWN.cid":
 		return x.Cid != ""
+	case "vault.v1.DWN.resolver":
+		return x.Resolver != ""
 	default:
 		if fd.IsExtension() {
 			panic(fmt.Errorf("proto3 declared messages do not support extensions: vault.v1.DWN"))
@@ -154,6 +164,8 @@ func (x *fastReflection_DWN) Clear(fd protoreflect.FieldDescriptor) {
 		x.Alias = ""
 	case "vault.v1.DWN.cid":
 		x.Cid = ""
+	case "vault.v1.DWN.resolver":
+		x.Resolver = ""
 	default:
 		if fd.IsExtension() {
 			panic(fmt.Errorf("proto3 declared messages do not support extensions: vault.v1.DWN"))
@@ -179,6 +191,9 @@ func (x *fastReflection_DWN) Get(descriptor protoreflect.FieldDescriptor) protor
 	case "vault.v1.DWN.cid":
 		value := x.Cid
 		return protoreflect.ValueOfString(value)
+	case "vault.v1.DWN.resolver":
+		value := x.Resolver
+		return protoreflect.ValueOfString(value)
 	default:
 		if descriptor.IsExtension() {
 			panic(fmt.Errorf("proto3 declared messages do not support extensions: vault.v1.DWN"))
@@ -205,6 +220,8 @@ func (x *fastReflection_DWN) Set(fd protoreflect.FieldDescriptor, value protoref
 		x.Alias = value.Interface().(string)
 	case "vault.v1.DWN.cid":
 		x.Cid = value.Interface().(string)
+	case "vault.v1.DWN.resolver":
+		x.Resolver = value.Interface().(string)
 	default:
 		if fd.IsExtension() {
 			panic(fmt.Errorf("proto3 declared messages do not support extensions: vault.v1.DWN"))
@@ -231,6 +248,8 @@ func (x *fastReflection_DWN) Mutable(fd protoreflect.FieldDescriptor) protorefle
 		panic(fmt.Errorf("field alias of message vault.v1.DWN is not mutable"))
 	case "vault.v1.DWN.cid":
 		panic(fmt.Errorf("field cid of message vault.v1.DWN is not mutable"))
+	case "vault.v1.DWN.resolver":
+		panic(fmt.Errorf("field resolver of message vault.v1.DWN is not mutable"))
 	default:
 		if fd.IsExtension() {
 			panic(fmt.Errorf("proto3 declared messages do not support extensions: vault.v1.DWN"))
@@ -250,6 +269,8 @@ func (x *fastReflection_DWN) NewField(fd protoreflect.FieldDescriptor) protorefl
 		return protoreflect.ValueOfString("")
 	case "vault.v1.DWN.cid":
 		return protoreflect.ValueOfString("")
+	case "vault.v1.DWN.resolver":
+		return protoreflect.ValueOfString("")
 	default:
 		if fd.IsExtension() {
 			panic(fmt.Errorf("proto3 declared messages do not support extensions: vault.v1.DWN"))
@@ -330,6 +351,10 @@ func (x *fastReflection_DWN) ProtoMethods() *protoiface.Methods {
 		if l > 0 {
 			n += 1 + l + runtime.Sov(uint64(l))
 		}
+		l = len(x.Resolver)
+		if l > 0 {
+			n += 1 + l + runtime.Sov(uint64(l))
+		}
 		if x.unknownFields != nil {
 			n += len(x.unknownFields)
 		}
@@ -359,6 +384,13 @@ func (x *fastReflection_DWN) ProtoMethods() *protoiface.Methods {
 			i -= len(x.unknownFields)
 			copy(dAtA[i:], x.unknownFields)
 		}
+		if len(x.Resolver) > 0 {
+			i -= len(x.Resolver)
+			copy(dAtA[i:], x.Resolver)
+			i = runtime.EncodeVarint(dAtA, i, uint64(len(x.Resolver)))
+			i--
+			dAtA[i] = 0x22
+		}
 		if len(x.Cid) > 0 {
 			i -= len(x.Cid)
 			copy(dAtA[i:], x.Cid)
@@ -510,6 +542,38 @@ func (x *fastReflection_DWN) ProtoMethods() *protoiface.Methods {
 				}
 				x.Cid = string(dAtA[iNdEx:postIndex])
 				iNdEx = postIndex
+			case 4:
+				if wireType != 2 {
+					return protoiface.UnmarshalOutput{NoUnkeyedLiterals: input.NoUnkeyedLiterals, Flags: input.Flags}, fmt.Errorf("proto: wrong wireType = %d for field Resolver", wireType)
+				}
+				var stringLen uint64
+				for shift := uint(0); ; shift += 7 {
+					if shift >= 64 {
+						return protoiface.UnmarshalOutput{NoUnkeyedLiterals: input.NoUnkeyedLiterals, Flags: input.Flags}, runtime.ErrIntOverflow
+					}
+					if iNdEx >= l {
+						return protoiface.UnmarshalOutput{NoUnkeyedLiterals: input.NoUnkeyedLiterals, Flags: input.Flags}, io.ErrUnexpectedEOF
+					}
+					b := dAtA[iNdEx]
+					iNdEx++
+					stringLen |= uint64(b&0x7F) << shift
+					if b < 0x80 {
+						break
+					}
+				}
+				intStringLen := int(stringLen)
+				if intStringLen < 0 {
+					return protoiface.UnmarshalOutput{NoUnkeyedLiterals: input.NoUnkeyedLiterals, Flags: input.Flags}, runtime.ErrInvalidLength
+				}
+				postIndex := iNdEx + intStringLen
+				if postIndex < 0 {
+					return protoiface.UnmarshalOutput{NoUnkeyedLiterals: input.NoUnkeyedLiterals, Flags: input.Flags}, runtime.ErrInvalidLength
+				}
+				if postIndex > l {
+					return protoiface.UnmarshalOutput{NoUnkeyedLiterals: input.NoUnkeyedLiterals, Flags: input.Flags}, io.ErrUnexpectedEOF
+				}
+				x.Resolver = string(dAtA[iNdEx:postIndex])
+				iNdEx = postIndex
 			default:
 				iNdEx = preIndex
 				skippy, err := runtime.Skip(dAtA[iNdEx:])
@@ -563,9 +627,10 @@ type DWN struct {
 	sizeCache     protoimpl.SizeCache
 	unknownFields protoimpl.UnknownFields
 
-	Id    uint64 `protobuf:"varint,1,opt,name=id,proto3" json:"id,omitempty"`
-	Alias string `protobuf:"bytes,2,opt,name=alias,proto3" json:"alias,omitempty"`
-	Cid   string `protobuf:"bytes,3,opt,name=cid,proto3" json:"cid,omitempty"`
+	Id       uint64 `protobuf:"varint,1,opt,name=id,proto3" json:"id,omitempty"`
+	Alias    string `protobuf:"bytes,2,opt,name=alias,proto3" json:"alias,omitempty"`
+	Cid      string `protobuf:"bytes,3,opt,name=cid,proto3" json:"cid,omitempty"`
+	Resolver string `protobuf:"bytes,4,opt,name=resolver,proto3" json:"resolver,omitempty"`
 }
 
 func (x *DWN) Reset() {
@@ -609,29 +674,38 @@ func (x *DWN) GetCid() string {
 	return ""
 }
 
+func (x *DWN) GetResolver() string {
+	if x != nil {
+		return x.Resolver
+	}
+	return ""
+}
+
 var File_vault_v1_state_proto protoreflect.FileDescriptor
 
 var file_vault_v1_state_proto_rawDesc = []byte{
 	0x0a, 0x14, 0x76, 0x61, 0x75, 0x6c, 0x74, 0x2f, 0x76, 0x31, 0x2f, 0x73, 0x74, 0x61, 0x74, 0x65,
 	0x2e, 0x70, 0x72, 0x6f, 0x74, 0x6f, 0x12, 0x08, 0x76, 0x61, 0x75, 0x6c, 0x74, 0x2e, 0x76, 0x31,
 	0x1a, 0x17, 0x63, 0x6f, 0x73, 0x6d, 0x6f, 0x73, 0x2f, 0x6f, 0x72, 0x6d, 0x2f, 0x76, 0x31, 0x2f,
-	0x6f, 0x72, 0x6d, 0x2e, 0x70, 0x72, 0x6f, 0x74, 0x6f, 0x22, 0x67, 0x0a, 0x03, 0x44, 0x57, 0x4e,
-	0x12, 0x0e, 0x0a, 0x02, 0x69, 0x64, 0x18, 0x01, 0x20, 0x01, 0x28, 0x04, 0x52, 0x02, 0x69, 0x64,
-	0x12, 0x14, 0x0a, 0x05, 0x61, 0x6c, 0x69, 0x61, 0x73, 0x18, 0x02, 0x20, 0x01, 0x28, 0x09, 0x52,
-	0x05, 0x61, 0x6c, 0x69, 0x61, 0x73, 0x12, 0x10, 0x0a, 0x03, 0x63, 0x69, 0x64, 0x18, 0x03, 0x20,
-	0x01, 0x28, 0x09, 0x52, 0x03, 0x63, 0x69, 0x64, 0x3a, 0x28, 0xf2, 0x9e, 0xd3, 0x8e, 0x03, 0x22,
-	0x0a, 0x06, 0x0a, 0x02, 0x69, 0x64, 0x10, 0x01, 0x12, 0x0b, 0x0a, 0x05, 0x61, 0x6c, 0x69, 0x61,
-	0x73, 0x10, 0x01, 0x18, 0x01, 0x12, 0x09, 0x0a, 0x03, 0x63, 0x69, 0x64, 0x10, 0x02, 0x18, 0x01,
-	0x18, 0x01, 0x42, 0x88, 0x01, 0x0a, 0x0c, 0x63, 0x6f, 0x6d, 0x2e, 0x76, 0x61, 0x75, 0x6c, 0x74,
-	0x2e, 0x76, 0x31, 0x42, 0x0a, 0x53, 0x74, 0x61, 0x74, 0x65, 0x50, 0x72, 0x6f, 0x74, 0x6f, 0x50,
-	0x01, 0x5a, 0x2b, 0x67, 0x69, 0x74, 0x68, 0x75, 0x62, 0x2e, 0x63, 0x6f, 0x6d, 0x2f, 0x6f, 0x6e,
-	0x73, 0x6f, 0x6e, 0x72, 0x2f, 0x73, 0x6f, 0x6e, 0x72, 0x2f, 0x61, 0x70, 0x69, 0x2f, 0x76, 0x61,
-	0x75, 0x6c, 0x74, 0x2f, 0x76, 0x31, 0x3b, 0x76, 0x61, 0x75, 0x6c, 0x74, 0x76, 0x31, 0xa2, 0x02,
-	0x03, 0x56, 0x58, 0x58, 0xaa, 0x02, 0x08, 0x56, 0x61, 0x75, 0x6c, 0x74, 0x2e, 0x56, 0x31, 0xca,
-	0x02, 0x08, 0x56, 0x61, 0x75, 0x6c, 0x74, 0x5c, 0x56, 0x31, 0xe2, 0x02, 0x14, 0x56, 0x61, 0x75,
-	0x6c, 0x74, 0x5c, 0x56, 0x31, 0x5c, 0x47, 0x50, 0x42, 0x4d, 0x65, 0x74, 0x61, 0x64, 0x61, 0x74,
-	0x61, 0xea, 0x02, 0x09, 0x56, 0x61, 0x75, 0x6c, 0x74, 0x3a, 0x3a, 0x56, 0x31, 0x62, 0x06, 0x70,
-	0x72, 0x6f, 0x74, 0x6f, 0x33,
+	0x6f, 0x72, 0x6d, 0x2e, 0x70, 0x72, 0x6f, 0x74, 0x6f, 0x22, 0x83, 0x01, 0x0a, 0x03, 0x44, 0x57,
+	0x4e, 0x12, 0x0e, 0x0a, 0x02, 0x69, 0x64, 0x18, 0x01, 0x20, 0x01, 0x28, 0x04, 0x52, 0x02, 0x69,
+	0x64, 0x12, 0x14, 0x0a, 0x05, 0x61, 0x6c, 0x69, 0x61, 0x73, 0x18, 0x02, 0x20, 0x01, 0x28, 0x09,
+	0x52, 0x05, 0x61, 0x6c, 0x69, 0x61, 0x73, 0x12, 0x10, 0x0a, 0x03, 0x63, 0x69, 0x64, 0x18, 0x03,
+	0x20, 0x01, 0x28, 0x09, 0x52, 0x03, 0x63, 0x69, 0x64, 0x12, 0x1a, 0x0a, 0x08, 0x72, 0x65, 0x73,
+	0x6f, 0x6c, 0x76, 0x65, 0x72, 0x18, 0x04, 0x20, 0x01, 0x28, 0x09, 0x52, 0x08, 0x72, 0x65, 0x73,
+	0x6f, 0x6c, 0x76, 0x65, 0x72, 0x3a, 0x28, 0xf2, 0x9e, 0xd3, 0x8e, 0x03, 0x22, 0x0a, 0x06, 0x0a,
+	0x02, 0x69, 0x64, 0x10, 0x01, 0x12, 0x0b, 0x0a, 0x05, 0x61, 0x6c, 0x69, 0x61, 0x73, 0x10, 0x01,
+	0x18, 0x01, 0x12, 0x09, 0x0a, 0x03, 0x63, 0x69, 0x64, 0x10, 0x02, 0x18, 0x01, 0x18, 0x01, 0x42,
+	0x88, 0x01, 0x0a, 0x0c, 0x63, 0x6f, 0x6d, 0x2e, 0x76, 0x61, 0x75, 0x6c, 0x74, 0x2e, 0x76, 0x31,
+	0x42, 0x0a, 0x53, 0x74, 0x61, 0x74, 0x65, 0x50, 0x72, 0x6f, 0x74, 0x6f, 0x50, 0x01, 0x5a, 0x2b,
+	0x67, 0x69, 0x74, 0x68, 0x75, 0x62, 0x2e, 0x63, 0x6f, 0x6d, 0x2f, 0x6f, 0x6e, 0x73, 0x6f, 0x6e,
+	0x72, 0x2f, 0x73, 0x6f, 0x6e, 0x72, 0x2f, 0x61, 0x70, 0x69, 0x2f, 0x76, 0x61, 0x75, 0x6c, 0x74,
+	0x2f, 0x76, 0x31, 0x3b, 0x76, 0x61, 0x75, 0x6c, 0x74, 0x76, 0x31, 0xa2, 0x02, 0x03, 0x56, 0x58,
+	0x58, 0xaa, 0x02, 0x08, 0x56, 0x61, 0x75, 0x6c, 0x74, 0x2e, 0x56, 0x31, 0xca, 0x02, 0x08, 0x56,
+	0x61, 0x75, 0x6c, 0x74, 0x5c, 0x56, 0x31, 0xe2, 0x02, 0x14, 0x56, 0x61, 0x75, 0x6c, 0x74, 0x5c,
+	0x56, 0x31, 0x5c, 0x47, 0x50, 0x42, 0x4d, 0x65, 0x74, 0x61, 0x64, 0x61, 0x74, 0x61, 0xea, 0x02,
+	0x09, 0x56, 0x61, 0x75, 0x6c, 0x74, 0x3a, 0x3a, 0x56, 0x31, 0x62, 0x06, 0x70, 0x72, 0x6f, 0x74,
+	0x6f, 0x33,
 }
 
 var (

app/app.go

@@ -134,6 +134,17 @@ import (
 	ibcexported "github.com/cosmos/ibc-go/v8/modules/core/exported"
 	ibckeeper "github.com/cosmos/ibc-go/v8/modules/core/keeper"
 	ibctm "github.com/cosmos/ibc-go/v8/modules/light-clients/07-tendermint"
+	"github.com/spf13/cast"
+	globalfee "github.com/strangelove-ventures/globalfee/x/globalfee"
+	globalfeekeeper "github.com/strangelove-ventures/globalfee/x/globalfee/keeper"
+	globalfeetypes "github.com/strangelove-ventures/globalfee/x/globalfee/types"
+	poa "github.com/strangelove-ventures/poa"
+	poakeeper "github.com/strangelove-ventures/poa/keeper"
+	poamodule "github.com/strangelove-ventures/poa/module"
+	tokenfactory "github.com/strangelove-ventures/tokenfactory/x/tokenfactory"
+	tokenfactorykeeper "github.com/strangelove-ventures/tokenfactory/x/tokenfactory/keeper"
+	tokenfactorytypes "github.com/strangelove-ventures/tokenfactory/x/tokenfactory/types"
+
 	did "github.com/onsonr/sonr/x/did"
 	didkeeper "github.com/onsonr/sonr/x/did/keeper"
 	didtypes "github.com/onsonr/sonr/x/did/types"
@@ -149,16 +160,6 @@ import (
 	vault "github.com/onsonr/sonr/x/vault"
 	vaultkeeper "github.com/onsonr/sonr/x/vault/keeper"
 	vaulttypes "github.com/onsonr/sonr/x/vault/types"
-	"github.com/spf13/cast"
-	globalfee "github.com/strangelove-ventures/globalfee/x/globalfee"
-	globalfeekeeper "github.com/strangelove-ventures/globalfee/x/globalfee/keeper"
-	globalfeetypes "github.com/strangelove-ventures/globalfee/x/globalfee/types"
-	poa "github.com/strangelove-ventures/poa"
-	poakeeper "github.com/strangelove-ventures/poa/keeper"
-	poamodule "github.com/strangelove-ventures/poa/module"
-	tokenfactory "github.com/strangelove-ventures/tokenfactory/x/tokenfactory"
-	tokenfactorykeeper "github.com/strangelove-ventures/tokenfactory/x/tokenfactory/keeper"
-	tokenfactorytypes "github.com/strangelove-ventures/tokenfactory/x/tokenfactory/types"
 )
 
 const appName = "sonr"
@@ -926,11 +927,12 @@ func NewChainApp(
 		),
 
 		did.NewAppModule(appCodec, app.DidKeeper, app.NFTKeeper),
-		vault.NewAppModule(appCodec, app.VaultKeeper),
-		macaroon.NewAppModule(appCodec, app.MacaroonKeeper),
 
-		service.NewAppModule(appCodec, app.ServiceKeeper),
-		oracle.NewAppModule(appCodec, app.OracleKeeper),
+		macaroon.NewAppModule(appCodec, app.MacaroonKeeper, app.DidKeeper),
+		vault.NewAppModule(appCodec, app.VaultKeeper, app.DidKeeper),
+
+		service.NewAppModule(appCodec, app.ServiceKeeper, app.DidKeeper, app.MacaroonKeeper),
+		oracle.NewAppModule(appCodec, app.OracleKeeper, app.DidKeeper, app.MacaroonKeeper),
 	)
 
 	// BasicModuleManager defines the module BasicManager is in charge of setting up basic,

cmd/dwn/dwn.go

@@ -14,9 +14,10 @@ import (
 
 	"github.com/labstack/echo/v4"
 	promise "github.com/nlepage/go-js-promise"
-	"github.com/onsonr/sonr/nebula/pages"
-	"github.com/onsonr/sonr/x/vault/client/dwn/middleware"
-	"github.com/onsonr/sonr/x/vault/client/dwn/state"
+
+	"github.com/onsonr/sonr/cmd/dwn/middleware"
+	"github.com/onsonr/sonr/cmd/dwn/state"
+	"github.com/onsonr/sonr/pkg/nebula/pages"
 )
 
 func main() {

cmd/motr/proxy.go

@@ -1,11 +1,7 @@
 package main
 
 import (
-	"context"
 	"net/http"
-	"os"
-	"os/signal"
-	"time"
 
 	"github.com/labstack/echo/v4"
 	"github.com/labstack/gommon/log"
@@ -17,7 +13,7 @@ import (
 
 func NewProxyCmd() *cobra.Command {
 	return &cobra.Command{
-		Use:   "proxy",
+		Use:   "start",
 		Short: "Starts the DWN proxy server for the local IPFS node",
 		Run: func(cmd *cobra.Command, args []string) {
 			// Echo instance
@@ -30,26 +26,13 @@ func NewProxyCmd() *cobra.Command {
 			}
 
 			e.GET("/", pages.Home)
+			e.GET("/login", pages.Login)
+			e.GET("/register", pages.Register)
+			e.GET("/profile", pages.Profile)
 			e.GET("/allocate", pages.Profile)
 
-			// Start server
-			ctx, stop := signal.NotifyContext(context.Background(), os.Interrupt)
-			defer stop()
-			// Start server
-			go func() {
-				if err := e.Start(":1323"); err != nil && err != http.ErrServerClosed {
-					e.Logger.Fatal("shutting down the server")
-				}
-			}()
-
-			// Wait for interrupt signal to gracefully shutdown the server with a timeout of 10 seconds.
-			<-ctx.Done()
-			ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
-			defer cancel()
-
-			// Shutdown the server with 10 seconds timeout.
-			if err := e.Shutdown(ctx); err != nil {
-				e.Logger.Fatal(err)
+			if err := e.Start(":1323"); err != http.ErrServerClosed {
+				log.Fatal(err)
 			}
 		},
 	}

devbox.json

@@ -2,10 +2,12 @@
   "$schema": "https://raw.githubusercontent.com/jetify-com/devbox/0.12.0/.schema/devbox.schema.json",
   "packages": [
     "go@1.22",
+    "air@latest",
     "bun@latest",
     "ipfs@latest",
     "skate@latest",
-    "cloudflared@latest"
+    "cloudflared@latest",
+    "process-compose@latest"
   ],
   "env": {
     "GOPATH": "$HOME/go",
@@ -26,6 +28,9 @@
   },
   "shell": {
     "scripts": {
+      "dev": [
+        "air"
+      ],
       "build:docker": [
         "make local-image"
       ],
@@ -33,10 +38,18 @@
         "make nebula",
         "make motr"
       ],
+      "build:nebula": [
+        "make nebula"
+      ],
       "build:sonrd": [
         "make dwn",
         "make build"
       ],
+      "build": [
+        "make dwn",
+        "make build",
+        "make motr"
+      ],
       "gen:proto": [
         "make proto-gen"
       ],
@@ -55,6 +68,24 @@
         "make templ",
         "make install",
         "make sh-testnet"
+      ],
+      "start": [
+        "process-compose up -d"
+      ],
+      "stop": [
+        "process-compose down"
+      ],
+      "test:e2e": [
+        "make templ",
+        "make test-e2e"
+      ],
+      "test:unit": [
+        "make templ",
+        "make test-unit"
+      ],
+      "test": [
+        "make templ",
+        "make test"
       ]
     }
   }

devbox.lock

@@ -1,6 +1,54 @@
 {
   "lockfile_version": "1",
   "packages": {
+    "air@latest": {
+      "last_modified": "2024-09-10T15:01:03Z",
+      "resolved": "github:NixOS/nixpkgs/5ed627539ac84809c78b2dd6d26a5cebeb5ae269#air",
+      "source": "devbox-search",
+      "version": "1.52.3",
+      "systems": {
+        "aarch64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/bfwl7myqmaqh2xxw5fla1kmnv89qjxz6-air-1.52.3",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/bfwl7myqmaqh2xxw5fla1kmnv89qjxz6-air-1.52.3"
+        },
+        "aarch64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/ac18dzvchpv0pzi6qvdjs01cffw4q6zf-air-1.52.3",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/ac18dzvchpv0pzi6qvdjs01cffw4q6zf-air-1.52.3"
+        },
+        "x86_64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/jzdcmkyh258nf3j8lhfmg8n959ffvg13-air-1.52.3",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/jzdcmkyh258nf3j8lhfmg8n959ffvg13-air-1.52.3"
+        },
+        "x86_64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/rnny9fd1r9zdln6g6h7md4fpi6jgx229-air-1.52.3",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/rnny9fd1r9zdln6g6h7md4fpi6jgx229-air-1.52.3"
+        }
+      }
+    },
     "bun@latest": {
       "last_modified": "2024-09-20T22:35:44Z",
       "resolved": "github:NixOS/nixpkgs/a1d92660c6b3b7c26fb883500a80ea9d33321be2#bun",
@@ -151,6 +199,54 @@
       "source": "devbox-search",
       "version": "0.17.0"
     },
+    "process-compose@latest": {
+      "last_modified": "2024-09-15T21:49:16Z",
+      "resolved": "github:NixOS/nixpkgs/039b72d0c738c934e2e36d7fc5520d1b425287a6#process-compose",
+      "source": "devbox-search",
+      "version": "1.27.0",
+      "systems": {
+        "aarch64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/dxgk503lw2a0slqcvhcvwfa07qf9y8sx-process-compose-1.27.0",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/dxgk503lw2a0slqcvhcvwfa07qf9y8sx-process-compose-1.27.0"
+        },
+        "aarch64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/k6xl3mdb8f0fkv7q4ibw8smak6lxrb93-process-compose-1.27.0",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/k6xl3mdb8f0fkv7q4ibw8smak6lxrb93-process-compose-1.27.0"
+        },
+        "x86_64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/5zyqg2yf0cg5nahgpwbkbblgml9nlac0-process-compose-1.27.0",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/5zyqg2yf0cg5nahgpwbkbblgml9nlac0-process-compose-1.27.0"
+        },
+        "x86_64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/3fwnj5jmdky0nl9ixp6bxasvi4ki6jgz-process-compose-1.27.0",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/3fwnj5jmdky0nl9ixp6bxasvi4ki6jgz-process-compose-1.27.0"
+        }
+      }
+    },
     "skate@latest": {
       "last_modified": "2024-09-10T15:01:03Z",
       "resolved": "github:NixOS/nixpkgs/5ed627539ac84809c78b2dd6d26a5cebeb5ae269#skate",

pkg/dwn/Schema.pkl.go

@@ -18,7 +18,5 @@ type Schema struct {
 
 	Keyshare string `pkl:"keyshare" json:"keyshare,omitempty"`
 
-	PublicKey string `pkl:"publicKey" json:"publicKey,omitempty"`
-
 	Profile string `pkl:"profile" json:"profile,omitempty"`
 }

pkg/dwn/embed.go

@@ -1,4 +1,4 @@
-package vault
+package dwn
 
 import (
 	"bytes"
@@ -8,8 +8,6 @@ import (
 
 	"github.com/a-h/templ"
 	"github.com/ipfs/boxo/files"
-
-	"github.com/onsonr/sonr/pkg/dwn"
 )
 
 //go:embed app.wasm
@@ -28,7 +26,7 @@ var (
 )
 
 // NewVaultDirectory creates a new directory with the default files
-func NewVaultDirectory(cnfg *dwn.Config) (files.Node, error) {
+func NewVaultDirectory(cnfg *Config) (files.Node, error) {
 	dwnJSON, err := json.Marshal(cnfg)
 	if err != nil {
 		return nil, err
@@ -54,7 +52,7 @@ func NewVaultDirectory(cnfg *dwn.Config) (files.Node, error) {
 }
 
 // Use IndexHTML template to generate the index file
-func IndexHTMLFile(c *dwn.Config) (files.Node, error) {
+func IndexHTMLFile(c *Config) (files.Node, error) {
 	str, err := templ.JSONString(c)
 	if err != nil {
 		return nil, err
@@ -69,7 +67,7 @@ func IndexHTMLFile(c *dwn.Config) (files.Node, error) {
 }
 
 // MarshalConfigFile uses the config template to generate the dwn config file
-func MarshalConfigFile(c *dwn.Config) (files.Node, error) {
+func MarshalConfigFile(c *Config) (files.Node, error) {
 	dwnConfigData, err := json.Marshal(c)
 	if err != nil {
 		return nil, err

pkg/dwn/index.templ

@@ -1,4 +1,4 @@
-package vault
+package dwn
 
 var motrHandle = templ.NewOnceHandle()
 

pkg/dwn/index_templ.go

@@ -1,7 +1,7 @@
 // Code generated by templ - DO NOT EDIT.
 
 // templ: version: v0.2.778
-package vault
+package dwn
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
 

pkg/nebula/components/blocks/layout.templ

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

pkg/nebula/components/blocks/layout_templ.go

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

pkg/nebula/components/grant/view.templ

@@ -1,15 +1,11 @@
-package pages
+package grant
 
 import (
 	"github.com/labstack/echo/v4"
 	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
 )
 
-func Authorize(c echo.Context) error {
-	return echoResponse(c, authorizeView(c))
-}
-
-templ authorizeView(c echo.Context) {
+templ View(c echo.Context) {
 	@blocks.Layout("Sonr.ID", true) {
 		@blocks.Card("authorize-view", blocks.SizeMedium) {
 			@blocks.H1("Sonr.ID")

pkg/nebula/components/grant/view_templ.go

@@ -1,7 +1,7 @@
 // Code generated by templ - DO NOT EDIT.
 
 // templ: version: v0.2.778
-package pages
+package grant
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
 
@@ -13,11 +13,7 @@ import (
 	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
 )
 
-func Authorize(c echo.Context) error {
-	return echoResponse(c, authorizeView(c))
-}
-
-func authorizeView(c echo.Context) templ.Component {
+func View(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 {

pkg/nebula/components/home/bento.templ

@@ -0,0 +1,197 @@
+package home
+
+templ Bento() {
+	<!-- 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>
+}

pkg/nebula/components/home/cta.templ

@@ -0,0 +1,70 @@
+package home
+
+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/img/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>
+}

pkg/nebula/components/home/features.templ

@@ -0,0 +1,335 @@
+package home
+
+templ Features() {
+	<!-- 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="./images/features-illustration.png"
+							alt="Features 02 illustration"
+							width="173"
+							height="167"
+							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>
+}

pkg/nebula/components/home/footer.templ

@@ -1,20 +1,20 @@
-package sections
+package home
 
-templ FooterMarketingNav() {
+templ MarketingFooter() {
 	<!-- Site footer -->
 	<footer>
-		<div class="max-w-6xl mx-auto px-4 sm:px-6">
+		<div class="max-w-5xl mx-auto px-4 sm:px-6">
 			<!-- Top area: Blocks -->
 			<div class="grid sm:grid-cols-12 gap-8 py-8 md:py-12 border-t border-zinc-200">
 				<!-- 1st block -->
 				<div class="sm:col-span-6 md:col-span-3 lg:col-span-6 max-sm:order-1 flex flex-col">
 					<div class="mb-4">
 						<!-- Logo -->
-						<a class="flex items-center justify-center bg-white w-8 h-8 rounded-full shadow-sm shadow-zinc-950/20" href="/">
-							<img src="https://cdn.sonr.id/logo-zinc.svg" width="24" height="24" alt="Logo"/>
+						<a 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/img/logo-zinc.svg" width="24" height="24" alt="Logo"/>
 						</a>
 					</div>
-					<div class="grow text-sm text-zinc-500">&copy; Cruip.com. All rights reserved.</div>
+					<div class="grow text-sm text-zinc-500">&copy; diDAO DUNA. All rights reserved.</div>
 					<!-- Social links -->
 					<ul class="flex space-x-4 mt-4 mb-1">
 						<li>
@@ -41,26 +41,7 @@ templ FooterMarketingNav() {
 					</ul>
 				</div>
 				<!-- 2nd block -->
-				<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
-					<h6 class="text-sm text-zinc-800 font-medium mb-2">Company</h6>
-					<ul class="text-sm space-y-2">
-						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">About us</a>
-						</li>
-						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Diversity & Inclusion</a>
-						</li>
-						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Blog</a>
-						</li>
-						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Careers</a>
-						</li>
-						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Financial statements</a>
-						</li>
-					</ul>
-				</div>
+				<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>
@@ -69,10 +50,10 @@ templ FooterMarketingNav() {
 							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Community</a>
 						</li>
 						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Terms of service</a>
+							<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">Collaboration features</a>
+							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Privacy policy</a>
 						</li>
 					</ul>
 				</div>
@@ -81,16 +62,13 @@ templ FooterMarketingNav() {
 					<h6 class="text-sm text-zinc-800 font-medium mb-2">Legals</h6>
 					<ul class="text-sm space-y-2">
 						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Refund policy</a>
-						</li>
-						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Terms & Conditions</a>
+							<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="#0">Brand Kit</a>
+							<a class="text-zinc-500 hover:text-zinc-900 transition" href="https://brandfetch.io/sonr.io">Brand Kit</a>
 						</li>
 					</ul>
 				</div>

pkg/nebula/components/home/footer_templ.go

@@ -1,14 +1,14 @@
 // Code generated by templ - DO NOT EDIT.
 
 // templ: version: v0.2.778
-package sections
+package home
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
 
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
-func FooterMarketingNav() templ.Component {
+func MarketingFooter() 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 +29,7 @@ func FooterMarketingNav() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Site footer --><footer><div class=\"max-w-6xl mx-auto px-4 sm:px-6\"><!-- Top area: Blocks --><div class=\"grid sm:grid-cols-12 gap-8 py-8 md:py-12 border-t border-zinc-200\"><!-- 1st block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-6 max-sm:order-1 flex flex-col\"><div class=\"mb-4\"><!-- Logo --><a class=\"flex items-center justify-center bg-white w-8 h-8 rounded-full shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/logo-zinc.svg\" width=\"24\" height=\"24\" alt=\"Logo\"></a></div><div class=\"grow text-sm text-zinc-500\">&copy; Cruip.com. All rights reserved.</div><!-- Social links --><ul class=\"flex space-x-4 mt-4 mb-1\"><li><a class=\"flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition\" href=\"#0\" aria-label=\"Twitter\"><svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"m7.063 3 3.495 4.475L14.601 3h2.454l-5.359 5.931L18 17h-4.938l-3.866-4.893L4.771 17H2.316l5.735-6.342L2 3h5.063Zm-.74 1.347H4.866l8.875 11.232h1.36L6.323 4.347Z\"></path></svg></a></li><li><a class=\"flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition\" href=\"#0\" aria-label=\"Medium\"><svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"M17 2H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Zm-1.708 3.791-.858.823a.251.251 0 0 0-.1.241V12.9a.251.251 0 0 0 .1.241l.838.823v.181h-4.215v-.181l.868-.843c.085-.085.085-.11.085-.241V7.993L9.6 14.124h-.329l-2.81-6.13V12.1a.567.567 0 0 0 .156.472l1.129 1.37v.181h-3.2v-.181l1.129-1.37a.547.547 0 0 0 .146-.472V7.351A.416.416 0 0 0 5.683 7l-1-1.209V5.61H7.8l2.4 5.283 2.122-5.283h2.971l-.001.181Z\"></path></svg></a></li><li><a class=\"flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition\" href=\"#0\" aria-label=\"Telegram\"><svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"M17.968 3.276a.338.338 0 0 0-.232-.253 1.192 1.192 0 0 0-.63.045S3.087 8.106 2.286 8.664c-.172.121-.23.19-.259.272-.138.4.293.573.293.573l3.613 1.177a.388.388 0 0 0 .183-.011c.822-.519 8.27-5.222 8.7-5.38.068-.02.118 0 .1.049-.172.6-6.606 6.319-6.64 6.354a.138.138 0 0 0-.05.118l-.337 3.528s-.142 1.1.956 0a30.66 30.66 0 0 1 1.9-1.738c1.242.858 2.58 1.806 3.156 2.3a1 1 0 0 0 .732.283.825.825 0 0 0 .7-.622S17.894 5.292 17.98 3.909c.008-.135.021-.217.021-.317a1.177 1.177 0 0 0-.032-.316Z\"></path></svg></a></li></ul></div><!-- 2nd block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-2\"><h6 class=\"text-sm text-zinc-800 font-medium mb-2\">Company</h6><ul class=\"text-sm space-y-2\"><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">About us</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Diversity & Inclusion</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Blog</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Careers</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Financial statements</a></li></ul></div><!-- 3rd block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-2\"><h6 class=\"text-sm text-zinc-800 font-medium mb-2\">Resources</h6><ul class=\"text-sm space-y-2\"><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Community</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Terms of service</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Collaboration features</a></li></ul></div><!-- 4th block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-2\"><h6 class=\"text-sm text-zinc-800 font-medium mb-2\">Legals</h6><ul class=\"text-sm space-y-2\"><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Refund policy</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Terms & Conditions</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Privacy policy</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Brand Kit</a></li></ul></div></div></div></footer>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Site footer --><footer><div class=\"max-w-5xl mx-auto px-4 sm:px-6\"><!-- Top area: Blocks --><div class=\"grid sm:grid-cols-12 gap-8 py-8 md:py-12 border-t border-zinc-200\"><!-- 1st block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-6 max-sm:order-1 flex flex-col\"><div class=\"mb-4\"><!-- Logo --><a class=\"flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/img/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
 		}

pkg/nebula/components/home/header.templ

@@ -1,6 +1,6 @@
-package sections
+package home
 
-templ HeaderMarketingNav() {
+templ MarketingHeader() {
 	<!-- Site header -->
 	<header class="absolute top-2 md:top-6 w-full z-30">
 		<div class="px-4 sm:px-6">
@@ -9,8 +9,8 @@ templ HeaderMarketingNav() {
 					<!-- Site branding -->
 					<div class="shrink-0 mr-4">
 						<!-- Logo -->
-						<a class="flex items-center justify-center bg-white w-8 h-8 rounded-full shadow-sm shadow-zinc-950/20" href="/">
-							<img src="https://cdn.sonr.id/logo-zinc.svg" width="24" height="24" alt="Logo"/>
+						<a 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/img/logo-zinc.svg" width="24" height="24" alt="Logo"/>
 						</a>
 					</div>
 					<!-- Desktop navigation -->
@@ -18,10 +18,10 @@ templ HeaderMarketingNav() {
 						<!-- Desktop sign in links -->
 						<ul class="flex grow justify-end flex-wrap items-center">
 							<li>
-								<a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition" href="login.html">Log in</a>
+								<a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition" href="/login">Log in</a>
 							</li>
 							<li class="ml-1">
-								<a class="btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow" href="request-demo.html">Request Demo</a>
+								<a class="btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow" href="/register">Register</a>
 							</li>
 						</ul>
 					</nav>

pkg/nebula/components/home/header_templ.go

@@ -1,14 +1,14 @@
 // Code generated by templ - DO NOT EDIT.
 
 // templ: version: v0.2.778
-package sections
+package home
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
 
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
-func HeaderMarketingNav() templ.Component {
+func MarketingHeader() 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 +29,7 @@ func HeaderMarketingNav() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Site header --><header class=\"absolute top-2 md:top-6 w-full z-30\"><div class=\"px-4 sm:px-6\"><div class=\"max-w-3xl mx-auto\"><div class=\"flex items-center justify-between h-14 border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg px-3\"><!-- Site branding --><div class=\"shrink-0 mr-4\"><!-- Logo --><a class=\"flex items-center justify-center bg-white w-8 h-8 rounded-full shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/logo-zinc.svg\" width=\"24\" height=\"24\" alt=\"Logo\"></a></div><!-- Desktop navigation --><nav class=\"flex grow\"><!-- Desktop sign in links --><ul class=\"flex grow justify-end flex-wrap items-center\"><li><a class=\"text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition\" href=\"login.html\">Log in</a></li><li class=\"ml-1\"><a class=\"btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow\" href=\"request-demo.html\">Request Demo</a></li></ul></nav></div></div></div></header>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Site header --><header class=\"absolute top-2 md:top-6 w-full z-30\"><div class=\"px-4 sm:px-6\"><div class=\"max-w-3xl mx-auto\"><div class=\"flex items-center justify-between h-14 border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg px-3\"><!-- Site branding --><div class=\"shrink-0 mr-4\"><!-- Logo --><a class=\"flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/img/logo-zinc.svg\" width=\"24\" height=\"24\" alt=\"Logo\"></a></div><!-- Desktop navigation --><nav class=\"flex grow\"><!-- Desktop sign in links --><ul class=\"flex grow justify-end flex-wrap items-center\"><li><a class=\"text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition\" href=\"/login\">Log in</a></li><li class=\"ml-1\"><a class=\"btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow\" href=\"/register\">Register</a></li></ul></nav></div></div></div></header>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

pkg/nebula/components/home/hero.templ

@@ -0,0 +1,134 @@
+package home
+
+import "github.com/onsonr/sonr/pkg/nebula/models"
+
+templ SectionHero(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-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">
+							{ 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">
+							<div>
+								<div class="btn text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow" hx-get={ hero.PrimaryButton.Href }>{ hero.PrimaryButton.Text }</div>
+							</div>
+							<div>
+								<a class="btn text-zinc-600 bg-white hover:text-zinc-900 w-full shadow" href={ templ.SafeURL(hero.SecondaryButton.Href) }>{ hero.SecondaryButton.Text }</a>
+							</div>
+						</div>
+					</div>
+				</div>
+				@heroImage(hero)
+				@stats()
+			</div>
+		</div>
+	</section>
+}
+
+templ heroImage(hero *models.Hero) {
+	<!-- Image -->
+	<div class="max-w-5xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10 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 -->
+	<div class="max-w-4xl mx-auto px-4 sm:px-6 justify-center items-center">
+		<div class="max-w-sm mx-auto grid gap-12 sm:grid-cols-2 md:grid-cols-4 md:-mx-5 md:gap-0 items-end md:max-w-none">
+			<!-- 1st item -->
+			<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
+				<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(476)" x-text="counterValue">0</span>K</h4>
+				<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
+			</div>
+			<!-- 2nd item -->
+			<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
+				<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(1.44)" x-text="counterValue">0</span>K</h4>
+				<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
+			</div>
+			<!-- 3rd item -->
+			<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
+				<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(1.5)" x-text="counterValue">0</span>M+</h4>
+				<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
+			</div>
+			<!-- 4th item -->
+			<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
+				<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(750)" x-text="counterValue">0</span>K</h4>
+				<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
+			</div>
+		</div>
+		@counterAnimation()
+	</div>
+}
+
+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()
+                          },
+                      }))
+                  })
+}

pkg/nebula/components/home/hero_templ.go

@@ -0,0 +1,312 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.778
+package home
+
+//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/models"
+
+func SectionHero(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-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\">")
+		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/hero.templ`, Line: 14, 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/home/hero.templ`, Line: 16, 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/home/hero.templ`, Line: 21, 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/home/hero.templ`, Line: 24, 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\"><div><a class=\"btn text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow\" href=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 templ.SafeURL = templ.SafeURL(hero.PrimaryButton.Href)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var6)))
+		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
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hero.PrimaryButton.Text)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 28, Col: 154}
+		}
+		_, 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("</a></div><div><a class=\"btn text-zinc-600 bg-white hover:text-zinc-900 w-full shadow\" href=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 templ.SafeURL = templ.SafeURL(hero.SecondaryButton.Href)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var8)))
+		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
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hero.SecondaryButton.Text)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 31, Col: 157}
+		}
+		_, 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("</a></div></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().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_Var10 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var10 == nil {
+			templ_7745c5c3_Var10 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Image --><div class=\"max-w-5xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10 from-zinc-100 to-white\"><img class=\"rounded-lg\" src=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, 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/hero.templ`, Line: 48, Col: 23}
+		}
+		_, 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("\" width=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, 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/hero.templ`, Line: 49, Col: 27}
+		}
+		_, 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("\" height=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 string
+		templ_7745c5c3_Var13, 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/hero.templ`, Line: 50, Col: 29}
+		}
+		_, 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("\" alt=\"Hero\"></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func stats() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var14 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var14 == nil {
+			templ_7745c5c3_Var14 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Stats --><div class=\"max-w-4xl mx-auto px-4 sm:px-6 justify-center items-center\"><div class=\"max-w-sm mx-auto grid gap-12 sm:grid-cols-2 md:grid-cols-4 md:-mx-5 md:gap-0 items-end md:max-w-none\"><!-- 1st item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(476)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 2nd item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(1.44)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 3rd item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(1.5)\" x-text=\"counterValue\">0</span>M+</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 4th item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(750)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = counterAnimation().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func counterAnimation() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_counterAnimation_524d`,
+		Function: `function __templ_counterAnimation_524d(){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_524d`),
+		CallInline: templ.SafeScriptInline(`__templ_counterAnimation_524d`),
+	}
+}
+
+var _ = templruntime.GeneratedTemplate

pkg/nebula/components/home/highlights.templ

@@ -0,0 +1,251 @@
+package home
+
+templ 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"
+					>
+						The Internet Rebuilt for You
+					</h2>
+					<p class="text-lg text-zinc-500">
+						AI reads and understands your designs, and with nothing more
+						than a single line of feedback, perform complex actions
+						autonomously.
+					</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"
+									/>
+									<img
+										class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
+										src="./images/feature-illustration.png"
+										width="273"
+										height="288"
+										alt="Illustration"
+										aria-hidden="true"
+									/>
+								</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"
+									/>
+									<img
+										class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
+										src="./images/feature-illustration.png"
+										width="273"
+										height="288"
+										alt="Illustration"
+										aria-hidden="true"
+									/>
+								</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"
+									/>
+									<img
+										class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
+										src="./images/feature-illustration.png"
+										width="273"
+										height="288"
+										alt="Illustration"
+										aria-hidden="true"
+									/>
+								</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"
+									/>
+									<img
+										class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
+										src="./images/feature-illustration.png"
+										width="273"
+										height="288"
+										alt="Illustration"
+										aria-hidden="true"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+}

pkg/nebula/components/home/lowlights.templ

@@ -0,0 +1,161 @@
+package home
+
+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>
+}

pkg/nebula/components/home/view.templ

@@ -0,0 +1,19 @@
+package home
+
+import (
+	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
+	"github.com/onsonr/sonr/pkg/nebula/models"
+)
+
+templ View(hero *models.Hero) {
+	@blocks.LayoutNoBody("Sonr.ID", true) {
+		@MarketingHeader()
+		@SectionHero(hero)
+		@Highlights()
+		@Features()
+		@Bento()
+		@Lowlights()
+		@CallToAction()
+		@MarketingFooter()
+	}
+}

pkg/nebula/components/home/view_templ.go

@@ -1,7 +1,7 @@
 // Code generated by templ - DO NOT EDIT.
 
 // templ: version: v0.2.778
-package pages
+package home
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
 
@@ -9,26 +9,11 @@ import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
 import (
-	"github.com/labstack/echo/v4"
 	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
-	"github.com/onsonr/sonr/pkg/nebula/components/sections"
+	"github.com/onsonr/sonr/pkg/nebula/models"
 )
 
-func Home(c echo.Context) error {
-	hero := sections.Hero{
-		TitleFirst:          "Sonr.ID",
-		TitleEmphasis:       "platform",
-		TitleSecond:         "for cross-functional work",
-		Subtitle:            "Turbocharge your creative process with a powerful AI design platform that gives creatives the power of creating without limits.",
-		PrimaryButtonText:   "Request Demo",
-		PrimaryButtonLink:   "request-demo.html",
-		SecondaryButtonText: "Try for Free",
-		SecondaryButtonLink: "#0",
-	}
-	return echoResponse(c, homeView(hero))
-}
-
-func homeView(hero sections.Hero) templ.Component {
+func View(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 {
@@ -61,7 +46,7 @@ func homeView(hero sections.Hero) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = sections.HeaderMarketingNav().Render(ctx, templ_7745c5c3_Buffer)
+			templ_7745c5c3_Err = MarketingHeader().Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -69,7 +54,7 @@ func homeView(hero sections.Hero) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = sections.SectionHero(hero).Render(ctx, templ_7745c5c3_Buffer)
+			templ_7745c5c3_Err = SectionHero(hero).Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -77,7 +62,47 @@ func homeView(hero sections.Hero) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = sections.FooterMarketingNav().Render(ctx, templ_7745c5c3_Buffer)
+			templ_7745c5c3_Err = 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 = Features().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 = Bento().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 = 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 = 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 = MarketingFooter().Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}

pkg/nebula/components/login/modal.templ

@@ -0,0 +1,74 @@
+package login
+
+import "github.com/labstack/echo/v4"
+
+templ Modal(c echo.Context) {
+	<div
+		x-data="{ fullscreenModal: true }"
+		x-init="
+    $watch('fullscreenModal', function(value){
+            if(value === true){
+                document.body.classList.add('overflow-hidden');
+            }else{
+                document.body.classList.remove('overflow-hidden');
+            }
+        })
+    "
+		@keydown.escape="fullscreenModal=false"
+	>
+		<button @click="fullscreenModal=true" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors bg-white border rounded-md hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none">Preview</button>
+		<template x-teleport="body">
+			<div
+				x-show="fullscreenModal"
+				x-transition:enter="transition ease-out duration-300"
+				x-transition:enter-start="translate-y-full"
+				x-transition:enter-end="translate-y-0"
+				x-transition:leave="transition ease-in duration-300"
+				x-transition:leave-start="translate-y-0"
+				x-transition:leave-end="translate-y-full"
+				class="flex fixed inset-0 z-[99] w-screen h-screen bg-white"
+			>
+				<button @click="fullscreenModal=false" class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-3 mr-3 space-x-1 text-xs font-medium uppercase border rounded-md border-neutral-200 lg:border-white/20 lg:bg-black/10 hover:lg:bg-black/30 text-neutral-600 lg:text-white hover:bg-neutral-100">
+					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
+					<span>Close</span>
+				</button>
+				<div class="relative flex flex-wrap items-center w-full h-full px-8">
+					<div class="relative w-full max-w-sm mx-auto lg:mb-0">
+						<div class="relative text-center">
+							<div class="flex flex-col mb-6 space-y-2">
+								<h1 class="text-2xl font-semibold tracking-tight">Create an account</h1>
+								<p class="text-sm text-neutral-500">Enter your email below to create your account</p>
+							</div>
+							<form onsubmit="event.preventDefault();" class="space-y-2">
+								<input type="text" placeholder="name@example.com" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-500 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/>
+								<button type="button" class="inline-flex items-center justify-center w-full h-10 px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none">
+									Sign up with Email
+								</button>
+								<div class="relative py-6">
+									<div class="absolute inset-0 flex items-center"><span class="w-full border-t"></span></div>
+									<div class="relative flex justify-center text-xs uppercase">
+										<span class="px-2 bg-white text-neutral-500">Or continue with</span>
+									</div>
+								</div>
+								<button class="inline-flex items-center justify-center w-full h-10 px-4 py-2 text-sm font-medium border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none border-input hover:bg-neutral-100" type="button">
+									<svg viewBox="0 0 438.549 438.549" class="w-4 h-4 mr-2"><path fill="currentColor" d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path></svg>
+									<span>Github</span>
+								</button>
+							</form>
+						</div>
+						<p class="mt-6 text-sm text-center text-neutral-500">Already have an account? <a href="#_" class="relative font-medium text-blue-600 group"><span>Login here</span><span class="absolute bottom-0 left-0 w-0 group-hover:w-full ease-out duration-300 h-0.5 bg-blue-600"></span></a></p>
+						<p class="px-8 mt-1 text-sm text-center text-neutral-500">By continuing, you agree to our <a class="underline underline-offset-4 hover:text-primary" href="/terms">Terms</a> and <a class="underline underline-offset-4 hover:text-primary" href="/privacy">Policy</a>.</p>
+					</div>
+				</div>
+				<div class="relative top-0 bottom-0 right-0 flex-shrink-0 hidden w-1/3 overflow-hidden bg-cover lg:block">
+					<a href="#_" class="absolute bottom-0 right-0 z-30 inline-flex items-end mb-4 mr-3 font-sans text-2xl font-extrabold text-left text-white no-underline bg-transparent cursor-pointer group focus:no-underline">
+						<svg class="w-auto h-4 text-white fill-current lg:h-5" viewBox="0 0 355 99" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M119.1 87V66.4h19.8c34.3 0 34.2-49.5 0-49.5-11 0-22 .1-33 .1v70h13.2zm19.8-32.7h-19.8V29.5h19.8c16.8 0 16.9 24.8 0 24.8zm32.6-30.5c0 9.5 14.4 9.5 14.4 0s-14.4-9.5-14.4 0zM184.8 87V37.5h-12.2V87h12.2zm22.8 0V61.8c0-7.5 5.1-13.8 12.6-13.8 7.8 0 11.9 5.7 11.9 13.2V87h12.2V61.1c0-15.5-9.3-24.2-20.9-24.2-6.2 0-11.2 2.5-16.2 7.4l-.8-6.7h-10.9V87h12.1zm72.1 1.3c7.5 0 16-2.6 21.2-8l-7.8-7.7c-2.8 2.9-8.7 4.6-13.2 4.6-8.6 0-13.9-4.4-14.7-10.5h38.5c1.9-20.3-8.4-30.5-24.9-30.5-16 0-26.2 10.8-26.2 25.8 0 15.8 10.1 26.3 27.1 26.3zM292 56.6h-26.6c1.8-6.4 7.2-9.6 13.8-9.6 7 0 12 3.2 12.8 9.6zm41.2 32.1c14.1 0 21.2-7.5 21.2-16.2 0-13.1-11.8-15.2-21.1-15.8-6.3-.4-9.2-2.2-9.2-5.4 0-3.1 3.2-4.9 9-4.9 4.7 0 8.7 1.1 12.2 4.4l6.8-8c-5.7-5-11.5-6.5-19.2-6.5-9 0-20.8 4-20.8 15.4 0 11.2 11.1 14.6 20.4 15.3 7 .4 9.8 1.8 9.8 5.2 0 3.6-4.3 6-8.9 5.9-5.5-.1-13.5-3-17-6.9l-6 8.7c7.2 7.5 15 8.8 22.8 8.8z" id="a"></path></defs><g fill="none" fill-rule="evenodd"><g fill="currentColor"><path d="M19.742 49h28.516L68 83H0l19.742-34z"></path><path d="M26 69h14v30H26V69zM4 50L33.127 0 63 50H4z"></path></g><g fill-rule="nonzero"><use fill="currentColor" xlink:href="#a"></use><use fill="currentColor" xlink:href="#a"></use></g></g></svg>
+						<span class="flex opacity-90 group-hover:scale-150 group-hover:opacity-100 items-center h-full group-hover:-rotate-6 ease-out duration-500 px-0.5 py-px ml-2 -translate-x-px text-[0.6rem] font-bold leading-none border-[2px] rounded border-white -translate-y-px">UI</span>
+					</a>
+					<div class="absolute inset-0 z-20 w-full h-full opacity-70 bg-gradient-to-t from-black"></div>
+					<img src="https://cdn.devdojo.com/images/may2023/pines-bg-2.png" class="z-10 object-cover w-full h-full"/>
+				</div>
+			</div>
+		</template>
+	</div>
+}

pkg/nebula/components/login/view.templ

@@ -1,15 +1,11 @@
-package pages
+package login
 
 import (
 	"github.com/labstack/echo/v4"
 	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
 )
 
-func Login(c echo.Context) error {
-	return echoResponse(c, loginView(c))
-}
-
-templ loginView(c echo.Context) {
+templ View(c echo.Context) {
 	@blocks.Layout("Sonr.ID", true) {
 		@blocks.Card("login-view", blocks.SizeLarge) {
 			@blocks.H1("Sonr.ID")

pkg/nebula/components/login/view_templ.go

@@ -1,7 +1,7 @@
 // Code generated by templ - DO NOT EDIT.
 
 // templ: version: v0.2.778
-package pages
+package login
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
 
@@ -13,11 +13,7 @@ import (
 	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
 )
 
-func Login(c echo.Context) error {
-	return echoResponse(c, loginView(c))
-}
-
-func loginView(c echo.Context) templ.Component {
+func View(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 {

pkg/nebula/components/profile/view.templ

@@ -1,15 +1,11 @@
-package pages
+package profile
 
 import (
 	"github.com/labstack/echo/v4"
 	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
 )
 
-func Profile(c echo.Context) error {
-	return echoResponse(c, profileView(c))
-}
-
-templ profileView(c echo.Context) {
+templ View(c echo.Context) {
 	@blocks.Layout("Sonr.ID", true) {
 		@blocks.Card("profile-view", blocks.SizeLarge) {
 			@blocks.ProfileCard()

pkg/nebula/components/profile/view_templ.go

@@ -1,7 +1,7 @@
 // Code generated by templ - DO NOT EDIT.
 
 // templ: version: v0.2.778
-package pages
+package profile
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
 
@@ -13,11 +13,7 @@ import (
 	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
 )
 
-func Profile(c echo.Context) error {
-	return echoResponse(c, profileView(c))
-}
-
-func profileView(c echo.Context) templ.Component {
+func View(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 {

pkg/nebula/components/register/modal.templ

@@ -0,0 +1,66 @@
+package register
+
+import (
+	"github.com/labstack/echo/v4"
+	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
+	"github.com/onsonr/sonr/pkg/nebula/models/formstate"
+)
+
+templ Modal(c echo.Context) {
+	<div
+		x-data="{ modalOpen: true }"
+		@keydown.escape.window="modalOpen = false"
+		:class="{ 'z-40': modalOpen }"
+		class="relative w-auto h-auto"
+	>
+		<button @click="modalOpen=true" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors bg-white border rounded-md hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none">Open</button>
+		<template x-teleport="body">
+			<div x-show="modalOpen" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen" x-cloak>
+				<div
+					x-show="modalOpen"
+					x-transition:enter="ease-out duration-300"
+					x-transition:enter-start="opacity-0"
+					x-transition:enter-end="opacity-100"
+					x-transition:leave="ease-in duration-300"
+					x-transition:leave-start="opacity-100"
+					x-transition:leave-end="opacity-0"
+					@click="modalOpen=false"
+					class="absolute inset-0 w-full h-full bg-gray-900 bg-opacity-50 backdrop-blur-sm"
+				></div>
+				<div
+					x-show="modalOpen"
+					x-trap.inert.noscroll="modalOpen"
+					x-transition:enter="ease-out duration-300"
+					x-transition:enter-start="opacity-0 scale-90"
+					x-transition:enter-end="opacity-100 scale-100"
+					x-transition:leave="ease-in duration-200"
+					x-transition:leave-start="opacity-100 scale-100"
+					x-transition:leave-end="opacity-0 scale-90"
+					class="relative w-full py-6 bg-white shadow-md px-7 bg-opacity-90 drop-shadow-md backdrop-blur-sm sm:max-w-lg sm:rounded-lg"
+				>
+					<div class="flex items-center justify-between pb-3">
+						<h3 class="text-lg font-semibold">Modal Title</h3>
+						<button @click="modalOpen=false" class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-gray-600 rounded-full hover:text-gray-800 hover:bg-gray-50">
+							<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
+						</button>
+					</div>
+					<div class="relative w-auto pb-8">
+						<p>This is placeholder text. Replace it with your own content.</p>
+					</div>
+					@blocks.H2("Account Registration")
+					@blocks.Spacer()
+					@blocks.Breadcrumbs()
+					@basicInfoForm(formstate.Initial)
+					@blocks.Spacer()
+					@blocks.Button(blocks.GET("/", "#register-view")) {
+						@blocks.Text("Cancel")
+					}
+					<div class="flex flex-col-reverse sm:flex-row sm:justify-between sm:space-x-2">
+						<button @click="modalOpen=false" type="button" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors border rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-100 focus:ring-offset-2">Previous</button>
+						<button @click="modalOpen=false" type="button" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-colors border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2 bg-neutral-950 hover:bg-neutral-900">Next</button>
+					</div>
+				</div>
+			</div>
+		</template>
+	</div>
+}

pkg/nebula/components/register/modal_templ.go

@@ -0,0 +1,92 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.778
+package register
+
+//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/labstack/echo/v4"
+	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
+	"github.com/onsonr/sonr/pkg/nebula/models/formstate"
+)
+
+func Modal(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_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 x-data=\"{ modalOpen: true }\" @keydown.escape.window=\"modalOpen = false\" :class=\"{ &#39;z-40&#39;: modalOpen }\" class=\"relative w-auto h-auto\"><button @click=\"modalOpen=true\" class=\"inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors bg-white border rounded-md hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none\">Open</button><template x-teleport=\"body\"><div x-show=\"modalOpen\" class=\"fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen\" x-cloak><div x-show=\"modalOpen\" x-transition:enter=\"ease-out duration-300\" x-transition:enter-start=\"opacity-0\" x-transition:enter-end=\"opacity-100\" x-transition:leave=\"ease-in duration-300\" x-transition:leave-start=\"opacity-100\" x-transition:leave-end=\"opacity-0\" @click=\"modalOpen=false\" class=\"absolute inset-0 w-full h-full bg-gray-900 bg-opacity-50 backdrop-blur-sm\"></div><div x-show=\"modalOpen\" x-trap.inert.noscroll=\"modalOpen\" x-transition:enter=\"ease-out duration-300\" x-transition:enter-start=\"opacity-0 scale-90\" x-transition:enter-end=\"opacity-100 scale-100\" x-transition:leave=\"ease-in duration-200\" x-transition:leave-start=\"opacity-100 scale-100\" x-transition:leave-end=\"opacity-0 scale-90\" class=\"relative w-full py-6 bg-white shadow-md px-7 bg-opacity-90 drop-shadow-md backdrop-blur-sm sm:max-w-lg sm:rounded-lg\"><div class=\"flex items-center justify-between pb-3\"><h3 class=\"text-lg font-semibold\">Modal Title</h3><button @click=\"modalOpen=false\" class=\"absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-gray-600 rounded-full hover:text-gray-800 hover:bg-gray-50\"><svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\"></path></svg></button></div><div class=\"relative w-auto pb-8\"><p>This is placeholder text. Replace it with your own content.</p></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = blocks.H2("Account Registration").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = blocks.Spacer().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = blocks.Breadcrumbs().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = basicInfoForm(formstate.Initial).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = blocks.Spacer().Render(ctx, templ_7745c5c3_Buffer)
+		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 = blocks.Text("Cancel").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			return templ_7745c5c3_Err
+		})
+		templ_7745c5c3_Err = blocks.Button(blocks.GET("/", "#register-view")).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("<div class=\"flex flex-col-reverse sm:flex-row sm:justify-between sm:space-x-2\"><button @click=\"modalOpen=false\" type=\"button\" class=\"inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors border rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-100 focus:ring-offset-2\">Previous</button> <button @click=\"modalOpen=false\" type=\"button\" class=\"inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-colors border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2 bg-neutral-950 hover:bg-neutral-900\">Next</button></div></div></div></template></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+var _ = templruntime.GeneratedTemplate

pkg/nebula/components/register/view.templ

@@ -1,30 +1,18 @@
-package pages
+package register
 
 import (
 	"github.com/labstack/echo/v4"
 	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
+	"github.com/onsonr/sonr/pkg/nebula/models/formstate"
 )
 
-type FormState string
-
-const (
-	InitialForm FormState = "initial"
-	ErrorForm   FormState = "error"
-	SuccessForm FormState = "success"
-	WarningForm FormState = "warning"
-)
-
-func Register(c echo.Context) error {
-	return echoResponse(c, registerView(c))
-}
-
-templ registerView(c echo.Context) {
+templ View(c echo.Context) {
 	@blocks.Layout("Sonr.ID", true) {
 		@blocks.Card("register-view", blocks.SizeMedium) {
 			@blocks.H2("Account Registration")
 			@blocks.Spacer()
 			@blocks.Breadcrumbs()
-			@basicInfoForm(InitialForm)
+			@basicInfoForm(formstate.Initial)
 			@blocks.Spacer()
 			@blocks.Button(blocks.GET("/", "#register-view")) {
 				@blocks.Text("Cancel")
@@ -33,7 +21,7 @@ templ registerView(c echo.Context) {
 	}
 }
 
-templ basicInfoForm(state FormState) {
+templ basicInfoForm(state formstate.FormState) {
 	switch (state) {
 		default:
 			<div class="border rounded-lg shadow-sm bg-card text-neutral-900">

pkg/nebula/components/register/view_templ.go

@@ -1,7 +1,7 @@
 // Code generated by templ - DO NOT EDIT.
 
 // templ: version: v0.2.778
-package pages
+package register
 
 //lint:file-ignore SA4006 This context is only used if a nested component is present.
 
@@ -11,22 +11,10 @@ import templruntime "github.com/a-h/templ/runtime"
 import (
 	"github.com/labstack/echo/v4"
 	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
+	"github.com/onsonr/sonr/pkg/nebula/models/formstate"
 )
 
-type FormState string
-
-const (
-	InitialForm FormState = "initial"
-	ErrorForm   FormState = "error"
-	SuccessForm FormState = "success"
-	WarningForm FormState = "warning"
-)
-
-func Register(c echo.Context) error {
-	return echoResponse(c, registerView(c))
-}
-
-func registerView(c echo.Context) templ.Component {
+func View(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 {
@@ -95,7 +83,7 @@ func registerView(c echo.Context) templ.Component {
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = basicInfoForm(InitialForm).Render(ctx, templ_7745c5c3_Buffer)
+				templ_7745c5c3_Err = basicInfoForm(formstate.Initial).Render(ctx, templ_7745c5c3_Buffer)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -149,7 +137,7 @@ func registerView(c echo.Context) templ.Component {
 	})
 }
 
-func basicInfoForm(state FormState) templ.Component {
+func basicInfoForm(state formstate.FormState) 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 {

pkg/nebula/components/sections/hero.templ

@@ -1,131 +0,0 @@
-package sections
-
-type Hero struct {
-	TitleFirst    string
-	TitleEmphasis string
-	TitleSecond   string
-	Subtitle      string
-
-	PrimaryButtonText string
-	PrimaryButtonLink string
-
-	SecondaryButtonText string
-	SecondaryButtonLink string
-}
-
-templ SectionHero(hero 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-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">
-							{ 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">
-							<div>
-								<a class="btn text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow" href={ templ.SafeURL(hero.PrimaryButtonLink) }>{ hero.PrimaryButtonText }</a>
-							</div>
-							<div>
-								<a class="btn text-zinc-600 bg-white hover:text-zinc-900 w-full shadow" href={ templ.SafeURL(hero.SecondaryButtonLink) }>{ hero.SecondaryButtonText }</a>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<!-- Image -->
-			<div class="max-w-6xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10">
-				<img class="rounded-lg shadow-2xl" src="https://cdn.sonr.id/img/hero-safe.svg" width="620" height="620" alt="Hero"/>
-			</div>
-			<!-- Stats -->
-			<div class="max-w-6xl mx-auto px-4 sm:px-6">
-				<div class="max-w-sm mx-auto grid gap-12 sm:grid-cols-2 md:grid-cols-4 md:-mx-5 md:gap-0 items-start md:max-w-none">
-					<!-- 1st item -->
-					<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
-						<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(476)" x-text="counterValue">0</span>K</h4>
-						<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
-					</div>
-					<!-- 2nd item -->
-					<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
-						<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(1.44)" x-text="counterValue">0</span>K</h4>
-						<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
-					</div>
-					<!-- 3rd item -->
-					<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
-						<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(1.5)" x-text="counterValue">0</span>M+</h4>
-						<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
-					</div>
-					<!-- 4th item -->
-					<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
-						<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(192)" x-text="counterValue">0</span>K</h4>
-						<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
-					</div>
-				</div>
-				@counterAnimation()
-			</div>
-		</div>
-	</section>
-}
-
-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()
-                                    },
-                                }))
-                            })
-}

pkg/nebula/components/sections/hero_templ.go

@@ -1,214 +0,0 @@
-// 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"
-
-type Hero struct {
-	TitleFirst    string
-	TitleEmphasis string
-	TitleSecond   string
-	Subtitle      string
-
-	PrimaryButtonText string
-	PrimaryButtonLink string
-
-	SecondaryButtonText string
-	SecondaryButtonLink string
-}
-
-func SectionHero(hero 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-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\">")
-		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/sections/hero.templ`, Line: 25, 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/sections/hero.templ`, Line: 27, 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/sections/hero.templ`, Line: 32, 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/sections/hero.templ`, Line: 35, 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\"><div><a class=\"btn text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow\" href=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var6 templ.SafeURL = templ.SafeURL(hero.PrimaryButtonLink)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var6)))
-		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
-		}
-		var templ_7745c5c3_Var7 string
-		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hero.PrimaryButtonText)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 39, Col: 152}
-		}
-		_, 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("</a></div><div><a class=\"btn text-zinc-600 bg-white hover:text-zinc-900 w-full shadow\" href=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var8 templ.SafeURL = templ.SafeURL(hero.SecondaryButtonLink)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var8)))
-		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
-		}
-		var templ_7745c5c3_Var9 string
-		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hero.SecondaryButtonText)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 42, Col: 155}
-		}
-		_, 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("</a></div></div></div></div></div><!-- Image --><div class=\"max-w-6xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10\"><img class=\"rounded-lg shadow-2xl\" src=\"https://cdn.sonr.id/img/hero-safe.svg\" width=\"620\" height=\"620\" alt=\"Hero\"></div><!-- Stats --><div class=\"max-w-6xl mx-auto px-4 sm:px-6\"><div class=\"max-w-sm mx-auto grid gap-12 sm:grid-cols-2 md:grid-cols-4 md:-mx-5 md:gap-0 items-start md:max-w-none\"><!-- 1st item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(476)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 2nd item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(1.44)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 3rd item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(1.5)\" x-text=\"counterValue\">0</span>M+</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 4th item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(192)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div></div>")
-		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></div></section>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
-func counterAnimation() templ.ComponentScript {
-	return templ.ComponentScript{
-		Name: `__templ_counterAnimation_57a0`,
-		Function: `function __templ_counterAnimation_57a0(){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_57a0`),
-		CallInline: templ.SafeScriptInline(`__templ_counterAnimation_57a0`),
-	}
-}
-
-var _ = templruntime.GeneratedTemplate

pkg/nebula/models/Button.pkl.go

@@ -0,0 +1,8 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Button struct {
+	Text string `pkl:"text"`
+
+	Href string `pkl:"href"`
+}

pkg/nebula/models/Footer.pkl.go

@@ -0,0 +1,18 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Footer struct {
+	Logo *Image `pkl:"logo"`
+
+	MediumLink *SocialLink `pkl:"mediumLink"`
+
+	TwitterLink *SocialLink `pkl:"twitterLink"`
+
+	DiscordLink *SocialLink `pkl:"discordLink"`
+
+	GithubLink *SocialLink `pkl:"githubLink"`
+
+	CompanyLinks []*Link `pkl:"companyLinks"`
+
+	ResourcesLinks []*Link `pkl:"resourcesLinks"`
+}

pkg/nebula/models/Hero.pkl.go

@@ -0,0 +1,18 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Hero struct {
+	TitleFirst string `pkl:"titleFirst"`
+
+	TitleEmphasis string `pkl:"titleEmphasis"`
+
+	TitleSecond string `pkl:"titleSecond"`
+
+	Subtitle string `pkl:"subtitle"`
+
+	PrimaryButton *Button `pkl:"primaryButton"`
+
+	SecondaryButton *Button `pkl:"secondaryButton"`
+
+	Image *Image `pkl:"image"`
+}

pkg/nebula/models/Image.pkl.go

@@ -0,0 +1,10 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Image struct {
+	Src string `pkl:"src"`
+
+	Width string `pkl:"width"`
+
+	Height string `pkl:"height"`
+}

pkg/nebula/models/Input.pkl.go

@@ -0,0 +1,18 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Input struct {
+	Label string `pkl:"label"`
+
+	Type string `pkl:"type"`
+
+	Placeholder string `pkl:"placeholder"`
+
+	Value *string `pkl:"value"`
+
+	Error *string `pkl:"error"`
+
+	Help *string `pkl:"help"`
+
+	Required bool `pkl:"required"`
+}

pkg/nebula/models/Link.pkl.go

@@ -0,0 +1,8 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Link struct {
+	Text string `pkl:"text"`
+
+	Href string `pkl:"href"`
+}

pkg/nebula/models/Models.pkl.go

@@ -1,5 +1,5 @@
 // Code generated from Pkl module `models`. DO NOT EDIT.
-package orm
+package models
 
 import (
 	"context"
@@ -8,9 +8,9 @@ import (
 )
 
 type Models struct {
-	DbName string `pkl:"db_name"`
+	Hero *Hero `pkl:"hero"`
 
-	DbVersion int `pkl:"db_version"`
+	Stats *Stats `pkl:"stats"`
 }
 
 // LoadFromPath loads the pkl module at the given path and evaluates it into a Models

pkg/nebula/models/RegistrationForm.pkl.go

@@ -0,0 +1,14 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+import "github.com/onsonr/sonr/pkg/nebula/models/formstate"
+
+type RegistrationForm struct {
+	Title string `pkl:"title"`
+
+	Description string `pkl:"description"`
+
+	State formstate.FormState `pkl:"state"`
+
+	Inputs []*Input `pkl:"inputs"`
+}

pkg/nebula/models/SocialLink.pkl.go

@@ -0,0 +1,8 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type SocialLink struct {
+	Link *Link `pkl:"link"`
+
+	Icon string `pkl:"icon"`
+}

pkg/nebula/models/Stat.pkl.go

@@ -0,0 +1,8 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Stat struct {
+	Value string `pkl:"value"`
+
+	Label string `pkl:"label"`
+}

pkg/nebula/models/Stats.pkl.go

@@ -0,0 +1,16 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Stats struct {
+	FirstValue string `pkl:"firstValue"`
+
+	FirstLabel string `pkl:"firstLabel"`
+
+	SecondValue string `pkl:"secondValue"`
+
+	SecondLabel string `pkl:"secondLabel"`
+
+	ThirdValue string `pkl:"thirdValue"`
+
+	ThirdLabel string `pkl:"thirdLabel"`
+}

pkg/nebula/models/common.go

@@ -0,0 +1,36 @@
+package models
+
+import (
+	"context"
+	"errors"
+
+	"github.com/apple/pkl-go/pkl"
+)
+
+var models *Models
+
+func LoadFromString(ctx context.Context, s string) (err error) {
+	evaluator, err := pkl.NewEvaluator(ctx, pkl.PreconfiguredOptions)
+	if err != nil {
+		return err
+	}
+	defer func() {
+		cerr := evaluator.Close()
+		if err == nil {
+			err = cerr
+		}
+	}()
+	ret, err := Load(ctx, evaluator, pkl.TextSource(s))
+	if err != nil {
+		return err
+	}
+	models = ret
+	return nil
+}
+
+func GetModels() (*Models, error) {
+	if models == nil {
+		return nil, errors.New("models not initialized")
+	}
+	return models, nil
+}

pkg/nebula/models/formstate/FormState.pkl.go

@@ -0,0 +1,40 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package formstate
+
+import (
+	"encoding"
+	"fmt"
+)
+
+type FormState string
+
+const (
+	Initial FormState = "initial"
+	Error   FormState = "error"
+	Success FormState = "success"
+	Warning FormState = "warning"
+)
+
+// String returns the string representation of FormState
+func (rcv FormState) String() string {
+	return string(rcv)
+}
+
+var _ encoding.BinaryUnmarshaler = new(FormState)
+
+// UnmarshalBinary implements encoding.BinaryUnmarshaler for FormState.
+func (rcv *FormState) UnmarshalBinary(data []byte) error {
+	switch str := string(data); str {
+	case "initial":
+		*rcv = Initial
+	case "error":
+		*rcv = Error
+	case "success":
+		*rcv = Success
+	case "warning":
+		*rcv = Warning
+	default:
+		return fmt.Errorf(`illegal: "%s" is not a valid FormState`, str)
+	}
+	return nil
+}

pkg/nebula/models/init.pkl.go

@@ -0,0 +1,17 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+import "github.com/apple/pkl-go/pkl"
+
+func init() {
+	pkl.RegisterMapping("models", Models{})
+	pkl.RegisterMapping("models#Hero", Hero{})
+	pkl.RegisterMapping("models#Button", Button{})
+	pkl.RegisterMapping("models#Image", Image{})
+	pkl.RegisterMapping("models#Stats", Stats{})
+	pkl.RegisterMapping("models#Link", Link{})
+	pkl.RegisterMapping("models#SocialLink", SocialLink{})
+	pkl.RegisterMapping("models#Input", Input{})
+	pkl.RegisterMapping("models#Footer", Footer{})
+	pkl.RegisterMapping("models#RegistrationForm", RegistrationForm{})
+}

pkg/nebula/nebula.go

@@ -1,16 +1,22 @@
 package nebula
 
 import (
+	"context"
 	"embed"
 	"io/fs"
 	"net/http"
 
 	"github.com/labstack/echo/v4"
+
+	"github.com/onsonr/sonr/pkg/nebula/models"
 )
 
 //go:embed assets
 var embeddedFiles embed.FS
 
+//go:embed nebula.pkl
+var config []byte
+
 func getHTTPFS() (http.FileSystem, error) {
 	fsys, err := fs.Sub(embeddedFiles, "assets")
 	if err != nil {
@@ -21,6 +27,10 @@ func getHTTPFS() (http.FileSystem, error) {
 
 // UseAssets is a middleware that serves static files from the embedded assets
 func UseAssets(e *echo.Echo) error {
+	err := models.LoadFromString(context.Background(), string(config))
+	if err != nil {
+		return err
+	}
 	fsys, err := getHTTPFS()
 	if err != nil {
 		return err
@@ -28,5 +38,10 @@ func UseAssets(e *echo.Echo) error {
 	assets := http.FileServer(fsys)
 	e.GET("/", echo.WrapHandler(assets))
 	e.GET("/assets/*", echo.WrapHandler(http.StripPrefix("/assets/", assets)))
+	e.GET("/_nebula/config", handleGetConfig)
 	return nil
 }
+
+func handleGetConfig(c echo.Context) error {
+	return c.Blob(http.StatusOK, "application/octet-stream", config)
+}

pkg/nebula/nebula.pkl

@@ -0,0 +1,30 @@
+amends "https://pkl.sh/uiux.pkl";
+
+hero = new 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 = new Button {
+		text = "Get Started";
+		href = "/register";
+	};
+	secondaryButton = new Button {
+		text = "Learn More";
+		href = "/about";
+	};
+	image = new Image {
+		src = "https://cdn.sonr.id/img/hero-clipped.png";
+		width = "520";
+		height = "520";
+	};
+};
+
+stats = new Stats {
+	firstValue = "476K";
+	firstLabel = "Assets packed with power beyond your imagination.";
+	secondValue = "1.44K";
+	secondLabel = "Assets packed with power beyond your imagination.";
+	thirdValue = "1.5M+";
+	thirdLabel = "Assets packed with power beyond your imagination.";
+};

pkg/nebula/pages/grant.go

@@ -0,0 +1,11 @@
+package pages
+
+import (
+	"github.com/labstack/echo/v4"
+
+	"github.com/onsonr/sonr/pkg/nebula/components/grant"
+)
+
+func Authorize(c echo.Context) error {
+	return echoResponse(c, grant.View(c))
+}

pkg/nebula/pages/home.go

@@ -0,0 +1,15 @@
+package pages
+
+import (
+	"github.com/labstack/echo/v4"
+	"github.com/onsonr/sonr/pkg/nebula/components/home"
+	"github.com/onsonr/sonr/pkg/nebula/models"
+)
+
+func Home(c echo.Context) error {
+	mdls, err := models.GetModels()
+	if err != nil {
+		return err
+	}
+	return echoResponse(c, home.View(mdls.Hero))
+}

pkg/nebula/pages/home.templ

@@ -1,29 +0,0 @@
-package pages
-
-import (
-	"github.com/labstack/echo/v4"
-	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
-	"github.com/onsonr/sonr/pkg/nebula/components/sections"
-)
-
-func Home(c echo.Context) error {
-	hero := sections.Hero{
-		TitleFirst:          "Sonr.ID",
-		TitleEmphasis:       "platform",
-		TitleSecond:         "for cross-functional work",
-		Subtitle:            "Turbocharge your creative process with a powerful AI design platform that gives creatives the power of creating without limits.",
-		PrimaryButtonText:   "Request Demo",
-		PrimaryButtonLink:   "request-demo.html",
-		SecondaryButtonText: "Try for Free",
-		SecondaryButtonLink: "#0",
-	}
-	return echoResponse(c, homeView(hero))
-}
-
-templ homeView(hero sections.Hero) {
-	@blocks.LayoutNoBody("Sonr.ID", true) {
-		@sections.HeaderMarketingNav()
-		@sections.SectionHero(hero)
-		@sections.FooterMarketingNav()
-	}
-}

pkg/nebula/pages/login.go

@@ -0,0 +1,11 @@
+package pages
+
+import (
+	"github.com/labstack/echo/v4"
+
+	"github.com/onsonr/sonr/pkg/nebula/components/login"
+)
+
+func Login(c echo.Context) error {
+	return echoResponse(c, login.Modal(c))
+}

pkg/nebula/pages/profile.go

@@ -0,0 +1,11 @@
+package pages
+
+import (
+	"github.com/labstack/echo/v4"
+
+	"github.com/onsonr/sonr/pkg/nebula/components/profile"
+)
+
+func Profile(c echo.Context) error {
+	return echoResponse(c, profile.View(c))
+}

pkg/nebula/pages/register.go

@@ -0,0 +1,11 @@
+package pages
+
+import (
+	"github.com/labstack/echo/v4"
+
+	"github.com/onsonr/sonr/pkg/nebula/components/register"
+)
+
+func Register(c echo.Context) error {
+	return echoResponse(c, register.Modal(c))
+}

pkg/nebula/tailwind.config.js

@@ -1,7 +1,7 @@
 // tailwind.config.js
 module.exports = {
   content: [
-    "./blocks/**/*.{templ,html}",
+    "./components/**/*.{templ,html}",
     "./pages/**/*.{templ,html}",
     "./src/**/*.ts",
   ],

pkg/orm/Account.pkl.go

@@ -1,4 +1,4 @@
-// Code generated from Pkl module `models`. DO NOT EDIT.
+// Code generated from Pkl module `orm`. DO NOT EDIT.
 package orm
 
 type Account struct {

pkg/orm/Asset.pkl.go

@@ -1,4 +1,4 @@
-// Code generated from Pkl module `models`. DO NOT EDIT.
+// Code generated from Pkl module `orm`. DO NOT EDIT.
 package orm
 
 type Asset struct {

pkg/orm/Chain.pkl.go

@@ -1,4 +1,4 @@
-// Code generated from Pkl module `models`. DO NOT EDIT.
+// Code generated from Pkl module `orm`. DO NOT EDIT.
 package orm
 
 type Chain struct {

pkg/orm/Credential.pkl.go

@@ -1,4 +1,4 @@
-// Code generated from Pkl module `models`. DO NOT EDIT.
+// Code generated from Pkl module `orm`. DO NOT EDIT.
 package orm
 
 type Credential struct {

pkg/orm/Grant.pkl.go

@@ -1,4 +1,4 @@
-// Code generated from Pkl module `models`. DO NOT EDIT.
+// Code generated from Pkl module `orm`. DO NOT EDIT.
 package orm
 
 type Grant struct {

pkg/orm/JWK.pkl.go

@@ -1,4 +1,4 @@
-// Code generated from Pkl module `models`. DO NOT EDIT.
+// Code generated from Pkl module `orm`. DO NOT EDIT.
 package orm
 
 type JWK struct {

pkg/orm/Keyshare.pkl.go

@@ -1,4 +1,4 @@
-// Code generated from Pkl module `models`. DO NOT EDIT.
+// Code generated from Pkl module `orm`. DO NOT EDIT.
 package orm
 
 type Keyshare struct {

pkg/orm/Orm.pkl.go

@@ -0,0 +1,39 @@
+// Code generated from Pkl module `orm`. DO NOT EDIT.
+package orm
+
+import (
+	"context"
+
+	"github.com/apple/pkl-go/pkl"
+)
+
+type Orm struct {
+	DbName string `pkl:"db_name"`
+
+	DbVersion int `pkl:"db_version"`
+}
+
+// LoadFromPath loads the pkl module at the given path and evaluates it into a Orm
+func LoadFromPath(ctx context.Context, path string) (ret *Orm, err error) {
+	evaluator, err := pkl.NewEvaluator(ctx, pkl.PreconfiguredOptions)
+	if err != nil {
+		return nil, err
+	}
+	defer func() {
+		cerr := evaluator.Close()
+		if err == nil {
+			err = cerr
+		}
+	}()
+	ret, err = Load(ctx, evaluator, pkl.FileSource(path))
+	return ret, err
+}
+
+// Load loads the pkl module at the given source and evaluates it with the given evaluator into a Orm
+func Load(ctx context.Context, evaluator pkl.Evaluator, source *pkl.ModuleSource) (*Orm, error) {
+	var ret Orm
+	if err := evaluator.EvaluateModule(ctx, source, &ret); err != nil {
+		return nil, err
+	}
+	return &ret, nil
+}