bump: version 0.5.9 → 0.5.10

- **feat: remove grant page**
- **refactor: remove alert, input, radios, tabs, and video blocks**
- **feat: add JSON serialization to DWN config**
- **feat: add new Highway gateway component**
- **refactor: remove unused chains.yaml and devbox.json**
- **refactor: Separate request and response headers into protected and
non-protected structs**
- **feat: Update the UseSession echo middleware to bind the correct
headers and provide methods for updating HTMX context from Go**
- **refactor: remove unused headers from session**
- **feat: add authorize endpoint**
- **feat: create marketing pages**

.cz.toml

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

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,38 @@
+name: Bug Report
+description: File a bug report.
+title: "ERROR: "
+labels: ["#BUG", "#HELP"]
+projects: ["onsonr/39"]
+body:
+  - type: textarea
+    attributes:
+      label: Operating System
+      description: What operating system are you using?
+      placeholder: "Example: macOS Big Sur"
+      value: operating system
+    validations:
+      required: true
+  - type: dropdown
+    attributes:
+      label: Network
+      description: What network are you using?
+      multiple: false
+      options:
+        - LocalNet
+        - TestNet
+        - MainNet
+      default: 0
+    validations:
+      required: true
+  - type: checkboxes
+    attributes:
+      label: Code of Conduct
+      description:
+        The Code of Conduct helps create a safe space for everyone. We require
+        that everyone agrees to it.
+      options:
+        - label: I agree to follow this project's [Code of Conduct](link/to/coc)
+          required: true
+  - type: markdown
+    attributes:
+      value: "Thanks for completing our form!"

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Community Discussions
+    url: https://github.com/orgs/onsonr/discussions
+    about: Please submit ideas and suggestions here.

.github/ISSUE_TEMPLATE/okr.yml

@@ -0,0 +1,30 @@
+name: Tracking issue
+description: Use this template for tracking new features.
+title: "(v0.6): FEATURE NAME"
+labels: ["#TRACK", "#OKR"]
+assignees: ["prnk28"]
+projects: ["onsonr/37"]
+body:
+  - type: checkboxes
+    attributes:
+      label: Is this associated with a milestone?
+      description: This is a tracking issue for tracking a new feature for a given milestone.
+      options:
+        - label: I have confirmed this is an OKR tracking issue
+          required: true
+  - type: textarea
+    attributes:
+      label: Objective
+      description: Explain the objective of the feature and add any relevant links.
+      render: markdown
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Task List
+      description: |
+        Break down the objective into a list of tasks to be completed.
+      value: |
+        - [ ]
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/to-do.md

@@ -0,0 +1,22 @@
+---
+name: Default Todo
+about: Break down feature requirements into tasks.
+title: "Name of the new task"
+labels:
+  - "#TODO"
+  - "#OKR"
+assignees: "prnk28"
+projects: "onsonr/37"
+---
+
+### Description
+
+The expected deliverable of the task.
+
+### Associated Files
+
+These files will be modified by this task.
+
+### References
+
+Use these documents to help you complete the task.

.goreleaser.yaml

@@ -55,7 +55,7 @@ release:
   github:
     owner: onsonr
     name: sonr
-  name_template: '{{.Now.Format "2006.01.02"}}'
+  name_template: "Release {{.Version}}"
   draft: false
   replace_existing_draft: true
   replace_existing_artifacts: true
@@ -63,7 +63,6 @@ release:
     - glob: ./CHANGELOG*
     - glob: ./README*
     - glob: ./LICENSE*
-    - glob: ./pkl/*
 
 brews:
   - name: sonr
@@ -110,7 +109,7 @@ dockers:
     image_templates:
       - "onsonr/sonrd:latest"
       - "onsonr/sonrd:{{ .Tag }}"
-    dockerfile: "./deploy/release/sonrd.Dockerfile"
+    dockerfile: "./deploy/sonrd.Dockerfile"
     build_flag_templates:
       - "--label=org.opencontainers.image.created={{.Date}}"
       - "--label=org.opencontainers.image.title=sonrd"
@@ -126,7 +125,7 @@ dockers:
     image_templates:
       - "onsonr/hway:latest"
       - "onsonr/hway:{{ .Tag }}"
-    dockerfile: "./deploy/release/hway.Dockerfile"
+    dockerfile: "./deploy/hway.Dockerfile"
     build_flag_templates:
       - "--label=org.opencontainers.image.created={{.Date}}"
       - "--label=org.opencontainers.image.title=hway"
@@ -137,5 +136,3 @@ announce:
   telegram:
     enabled: true
     chat_id: -1002222617755
-    message_template: 'New Sonr Release {{.Tag}} is out{{ mdv2escape "!" }}'
-    parse_mode: HTML

CHANGELOG.md

@@ -1,3 +1,81 @@
+## v0.5.10 (2024-10-07)
+
+### Feat
+
+- **blocks**: remove button component
+
+## v0.5.9 (2024-10-06)
+
+### Feat
+
+- add Motr support
+- update UIUX PKL to utilize optional fields
+
+### Fix
+
+- Update source directory for asset publishing
+
+## v0.5.8 (2024-10-04)
+
+### Refactor
+
+- Remove unused logs configuration
+
+## v0.5.7 (2024-10-04)
+
+### Feat
+
+- **devbox**: use process-compose for testnet services
+- remove motr.mjs dependency
+- add markdown rendering to issue templates
+- update issue templates for better clarity
+- add issue templates for tracking and task issues
+- add issue templates for bug report and tracking
+- introduce docker-compose based setup
+
+### Refactor
+
+- update issue template headings
+- rename bug-report issue template to bug
+
+## v0.5.6 (2024-10-03)
+
+### Feat
+
+- add hway and sonr processes to dev environment
+
+## v0.5.5 (2024-10-03)
+
+### Feat
+
+- add rudimentary DidController table
+- update home section with new features
+- introduce Home model and refactor views
+- **nebula**: create Home model for home page
+
+### Refactor
+
+- reorganize pkl files for better separation of concerns
+- rename msg_server_test.go to rpc_test.go
+
+## v0.5.4 (2024-10-02)
+
+## v0.5.3 (2024-10-02)
+
+### Fix
+
+- remove unnecessary telegram message template
+
+## v0.5.2 (2024-10-02)
+
+### Feat
+
+- **service**: integrate group module (#1104)
+
+### Refactor
+
+- revert version bump to 0.5.1
+
 ## v0.5.1 (2024-10-02)
 
 ### Refactor

Makefile

@@ -94,7 +94,7 @@ endif
 
 install: go.sum
 	go install -mod=readonly $(BUILD_FLAGS) ./cmd/sonrd
-	go install -mod=readonly $(BUILD_FLAGS) ./cmd/motr
+	go install -mod=readonly $(BUILD_FLAGS) ./cmd/hway
 
 ########################################
 ### Tools & dependencies
@@ -299,6 +299,7 @@ sh-testnet: mod-tidy
 
 hway:
 	@echo "(motr) Building Highway gateway"
+	templ generate
 	go build -o ./build/hway ./cmd/hway
 
 motr:
@@ -307,7 +308,6 @@ motr:
 
 templ:
 	@echo "(templ) Generating templ files"
-	go install github.com/a-h/templ/cmd/templ@latest
 	templ generate
 
 nebula:
@@ -316,10 +316,10 @@ nebula:
 
 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
+	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"

app/app.go

@@ -663,6 +663,7 @@ func NewChainApp(
 		logger,
 		authtypes.NewModuleAddress(govtypes.ModuleName).String(),
 		app.DidKeeper,
+		app.GroupKeeper,
 		app.MacaroonKeeper,
 		app.NFTKeeper,
 	)

app/proxy/proxycmd.go

@@ -12,7 +12,7 @@ import (
 	"github.com/spf13/cobra"
 
 	"github.com/onsonr/sonr/pkg/nebula"
-	"github.com/onsonr/sonr/pkg/nebula/pages"
+	"github.com/onsonr/sonr/pkg/nebula/router"
 )
 
 func NewProxyCmd() *cobra.Command {
@@ -29,8 +29,8 @@ func NewProxyCmd() *cobra.Command {
 				e.Logger.Fatal(err)
 			}
 
-			e.GET("/", pages.Home)
-			e.GET("/allocate", pages.Profile)
+			e.GET("/", router.Home)
+			e.GET("/allocate", router.Profile)
 
 			// Start server
 			ctx, stop := signal.NotifyContext(context.Background(), os.Interrupt)

cmd/hway/server/server.go

@@ -8,7 +8,7 @@ import (
 
 	"github.com/onsonr/sonr/internal/session"
 	"github.com/onsonr/sonr/pkg/nebula"
-	"github.com/onsonr/sonr/pkg/nebula/pages"
+	"github.com/onsonr/sonr/pkg/nebula/router"
 )
 
 type Server struct {
@@ -25,12 +25,11 @@ func New() *Server {
 		s.Logger.Fatal(err)
 	}
 
-	s.GET("/", pages.Home)
-	s.GET("/login", pages.Login)
-	s.GET("/register", pages.Register)
-	s.GET("/profile", pages.Profile)
-	s.GET("/allocate", pages.Profile)
-
+	s.GET("/", router.Home)
+	s.GET("/login", router.Login)
+	s.GET("/register", router.Register)
+	s.GET("/profile", router.Profile)
+	s.GET("/authorize", router.Authorize)
 	return s
 }
 

configs/logs.json

@@ -1 +0,0 @@
-{}

deploy/devenv/air.motr.toml

@@ -1,49 +0,0 @@
-root = "."
-testdata_dir = "testdata"
-tmp_dir = "tmp"
-
-[build]
-delay = 1000
-cmd = "devbox run build:motr"
-exclude_dir = ["assets", "tmp", "vendor", "testdata"]
-exclude_file = []
-exclude_regex = ["_test.go"]
-exclude_unchanged = true
-follow_symlink = false
-full_bin = "devbox run start"
-include_dir = ["cmd/dwn", "cmd/motr", "internal", "models", "pkl"]
-include_ext = ["go", "templ", "html", "pkl", "js", "mjs", "proto"]
-include_file = [
-  "Dockerfile",
-  ".goreleaser.yaml",
-  "go.mod",
-  "devbox.json",
-  ".air.toml",
-]
-kill_delay = "10s"
-log = "build-errors.log"
-poll = false
-poll_interval = 0
-post_cmd = ["devbox run stop"]
-pre_cmd = ["templ generate"]
-rerun = false
-rerun_delay = 1000
-send_interrupt = true
-stop_on_error = false
-
-[color]
-build = "yellow"
-main = "magenta"
-runner = "green"
-watcher = "cyan"
-
-[log]
-main_only = true
-time = true
-
-[misc]
-clean_on_exit = true
-
-[screen]
-clear_on_rebuild = true
-keep_scroll = true

deploy/devenv/air.sonr.toml

@@ -1,49 +0,0 @@
-root = "."
-testdata_dir = "testdata"
-tmp_dir = "tmp"
-
-[build]
-delay = 1000
-cmd = "devbox run build:motr"
-exclude_dir = ["assets", "tmp", "vendor", "testdata"]
-exclude_file = []
-exclude_regex = ["_test.go"]
-exclude_unchanged = true
-follow_symlink = false
-full_bin = "devbox run start"
-include_dir = ["cmd/dwn", "cmd/motr", "internal", "models", "pkl"]
-include_ext = ["go", "templ", "html", "pkl", "js", "mjs", "proto"]
-include_file = [
-  "Dockerfile",
-  ".goreleaser.yaml",
-  "go.mod",
-  "devbox.json",
-  ".air.toml",
-]
-kill_delay = "10s"
-log = "build-errors.log"
-poll = false
-poll_interval = 0
-post_cmd = ["devbox run stop"]
-pre_cmd = ["templ generate"]
-rerun = false
-rerun_delay = 1000
-send_interrupt = true
-stop_on_error = false
-
-[color]
-build = "yellow"
-main = "magenta"
-runner = "green"
-watcher = "cyan"
-
-[log]
-main_only = true
-time = true
-
-[misc]
-clean_on_exit = true
-
-[screen]
-clear_on_rebuild = true
-keep_scroll = true

deploy/process-compose.yaml

@@ -13,6 +13,7 @@ processes:
     namespace: testnet
     command: "devbox run start:testnet"
     restart: on_failure
+    env:
     max_restarts: 1
     depends:
       - ipfs
@@ -31,5 +32,3 @@ processes:
     command: "cloudflared tunnel run --token $TUNNEL_TOKEN"
     restart: on_failure
     max_restarts: 1
-    depends:
-      - caddy

deploy/testnet/chains.yaml

@@ -1,37 +0,0 @@
-# This file is used to create docker images using the heighliner binary.
-# see: https://github.com/strangelove-ventures/heighliner
-
-# Sonr Node - Identity
-- name: sonr
-  github-organization: onsonr
-  github-repo: sonr
-  dockerfile: cosmos
-  build-target: make install
-  binaries:
-    - /go/bin/sonrd
-  build-env:
-    - LEDGER_ENABLED=false
-    - BUILD_TAGS=muslc
-
-# Ethereum Node - Web3
-- name: evmos
-  github-organization: tharsis
-  github-repo: evmos
-  dockerfile: cosmos
-  build-target: make install
-  binaries:
-    - /go/bin/evmosd
-
-# Bitcoin Node - Gold
-- name: nomic
-  github-organization: nomic-io
-  github-repo: nomic
-  dockerfile: cargo
-  build-target: |
-    TOOLCHAIN=$(cat rust-toolchain.toml | grep channel | awk '{print $3}' | tr -d '"')
-    rustup component add rust-src --toolchain ${TOOLCHAIN}-$(uname -m)-unknown-linux-gnu
-    cargo install --locked --path . -Zbuild-std
-  binaries:
-    - /build/nomic/target/${ARCH}-unknown-linux-gnu/release/nomic
-  platforms:
-    - linux/amd64

deploy/testnet/devbox.json

@@ -1,92 +0,0 @@
-{
-  "$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",
-    "process-compose@latest"
-  ],
-  "env": {
-    "GOPATH": "$HOME/go",
-    "PATH": "$HOME/go/bin:$PATH",
-    "CHAIN_ID": "sonr-testnet-1",
-    "DENOM": "usnr",
-    "KEYRING": "test",
-    "MONIKER": "florence",
-    "BINARY": "sonrd",
-    "ACC0_NAME": "acc0",
-    "ACC1_NAME": "acc1",
-    "ACC0_ADDRESS": "idx1efd63aw40lxf3n4mhf7dzhjkr453axur9vjt6y",
-    "ACC1_ADDRESS": "idx1hj5fveer5cjtn4wd6wstzugjfdxzl0xpecp0nd",
-    "ACC0_MNEMONIC": "$(skate get ACC0_MNEMONIC)",
-    "ACC1_MNEMONIC": "$(skate get ACC1_MNEMONIC)",
-    "TUNNEL_TOKEN": "$(skate get CLOUDFLARE_TUNNEL_TOKEN)",
-    "TEMPL_EXPERIMENT": "rawgo"
-  },
-  "shell": {
-    "scripts": {
-      "dev": [
-        "air"
-      ],
-      "build:docker": [
-        "make local-image"
-      ],
-      "build:motr": [
-        "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"
-      ],
-      "gen:pkl": [
-        "make pkl"
-      ],
-      "gen:templ": [
-        "make templ"
-      ],
-      "start:motr": [
-        "make templ",
-        "make motr",
-        "make start-motr"
-      ],
-      "start:testnet": [
-        "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"
-      ]
-    }
-  }
-}

deploy/testnet/docker-compose.yaml

@@ -1,30 +0,0 @@
-version: "3"
-
-services:
-  sonr-node:
-    build:
-      context: .
-      dockerfile: Dockerfile
-    volumes:
-      - /home/prad/.scnr:/root/.sonr
-    ports:
-      - "26657:26657"
-      - "1317:1317"
-      - "9090:9090"
-    environment:
-      - CHAIN_ID=local-1
-      - MONIKER=localvalidator
-      - KEYRING=test
-      - KEY=user1
-      - KEY2=user2
-      - DENOM=usnr
-      - CLEAN=true
-      - BLOCK_TIME=5s
-    command: "start --pruning=nothing"
-    restart: always
-    networks:
-      - sonr-network
-
-networks:
-  sonr-network:
-    name: sonr-network

deploy/testnet/process-compose.yaml

@@ -1,35 +0,0 @@
-version: "0.6"
-
-processes:
-  ipfs:
-    namespace: testnet
-    command: "sh scripts/setup_ipfs.sh"
-    background: true
-    availability:
-      restart: on_failure
-      max_restarts: 0
-
-  sonr:
-    namespace: testnet
-    command: "devbox run start:testnet"
-    restart: on_failure
-    max_restarts: 1
-    depends:
-      - ipfs
-
-  motr:
-    namespace: testnet
-    command: "devbox run start:motr"
-    restart: on_failure
-    max_restarts: 1
-    depends:
-      - ipfs
-      - sonr
-
-  tunnel:
-    namespace: public
-    command: "cloudflared tunnel run --token $TUNNEL_TOKEN"
-    restart: on_failure
-    max_restarts: 1
-    depends:
-      - caddy

devbox.json

@@ -4,14 +4,17 @@
     "go@1.22",
     "air@latest",
     "bun@latest",
+    "gum@latest",
     "ipfs@latest",
+    "mprocs@latest",
     "skate@latest",
+    "templ@latest",
     "cloudflared@latest",
     "process-compose@latest"
   ],
   "env": {
     "GOPATH": "$HOME/go",
-    "PATH": "$HOME/go/bin:$PATH",
+    "PATH": "./build:$HOME/go/bin:$PATH",
     "CHAIN_ID": "sonr-testnet-1",
     "DENOM": "usnr",
     "KEYRING": "test",
@@ -28,9 +31,6 @@
   },
   "shell": {
     "scripts": {
-      "dev": [
-        "air"
-      ],
       "build:docker": [
         "make local-image"
       ],
@@ -41,6 +41,9 @@
       "build:nebula": [
         "make nebula"
       ],
+      "build:motr": [
+        "make motr"
+      ],
       "build:sonrd": [
         "make motr",
         "make build"
@@ -59,33 +62,19 @@
       "gen:templ": [
         "make templ"
       ],
-      "start:hway": [
-        "make templ",
-        "make hway",
-        "make start-hway"
-      ],
-      "start:testnet": [
-        "make templ",
-        "make install",
-        "make sh-testnet"
-      ],
       "start": [
-        "process-compose up -d"
+        "process-compose up -f ./deploy/process-compose.yaml"
       ],
       "stop": [
-        "process-compose down"
+        "process-compose down -f ./deploy/process-compose.yaml"
       ],
-      "test:e2e": [
-        "make templ",
-        "make test-e2e"
+      "start:testnet": [
+        "make sh-testnet"
       ],
-      "test:unit": [
-        "make templ",
-        "make test-unit"
-      ],
-      "test": [
-        "make templ",
-        "make test"
+      "start:hway": [
+        "make nebula",
+        "make hway",
+        "./build/hway start"
       ]
     }
   }

devbox.lock

@@ -193,12 +193,108 @@
         }
       }
     },
+    "gum@latest": {
+      "last_modified": "2024-09-10T15:01:03Z",
+      "resolved": "github:NixOS/nixpkgs/5ed627539ac84809c78b2dd6d26a5cebeb5ae269#gum",
+      "source": "devbox-search",
+      "version": "0.14.5",
+      "systems": {
+        "aarch64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/n1gqffrwdzr3vpsmwmwx3hmw814c1k6g-gum-0.14.5",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/n1gqffrwdzr3vpsmwmwx3hmw814c1k6g-gum-0.14.5"
+        },
+        "aarch64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/ggp10jr3l6higs0gqibp6ypjlf7yakpc-gum-0.14.5",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/ggp10jr3l6higs0gqibp6ypjlf7yakpc-gum-0.14.5"
+        },
+        "x86_64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/jq8shghha81s1wg67fcjrfnf4hbliimn-gum-0.14.5",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/jq8shghha81s1wg67fcjrfnf4hbliimn-gum-0.14.5"
+        },
+        "x86_64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/f199acwir08z47f3d5kf1fhmhajmd1ig-gum-0.14.5",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/f199acwir08z47f3d5kf1fhmhajmd1ig-gum-0.14.5"
+        }
+      }
+    },
     "ipfs@latest": {
       "last_modified": "2023-02-24T09:01:09Z",
       "resolved": "github:NixOS/nixpkgs/7d0ed7f2e5aea07ab22ccb338d27fbe347ed2f11#ipfs",
       "source": "devbox-search",
       "version": "0.17.0"
     },
+    "mprocs@latest": {
+      "last_modified": "2024-09-10T15:01:03Z",
+      "resolved": "github:NixOS/nixpkgs/5ed627539ac84809c78b2dd6d26a5cebeb5ae269#mprocs",
+      "source": "devbox-search",
+      "version": "0.7.1",
+      "systems": {
+        "aarch64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/sri1rv6phxhcvgwknd3zv98km6s1740b-mprocs-0.7.1",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/sri1rv6phxhcvgwknd3zv98km6s1740b-mprocs-0.7.1"
+        },
+        "aarch64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/7q84qjs24xd9jf2wvn7f39gvxsn5n33q-mprocs-0.7.1",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/7q84qjs24xd9jf2wvn7f39gvxsn5n33q-mprocs-0.7.1"
+        },
+        "x86_64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/47j50bgr6mxlvdjddh0li810wkld34qb-mprocs-0.7.1",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/47j50bgr6mxlvdjddh0li810wkld34qb-mprocs-0.7.1"
+        },
+        "x86_64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/6vrvg4jhv2yg8y326dmrxsz3yddkqgzq-mprocs-0.7.1",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/6vrvg4jhv2yg8y326dmrxsz3yddkqgzq-mprocs-0.7.1"
+        }
+      }
+    },
     "process-compose@latest": {
       "last_modified": "2024-09-15T21:49:16Z",
       "resolved": "github:NixOS/nixpkgs/039b72d0c738c934e2e36d7fc5520d1b425287a6#process-compose",
@@ -294,6 +390,54 @@
           "store_path": "/nix/store/6zbyhj72wh0645lj6b9c392aqqg11a84-skate-1.0.0"
         }
       }
+    },
+    "templ@latest": {
+      "last_modified": "2024-09-10T15:01:03Z",
+      "resolved": "github:NixOS/nixpkgs/5ed627539ac84809c78b2dd6d26a5cebeb5ae269#templ",
+      "source": "devbox-search",
+      "version": "0.2.778",
+      "systems": {
+        "aarch64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/n3yqslisz9v81k4w4vhci1v2bl1sqf9s-templ-0.2.778",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/n3yqslisz9v81k4w4vhci1v2bl1sqf9s-templ-0.2.778"
+        },
+        "aarch64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/i4xjiw0vc25qpr3g01q0x401351w28hr-templ-0.2.778",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/i4xjiw0vc25qpr3g01q0x401351w28hr-templ-0.2.778"
+        },
+        "x86_64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/77w522agb5fgsr36jkifcccr9x4xwkf9-templ-0.2.778",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/77w522agb5fgsr36jkifcccr9x4xwkf9-templ-0.2.778"
+        },
+        "x86_64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/1g5ji5930j03cycpcjy12z6lr24l9c65-templ-0.2.778",
+              "default": true
+            }
+          ],
+          "store_path": "/nix/store/1g5ji5930j03cycpcjy12z6lr24l9c65-templ-0.2.778"
+        }
+      }
     }
   }
 }

internal/headers/request.go

@@ -1,20 +1,14 @@
 package headers
 
 type RequestHeaders struct {
-	Authorization      *string `header:"Authorization"`
-	CacheControl       *string `header:"Cache-Control"`
-	DeviceMemory       *string `header:"Device-Memory"`
-	Forwarded          *string `header:"Forwarded"`
-	From               *string `header:"From"`
-	Host               *string `header:"Host"`
-	Link               *string `header:"Link"`
-	PermissionsPolicy  *string `header:"Permissions-Policy"`
-	ProxyAuthorization *string `header:"Proxy-Authorization"`
-	Referer            *string `header:"Referer"`
-	UserAgent          *string `header:"User-Agent"`
-	ViewportWidth      *string `header:"Viewport-Width"`
-	Width              *string `header:"Width"`
-	WWWAuthenticate    *string `header:"WWW-Authenticate"`
+	CacheControl  *string `header:"Cache-Control"`
+	DeviceMemory  *string `header:"Device-Memory"`
+	From          *string `header:"From"`
+	Host          *string `header:"Host"`
+	Referer       *string `header:"Referer"`
+	UserAgent     *string `header:"User-Agent"`
+	ViewportWidth *string `header:"Viewport-Width"`
+	Width         *string `header:"Width"`
 
 	// HTMX Specific
 	HXBoosted               *string `header:"HX-Boosted"`
@@ -26,3 +20,12 @@ type RequestHeaders struct {
 	HXTriggerName           *string `header:"HX-Trigger-Name"`
 	HXTrigger               *string `header:"HX-Trigger"`
 }
+
+type ProtectedRequestHeaders struct {
+	Authorization      *string `header:"Authorization"`
+	Forwarded          *string `header:"Forwarded"`
+	Link               *string `header:"Link"`
+	PermissionsPolicy  *string `header:"Permissions-Policy"`
+	ProxyAuthorization *string `header:"Proxy-Authorization"`
+	WWWAuthenticate    *string `header:"WWW-Authenticate"`
+}

internal/headers/response.go

@@ -1,18 +1,6 @@
 package headers
 
 type ResponseHeaders struct {
-	AcceptCH                      *string `header:"Accept-CH"`
-	AccessControlAllowCredentials *string `header:"Access-Control-Allow-Credentials"`
-	AccessControlAllowHeaders     *string `header:"Access-Control-Allow-Headers"`
-	AccessControlAllowMethods     *string `header:"Access-Control-Allow-Methods"`
-	AccessControlExposeHeaders    *string `header:"Access-Control-Expose-Headers"`
-	AccessControlRequestHeaders   *string `header:"Access-Control-Request-Headers"`
-	ContentSecurityPolicy         *string `header:"Content-Security-Policy"`
-	CrossOriginEmbedderPolicy     *string `header:"Cross-Origin-Embedder-Policy"`
-	PermissionsPolicy             *string `header:"Permissions-Policy"`
-	ProxyAuthorization            *string `header:"Proxy-Authorization"`
-	WWWAuthenticate               *string `header:"WWW-Authenticate"`
-
 	// HTMX Specific
 	HXLocation           *string `header:"HX-Location"`
 	HXPushURL            *string `header:"HX-Push-Url"`
@@ -26,3 +14,17 @@ type ResponseHeaders struct {
 	HXTriggerAfterSettle *string `header:"HX-Trigger-After-Settle"`
 	HXTriggerAfterSwap   *string `header:"HX-Trigger-After-Swap"`
 }
+
+type ProtectedResponseHeaders struct {
+	AcceptCH                      *string `header:"Accept-CH"`
+	AccessControlAllowCredentials *string `header:"Access-Control-Allow-Credentials"`
+	AccessControlAllowHeaders     *string `header:"Access-Control-Allow-Headers"`
+	AccessControlAllowMethods     *string `header:"Access-Control-Allow-Methods"`
+	AccessControlExposeHeaders    *string `header:"Access-Control-Expose-Headers"`
+	AccessControlRequestHeaders   *string `header:"Access-Control-Request-Headers"`
+	ContentSecurityPolicy         *string `header:"Content-Security-Policy"`
+	CrossOriginEmbedderPolicy     *string `header:"Cross-Origin-Embedder-Policy"`
+	PermissionsPolicy             *string `header:"Permissions-Policy"`
+	ProxyAuthorization            *string `header:"Proxy-Authorization"`
+	WWWAuthenticate               *string `header:"WWW-Authenticate"`
+}

pkg/dwn/Config.pkl.go

@@ -2,13 +2,13 @@
 package dwn
 
 type Config struct {
-	Ipfs *IPFS `pkl:"ipfs" json:"ipfs,omitempty"`
+	Ipfs *IPFS `pkl:"ipfs"`
 
-	Sonr *Sonr `pkl:"sonr" json:"sonr,omitempty"`
+	Sonr *Sonr `pkl:"sonr"`
 
-	Motr *Motr `pkl:"motr" json:"motr,omitempty"`
+	Motr *Motr `pkl:"motr"`
 
-	Schema *Schema `pkl:"schema" json:"schema,omitempty"`
+	Schema *Schema `pkl:"schema"`
 
-	ProxyUrl string `pkl:"proxyUrl" json:"proxyUrl,omitempty"`
+	ProxyUrl string `pkl:"proxyUrl"`
 }

pkg/dwn/IPFS.pkl.go

@@ -2,7 +2,7 @@
 package dwn
 
 type IPFS struct {
-	ApiUrl string `pkl:"apiUrl" json:"apiUrl,omitempty"`
+	ApiUrl string `pkl:"apiUrl"`
 
-	GatewayUrl string `pkl:"gatewayUrl" json:"gatewayUrl,omitempty"`
+	GatewayUrl string `pkl:"gatewayUrl"`
 }

pkg/dwn/Motr.pkl.go

@@ -2,9 +2,9 @@
 package dwn
 
 type Motr struct {
-	Keyshare string `pkl:"keyshare" json:"keyshare,omitempty"`
+	Keyshare string `pkl:"keyshare"`
 
-	Address string `pkl:"address" json:"address,omitempty"`
+	Address string `pkl:"address"`
 
-	Origin string `pkl:"origin" json:"origin,omitempty"`
+	Origin string `pkl:"origin"`
 }

pkg/dwn/Schema.pkl.go

@@ -4,19 +4,19 @@ package dwn
 type Schema struct {
 	Version int `pkl:"version"`
 
-	Account string `pkl:"account" json:"account,omitempty"`
+	Account string `pkl:"account"`
 
-	Asset string `pkl:"asset" json:"asset,omitempty"`
+	Asset string `pkl:"asset"`
 
-	Chain string `pkl:"chain" json:"chain,omitempty"`
+	Chain string `pkl:"chain"`
 
-	Credential string `pkl:"credential" json:"credential,omitempty"`
+	Credential string `pkl:"credential"`
 
-	Jwk string `pkl:"jwk" json:"jwk,omitempty"`
+	Jwk string `pkl:"jwk"`
 
-	Grant string `pkl:"grant" json:"grant,omitempty"`
+	Grant string `pkl:"grant"`
 
-	Keyshare string `pkl:"keyshare" json:"keyshare,omitempty"`
+	Keyshare string `pkl:"keyshare"`
 
-	Profile string `pkl:"profile" json:"profile,omitempty"`
+	Profile string `pkl:"profile"`
 }

pkg/dwn/Sonr.pkl.go

@@ -2,13 +2,13 @@
 package dwn
 
 type Sonr struct {
-	ApiUrl string `pkl:"apiUrl" json:"apiUrl,omitempty"`
+	ApiUrl string `pkl:"apiUrl"`
 
-	GrpcUrl string `pkl:"grpcUrl" json:"grpcUrl,omitempty"`
+	GrpcUrl string `pkl:"grpcUrl"`
 
-	RpcUrl string `pkl:"rpcUrl" json:"rpcUrl,omitempty"`
+	RpcUrl string `pkl:"rpcUrl"`
 
-	WebSocketUrl string `pkl:"webSocketUrl" json:"webSocketUrl,omitempty"`
+	WebSocketUrl string `pkl:"webSocketUrl"`
 
-	ChainId string `pkl:"chainId" json:"chainId,omitempty"`
+	ChainId string `pkl:"chainId"`
 }

pkg/dwn/embed.go

@@ -13,15 +13,11 @@ import (
 //go:embed app.wasm
 var dwnWasmData []byte
 
-//go:embed motr.mjs
-var motrMJSData []byte
-
 //go:embed sw.js
 var swJSData []byte
 
 var (
 	dwnWasmFile = files.NewBytesFile(dwnWasmData)
-	motrMJSFile = files.NewBytesFile(motrMJSData)
 	swJSFile    = files.NewBytesFile(swJSData)
 )
 
@@ -43,7 +39,6 @@ func NewVaultDirectory(cnfg *Config) (files.Node, error) {
 	}
 	fileMap := map[string]files.Node{
 		"config.json": files.NewBytesFile(dwnJSON),
-		"motr.mjs":    motrMJSFile,
 		"sw.js":       swJSFile,
 		"app.wasm":    dwnWasmFile,
 		"index.html":  files.NewBytesFile(w.Bytes()),

pkg/dwn/motr.mjs

@@ -1,253 +0,0 @@
-// motr.mjs
-
-import Dexie from "dexie";
-
-export class Motr {
-  constructor(config) {
-    this.config = config;
-    this.vault = null;
-    this.initializeVault();
-  }
-
-  initializeVault() {
-    const { schema } = this.config;
-    this.vault = new Dexie("Vault");
-    this.vault.version(schema.version).stores(schema);
-  }
-
-  // Account methods
-  async insertAccount(accountData) {
-    return this.vault.account.add(accountData);
-  }
-
-  async getAccount(id) {
-    return this.vault.account.get(id);
-  }
-
-  async updateAccount(id, accountData) {
-    return this.vault.account.update(id, accountData);
-  }
-
-  async deleteAccount(id) {
-    return this.vault.account.delete(id);
-  }
-
-  // Asset methods
-  async insertAsset(assetData) {
-    return this.vault.asset.add(assetData);
-  }
-
-  async getAsset(id) {
-    return this.vault.asset.get(id);
-  }
-
-  async updateAsset(id, assetData) {
-    return this.vault.asset.update(id, assetData);
-  }
-
-  async deleteAsset(id) {
-    return this.vault.asset.delete(id);
-  }
-
-  // Chain methods
-  async insertChain(chainData) {
-    return this.vault.chain.add(chainData);
-  }
-
-  async getChain(id) {
-    return this.vault.chain.get(id);
-  }
-
-  async updateChain(id, chainData) {
-    return this.vault.chain.update(id, chainData);
-  }
-
-  async deleteChain(id) {
-    return this.vault.chain.delete(id);
-  }
-
-  // Credential methods
-  async insertCredential(credentialData) {
-    const publicKey = await this.createPublicKeyCredential(credentialData);
-    credentialData.credentialId = publicKey.id;
-    credentialData.publicKey = publicKey.publicKey;
-    return this.vault.credential.add(credentialData);
-  }
-
-  async getCredential(id) {
-    return this.vault.credential.get(id);
-  }
-
-  async updateCredential(id, credentialData) {
-    return this.vault.credential.update(id, credentialData);
-  }
-
-  async deleteCredential(id) {
-    return this.vault.credential.delete(id);
-  }
-
-  // JWK methods
-  async insertJwk(jwkData) {
-    return this.vault.jwk.add(jwkData);
-  }
-
-  async getJwk(id) {
-    return this.vault.jwk.get(id);
-  }
-
-  async updateJwk(id, jwkData) {
-    return this.vault.jwk.update(id, jwkData);
-  }
-
-  async deleteJwk(id) {
-    return this.vault.jwk.delete(id);
-  }
-
-  // Grant methods
-  async insertGrant(grantData) {
-    return this.vault.grant.add(grantData);
-  }
-
-  async getGrant(id) {
-    return this.vault.grant.get(id);
-  }
-
-  async updateGrant(id, grantData) {
-    return this.vault.grant.update(id, grantData);
-  }
-
-  async deleteGrant(id) {
-    return this.vault.grant.delete(id);
-  }
-
-  // Keyshare methods
-  async insertKeyshare(keyshareData) {
-    return this.vault.keyshare.add(keyshareData);
-  }
-
-  async getKeyshare(id) {
-    return this.vault.keyshare.get(id);
-  }
-
-  async updateKeyshare(id, keyshareData) {
-    return this.vault.keyshare.update(id, keyshareData);
-  }
-
-  async deleteKeyshare(id) {
-    return this.vault.keyshare.delete(id);
-  }
-
-  // PublicKey methods
-  async insertPublicKey(publicKeyData) {
-    return this.vault.publicKey.add(publicKeyData);
-  }
-
-  async getPublicKey(id) {
-    return this.vault.publicKey.get(id);
-  }
-
-  async updatePublicKey(id, publicKeyData) {
-    return this.vault.publicKey.update(id, publicKeyData);
-  }
-
-  async deletePublicKey(id) {
-    return this.vault.publicKey.delete(id);
-  }
-
-  // Profile methods
-  async insertProfile(profileData) {
-    return this.vault.profile.add(profileData);
-  }
-
-  async getProfile(id) {
-    return this.vault.profile.get(id);
-  }
-
-  async updateProfile(id, profileData) {
-    return this.vault.profile.update(id, profileData);
-  }
-
-  async deleteProfile(id) {
-    return this.vault.profile.delete(id);
-  }
-
-  // WebAuthn methods
-  async createPublicKeyCredential(options) {
-    const publicKeyCredentialCreationOptions = {
-      challenge: new Uint8Array(32),
-      rp: {
-        name: this.config.motr.origin,
-        id: new URL(this.config.motr.origin).hostname,
-      },
-      user: {
-        id: new TextEncoder().encode(options.subject),
-        name: options.subject,
-        displayName: options.label,
-      },
-      pubKeyCredParams: [
-        { alg: -7, type: "public-key" },
-        { alg: -257, type: "public-key" },
-      ],
-      authenticatorSelection: {
-        authenticatorAttachment: "platform",
-        userVerification: "required",
-      },
-      timeout: 60000,
-      attestation: "direct",
-    };
-
-    try {
-      const credential = await navigator.credentials.create({
-        publicKey: publicKeyCredentialCreationOptions,
-      });
-
-      const publicKeyJwk = await crypto.subtle.exportKey(
-        "jwk",
-        credential.response.getPublicKey(),
-      );
-
-      return {
-        id: credential.id,
-        publicKey: publicKeyJwk,
-        type: credential.type,
-        transports: credential.response.getTransports(),
-      };
-    } catch (error) {
-      console.error("Error creating credential:", error);
-      throw error;
-    }
-  }
-
-  async getPublicKeyCredential(options) {
-    const publicKeyCredentialRequestOptions = {
-      challenge: new Uint8Array(32),
-      rpId: new URL(this.config.motr.origin).hostname,
-      allowCredentials: options.allowCredentials || [],
-      userVerification: "required",
-      timeout: 60000,
-    };
-
-    try {
-      const assertion = await navigator.credentials.get({
-        publicKey: publicKeyCredentialRequestOptions,
-      });
-
-      return {
-        id: assertion.id,
-        type: assertion.type,
-        rawId: new Uint8Array(assertion.rawId),
-        response: {
-          authenticatorData: new Uint8Array(
-            assertion.response.authenticatorData,
-          ),
-          clientDataJSON: new Uint8Array(assertion.response.clientDataJSON),
-          signature: new Uint8Array(assertion.response.signature),
-          userHandle: new Uint8Array(assertion.response.userHandle),
-        },
-      };
-    } catch (error) {
-      console.error("Error getting credential:", error);
-      throw error;
-    }
-  }
-}

pkg/nebula/assets/css/styles.css

@@ -54,6 +54,74 @@
   --tw-contain-layout:  ;
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
+  --motion-origin-scale-x: 1;
+  --motion-origin-scale-y: 1;
+  --motion-origin-translate-x: 0;
+  --motion-origin-translate-y: 0;
+  --motion-origin-rotate: 0;
+  --motion-origin-blur: 0;
+  --motion-origin-grayscale: 0;
+  --motion-origin-opacity: 1;
+  --motion-origin-background-color: ;
+  --motion-origin-text-color: ;
+  --motion-end-scale-x: 1;
+  --motion-end-scale-y: 1;
+  --motion-end-translate-x: 0;
+  --motion-end-translate-y: 0;
+  --motion-end-rotate: 0;
+  --motion-end-blur: 0;
+  --motion-end-grayscale: 0;
+  --motion-end-opacity: 1;
+  --motion-end-background-color: ;
+  --motion-end-text-color: ;
+  --motion-duration: 750ms;
+  --motion-timing: var(--motion-default-timing);
+  --motion-perceptual-duration-multiplier: 1;
+  --motion-delay: 0ms;
+  --motion-scale-duration: var(--motion-duration);
+  --motion-scale-timing: var(--motion-timing);
+  --motion-scale-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
+  --motion-scale-delay: var(--motion-delay);
+  --motion-translate-duration: var(--motion-duration);
+  --motion-translate-timing: var(--motion-timing);
+  --motion-translate-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
+  --motion-translate-delay: var(--motion-delay);
+  --motion-rotate-duration: var(--motion-duration);
+  --motion-rotate-timing: var(--motion-timing);
+  --motion-rotate-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
+  --motion-rotate-delay: var(--motion-delay);
+  --motion-filter-duration: var(--motion-duration);
+  --motion-filter-timing: var(--motion-timing);
+  --motion-filter-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
+  --motion-filter-delay: var(--motion-delay);
+  --motion-opacity-duration: var(--motion-duration);
+  --motion-opacity-timing: var(--motion-timing);
+  --motion-opacity-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
+  --motion-opacity-delay: var(--motion-delay);
+  --motion-background-color-duration: var(--motion-duration);
+  --motion-background-color-timing: var(--motion-timing);
+  --motion-background-color-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
+  --motion-background-color-delay: var(--motion-delay);
+  --motion-text-color-duration: var(--motion-duration);
+  --motion-text-color-timing: var(--motion-timing);
+  --motion-text-color-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
+  --motion-text-color-delay: var(--motion-delay);
+  --motion-scale-in-animation: none;
+  --motion-translate-in-animation: none;
+  --motion-rotate-in-animation: none;
+  --motion-filter-in-animation: none;
+  --motion-opacity-in-animation: none;
+  --motion-background-color-in-animation: none;
+  --motion-text-color-in-animation: none;
+  --motion-scale-out-animation: none;
+  --motion-translate-out-animation: none;
+  --motion-rotate-out-animation: none;
+  --motion-filter-out-animation: none;
+  --motion-opacity-out-animation: none;
+  --motion-background-color-out-animation: none;
+  --motion-text-color-out-animation: none;
+  --motion-all-enter-animations: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation);
+  --motion-all-exit-animations: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
 }
 
 ::backdrop{
@@ -108,6 +176,74 @@
   --tw-contain-layout:  ;
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
+  --motion-origin-scale-x: 1;
+  --motion-origin-scale-y: 1;
+  --motion-origin-translate-x: 0;
+  --motion-origin-translate-y: 0;
+  --motion-origin-rotate: 0;
+  --motion-origin-blur: 0;
+  --motion-origin-grayscale: 0;
+  --motion-origin-opacity: 1;
+  --motion-origin-background-color: ;
+  --motion-origin-text-color: ;
+  --motion-end-scale-x: 1;
+  --motion-end-scale-y: 1;
+  --motion-end-translate-x: 0;
+  --motion-end-translate-y: 0;
+  --motion-end-rotate: 0;
+  --motion-end-blur: 0;
+  --motion-end-grayscale: 0;
+  --motion-end-opacity: 1;
+  --motion-end-background-color: ;
+  --motion-end-text-color: ;
+  --motion-duration: 750ms;
+  --motion-timing: var(--motion-default-timing);
+  --motion-perceptual-duration-multiplier: 1;
+  --motion-delay: 0ms;
+  --motion-scale-duration: var(--motion-duration);
+  --motion-scale-timing: var(--motion-timing);
+  --motion-scale-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
+  --motion-scale-delay: var(--motion-delay);
+  --motion-translate-duration: var(--motion-duration);
+  --motion-translate-timing: var(--motion-timing);
+  --motion-translate-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
+  --motion-translate-delay: var(--motion-delay);
+  --motion-rotate-duration: var(--motion-duration);
+  --motion-rotate-timing: var(--motion-timing);
+  --motion-rotate-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
+  --motion-rotate-delay: var(--motion-delay);
+  --motion-filter-duration: var(--motion-duration);
+  --motion-filter-timing: var(--motion-timing);
+  --motion-filter-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
+  --motion-filter-delay: var(--motion-delay);
+  --motion-opacity-duration: var(--motion-duration);
+  --motion-opacity-timing: var(--motion-timing);
+  --motion-opacity-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
+  --motion-opacity-delay: var(--motion-delay);
+  --motion-background-color-duration: var(--motion-duration);
+  --motion-background-color-timing: var(--motion-timing);
+  --motion-background-color-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
+  --motion-background-color-delay: var(--motion-delay);
+  --motion-text-color-duration: var(--motion-duration);
+  --motion-text-color-timing: var(--motion-timing);
+  --motion-text-color-perceptual-duration-multiplier: var(--motion-perceptual-duration-multiplier);
+  --motion-text-color-delay: var(--motion-delay);
+  --motion-scale-in-animation: none;
+  --motion-translate-in-animation: none;
+  --motion-rotate-in-animation: none;
+  --motion-filter-in-animation: none;
+  --motion-opacity-in-animation: none;
+  --motion-background-color-in-animation: none;
+  --motion-text-color-in-animation: none;
+  --motion-scale-out-animation: none;
+  --motion-translate-out-animation: none;
+  --motion-rotate-out-animation: none;
+  --motion-filter-out-animation: none;
+  --motion-opacity-out-animation: none;
+  --motion-background-color-out-animation: none;
+  --motion-text-color-out-animation: none;
+  --motion-all-enter-animations: var(--motion-scale-in-animation), var(--motion-translate-in-animation), var(--motion-rotate-in-animation), var(--motion-filter-in-animation), var(--motion-opacity-in-animation), var(--motion-background-color-in-animation), var(--motion-text-color-in-animation);
+  --motion-all-exit-animations: var(--motion-scale-out-animation), var(--motion-translate-out-animation), var(--motion-rotate-out-animation), var(--motion-filter-out-animation), var(--motion-opacity-out-animation), var(--motion-background-color-out-animation), var(--motion-text-color-out-animation);
 }
 
 /* ! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com */
@@ -751,6 +887,87 @@ select{
   outline: 1px auto -webkit-focus-ring-color;
 }
 
+:root{
+  --motion-default-timing: cubic-bezier(.165, .84, .44, 1);
+  --motion-bounce: linear(0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,0.973, 1, 0.988, 0.984, 0.988, 1);
+  --motion-spring-smooth: linear(0, 0.001 0.44%, 0.0045 0.94%, 0.0195 2.03%, 0.0446 3.19%, 0.0811 4.5%, 0.1598 6.82%, 0.3685 12.34%, 0.4693 15.17%, 0.5663, 0.6498 21.27%, 0.7215 24.39%, 0.7532 25.98%, 0.7829 27.65%, 0.8105, 0.8349 31.14%, 0.8573 32.95%, 0.8776 34.84%, 0.8964 36.87%, 0.9136 39.05%, 0.929 41.37%, 0.9421 43.77%, 0.9537 46.38%, 0.9636 49.14%, 0.9789 55.31%, 0.9888 62.35%, 0.9949 71.06%, 0.9982 82.52%, 0.9997 99.94%);
+  --motion-spring-snappy: linear(0, 0.0014, 0.0053 1.02%, 0.0126, 0.0227 2.18%, 0.0517 3.41%, 0.094 4.79%, 0.1865 7.26%, 0.4182 12.77%, 0.5246 15.46%, 0.6249, 0.7112, 0.7831 23.95%, 0.8146 25.4%, 0.844, 0.8699 28.45%, 0.8935, 0.9139 31.64%, 0.932, 0.9473, 0.9601 36.65%, 0.9714 38.47%, 0.9808 40.35%, 0.9948 44.49%, 1.0031 49.43%, 1.0057 53.35%, 1.0063 58.14%, 1.0014 80.78%, 1.0001 99.94%);
+  --motion-spring-bouncy: linear(0, 0.0018, 0.0069, 0.0151 1.74%, 0.0277 2.4%, 0.062 3.7%, 0.1115 5.15%, 0.2211 7.77%, 0.4778 13.21%, 0.5912 15.75%, 0.6987 18.44%, 0.7862 20.98%, 0.861 23.59%, 0.8926, 0.9205, 0.945 27.51%, 0.9671 28.89%, 0.9868, 1.003 31.79%, 1.0224 34.11%, 1.0358 36.58%, 1.0436 39.27%, 1.046 42.31%, 1.0446 44.71%, 1.0406 47.47%, 1.0118 61.84%, 1.0027 69.53%, 0.9981 80.49%, 0.9991 99.94%);
+  --motion-spring-bouncier: linear(0, 0.0023, 0.0088, 0.0194 1.59%, 0.035 2.17%, 0.078 3.33%, 0.1415 4.64%, 0.2054 5.75%, 0.2821 6.95%, 0.5912 11.45%, 0.7205 13.43%, 0.8393 15.45%, 0.936 17.39%, 0.9778, 1.015, 1.0477, 1.0759, 1.0998 22.22%, 1.1203, 1.1364, 1.1484 25.26%, 1.1586 26.61%, 1.1629 28.06%, 1.1613 29.56%, 1.1537 31.2%, 1.1434 32.6%, 1.1288 34.19%, 1.0508 41.29%, 1.0174 44.87%, 1.0025 46.89%, 0.9911 48.87%, 0.9826 50.9%, 0.9769 53.03%, 0.9735 56.02%, 0.9748 59.45%, 0.9964 72.64%, 1.0031 79.69%, 1.0042 86.83%, 1.0008 99.97%);
+  --motion-spring-bounciest: linear(0, 0.0032, 0.0131, 0.0294, 0.0524, 0.0824, 0.1192 1.54%, 0.2134 2.11%, 0.3102 2.59%, 0.4297 3.13%, 0.8732 4.95%, 1.0373, 1.1827 6.36%, 1.2972 7.01%, 1.3444, 1.3859, 1.4215, 1.4504, 1.4735, 1.4908, 1.5024, 1.5084 9.5%, 1.5091, 1.5061, 1.4993, 1.4886, 1.4745, 1.4565 11.11%, 1.4082 11.7%, 1.3585 12.2%, 1.295 12.77%, 1.0623 14.64%, 0.9773, 0.9031 16.08%, 0.8449 16.73%, 0.8014, 0.7701 17.95%, 0.7587, 0.7501, 0.7443, 0.7412 19.16%, 0.7421 19.68%, 0.7508 20.21%, 0.7672 20.77%, 0.7917 21.37%, 0.8169 21.87%, 0.8492 22.43%, 0.9681 24.32%, 1.0114, 1.0492 25.75%, 1.0789 26.41%, 1.1008, 1.1167, 1.1271, 1.1317 28.81%, 1.1314, 1.1271 29.87%, 1.1189 30.43%, 1.1063 31.03%, 1.0769 32.11%, 0.9941 34.72%, 0.9748 35.43%, 0.9597 36.09%, 0.9487, 0.9407, 0.9355, 0.933 38.46%, 0.9344 39.38%, 0.9421 40.38%, 0.9566 41.5%, 0.9989 44.12%, 1.0161 45.37%, 1.029 46.75%, 1.0341 48.1%, 1.0335 49.04%, 1.0295 50.05%, 1.0221 51.18%, 0.992 55.02%, 0.9854 56.38%, 0.9827 57.72%, 0.985 59.73%, 1.004 64.67%, 1.0088 67.34%, 1.0076 69.42%, 0.9981 74.28%, 0.9956 76.85%, 0.9961 79.06%, 1.0023 86.46%, 0.999 95.22%, 0.9994 100%);
+}
+
+.motion-preset-slide-up{
+  --motion-origin-translate-y: 25%;
+  --motion-origin-opacity: 0;
+  --motion-opacity-in-animation: motion-opacity-in calc(var(--motion-opacity-duration) * var(--motion-opacity-perceptual-duration-multiplier)) var(--motion-opacity-timing) var(--motion-opacity-delay) both;
+  --motion-translate-in-animation: motion-translate-in calc(var(--motion-translate-duration) * var(--motion-translate-perceptual-duration-multiplier)) var(--motion-translate-timing) var(--motion-translate-delay) both;
+  animation: var(--motion-all-enter-animations);
+}
+
+@keyframes RomboConfettiPop{
+  0%{
+    opacity: 0;
+    transform: scale(1);
+  }
+
+  33%{
+    opacity: 1;
+    transform: scale(1.15);
+  }
+
+  50%{
+    transform: scale(0.975);
+  }
+
+  65%{
+    transform: scale(1.025);
+  }
+
+  80%{
+    transform: scale(0.99);
+  }
+
+  87%{
+    transform: scale(1.01);
+  }
+
+  100%{
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes topfetti{
+  0%{
+    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
+  }
+
+  50%{
+    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
+  }
+
+  100%{
+    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
+    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
+  }
+}
+
+@keyframes bottomfetti{
+  0%{
+    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,70% -10%, 70% 0%;
+  }
+
+  50%{
+    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
+  }
+
+  100%{
+    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
+    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
+  }
+}
+
 .fixed{
   position: fixed;
 }
@@ -779,10 +996,6 @@ select{
   left: 50%;
 }
 
-.left-full{
-  left: 100%;
-}
-
 .right-0{
   right: 0px;
 }
@@ -850,10 +1063,6 @@ select{
   margin-right: auto;
 }
 
-.-mr-20{
-  margin-right: -5rem;
-}
-
 .mb-1{
   margin-bottom: 0.25rem;
 }
@@ -950,10 +1159,6 @@ select{
   display: block;
 }
 
-.inline-block{
-  display: inline-block;
-}
-
 .flex{
   display: flex;
 }
@@ -962,18 +1167,10 @@ select{
   display: inline-flex;
 }
 
-.table{
-  display: table;
-}
-
 .grid{
   display: grid;
 }
 
-.inline-grid{
-  display: inline-grid;
-}
-
 .hidden{
   display: none;
 }
@@ -1046,10 +1243,6 @@ select{
   width: 0px;
 }
 
-.w-1\/2{
-  width: 50%;
-}
-
 .w-1\/3{
   width: 33.333333%;
 }
@@ -1119,10 +1312,6 @@ select{
   width: 100vw;
 }
 
-.min-w-full{
-  min-width: 100%;
-}
-
 .max-w-2xl{
   max-width: 42rem;
 }
@@ -1208,11 +1397,6 @@ select{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-x-\[70\%\]{
-  --tw-translate-x: -70%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-translate-x-px{
   --tw-translate-x: -1px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1273,11 +1457,6 @@ select{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-y-px{
-  --tw-translate-y: 1px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .rotate-1{
   --tw-rotate: 1deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1335,20 +1514,10 @@ select{
   cursor: pointer;
 }
 
-.select-none{
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-
 .grid-cols-2{
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.grid-cols-3{
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
 .flex-row{
   flex-direction: row;
 }
@@ -1464,12 +1633,6 @@ select{
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
-.space-y-3 > :not([hidden]) ~ :not([hidden]){
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
-}
-
 .space-y-4 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1482,29 +1645,10 @@ select{
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
 
-.divide-y > :not([hidden]) ~ :not([hidden]){
-  --tw-divide-y-reverse: 0;
-  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
-  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
-}
-
-.divide-neutral-200 > :not([hidden]) ~ :not([hidden]){
-  --tw-divide-opacity: 1;
-  border-color: rgb(229 229 229 / var(--tw-divide-opacity));
-}
-
 .overflow-hidden{
   overflow: hidden;
 }
 
-.overflow-x-auto{
-  overflow-x: auto;
-}
-
-.whitespace-nowrap{
-  white-space: nowrap;
-}
-
 .rounded{
   border-radius: 0.25rem;
 }
@@ -1551,15 +1695,6 @@ select{
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
 
-.border-gray-100{
-  --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity));
-}
-
-.border-gray-200\/70{
-  border-color: rgb(229 231 235 / 0.7);
-}
-
 .border-green-600{
   --tw-border-opacity: 1;
   border-color: rgb(22 163 74 / var(--tw-border-opacity));
@@ -1612,6 +1747,11 @@ select{
   border-color: rgb(228 228 231 / var(--tw-border-opacity));
 }
 
+.border-zinc-300{
+  --tw-border-opacity: 1;
+  border-color: rgb(212 212 216 / var(--tw-border-opacity));
+}
+
 .bg-blue-50{
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity));
@@ -1622,26 +1762,11 @@ select{
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
-.bg-gray-100{
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
-.bg-gray-900{
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
 .bg-green-50{
   --tw-bg-opacity: 1;
   background-color: rgb(240 253 244 / var(--tw-bg-opacity));
 }
 
-.bg-green-500{
-  --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
-}
-
 .bg-green-600{
   --tw-bg-opacity: 1;
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
@@ -1686,11 +1811,6 @@ select{
   background-color: rgb(254 252 232 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-500{
-  --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
-}
-
 .bg-yellow-600{
   --tw-bg-opacity: 1;
   background-color: rgb(202 138 4 / var(--tw-bg-opacity));
@@ -1884,11 +2004,6 @@ select{
   padding-bottom: 0.5rem;
 }
 
-.py-3{
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-
 .py-4{
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -1986,10 +2101,6 @@ select{
   text-align: center;
 }
 
-.text-right{
-  text-align: right;
-}
-
 .align-top{
   vertical-align: top;
 }
@@ -2134,16 +2245,6 @@ select{
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
-.text-gray-700{
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-
-.text-gray-900{
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
 .text-green-500{
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity));
@@ -2268,10 +2369,6 @@ select{
   opacity: 1;
 }
 
-.opacity-50{
-  opacity: 0.5;
-}
-
 .opacity-60{
   opacity: 0.6;
 }
@@ -2336,12 +2433,6 @@ select{
   transition-duration: 150ms;
 }
 
-.transition-all{
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .transition-colors{
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2380,6 +2471,124 @@ select{
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
+@media screen and (prefers-reduced-motion: no-preference){
+  @keyframes motion-scale-in{
+    0%{
+      scale: var(--motion-origin-scale-x) var(--motion-origin-scale-y);
+    }
+
+    100%{
+      scale: 1 1;
+    }
+  }
+
+  @keyframes motion-scale-out{
+    0%{
+      scale: 1 1;
+    }
+
+    100%{
+      scale: var(--motion-end-scale-x) var(--motion-end-scale-y);
+    }
+  }
+
+  @keyframes motion-translate-in{
+    0%{
+      translate: var(--motion-origin-translate-x) var(--motion-origin-translate-y);
+    }
+
+    100%{
+      translate: 0 0;
+    }
+  }
+
+  @keyframes motion-translate-out{
+    0%{
+      translate: 0 0;
+    }
+
+    100%{
+      translate: var(--motion-end-translate-x) var(--motion-end-translate-y);
+    }
+  }
+
+  @keyframes motion-rotate-in{
+    0%{
+      rotate: var(--motion-origin-rotate);
+    }
+
+    100%{
+      rotate: 0;
+    }
+  }
+
+  @keyframes motion-rotate-out{
+    0%{
+      rotate: 0;
+    }
+
+    100%{
+      rotate: var(--motion-end-rotate);
+    }
+  }
+}
+
+@keyframes motion-filter-in{
+  0%{
+    filter: blur(var(--motion-origin-blur)) grayscale(var(--motion-origin-grayscale));
+  }
+
+  100%{
+    filter: blur(0) grayscale(0);
+  }
+}
+
+@keyframes motion-filter-out{
+  0%{
+    filter: blur(0) grayscale(0);
+  }
+
+  100%{
+    filter: blur(var(--motion-end-blur)) grayscale(var(--motion-end-grayscale));
+  }
+}
+
+@keyframes motion-opacity-in{
+  0%{
+    opacity: var(--motion-origin-opacity);
+  }
+}
+
+@keyframes motion-opacity-out{
+  100%{
+    opacity: var(--motion-end-opacity);
+  }
+}
+
+@keyframes motion-background-color-in{
+  0%{
+    background-color: var(--motion-origin-background-color);
+  }
+}
+
+@keyframes motion-background-color-out{
+  100%{
+    background-color: var(--motion-end-background-color);
+  }
+}
+
+@keyframes motion-text-color-in{
+  0%{
+    color: var(--motion-origin-text-color);
+  }
+}
+
+@keyframes motion-text-color-out{
+  100%{
+    color: var(--motion-end-text-color);
+  }
+}
+
 .\[animation-delay\:-7\.5s\]{
   animation-delay: -7.5s;
 }
@@ -2675,16 +2884,6 @@ input[type="search"]::-webkit-search-results-decoration {
   /* Firefox */
 }
 
-.placeholder\:text-neutral-400::-moz-placeholder{
-  --tw-text-opacity: 1;
-  color: rgb(163 163 163 / var(--tw-text-opacity));
-}
-
-.placeholder\:text-neutral-400::placeholder{
-  --tw-text-opacity: 1;
-  color: rgb(163 163 163 / var(--tw-text-opacity));
-}
-
 .placeholder\:text-neutral-500::-moz-placeholder{
   --tw-text-opacity: 1;
   color: rgb(115 115 115 / var(--tw-text-opacity));
@@ -2695,6 +2894,16 @@ input[type="search"]::-webkit-search-results-decoration {
   color: rgb(115 115 115 / var(--tw-text-opacity));
 }
 
+.placeholder\:text-zinc-400::-moz-placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(161 161 170 / var(--tw-text-opacity));
+}
+
+.placeholder\:text-zinc-400::placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(161 161 170 / var(--tw-text-opacity));
+}
+
 .before\:pointer-events-none::before{
   content: var(--tw-content);
   pointer-events: none;
@@ -2898,11 +3107,6 @@ input[type="search"]::-webkit-search-results-decoration {
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-50:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-green-100:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
@@ -2963,6 +3167,11 @@ input[type="search"]::-webkit-search-results-decoration {
   background-color: rgb(161 98 7 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-zinc-50:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-zinc-800:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(39 39 42 / var(--tw-bg-opacity));
@@ -2973,16 +3182,6 @@ input[type="search"]::-webkit-search-results-decoration {
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
-.hover\:text-blue-700:hover{
-  --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
-}
-
-.hover\:text-gray-800:hover{
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
 .hover\:text-green-600:hover{
   --tw-text-opacity: 1;
   color: rgb(22 163 74 / var(--tw-text-opacity));
@@ -3023,6 +3222,11 @@ input[type="search"]::-webkit-search-results-decoration {
   color: rgb(212 212 216 / var(--tw-text-opacity));
 }
 
+.hover\:text-zinc-800:hover{
+  --tw-text-opacity: 1;
+  color: rgb(39 39 42 / var(--tw-text-opacity));
+}
+
 .hover\:text-zinc-900:hover{
   --tw-text-opacity: 1;
   color: rgb(24 24 27 / var(--tw-text-opacity));
@@ -3041,6 +3245,11 @@ input[type="search"]::-webkit-search-results-decoration {
   border-color: rgb(212 212 212 / var(--tw-border-opacity));
 }
 
+.focus\:border-zinc-300:focus{
+  --tw-border-opacity: 1;
+  border-color: rgb(212 212 216 / var(--tw-border-opacity));
+}
+
 .focus\:bg-white:focus{
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -3071,11 +3280,6 @@ input[type="search"]::-webkit-search-results-decoration {
   --tw-ring-color: rgb(29 78 216 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-gray-700:focus{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
-}
-
 .focus\:ring-green-100:focus{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(220 252 231 / var(--tw-ring-opacity));
@@ -3209,12 +3413,6 @@ input[type="search"]::-webkit-search-results-decoration {
   }
 }
 
-@media not all and (min-width: 768px){
-  .max-md\:w-\[45\%\]{
-    width: 45%;
-  }
-}
-
 @media not all and (min-width: 640px){
   .max-sm\:order-1{
     order: 1;
@@ -3530,32 +3728,11 @@ input[type="search"]::-webkit-search-results-decoration {
   }
 }
 
-.\[\&\:has\(svg\)\]\:pl-11:has(svg){
-  padding-left: 2.75rem;
-}
-
 .\[\&\>div\]\:mx-3>div{
   margin-left: 0.75rem;
   margin-right: 0.75rem;
 }
 
-.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div{
-  --tw-translate-y: -3px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.\[\&\>svg\]\:absolute>svg{
-  position: absolute;
-}
-
-.\[\&\>svg\]\:left-4>svg{
-  left: 1rem;
-}
-
-.\[\&\>svg\]\:top-4>svg{
-  top: 1rem;
-}
-
 .\[\&_\.active-breadcrumb\]\:font-medium .active-breadcrumb{
   font-weight: 500;
 }

pkg/nebula/components/blocks/alert.templ

@@ -1,67 +0,0 @@
-package blocks
-
-func Alert(variant Variant, icon Icon, title, message string) templ.Component {
-	return alertElement(variant.Attributes(), title, message, icon.Render())
-}
-
-templ alertElement(attrs templ.Attributes, title, message string, icon templ.Component) {
-	<div { attrs... }>
-		@icon
-		<h5 class="mb-1 font-medium leading-none tracking-tight">{ title }</h5>
-		<div class="text-sm opacity-70">{ message }</div>
-	</div>
-}
-
-type AlertVariant int
-
-const (
-	AlertVariant_Default AlertVariant = iota
-	AlertVariant_Info
-	AlertVariant_Error
-	AlertVariant_Success
-	AlertVariant_Warning
-	AlertVariant_Subtle_Info
-	AlertVariant_Subtle_Error
-	AlertVariant_Subtle_Success
-	AlertVariant_Subtle_Warning
-)
-
-func (v AlertVariant) Attributes() templ.Attributes {
-	switch v {
-	case AlertVariant_Info:
-		return templ.Attributes{
-			"class": "relative w-full rounded-lg border border-transparent bg-blue-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
-		}
-	case AlertVariant_Error:
-		return templ.Attributes{
-			"class": "relative w-full rounded-lg border border-transparent bg-red-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
-		}
-	case AlertVariant_Success:
-		return templ.Attributes{
-			"class": "relative w-full rounded-lg border border-transparent bg-green-500 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
-		}
-	case AlertVariant_Warning:
-		return templ.Attributes{
-			"class": "relative w-full rounded-lg border border-transparent bg-yellow-500 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
-		}
-	case AlertVariant_Subtle_Info:
-		return templ.Attributes{
-			"class": "relative w-full rounded-lg border border-transparent bg-blue-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-blue-600",
-		}
-	case AlertVariant_Subtle_Error:
-		return templ.Attributes{
-			"class": "relative w-full rounded-lg border border-transparent bg-red-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-red-600",
-		}
-	case AlertVariant_Subtle_Success:
-		return templ.Attributes{
-			"class": "relative w-full rounded-lg border border-transparent bg-green-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-green-600",
-		}
-	case AlertVariant_Subtle_Warning:
-		return templ.Attributes{
-			"class": "relative w-full rounded-lg border border-transparent bg-yellow-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-yellow-600",
-		}
-	}
-	return templ.Attributes{
-		"class": "relative w-full rounded-lg border bg-white p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-neutral-900",
-	}
-}

pkg/nebula/components/blocks/alert_templ.go

@@ -1,140 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.2.778
-package blocks
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-func Alert(variant Variant, icon Icon, title, message string) templ.Component {
-	return alertElement(variant.Attributes(), title, message, icon.Render())
-}
-
-func alertElement(attrs templ.Attributes, title, message string, icon templ.Component) 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")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templ.RenderAttributes(ctx, templ_7745c5c3_Buffer, attrs)
-		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 = icon.Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<h5 class=\"mb-1 font-medium leading-none tracking-tight\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var2 string
-		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/blocks/alert.templ`, Line: 10, Col: 66}
-		}
-		_, 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("</h5><div class=\"text-sm opacity-70\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var3 string
-		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(message)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/blocks/alert.templ`, Line: 11, Col: 43}
-		}
-		_, 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("</div></div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
-type AlertVariant int
-
-const (
-	AlertVariant_Default AlertVariant = iota
-	AlertVariant_Info
-	AlertVariant_Error
-	AlertVariant_Success
-	AlertVariant_Warning
-	AlertVariant_Subtle_Info
-	AlertVariant_Subtle_Error
-	AlertVariant_Subtle_Success
-	AlertVariant_Subtle_Warning
-)
-
-func (v AlertVariant) Attributes() templ.Attributes {
-	switch v {
-	case AlertVariant_Info:
-		return templ.Attributes{
-			"class": "relative w-full rounded-lg border border-transparent bg-blue-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
-		}
-	case AlertVariant_Error:
-		return templ.Attributes{
-			"class": "relative w-full rounded-lg border border-transparent bg-red-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
-		}
-	case AlertVariant_Success:
-		return templ.Attributes{
-			"class": "relative w-full rounded-lg border border-transparent bg-green-500 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
-		}
-	case AlertVariant_Warning:
-		return templ.Attributes{
-			"class": "relative w-full rounded-lg border border-transparent bg-yellow-500 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white",
-		}
-	case AlertVariant_Subtle_Info:
-		return templ.Attributes{
-			"class": "relative w-full rounded-lg border border-transparent bg-blue-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-blue-600",
-		}
-	case AlertVariant_Subtle_Error:
-		return templ.Attributes{
-			"class": "relative w-full rounded-lg border border-transparent bg-red-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-red-600",
-		}
-	case AlertVariant_Subtle_Success:
-		return templ.Attributes{
-			"class": "relative w-full rounded-lg border border-transparent bg-green-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-green-600",
-		}
-	case AlertVariant_Subtle_Warning:
-		return templ.Attributes{
-			"class": "relative w-full rounded-lg border border-transparent bg-yellow-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-yellow-600",
-		}
-	}
-	return templ.Attributes{
-		"class": "relative w-full rounded-lg border bg-white p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-neutral-900",
-	}
-}
-
-var _ = templruntime.GeneratedTemplate

pkg/nebula/components/blocks/inputs.templ

@@ -1,29 +0,0 @@
-package blocks
-
-type InputState int
-
-const (
-	InputStateDefault InputState = iota
-	InputStateError
-	InputStateSuccess
-)
-
-templ TextInput(state InputState, label string, placeholder string) {
-	switch (state) {
-		case InputStateDefault:
-			<div class="flex flex-col space-y-1.5 p-6">
-				<label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">{ label }</label>
-				<input type="text" placeholder="{label}" id="name" value="{value}" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 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"/>
-			</div>
-		case InputStateError:
-			<div class="flex flex-col space-y-1.5 p-6">
-				<label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">{ label }</label>
-				<input type="text" placeholder="{label}" id="name" value="{value}" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 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"/>
-			</div>
-		case InputStateSuccess:
-			<div class="flex flex-col space-y-1.5 p-6">
-				<label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">{ label }</label>
-				<input type="text" placeholder="{label}" id="name" value="{value}" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 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"/>
-			</div>
-	}
-}

pkg/nebula/components/blocks/inputs_templ.go

@@ -1,100 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.2.778
-package blocks
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-type InputState int
-
-const (
-	InputStateDefault InputState = iota
-	InputStateError
-	InputStateSuccess
-)
-
-func TextInput(state InputState, label string, placeholder string) 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)
-		switch state {
-		case InputStateDefault:
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex flex-col space-y-1.5 p-6\"><label class=\"text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"name\">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var2 string
-			templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(label)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/blocks/inputs.templ`, Line: 15, Col: 128}
-			}
-			_, 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("</label> <input type=\"text\" placeholder=\"{label}\" id=\"name\" value=\"{value}\" class=\"flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 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\"></div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case InputStateError:
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex flex-col space-y-1.5 p-6\"><label class=\"text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"name\">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var3 string
-			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(label)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/blocks/inputs.templ`, Line: 20, Col: 128}
-			}
-			_, 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("</label> <input type=\"text\" placeholder=\"{label}\" id=\"name\" value=\"{value}\" class=\"flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 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\"></div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		case InputStateSuccess:
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex flex-col space-y-1.5 p-6\"><label class=\"text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"name\">")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var4 string
-			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(label)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/blocks/inputs.templ`, Line: 25, Col: 128}
-			}
-			_, 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("</label> <input type=\"text\" placeholder=\"{label}\" id=\"name\" value=\"{value}\" class=\"flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 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\"></div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
-var _ = templruntime.GeneratedTemplate

pkg/nebula/components/blocks/radios.templ

@@ -1,37 +0,0 @@
-package blocks
-
-templ RadioGroup() {
-	<div
-		x-data="{
-    radioGroupSelectedValue: null,
-    radioGroupOptions: [
-        {
-            title: 'Email Address',
-            description: 'Get a login code to your email address.',
-            value: 'email'
-        },
-        {
-            title: 'Phone Number',
-            description: 'Get a login code to your phone number.',
-            value: 'phone'
-        },
-        {
-            title: 'Passkey',
-            description: 'Sign in with your passkey.',
-            value: 'passkey'
-        }
-    ]
-}"
-		class="space-y-3"
-	>
-		<template x-for="(option, index) in radioGroupOptions" :key="index">
-			<label @click="radioGroupSelectedValue=option.value" class="flex items-start p-5 space-x-3 bg-white border rounded-md shadow-sm hover:bg-gray-50 border-neutral-200/70">
-				<input type="radio" name="radio-group" :value="option.value" class="text-gray-900 translate-y-px focus:ring-gray-700"/>
-				<span class="relative flex flex-col text-left space-y-1.5 leading-none">
-					<span x-text="option.title" class="font-semibold"></span>
-					<span x-text="option.description" class="text-sm opacity-50"></span>
-				</span>
-			</label>
-		</template>
-	</div>
-}

pkg/nebula/components/blocks/radios_templ.go

@@ -1,40 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.2.778
-package blocks
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-func RadioGroup() 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=\"{\n    radioGroupSelectedValue: null,\n    radioGroupOptions: [\n        {\n            title: &#39;Email Address&#39;,\n            description: &#39;Get a login code to your email address.&#39;,\n            value: &#39;email&#39;\n        },\n        {\n            title: &#39;Phone Number&#39;,\n            description: &#39;Get a login code to your phone number.&#39;,\n            value: &#39;phone&#39;\n        },\n        {\n            title: &#39;Passkey&#39;,\n            description: &#39;Sign in with your passkey.&#39;,\n            value: &#39;passkey&#39;\n        }\n    ]\n}\" class=\"space-y-3\"><template x-for=\"(option, index) in radioGroupOptions\" :key=\"index\"><label @click=\"radioGroupSelectedValue=option.value\" class=\"flex items-start p-5 space-x-3 bg-white border rounded-md shadow-sm hover:bg-gray-50 border-neutral-200/70\"><input type=\"radio\" name=\"radio-group\" :value=\"option.value\" class=\"text-gray-900 translate-y-px focus:ring-gray-700\"> <span class=\"relative flex flex-col text-left space-y-1.5 leading-none\"><span x-text=\"option.title\" class=\"font-semibold\"></span> <span x-text=\"option.description\" class=\"text-sm opacity-50\"></span></span></label></template></div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
-var _ = templruntime.GeneratedTemplate

pkg/nebula/components/blocks/tabs.templ

@@ -1,109 +0,0 @@
-package blocks
-
-templ Tabs() {
-	<div
-		x-data="{
-        tabSelected: 1,
-        tabId: $id('tabs'),
-        tabButtonClicked(tabButton){
-            this.tabSelected = tabButton.id.replace(this.tabId + '-', '');
-            this.tabRepositionMarker(tabButton);
-        },
-        tabRepositionMarker(tabButton){
-            this.$refs.tabMarker.style.width=tabButton.offsetWidth + 'px';
-            this.$refs.tabMarker.style.height=tabButton.offsetHeight + 'px';
-            this.$refs.tabMarker.style.left=tabButton.offsetLeft + 'px';
-        },
-        tabContentActive(tabContent){
-            return this.tabSelected == tabContent.id.replace(this.tabId + '-content-', '');
-        },
-        tabButtonActive(tabContent){
-            const tabId = tabContent.id.split('-').slice(-1);
-            return this.tabSelected == tabId;
-        }
-    }"
-		x-init="tabRepositionMarker($refs.tabButtons.firstElementChild);"
-		class="relative w-full max-w-sm"
-	>
-		<div x-ref="tabButtons" class="relative inline-grid items-center justify-center w-full h-10 grid-cols-3 p-1 text-gray-500 bg-white border border-gray-100 rounded-lg select-none">
-			<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Tab1</button>
-			<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Tab2</button>
-			<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Tab3</button>
-			<div x-ref="tabMarker" class="absolute left-0 z-10 w-1/2 h-full duration-300 ease-out" x-cloak><div class="w-full h-full bg-gray-100 rounded-md shadow-sm"></div></div>
-		</div>
-		<div class="relative flex items-center justify-center w-full p-5 mt-2 text-xs text-gray-400 border rounded-md content border-gray-200/70">
-			<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative">
-				@Table()
-			</div>
-			<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative" x-cloak>
-				And, this is the content for Tab2
-			</div>
-			<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative" x-cloak>
-				Finally, this is the content for Tab3
-			</div>
-		</div>
-	</div>
-}
-
-templ Table() {
-	<div class="flex flex-col">
-		<div class="overflow-x-auto">
-			<div class="inline-block min-w-full">
-				<div class="overflow-hidden">
-					<table class="min-w-full divide-y divide-neutral-200">
-						<thead>
-							<tr class="text-neutral-500">
-								<th class="px-5 py-3 text-xs font-medium text-left uppercase">Name</th>
-								<th class="px-5 py-3 text-xs font-medium text-left uppercase">Age</th>
-								<th class="px-5 py-3 text-xs font-medium text-left uppercase">Address</th>
-								<th class="px-5 py-3 text-xs font-medium text-right uppercase">Action</th>
-							</tr>
-						</thead>
-						<tbody class="divide-y divide-neutral-200">
-							<tr class="text-neutral-800">
-								<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Richard Hendricks</td>
-								<td class="px-5 py-4 text-sm whitespace-nowrap">30</td>
-								<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
-								<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
-									<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
-								</td>
-							</tr>
-							<tr class="text-neutral-800">
-								<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Erlich Bachman</td>
-								<td class="px-5 py-4 text-sm whitespace-nowrap">40</td>
-								<td class="px-5 py-4 text-sm whitespace-nowrap">5230 Penfield Ave, Woodland Hills</td>
-								<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
-									<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
-								</td>
-							</tr>
-							<tr class="text-neutral-800">
-								<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Monica Hall</td>
-								<td class="px-5 py-4 text-sm whitespace-nowrap">35</td>
-								<td class="px-5 py-4 text-sm whitespace-nowrap">2030 Stewart Drive, Sunnyvale</td>
-								<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
-									<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
-								</td>
-							</tr>
-							<tr class="text-neutral-800">
-								<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Dinesh Chugtai</td>
-								<td class="px-5 py-4 text-sm whitespace-nowrap">28</td>
-								<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
-								<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
-									<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
-								</td>
-							</tr>
-							<tr class="text-neutral-800">
-								<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Gilfoyle</td>
-								<td class="px-5 py-4 text-sm whitespace-nowrap">32</td>
-								<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
-								<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
-									<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
-								</td>
-							</tr>
-						</tbody>
-					</table>
-				</div>
-			</div>
-		</div>
-	</div>
-}

pkg/nebula/components/blocks/tabs_templ.go

@@ -1,77 +0,0 @@
-// Code generated by templ - DO NOT EDIT.
-
-// templ: version: v0.2.778
-package blocks
-
-//lint:file-ignore SA4006 This context is only used if a nested component is present.
-
-import "github.com/a-h/templ"
-import templruntime "github.com/a-h/templ/runtime"
-
-func Tabs() 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=\"{\n        tabSelected: 1,\n        tabId: $id(&#39;tabs&#39;),\n        tabButtonClicked(tabButton){\n            this.tabSelected = tabButton.id.replace(this.tabId + &#39;-&#39;, &#39;&#39;);\n            this.tabRepositionMarker(tabButton);\n        },\n        tabRepositionMarker(tabButton){\n            this.$refs.tabMarker.style.width=tabButton.offsetWidth + &#39;px&#39;;\n            this.$refs.tabMarker.style.height=tabButton.offsetHeight + &#39;px&#39;;\n            this.$refs.tabMarker.style.left=tabButton.offsetLeft + &#39;px&#39;;\n        },\n        tabContentActive(tabContent){\n            return this.tabSelected == tabContent.id.replace(this.tabId + &#39;-content-&#39;, &#39;&#39;);\n        },\n        tabButtonActive(tabContent){\n            const tabId = tabContent.id.split(&#39;-&#39;).slice(-1);\n            return this.tabSelected == tabId;\n        }\n    }\" x-init=\"tabRepositionMarker($refs.tabButtons.firstElementChild);\" class=\"relative w-full max-w-sm\"><div x-ref=\"tabButtons\" class=\"relative inline-grid items-center justify-center w-full h-10 grid-cols-3 p-1 text-gray-500 bg-white border border-gray-100 rounded-lg select-none\"><button :id=\"$id(tabId)\" @click=\"tabButtonClicked($el);\" type=\"button\" :class=\"{ &#39;bg-gray-100 text-gray-700&#39; : tabButtonActive($el) }\" class=\"relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap\">Tab1</button> <button :id=\"$id(tabId)\" @click=\"tabButtonClicked($el);\" type=\"button\" :class=\"{ &#39;bg-gray-100 text-gray-700&#39; : tabButtonActive($el) }\" class=\"relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap\">Tab2</button> <button :id=\"$id(tabId)\" @click=\"tabButtonClicked($el);\" type=\"button\" :class=\"{ &#39;bg-gray-100 text-gray-700&#39; : tabButtonActive($el) }\" class=\"relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap\">Tab3</button><div x-ref=\"tabMarker\" class=\"absolute left-0 z-10 w-1/2 h-full duration-300 ease-out\" x-cloak><div class=\"w-full h-full bg-gray-100 rounded-md shadow-sm\"></div></div></div><div class=\"relative flex items-center justify-center w-full p-5 mt-2 text-xs text-gray-400 border rounded-md content border-gray-200/70\"><div :id=\"$id(tabId + &#39;-content&#39;)\" x-show=\"tabContentActive($el)\" class=\"relative\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = Table().Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div :id=\"$id(tabId + &#39;-content&#39;)\" x-show=\"tabContentActive($el)\" class=\"relative\" x-cloak>And, this is the content for Tab2</div><div :id=\"$id(tabId + &#39;-content&#39;)\" x-show=\"tabContentActive($el)\" class=\"relative\" x-cloak>Finally, this is the content for Tab3</div></div></div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
-func Table() templ.Component {
-	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var2 == nil {
-			templ_7745c5c3_Var2 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"flex flex-col\"><div class=\"overflow-x-auto\"><div class=\"inline-block min-w-full\"><div class=\"overflow-hidden\"><table class=\"min-w-full divide-y divide-neutral-200\"><thead><tr class=\"text-neutral-500\"><th class=\"px-5 py-3 text-xs font-medium text-left uppercase\">Name</th><th class=\"px-5 py-3 text-xs font-medium text-left uppercase\">Age</th><th class=\"px-5 py-3 text-xs font-medium text-left uppercase\">Address</th><th class=\"px-5 py-3 text-xs font-medium text-right uppercase\">Action</th></tr></thead> <tbody class=\"divide-y divide-neutral-200\"><tr class=\"text-neutral-800\"><td class=\"px-5 py-4 text-sm font-medium whitespace-nowrap\">Richard Hendricks</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">30</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">Pied Piper HQ, Palo Alto</td><td class=\"px-5 py-4 text-sm font-medium text-right whitespace-nowrap\"><a class=\"text-blue-600 hover:text-blue-700\" href=\"#\">Edit</a></td></tr><tr class=\"text-neutral-800\"><td class=\"px-5 py-4 text-sm font-medium whitespace-nowrap\">Erlich Bachman</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">40</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">5230 Penfield Ave, Woodland Hills</td><td class=\"px-5 py-4 text-sm font-medium text-right whitespace-nowrap\"><a class=\"text-blue-600 hover:text-blue-700\" href=\"#\">Edit</a></td></tr><tr class=\"text-neutral-800\"><td class=\"px-5 py-4 text-sm font-medium whitespace-nowrap\">Monica Hall</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">35</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">2030 Stewart Drive, Sunnyvale</td><td class=\"px-5 py-4 text-sm font-medium text-right whitespace-nowrap\"><a class=\"text-blue-600 hover:text-blue-700\" href=\"#\">Edit</a></td></tr><tr class=\"text-neutral-800\"><td class=\"px-5 py-4 text-sm font-medium whitespace-nowrap\">Dinesh Chugtai</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">28</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">Pied Piper HQ, Palo Alto</td><td class=\"px-5 py-4 text-sm font-medium text-right whitespace-nowrap\"><a class=\"text-blue-600 hover:text-blue-700\" href=\"#\">Edit</a></td></tr><tr class=\"text-neutral-800\"><td class=\"px-5 py-4 text-sm font-medium whitespace-nowrap\">Gilfoyle</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">32</td><td class=\"px-5 py-4 text-sm whitespace-nowrap\">Pied Piper HQ, Palo Alto</td><td class=\"px-5 py-4 text-sm font-medium text-right whitespace-nowrap\"><a class=\"text-blue-600 hover:text-blue-700\" href=\"#\">Edit</a></td></tr></tbody></table></div></div></div></div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
-var _ = templruntime.GeneratedTemplate

pkg/nebula/components/blocks/video.templ

@@ -1,317 +0,0 @@
-package blocks
-
-templ Video() {
-	<div
-		x-data="{
-        sources: {
-            mp4: 'https://cdn.devdojo.com/pines/videos/coast.mp4',
-            webm: 'https://cdn.devdojo.com/pines/videos/coast.webm',
-            ogg: 'https://cdn.devdojo.com/pines/videos/coast.ogg'
-        },
-        playing: false,
-        controls: true,
-        muted: false,
-        muteForced: false,
-        fullscreen: false,
-        ended: false,
-        mouseleave: false,
-        autoHideControlsDelay: 3000,
-        controlsHideTimeout: null,
-        poster: null,
-        videoDuration: 0,
-        timeDurationString: '00:00',
-        timeElapsedString: '00:00',
-        showTime: false,
-        volume: 1,
-        volumeBeforeMute: 1,
-        videoPlayerReady: false,
-        timelineSeek(e) {
-            time = this.formatTime(Math.round(e.target.value));
-            this.timeElapsedString = `${time.minutes}:${time.seconds}`;
-        },
-        metaDataLoaded(event) {
-            this.videoDuration = event.target.duration;
-            this.$refs.videoProgress.setAttribute('max', this.videoDuration);
-
-            time = this.formatTime(Math.round(this.videoDuration));
-            this.timeDurationString = `${time.minutes}:${time.seconds}`;
-            this.showTime = true;
-            this.videoPlayerReady = true;
-        },
-        togglePlay(e) {
-            if (this.$refs.player.paused || this.$refs.player.ended) {
-                this.playing = true;
-                this.$refs.player.play();
-            } else {
-                this.$refs.player.pause();
-                this.playing = false;
-            }
-        },
-        toggleMute(){
-            this.muted = !this.muted;
-            this.$refs.player.muted = this.muted;
-            if(this.muted){
-                this.volumeBeforeMute = this.volume;
-                this.volume = 0;
-            } else {
-                this.volume = this.volumeBeforeMute;
-            }
-        },
-        timeUpdatedInterval() {
-            if (!this.$refs.videoProgress.getAttribute('max'))
-                this.$refs.videoProgress.setAttribute('max', $refs.player.duration);
-                this.$refs.videoProgress.value = this.$refs.player.currentTime;
-                time = this.formatTime(Math.round(this.$refs.player.currentTime));
-                this.timeElapsedString = `${time.minutes}:${time.seconds}`;
-        },
-        updateVolume(e) {
-            this.volume = e.target.value;
-            this.$refs.player.volume = this.volume;
-            if(this.volume == 0){
-                this.muted = true;
-            }
-
-            if(this.muted && this.volume > 0){
-                this.muted = false;
-            }
-        },
-        timelineClicked(e) {
-            rect = this.$refs.videoProgress.getBoundingClientRect();
-            pos = (e.pageX - rect.left) / this.$refs.videoProgress.offsetWidth;
-            this.$refs.player.currentTime = pos * this.$refs.player.duration;
-        },
-        handleFullscreen() {
-            if (document.fullscreenElement !== null) {
-                // The document is in fullscreen mode
-                document.exitFullscreen();
-            } else {
-                // The document is not in fullscreen mode
-                this.$refs.videoContainer.requestFullscreen();
-            }
-        },
-        mousemoveVideo() {
-            if(this.playing){
-                this.resetControlsTimeout();
-            } else {
-                this.controls=true;
-                clearTimeout(this.controlsHideTimeout);
-            }
-        },
-        videoEnded() {
-            this.ended = true;
-            this.playing = false;
-            this.$refs.player.currentTime = 0;
-        },
-        resetControlsTimeout() {
-            this.controls = true;
-            clearTimeout(this.controlsHideTimeout);
-            let that = this;
-            this.controlsHideTimeout = setTimeout(function(){ 
-                that.controls=false 
-            }, this.autoHideControlsDelay);
-        },
-        formatTime(timeInSeconds) {
-            result = new Date(timeInSeconds * 1000).toISOString().substring(11, 19);
-
-            return {
-                minutes: result.substring(3, 5),
-                seconds: result.substring(6, 8),
-            };
-        }
-    }"
-		x-init="
-
-        supportsVideo = document.createElement('video').canPlayType;
-        if (!supportsVideo) {
-            alert('This browser does not support the video element');
-        }
-
-        $refs.player.load();
-        // Hide the default player controls
-        $refs.player.controls = false;
-        
-        $watch('playing', (value) => {
-            if (value) {
-                ended = false;
-                controlsHideTimeout = setTimeout(() => {
-                    controls = false;
-                }, autoHideControlsDelay);
-            } else {
-                clearTimeout(controlsHideTimeout);
-                controls = true;
-            }
-        });
-
-        if (!document?.fullscreenEnabled) {
-            $refs.fullscreenButton.style.display = 'none';
-        }
-
-        document.addEventListener('fullscreenchange', (e) => {
-            fullscreen = !!document.fullscreenElement;
-        });
-
-    "
-		x-ref="videoContainer"
-		@mouseleave="mouseleave=true"
-		@mousemove="mousemoveVideo"
-		class="relative h-[360px] min-w-[640px] overflow-hidden rounded-md aspect-video"
-	>
-		<video
-			x-ref="player"
-			@loadedmetadata="metaDataLoaded"
-			@timeupdate="timeUpdatedInterval"
-			@ended="videoEnded"
-			preload="metadata"
-			:poster="poster"
-			class="relative z-10 object-cover w-full h-full bg-black"
-			crossorigin="anonymous"
-		>
-			<source :src="sources.mp4" type="video/mp4"/>
-			<source :src="sources.webm" type="video/webm"/>
-			<source :src="sources.ogg" type="video/ogg"/>
-		</video>
-		<div x-show="videoPlayerReady" class="absolute inset-0 w-full h-full">
-			<div x-ref="videoBackground" @click="togglePlay()" class="absolute inset-0 z-30 flex items-center justify-center w-full h-full bg-black bg-opacity-0 cursor-pointer group">
-				<div
-					x-show="playing"
-					x-transition:enter="transition ease-out duration-1000"
-					x-transition:enter-start="scale-50 opacity-100"
-					x-transition:enter-end="scale-100 opacity-0"
-					class="absolute z-20 flex items-center justify-center w-24 h-24 bg-blue-600 rounded-full opacity-0 bg-opacity-20"
-					x-cloak
-				>
-					<svg class="w-10 h-10 translate-x-0.5 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.42737 3.41611C6.46665 2.24586 4.00008 3.67188 4.00007 5.9427L4 18.0572C3.99999 20.329 6.46837 21.7549 8.42907 20.5828L18.5698 14.5207C20.4775 13.3802 20.4766 10.6076 18.568 9.46853L8.42737 3.41611Z" fill="currentColor"></path></svg>
-				</div>
-				<div
-					x-show="!playing && !ended"
-					x-transition:enter="transition ease-out duration-1000"
-					x-transition:enter-start="scale-50 opacity-100"
-					x-transition:enter-end="scale-100 opacity-0"
-					class="absolute z-20 flex items-center justify-center w-24 h-24 bg-blue-600 rounded-full opacity-0 bg-opacity-20"
-					x-cloak
-				>
-					<svg class="w-10 h-10 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 3C8.55228 3 9 3.44772 9 4L9 20C9 20.5523 8.55228 21 8 21C7.44772 21 7 20.5523 7 20L7 4C7 3.44772 7.44772 3 8 3ZM16 3C16.5523 3 17 3.44772 17 4V20C17 20.5523 16.5523 21 16 21C15.4477 21 15 20.5523 15 20V4C15 3.44772 15.4477 3 16 3Z" fill="currentColor"></path></svg>
-				</div>
-				<div class="absolute z-10 duration-300 ease-out group-hover:scale-110">
-					<button
-						x-show="!playing"
-						x-transition:enter="transition ease-in delay-200 duration-300"
-						x-transition:enter-start="opacity-0 scale-75"
-						x-transition:enter-end="opacity-100 scale-100"
-						x-transition:leave="transition ease-out duration-300"
-						x-transition:leave-start="opacity-100"
-						x-transition:leave-end="opacity-0"
-						class="flex items-center justify-center w-12 h-12 text-white duration-150 ease-out bg-blue-600 rounded-full cursor-pointer bg-opacity-80"
-						type="button"
-					>
-						<svg class="w-5 h-5 translate-x-px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.42737 3.41611C6.46665 2.24586 4.00008 3.67188 4.00007 5.9427L4 18.0572C3.99999 20.329 6.46837 21.7549 8.42907 20.5828L18.5698 14.5207C20.4775 13.3802 20.4766 10.6076 18.568 9.46853L8.42737 3.41611Z" fill="currentColor" x-cloak></path></svg>
-					</button>
-				</div>
-			</div>
-			<div
-				x-show="controls"
-				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="absolute top-0 left-0 z-20 w-full h-1/4 opacity-20 bg-gradient-to-b from-black to-transparent"
-				x-cloak
-			></div>
-			<div
-				x-show="controls"
-				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="absolute bottom-0 left-0 z-20 w-full h-1/4 opacity-20 bg-gradient-to-b from-transparent to-black"
-				x-cloak
-			></div>
-			<div
-				x-show="controls"
-				@click="resetControlsTimeout"
-				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="absolute top-0 left-0 z-40 flex items-center w-full h-12 text-white"
-				x-cloak
-			>
-				<div class="absolute right-0 top-0 mr-0.5 mt-0.5 flex items-center">
-					<div class="flex items-center h-auto group">
-						<button @click="toggleMute()" type="button" class="flex items-center justify-center w-6 h-auto duration-150 ease-out opacity-80 hover:opacity-100">
-							<svg x-show="!muted" class="w-[18px] h-[18px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" x-cloak><path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06zM18.584 5.106a.75.75 0 011.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 11-1.06-1.06 8.25 8.25 0 000-11.668.75.75 0 010-1.06z"></path><path d="M15.932 7.757a.75.75 0 011.061 0 6 6 0 010 8.486.75.75 0 01-1.06-1.061 4.5 4.5 0 000-6.364.75.75 0 010-1.06z"></path></svg>
-							<svg x-show="muted" class="w-[18px] h-[18px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" x-cloak><path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06zM17.78 9.22a.75.75 0 10-1.06 1.06L18.44 12l-1.72 1.72a.75.75 0 001.06 1.06l1.72-1.72 1.72 1.72a.75.75 0 101.06-1.06L20.56 12l1.72-1.72a.75.75 0 00-1.06-1.06l-1.72 1.72-1.72-1.72z"></path></svg>
-						</button>
-						<div class="relative h-1.5 mx-0 group-hover:mx-1 rounded-full group-hover:w-12 invisible group-hover:visible w-0 ease-out duration-300">
-							<input
-								x-ref="volume"
-								@input="updateVolume(event)"
-								type="range"
-								min="0"
-								max="1"
-								:value="volume"
-								step="0.01"
-								class="w-full h-full appearance-none flex items-center cursor-pointer bg-transparent z-30
-                                [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:w-2 [&::-webkit-slider-thumb]:h-2 [&::-webkit-slider-thumb]:appearance-none
-                                [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:w-2 [&::-moz-range-thumb]:h-2 [&::-moz-range-thumb]:appearance-none
-                                [&::-ms-thumb]:bg-white [&::-ms-thumb]:rounded-full [&::-ms-thumb]:border-0 [&::-ms-thumb]:w-2 [&::-ms-thumb]:h-2 [&::-ms-thumb]:appearance-none
-                                [&::-webkit-slider-runnable-track]:bg-white [&::-webkit-slider-runnable-track]:bg-opacity-30 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:overflow-hidden [&::-moz-range-track]:bg-neutral-200 [&::-moz-range-track]:rounded-full [&::-ms-track]:bg-neutral-200 [&::-ms-track]:rounded-full
-                                [&::-moz-range-progress]:bg-white [&::-moz-range-progress]:bg-opacity-80 [&::-moz-range-progress]:rounded-full [&::-ms-fill-lower]:bg-white [&::-ms-fill-lower]:bg-opacity-80 [&::-ms-fill-lower]:rounded-full [&::-webkit-slider-thumb]:shadow-[-995px_0px_0px_990px_rgba(255,_255,_255,_0.8)]
-                        "
-							/>
-						</div>
-					</div>
-					<button x-ref="fullscreenButton" @click="handleFullscreen" class="flex items-center justify-center w-10 h-10 duration-150 ease-out scale-90 opacity-80 hover:opacity-100 hover:scale-100" type="button">
-						<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.72685 5C5.77328 5 5 5.77318 5 6.72727V9C5 9.55228 4.55228 10 4 10C3.44772 10 3 9.55228 3 9V6.72727C3 4.6689 4.66842 3 6.72685 3H9C9.55228 3 10 3.44772 10 4C10 4.55228 9.55228 5 9 5H6.72685ZM14 4C14 3.44772 14.4477 3 15 3H17.2727C19.3312 3 21 4.66876 21 6.72727V9C21 9.55228 20.5523 10 20 10C19.4477 10 19 9.55228 19 9V6.72727C19 5.77333 18.2267 5 17.2727 5H15C14.4477 5 14 4.55228 14 4ZM4 14C4.55228 14 5 14.4477 5 15V17.2727C5 18.2268 5.77328 19 6.72685 19H9C9.55228 19 10 19.4477 10 20C10 20.5523 9.55228 21 9 21H6.72685C4.66842 21 3 19.3311 3 17.2727V15C3 14.4477 3.44772 14 4 14ZM20 14C20.5523 14 21 14.4477 21 15V17.2727C21 19.3312 19.3312 21 17.2727 21H15C14.4477 21 14 20.5523 14 20C14 19.4477 14.4477 19 15 19H17.2727C18.2267 19 19 18.2267 19 17.2727V15C19 14.4477 19.4477 14 20 14Z" fill="currentColor"></path></svg>
-					</button>
-				</div>
-			</div>
-			<div
-				x-show="controls"
-				@click="resetControlsTimeout"
-				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="absolute bottom-0 left-0 z-40 w-full h-12"
-				x-cloak
-			>
-				<div class="absolute bottom-0 z-30 w-full px-2.5 -translate-y-8">
-					<div class="relative w-full h-1 rounded-full">
-						<input
-							x-ref="videoProgress"
-							@click="timelineClicked"
-							@input="timelineSeek(event)"
-							type="range"
-							min="0"
-							max="100"
-							value="0"
-							step="any"
-							class="w-full h-full appearance-none flex items-center cursor-pointer bg-transparent z-30
-                            [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:w-1.5 [&::-webkit-slider-thumb]:h-1.5 [&::-webkit-slider-thumb]:appearance-none
-                            [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:w-1.5 [&::-moz-range-thumb]:h-1.5 [&::-moz-range-thumb]:appearance-none
-                            [&::-ms-thumb]:bg-white [&::-ms-thumb]:rounded-full [&::-ms-thumb]:border-0 [&::-ms-thumb]:w-1.5 [&::-ms-thumb]:h-1.5 [&::-ms-thumb]:appearance-none
-                            [&::-webkit-slider-runnable-track]:bg-white [&::-webkit-slider-runnable-track]:bg-opacity-30 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:overflow-hidden [&::-moz-range-track]:bg-neutral-200 [&::-moz-range-track]:rounded-full [&::-ms-track]:bg-neutral-200 [&::-ms-track]:rounded-full
-                            [&::-moz-range-progress]:bg-blue-600 [&::-moz-range-progress]:rounded-full [&::-ms-fill-lower]:bg-blue-600 [&::-ms-fill-lower]:rounded-full [&::-webkit-slider-thumb]:shadow-[-995px_0px_0px_990px_#2463eb]
-                    "
-						/>
-					</div>
-				</div>
-				<div class="absolute bottom-0 left-0 z-20 flex items-center w-full h-8 text-white">
-					<div x-show="showTime" class="flex items-center justify-between w-full mx-3 font-mono text-xs opacity-80 hover:opacity-100" x-cloak>
-						<time x-ref="timeElapsed" x-text="timeElapsedString">00:00</time>
-						<time x-ref="timeDuration" x-text="timeDurationString">00:00</time>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-}

pkg/nebula/components/home/footer.templ

@@ -1,6 +1,6 @@
 package home
 
-templ MarketingFooter() {
+templ Footer() {
 	<!-- Site footer -->
 	<footer>
 		<div class="max-w-5xl mx-auto px-4 sm:px-6">

pkg/nebula/components/home/footer_templ.go

@@ -8,7 +8,7 @@ package home
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
-func MarketingFooter() templ.Component {
+func Footer() templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {

pkg/nebula/components/home/header.templ

@@ -1,6 +1,6 @@
 package home
 
-templ MarketingHeader() {
+templ Header() {
 	<!-- Site header -->
 	<header class="absolute top-2 md:top-6 w-full z-30">
 		<div class="px-4 sm:px-6">
@@ -18,7 +18,7 @@ templ MarketingHeader() {
 						<!-- 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>
+								<div class="text-sm cursor-pointer font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition" hx-swap="afterend" hx-get="/login">Log in</div>
 							</li>
 							<li class="ml-1">
 								<div class="btn-sm text-zinc-100 cursor-pointer bg-zinc-900 hover:bg-zinc-800 w-full shadow" hx-swap="afterend" hx-get="/register">Register</div>

pkg/nebula/components/home/header_templ.go

@@ -8,7 +8,7 @@ package home
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
-func MarketingHeader() templ.Component {
+func Header() templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -29,7 +29,7 @@ func MarketingHeader() 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 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\"><div class=\"btn-sm text-zinc-100 cursor-pointer bg-zinc-900 hover:bg-zinc-800 w-full shadow\" hx-swap=\"afterend\" hx-get=\"/register\">Register</div></li></ul></nav></div></div></div></header>")
+		_, 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><div class=\"text-sm cursor-pointer font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition\" hx-swap=\"afterend\" hx-get=\"/login\">Log in</div></li><li class=\"ml-1\"><div class=\"btn-sm text-zinc-100 cursor-pointer bg-zinc-900 hover:bg-zinc-800 w-full shadow\" hx-swap=\"afterend\" hx-get=\"/register\">Register</div></li></ul></nav></div></div></div></header>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

pkg/nebula/components/home/hero.templ

@@ -1,6 +1,9 @@
 package home
 
-import "github.com/onsonr/sonr/pkg/nebula/models"
+import (
+	"github.com/onsonr/sonr/pkg/nebula/components/ui"
+	"github.com/onsonr/sonr/pkg/nebula/models"
+)
 
 templ SectionHero(hero *models.Hero) {
 	<!-- Hero -->
@@ -24,12 +27,8 @@ templ SectionHero(hero *models.Hero) {
 							{ 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 cursor-pointer text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow" hx-swap="afterend" hx-get={ hero.PrimaryButton.Href }>{ hero.PrimaryButton.Text }</div>
-							</div>
-							<div>
-								<div class="btn cursor-pointer text-zinc-600 bg-white hover:text-zinc-900 w-full shadow" hx-swap="afterend" hx-get={ hero.SecondaryButton.Href }>{ hero.SecondaryButton.Text }</div>
-							</div>
+							@ui.PrimaryButton(hero.PrimaryButton.Href, hero.PrimaryButton.Text)
+							@ui.SecondaryButton(hero.SecondaryButton.Href, hero.SecondaryButton.Text)
 						</div>
 					</div>
 				</div>
@@ -42,9 +41,9 @@ templ SectionHero(hero *models.Hero) {
 
 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">
+	<div class="max-w-5xl motion-preset-slide-up 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"
+			class="rounded-lg "
 			src={ hero.Image.Src }
 			width={ hero.Image.Width }
 			height={ hero.Image.Height }

pkg/nebula/components/home/hero_templ.go

@@ -8,7 +8,10 @@ package home
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
-import "github.com/onsonr/sonr/pkg/nebula/models"
+import (
+	"github.com/onsonr/sonr/pkg/nebula/components/ui"
+	"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) {
@@ -38,7 +41,7 @@ func SectionHero(hero *models.Hero) templ.Component {
 		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}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 17, Col: 24}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -51,7 +54,7 @@ func SectionHero(hero *models.Hero) templ.Component {
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(hero.TitleEmphasis)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 16, Col: 28}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 19, Col: 28}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -64,7 +67,7 @@ func SectionHero(hero *models.Hero) templ.Component {
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(hero.TitleSecond)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 21, Col: 25}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 24, Col: 25}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -77,65 +80,25 @@ func SectionHero(hero *models.Hero) templ.Component {
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(hero.Subtitle)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 24, Col: 22}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 27, 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><div class=\"btn cursor-pointer text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow\" hx-swap=\"afterend\" hx-get=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p><div class=\"max-w-xs mx-auto sm:max-w-none sm:inline-flex sm:justify-center space-y-4 sm:space-y-0 sm:space-x-4\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var6 string
-		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(hero.PrimaryButton.Href)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 28, Col: 149}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		templ_7745c5c3_Err = ui.PrimaryButton(hero.PrimaryButton.Href, hero.PrimaryButton.Text).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		templ_7745c5c3_Err = ui.SecondaryButton(hero.SecondaryButton.Href, hero.SecondaryButton.Text).Render(ctx, templ_7745c5c3_Buffer)
 		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: 177}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div><div class=\"btn cursor-pointer text-zinc-600 bg-white hover:text-zinc-900 w-full shadow\" hx-swap=\"afterend\" hx-get=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var8 string
-		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(hero.SecondaryButton.Href)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 31, Col: 150}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
-		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: 180}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -171,21 +134,21 @@ func heroImage(hero *models.Hero) templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var10 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var10 == nil {
-			templ_7745c5c3_Var10 = templ.NopComponent
+		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var6 == nil {
+			templ_7745c5c3_Var6 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Image --><div class=\"max-w-5xl 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=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Image --><div class=\"max-w-5xl motion-preset-slide-up 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)
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hero.Image.Src)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 48, Col: 23}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 47, Col: 23}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -193,12 +156,12 @@ func heroImage(hero *models.Hero) templ.Component {
 		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)
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(hero.Image.Width)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 49, Col: 27}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 48, Col: 27}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -206,12 +169,12 @@ func heroImage(hero *models.Hero) templ.Component {
 		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)
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hero.Image.Height)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 50, Col: 29}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/home/hero.templ`, Line: 49, Col: 29}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -239,9 +202,9 @@ func stats() templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var14 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var14 == nil {
-			templ_7745c5c3_Var14 = templ.NopComponent
+		templ_7745c5c3_Var10 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var10 == nil {
+			templ_7745c5c3_Var10 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Stats --><div class=\"max-w-4xl mx-auto px-4 sm:px-6 justify-center items-center\"><div class=\"max-w-sm mx-auto grid gap-12 sm:grid-cols-2 md:grid-cols-4 md:-mx-5 md:gap-0 items-end md:max-w-none\"><!-- 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>")

pkg/nebula/components/home/highlights.templ

@@ -144,14 +144,6 @@ templ Highlights() {
 										height="360"
 										alt="Feature 01"
 									/>
-									<img
-										class="absolute top-0 left-full mix-blend-exclusion -translate-x-[70%] -mr-20 max-md:w-[45%]"
-										src="https://cdn.sonr.id/img/secure-keys.svg"
-										width="224"
-										height="224"
-										alt="Illustration"
-										aria-hidden="true"
-									/>
 								</div>
 							</div>
 							<!-- Item 2 -->
@@ -173,14 +165,6 @@ templ Highlights() {
 										height="360"
 										alt="Feature 02"
 									/>
-									<img
-										class="absolute top-0 left-full mix-blend-exclusion -translate-x-[70%] -mr-20 max-md:w-[45%]"
-										src="https://cdn.sonr.id/img/secure-keys.svg"
-										width="224"
-										height="224"
-										alt="Illustration"
-										aria-hidden="true"
-									/>
 								</div>
 							</div>
 							<!-- Item 3 -->
@@ -202,14 +186,6 @@ templ Highlights() {
 										height="360"
 										alt="Feature 03"
 									/>
-									<img
-										class="absolute top-0 left-full mix-blend-exclusion -translate-x-[70%] -mr-20 max-md:w-[45%]"
-										src="https://cdn.sonr.id/img/secure-keys.svg"
-										width="224"
-										height="224"
-										alt="Illustration"
-										aria-hidden="true"
-									/>
 								</div>
 							</div>
 							<!-- Item 4 -->
@@ -231,14 +207,6 @@ templ Highlights() {
 										height="360"
 										alt="Feature 04"
 									/>
-									<img
-										class="absolute top-0 left-full mix-blend-exclusion -translate-x-[70%] -mr-20 max-md:w-[45%]"
-										src="https://cdn.sonr.id/img/secure-keys.svg"
-										width="224"
-										height="224"
-										alt="Illustration"
-										aria-hidden="true"
-									/>
 								</div>
 							</div>
 						</div>

pkg/nebula/components/home/view.templ

@@ -5,15 +5,15 @@ import (
 	"github.com/onsonr/sonr/pkg/nebula/models"
 )
 
-templ View(hero *models.Hero) {
+templ View(home *models.Home) {
 	@blocks.LayoutNoBody("Sonr.ID", true) {
-		@MarketingHeader()
-		@SectionHero(hero)
+		@Header()
+		@SectionHero(home.Hero)
 		@Highlights()
 		@Features()
 		@Bento()
 		@Lowlights()
 		@CallToAction()
-		@MarketingFooter()
+		@Footer()
 	}
 }

pkg/nebula/components/home/view_templ.go

@@ -13,7 +13,7 @@ import (
 	"github.com/onsonr/sonr/pkg/nebula/models"
 )
 
-func View(hero *models.Hero) templ.Component {
+func View(home *models.Home) 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 {
@@ -46,7 +46,7 @@ func View(hero *models.Hero) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = MarketingHeader().Render(ctx, templ_7745c5c3_Buffer)
+			templ_7745c5c3_Err = Header().Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -54,7 +54,7 @@ func View(hero *models.Hero) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = SectionHero(hero).Render(ctx, templ_7745c5c3_Buffer)
+			templ_7745c5c3_Err = SectionHero(home.Hero).Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -102,7 +102,7 @@ func View(hero *models.Hero) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = MarketingFooter().Render(ctx, templ_7745c5c3_Buffer)
+			templ_7745c5c3_Err = Footer().Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}

pkg/nebula/components/login/modal.templ

@@ -16,7 +16,6 @@ templ Modal(c echo.Context) {
     "
 		@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"

pkg/nebula/components/login/view.templ

@@ -11,7 +11,6 @@ templ View(c echo.Context) {
 			@blocks.H1("Sonr.ID")
 			@blocks.Text("Neo-tree is a file manager for NeoFS.")
 			@blocks.Spacer()
-			@blocks.RadioGroup()
 			@blocks.Spacer()
 			@blocks.Button(blocks.GET("/", "#login-view")) {
 				@blocks.Text("Cancel")

pkg/nebula/components/login/view_templ.go

@@ -82,14 +82,6 @@ func View(c echo.Context) templ.Component {
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = blocks.RadioGroup().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 = blocks.Spacer().Render(ctx, templ_7745c5c3_Buffer)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err

pkg/nebula/components/profile/view.templ

@@ -9,7 +9,6 @@ templ View(c echo.Context) {
 	@blocks.Layout("Sonr.ID", true) {
 		@blocks.Card("profile-view", blocks.SizeLarge) {
 			@blocks.ProfileCard()
-			@blocks.Tabs()
 		}
 	}
 }

pkg/nebula/components/profile/view_templ.go

@@ -62,14 +62,6 @@ func View(c echo.Context) templ.Component {
 				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 = blocks.Tabs().Render(ctx, templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
 				return templ_7745c5c3_Err
 			})
 			templ_7745c5c3_Err = blocks.Card("profile-view", blocks.SizeLarge).Render(templ.WithChildren(ctx, templ_7745c5c3_Var3), templ_7745c5c3_Buffer)

pkg/nebula/components/register/modal.templ

@@ -3,13 +3,12 @@ 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"
+		@keydown.escape="modalOpen=false"
 		:class="{ 'z-40': modalOpen }"
 		class="relative w-auto h-auto"
 	>
@@ -47,7 +46,7 @@ templ Modal(c echo.Context) {
 						<p>Enter your account information below to create your account.</p>
 					</div>
 					@blocks.Breadcrumbs()
-					@basicInfoForm(formstate.Initial)
+					@basicInfoForm()
 					@blocks.Spacer()
 					<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">Cancel</button>

pkg/nebula/components/register/modal_templ.go

@@ -11,7 +11,6 @@ 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 {
@@ -35,7 +34,7 @@ func Modal(c echo.Context) templ.Component {
 			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\"><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-zinc-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\">Account Registration</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-zinc-600 rounded-full hover:text-zinc-800 hover:bg-zinc-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>Enter your account information below to create your account.</p></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div x-data=\"{ modalOpen: true }\" @keydown.escape=\"modalOpen=false\" :class=\"{ &#39;z-40&#39;: modalOpen }\" class=\"relative w-auto h-auto\"><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-zinc-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\">Account Registration</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-zinc-600 rounded-full hover:text-zinc-800 hover:bg-zinc-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>Enter your account information below to create your account.</p></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -43,7 +42,7 @@ func Modal(c echo.Context) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = basicInfoForm(formstate.Initial).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = basicInfoForm().Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

pkg/nebula/components/register/view.templ

@@ -1,31 +1,11 @@
 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 View(c echo.Context) {
-	@blocks.Layout("Sonr.ID", true) {
-		@blocks.Card("register-view", blocks.SizeMedium) {
-			@blocks.Spacer()
-			@blocks.Breadcrumbs()
-			@basicInfoForm(formstate.Initial)
-			@blocks.Spacer()
-		}
-	}
-}
-
-templ basicInfoForm(state formstate.FormState) {
-	switch (state) {
-		default:
-			<div class="border rounded-lg shadow-sm bg-card text-zinc-900">
-				<div class="flex flex-col space-y-1.5 p-6"></div>
-				<div class="p-6 pt-0 space-y-2">
-					<div class="space-y-1"><label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">Name</label><input type="text" id="name" placeholder="Adam Wathan" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/></div>
-					<div class="space-y-1"><label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="username">Handle</label><input type="text" id="handle" placeholder="angelo.snr" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/></div>
-				</div>
-			</div>
-	}
+templ basicInfoForm() {
+	<div class="border rounded-lg shadow-sm bg-card text-zinc-900">
+		<div class="flex flex-col space-y-1.5 p-6"></div>
+		<div class="p-6 pt-0 space-y-2">
+			<div class="space-y-1"><label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">Name</label><input type="text" id="name" placeholder="Adam Wathan" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/></div>
+			<div class="space-y-1"><label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="username">Handle</label><input type="text" id="handle" placeholder="angelo.snr" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/></div>
+		</div>
+	</div>
 }

pkg/nebula/components/register/view_templ.go

@@ -8,13 +8,7 @@ package register
 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 View(c echo.Context) templ.Component {
+func basicInfoForm() 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 {
@@ -35,67 +29,7 @@ func View(c echo.Context) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var2 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
-			templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
-			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-			if !templ_7745c5c3_IsBuffer {
-				defer func() {
-					templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-					if templ_7745c5c3_Err == nil {
-						templ_7745c5c3_Err = templ_7745c5c3_BufErr
-					}
-				}()
-			}
-			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Var3 := 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.Spacer().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 = blocks.Breadcrumbs().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 = basicInfoForm(formstate.Initial).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 = blocks.Spacer().Render(ctx, templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				return templ_7745c5c3_Err
-			})
-			templ_7745c5c3_Err = blocks.Card("register-view", blocks.SizeMedium).Render(templ.WithChildren(ctx, templ_7745c5c3_Var3), templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			return templ_7745c5c3_Err
-		})
-		templ_7745c5c3_Err = blocks.Layout("Sonr.ID", true).Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"border rounded-lg shadow-sm bg-card text-zinc-900\"><div class=\"flex flex-col space-y-1.5 p-6\"></div><div class=\"p-6 pt-0 space-y-2\"><div class=\"space-y-1\"><label class=\"text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"name\">Name</label><input type=\"text\" id=\"name\" placeholder=\"Adam Wathan\" class=\"flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50\"></div><div class=\"space-y-1\"><label class=\"text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"username\">Handle</label><input type=\"text\" id=\"handle\" placeholder=\"angelo.snr\" class=\"flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50\"></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -103,36 +37,4 @@ func View(c echo.Context) 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 {
-			return templ_7745c5c3_CtxErr
-		}
-		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
-		if !templ_7745c5c3_IsBuffer {
-			defer func() {
-				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
-				if templ_7745c5c3_Err == nil {
-					templ_7745c5c3_Err = templ_7745c5c3_BufErr
-				}
-			}()
-		}
-		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var4 == nil {
-			templ_7745c5c3_Var4 = templ.NopComponent
-		}
-		ctx = templ.ClearChildren(ctx)
-		switch state {
-		default:
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"border rounded-lg shadow-sm bg-card text-zinc-900\"><div class=\"flex flex-col space-y-1.5 p-6\"></div><div class=\"p-6 pt-0 space-y-2\"><div class=\"space-y-1\"><label class=\"text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"name\">Name</label><input type=\"text\" id=\"name\" placeholder=\"Adam Wathan\" class=\"flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50\"></div><div class=\"space-y-1\"><label class=\"text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"username\">Handle</label><input type=\"text\" id=\"handle\" placeholder=\"angelo.snr\" class=\"flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50\"></div></div></div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		return templ_7745c5c3_Err
-	})
-}
-
 var _ = templruntime.GeneratedTemplate

pkg/nebula/components/ui/button.templ

@@ -0,0 +1,13 @@
+package ui
+
+templ PrimaryButton(href string, text string) {
+	<div>
+		<div class="btn cursor-pointer text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow" hx-swap="afterend" hx-get={ href }>{ text }</div>
+	</div>
+}
+
+templ SecondaryButton(href string, text string) {
+	<div>
+		<div class="btn cursor-pointer text-zinc-600 bg-white hover:text-zinc-900 w-full shadow" hx-swap="afterend" hx-get={ href }>{ text }</div>
+	</div>
+}

pkg/nebula/components/ui/button_templ.go

@@ -0,0 +1,121 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.778
+package ui
+
+//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 PrimaryButton(href string, text string) 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><div class=\"btn cursor-pointer text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow\" hx-swap=\"afterend\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(href)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/ui/button.templ`, Line: 5, Col: 124}
+		}
+		_, 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("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(text)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/ui/button.templ`, Line: 5, Col: 133}
+		}
+		_, 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("</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func SecondaryButton(href string, text string) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div><div class=\"btn cursor-pointer text-zinc-600 bg-white hover:text-zinc-900 w-full shadow\" hx-swap=\"afterend\" hx-get=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(href)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/ui/button.templ`, Line: 11, Col: 123}
+		}
+		_, 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("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(text)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/ui/button.templ`, Line: 11, Col: 132}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+var _ = templruntime.GeneratedTemplate

pkg/nebula/models/Bento.pkl.go

@@ -0,0 +1,12 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Bento struct {
+	Title string `pkl:"title"`
+
+	Description string `pkl:"description"`
+
+	PrimaryButton *Button `pkl:"primaryButton"`
+
+	SecondaryButton *Button `pkl:"secondaryButton"`
+}

pkg/nebula/models/CallToAction.pkl.go

@@ -0,0 +1,12 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type CallToAction struct {
+	Title string `pkl:"title"`
+
+	Description string `pkl:"description"`
+
+	PrimaryButton *Button `pkl:"primaryButton"`
+
+	SecondaryButton *Button `pkl:"secondaryButton"`
+}

pkg/nebula/models/Feature.pkl.go

@@ -0,0 +1,12 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Feature struct {
+	Title string `pkl:"title"`
+
+	Description string `pkl:"description"`
+
+	Icon *string `pkl:"icon"`
+
+	Image *Image `pkl:"image"`
+}

pkg/nebula/models/Features.pkl.go

@@ -0,0 +1,10 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Features struct {
+	Title string `pkl:"title"`
+
+	Description string `pkl:"description"`
+
+	Image *Image `pkl:"image"`
+}

pkg/nebula/models/Form.pkl.go

@@ -0,0 +1,10 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Form interface {
+	GetTitle() string
+
+	GetDescription() string
+
+	GetInputs() []*Input
+}

pkg/nebula/models/Hero.pkl.go

@@ -15,4 +15,6 @@ type Hero struct {
 	SecondaryButton *Button `pkl:"secondaryButton"`
 
 	Image *Image `pkl:"image"`
+
+	Stats []*Stat `pkl:"stats"`
 }

pkg/nebula/models/Highlight.pkl.go

@@ -0,0 +1,10 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Highlight struct {
+	Title string `pkl:"title"`
+
+	Description string `pkl:"description"`
+
+	Image *Image `pkl:"image"`
+}

pkg/nebula/models/Highlights.pkl.go

@@ -0,0 +1,10 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Highlights struct {
+	Heading string `pkl:"heading"`
+
+	Subheading string `pkl:"subheading"`
+
+	Highlights []*Feature `pkl:"highlights"`
+}

pkg/nebula/models/Home.pkl.go

@@ -0,0 +1,6 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Home struct {
+	Hero *Hero `pkl:"hero"`
+}

pkg/nebula/models/Input.pkl.go

@@ -1,10 +1,12 @@
 // Code generated from Pkl module `models`. DO NOT EDIT.
 package models
 
+import "github.com/onsonr/sonr/pkg/nebula/models/inputtype"
+
 type Input struct {
 	Label string `pkl:"label"`
 
-	Type string `pkl:"type"`
+	Type inputtype.InputType `pkl:"type"`
 
 	Placeholder string `pkl:"placeholder"`
 
@@ -14,5 +16,5 @@ type Input struct {
 
 	Help *string `pkl:"help"`
 
-	Required bool `pkl:"required"`
+	Required *bool `pkl:"required"`
 }

pkg/nebula/models/Lowlights.pkl.go

@@ -0,0 +1,10 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Lowlights struct {
+	Title string `pkl:"title"`
+
+	Description string `pkl:"description"`
+
+	Image *Image `pkl:"image"`
+}

pkg/nebula/models/Models.pkl.go

@@ -8,9 +8,7 @@ import (
 )
 
 type Models struct {
-	Hero *Hero `pkl:"hero"`
-
-	Stats *Stats `pkl:"stats"`
+	Home *Home `pkl:"home"`
 }
 
 // LoadFromPath loads the pkl module at the given path and evaluates it into a Models

pkg/nebula/models/RegisterFormData.pkl.go

@@ -0,0 +1,28 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type RegisterFormData interface {
+	Form
+}
+
+var _ RegisterFormData = (*RegisterFormDataImpl)(nil)
+
+type RegisterFormDataImpl struct {
+	Title string `pkl:"title"`
+
+	Description string `pkl:"description"`
+
+	Inputs []*Input `pkl:"inputs"`
+}
+
+func (rcv *RegisterFormDataImpl) GetTitle() string {
+	return rcv.Title
+}
+
+func (rcv *RegisterFormDataImpl) GetDescription() string {
+	return rcv.Description
+}
+
+func (rcv *RegisterFormDataImpl) GetInputs() []*Input {
+	return rcv.Inputs
+}

pkg/nebula/models/RegistrationForm.pkl.go

@@ -1,14 +0,0 @@
-// 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/formstate/FormState.pkl.go

@@ -1,40 +0,0 @@
-// 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

@@ -5,13 +5,14 @@ import "github.com/apple/pkl-go/pkl"
 
 func init() {
 	pkl.RegisterMapping("models", Models{})
+	pkl.RegisterMapping("models#Home", Home{})
 	pkl.RegisterMapping("models#Hero", Hero{})
 	pkl.RegisterMapping("models#Button", Button{})
 	pkl.RegisterMapping("models#Image", Image{})
-	pkl.RegisterMapping("models#Stats", Stats{})
+	pkl.RegisterMapping("models#Stat", Stat{})
+	pkl.RegisterMapping("models#Input", Input{})
 	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{})
+	pkl.RegisterMapping("models#Feature", Feature{})
+	pkl.RegisterMapping("models#Highlights", Highlights{})
 }

pkg/nebula/models/inputtype/InputType.pkl.go

@@ -0,0 +1,43 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package inputtype
+
+import (
+	"encoding"
+	"fmt"
+)
+
+type InputType string
+
+const (
+	Text       InputType = "text"
+	Password   InputType = "password"
+	Email      InputType = "email"
+	Credential InputType = "credential"
+	File       InputType = "file"
+)
+
+// String returns the string representation of InputType
+func (rcv InputType) String() string {
+	return string(rcv)
+}
+
+var _ encoding.BinaryUnmarshaler = new(InputType)
+
+// UnmarshalBinary implements encoding.BinaryUnmarshaler for InputType.
+func (rcv *InputType) UnmarshalBinary(data []byte) error {
+	switch str := string(data); str {
+	case "text":
+		*rcv = Text
+	case "password":
+		*rcv = Password
+	case "email":
+		*rcv = Email
+	case "credential":
+		*rcv = Credential
+	case "file":
+		*rcv = File
+	default:
+		return fmt.Errorf(`illegal: "%s" is not a valid InputType`, str)
+	}
+	return nil
+}

pkg/nebula/nebula.pkl

@@ -1,30 +1,37 @@
-amends "https://pkl.sh/uiux.pkl";
+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.svg";
-		width = "500";
-		height = "500";
+home = new Home {
+	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.svg";
+			width = "500";
+			height = "500";
+		};
+		stats {
+			new Stat {
+				value = "476K";
+				label = "Assets packed with power beyond your imagination.";
+			};
+			new Stat {
+				value = "1.44K";
+				label = "Assets packed with power beyond your imagination.";
+			};
+			new Stat {
+				value = "1.5M+";
+				label = "Assets packed with power beyond your imagination.";
+			}
+		};
 	};
 };
-
-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/package.json

@@ -11,11 +11,12 @@
     "watch": "bun run watch:ts & bun run watch:css"
   },
   "devDependencies": {
-    "htmx.org": "^1.9.12",
-    "alpinejs": "^3.14.1",
-    "@tailwindcss/typography": "^0.5.15",
     "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.15",
+    "alpinejs": "^3.14.1",
+    "htmx.org": "^1.9.12",
     "tailwindcss": "^3.3.0",
+    "tailwindcss-motion": "^0.3.0-beta",
     "typescript": "^4.9.0"
   },
   "dependencies": {

pkg/nebula/pages/grant.go

@@ -1,11 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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/login.go

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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/pages/utils.go

@@ -1,25 +0,0 @@
-package pages
-
-import (
-	"bytes"
-
-	"github.com/a-h/templ"
-	"github.com/labstack/echo/v4"
-)
-
-func echoResponse(c echo.Context, cmp templ.Component) error {
-	// Create a buffer to store the rendered HTML
-	buf := &bytes.Buffer{}
-	// Render the component to the buffer
-	err := cmp.Render(c.Request().Context(), buf)
-	if err != nil {
-		return err
-	}
-
-	// Set the content type
-	c.Response().Header().Set(echo.HeaderContentType, echo.MIMETextHTML)
-
-	// Write the buffered content to the response
-	_, err = c.Response().Write(buf.Bytes())
-	return err
-}

pkg/nebula/router/router.go

@@ -0,0 +1,67 @@
+package router
+
+import (
+	"bytes"
+
+	"github.com/a-h/templ"
+	"github.com/labstack/echo/v4"
+
+	"github.com/onsonr/sonr/pkg/nebula/components/grant"
+	"github.com/onsonr/sonr/pkg/nebula/components/home"
+	"github.com/onsonr/sonr/pkg/nebula/components/login"
+	"github.com/onsonr/sonr/pkg/nebula/components/profile"
+	"github.com/onsonr/sonr/pkg/nebula/components/register"
+	"github.com/onsonr/sonr/pkg/nebula/models"
+)
+
+// ╭───────────────────────────────────────────────────────────╮
+// │                  Marketing Pages                          │
+// ╰───────────────────────────────────────────────────────────╯
+
+func Home(c echo.Context) error {
+	mdls, err := models.GetModels()
+	if err != nil {
+		return err
+	}
+	return render(c, home.View(mdls.Home))
+}
+
+func Profile(c echo.Context) error {
+	return render(c, profile.View(c))
+}
+
+// ╭───────────────────────────────────────────────────────────╮
+// │                  Authentication Views                     │
+// ╰───────────────────────────────────────────────────────────╯
+func Authorize(c echo.Context) error {
+	return render(c, grant.View(c))
+}
+
+func Login(c echo.Context) error {
+	return render(c, login.Modal(c))
+}
+
+func Register(c echo.Context) error {
+	return render(c, register.Modal(c))
+}
+
+// ╭───────────────────────────────────────────────────────────╮
+// │                       Helper Methods                      │
+// ╰───────────────────────────────────────────────────────────╯
+
+func render(c echo.Context, cmp templ.Component) error {
+	// Create a buffer to store the rendered HTML
+	buf := &bytes.Buffer{}
+	// Render the component to the buffer
+	err := cmp.Render(c.Request().Context(), buf)
+	if err != nil {
+		return err
+	}
+
+	// Set the content type
+	c.Response().Header().Set(echo.HeaderContentType, echo.MIMETextHTML)
+
+	// Write the buffered content to the response
+	_, err = c.Response().Write(buf.Bytes())
+	return err
+}

pkg/nebula/router/state.go

@@ -0,0 +1,13 @@
+package router
+
+type Status string
+
+const (
+	StatusOK                  Status = "ok"
+	StatusError               Status = "error"
+	StatusNotFound            Status = "not-found"
+	StatusUnauthorized        Status = "unauthorized"
+	StatusForbidden           Status = "forbidden"
+	StatusInternalServerError Status = "internal-server-error"
+	StatusBadRequest          Status = "bad-request"
+)

pkg/nebula/tailwind.config.js

@@ -41,5 +41,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
+  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms"), require('tailwindcss-motion')],
 };

pkg/orm/schema.go

@@ -1,39 +1,39 @@
 package orm
 
-const SCHEMA_VERSION = 1
+import (
+	"reflect"
+	"strings"
+)
 
-func AccountSchema() string {
-	return "++, id, name, address, publicKey, chainCode, index, controller, createdAt"
+const SchemaVersion = 1
+
+func toCamelCase(s string) string {
+	if s == "" {
+		return s
+	}
+	if len(s) == 1 {
+		return strings.ToLower(s)
+	}
+	return strings.ToLower(s[:1]) + s[1:]
 }
 
-func AssetSchema() string {
-	return "++, id, name, symbol, decimals, chainCode, createdAt"
-}
+func GetSchema(structType interface{}) string {
+	t := reflect.TypeOf(structType)
+	if t.Kind() == reflect.Ptr {
+		t = t.Elem()
+	}
 
-func ChainSchema() string {
-	return "++, id, name, networkId, chainCode, createdAt"
-}
+	if t.Kind() != reflect.Struct {
+		return ""
+	}
 
-func CredentialSchema() string {
-	return "++, id, subject, controller, attestationType, origin, label, deviceId, credentialId, publicKey, transport, signCount, userPresent, userVerified, backupEligible, backupState, cloneWarning, createdAt, updatedAt"
-}
+	var fields []string
+	for i := 0; i < t.NumField(); i++ {
+		field := t.Field(i)
+		fieldName := toCamelCase(field.Name)
+		fields = append(fields, fieldName)
+	}
 
-func DIDSchema() string {
-	return "++, id, role, algorithm, encoding, curve, key_type, raw, jwk"
-}
-
-func JwkSchema() string {
-	return "++, kty, crv, x, y, n, e"
-}
-
-func GrantSchema() string {
-	return "++, subject, controller, origin, token, scopes, createdAt, updatedAt"
-}
-
-func KeyshareSchema() string {
-	return "++, id, data, role, createdAt, lastRefreshed"
-}
-
-func ProfileSchema() string {
-	return "++, id, subject, controller, originUri, publicMetadata, privateMetadata, createdAt, updatedAt"
+	// Add "++" at the beginning, separated by a comma
+	return "++, " + strings.Join(fields, ", ")
 }

pkl/UIUX.pkl

@@ -5,10 +5,21 @@ module models
 import "package://pkg.pkl-lang.org/pkl-go/pkl.golang@0.5.0#/go.pkl"
 
 // ╭───────────────────────────────────────────────────────────╮
-// │                  General Components                       │
+// │                      General State                        │
 // ╰───────────────────────────────────────────────────────────╯
 
-typealias FormState = "initial" | "error" | "success" | "warning"
+typealias InputType = "text" | "password" | "email" | "credential" | "file"
+
+class Button {
+	text: String
+	href: String
+}
+
+abstract class Form {
+	title: String
+	description: String
+	inputs: List<Input>
+}
 
 class Image {
 	src: String
@@ -16,6 +27,16 @@ class Image {
 	height: String
 }
 
+class Input {
+	label: String
+	type: InputType
+	placeholder: String
+	value: String?
+	error: String?
+	help: String?
+	required: Boolean?
+}
+
 class Link {
 	text: String
 	href: String
@@ -26,34 +47,26 @@ class SocialLink {
 	icon: String
 }
 
-class Button {
-	text: String
-	href: String
+// ╭───────────────────────────────────────────────────────────╮
+// │                         Data Models                       │
+// ╰───────────────────────────────────────────────────────────╯
+
+class Feature {
+	title: String
+	description: String
+	icon: String?
+	image: Image?
 }
 
-class Input {
+class Stat {
+	value: String	
 	label: String
-	type: String
-	placeholder: String
-	value: String?
-	error: String?
-	help: String?
-	required: Boolean
 }
 
 // ╭───────────────────────────────────────────────────────────╮
-// │                  Homepage Components                      │
+// │                  Homepage View Model                      │
 // ╰───────────────────────────────────────────────────────────╯
 
-class Stats {
-	firstValue: String	
-	firstLabel: String
-	secondValue: String
-	secondLabel: String
-	thirdValue: String
-	thirdLabel: String
-}
-
 class Hero {
 	titleFirst: String
 	titleEmphasis: String
@@ -62,29 +75,17 @@ class Hero {
   primaryButton: Button
   secondaryButton: Button
   image: Image
+  stats: Listing<Stat>
 }
 
-class Footer {
-	logo: Image
-	mediumLink: SocialLink
-	twitterLink: SocialLink
-	discordLink: SocialLink
-	githubLink: SocialLink
-	companyLinks: List<Link>
-	resourcesLinks: List<Link>
+class Highlights {
+	heading: String
+	subheading: String
+	highlights: Listing<Feature>
+}
+class Home {
+	hero: Hero
 }
 
-hero : Hero
-stats : Stats
-
-// ╭───────────────────────────────────────────────────────────╮
-// │                  Registration Components                  │
-// ╰───────────────────────────────────────────────────────────╯
-
-class RegistrationForm {
-	title: String
-	description: String
-	state: FormState
-	inputs: List<Input>
-}
+home : Home