feat: add homepage architecture section

Taskfile.yml

@@ -11,7 +11,6 @@ tasks:
       GOOS: js
       GOARCH: wasm
     cmds:
-      - make assets-gen
       - go build -o build/app.wasm main.go
 
   hway:dev:

pkg/nebula/components/marketing/page.templ

@@ -9,6 +9,24 @@ import (
 	"log"
 )
 
+// ╭───────────────────────────────────────────────────────────╮
+// │                  Home Routes - Marketing                  │
+// ╰───────────────────────────────────────────────────────────╯
+
+func HomeRoute(c echo.Context) error {
+	s, err := ctx.GetHWAYContext(c)
+	if err != nil {
+		return err
+	}
+	log.Printf("Session ID: %s", s.ID())
+	return ctx.RenderTempl(c, View())
+}
+
+// ╭───────────────────────────────────────────────────────────╮
+// │                  Static Content Values                    │
+// ╰───────────────────────────────────────────────────────────╯
+
+// hero is the (1st) home page hero section
 var hero = &models.Hero{
 	TitleFirst:      "Simplified",
 	TitleEmphasis:   "self-custody",
@@ -29,70 +47,94 @@ var hero = &models.Hero{
 	},
 }
 
+// highlights is the (2nd) home page highlights section
 var highlights = &models.Highlights{
 	Heading:  "The Internet Rebuilt for You",
 	Subtitle: "Sonr is a comprehensive system for Identity Management which proteects users across their digital personas while providing Developers a cost-effective solution for decentralized authentication.",
 	Features: []*models.Feature{
 		{
-			Title: "∞-Factor Auth",
+			Title: "∞ Factor Auth",
 			Desc:  "Sonr is designed to work across all platforms and devices, building a encrypted and anonymous identity layer for each user on the internet.",
 			Icon:  nil,
 		},
 		{
-			Title: "Data Ownership",
+			Title: "Control Your Data",
 			Desc:  "Sonr leverages advanced cryptography to permit facilitating Wallet Operations directly on-chain, without the need for a centralized server.",
 			Icon:  nil,
 		},
 		{
-			Title: "Everyday Transactions",
+			Title: "Crypto Enabled",
 			Desc:  "Sonr follows the latest specifications from W3C, DIF, and ICF to essentially have an Interchain-Connected, Smart Account System - seamlessly authenticated with PassKeys.",
 			Icon:  nil,
 		},
 		{
-			Title: "Limitless Possibilities",
+			Title: "Works Everywhere",
-			Desc:  "Sonr is a proudly American Project which operates under the new Wyoming DUNA Legal Framework, ensuring the protection of your digital rights.",
+			Desc:  "Sonr anonymously associates your online identities with a Quantum-Resistant Vault which only you can access.",
 			Icon:  nil,
 		},
 	},
 }
 
+// mission is the (3rd) home page mission section
 var mission = &models.Mission{
 	Eyebrow:  "L1 Blockchain",
 	Heading:  "The Protocol for Decentralized Identity & Authentication",
 	Subtitle: "We're creating the Global Standard for Decentralized Identity. Authenticate users with PassKeys, Issue Crypto Wallets, Build Payment flows, Send Encrypted Messages - all on a single platform.",
 	Experience: &models.Feature{
-		Title: "Less is More",
+		Title: "UX First Approach",
 		Desc:  "Sonr is a comprehensive system for Identity Management which proteects users across their digital personas while providing Developers a cost-effective solution for decentralized authentication.",
 		Icon:  nil,
 	},
 	Compliance: &models.Feature{
-		Title: "Works where there's Internet",
+		Title: "Universal Interoperability",
 		Desc:  "Sonr is designed to work across all platforms and devices, building a encrypted and anonymous identity layer for each user on the internet.",
 		Icon:  nil,
 	},
 	Interoperability: &models.Feature{
-		Title: "American Made DUNA",
+		Title: "Made in the USA",
 		Desc:  "Sonr follows the latest specifications from W3C, DIF, and ICF to essentially have an Interchain-Connected, Smart Account System - seamlessly authenticated with PassKeys.",
 		Icon:  nil,
 	},
 }
 
-func HomeRoute(c echo.Context) error {
+// architecture is the (4th) home page architecture section
-	s, err := ctx.GetHWAYContext(c)
+var architecture = &models.Architecture{
-	if err != nil {
+	Heading:  "Onchain Security with Offchain Privacy",
-		return err
+	Subtitle: "Whenever you are ready, just hit publish to turn your site sketches into an actual designs. No creating, no skills, no reshaping.",
-	}
+	Primary: &models.Technology{
-	log.Printf("Session ID: %s", s.ID())
+		Title: "Decentralized Identity",
-	return ctx.RenderTempl(c, View())
+		Desc:  "Sonr leverages the latest specifications from W3C, DIF, and ICF to essentially have an Interchain-Connected, Smart Account System - seamlessly authenticated with PassKeys.",
+	},
+	Secondary: &models.Technology{
+		Title: "IPFS Vaults",
+		Desc:  "Completely distributed, encrypted, and decentralized storage for your data.",
+	},
+	Tertiary: &models.Technology{
+		Title: "Service Records",
+		Desc:  "On-chain validated services created by Developers for secure transmission of user data.",
+	},
+	Quaternary: &models.Technology{
+		Title: "Authentication & Authorization",
+		Desc:  "Sonr leverages decentralized Macaroons and Multi-Party Computation to provide a secure and decentralized authentication and authorization system.",
+	},
+	Quinary: &models.Technology{
+		Title: "First-Class Exchange",
+		Desc:  "Sonr integrates with the IBC protocol allowing for seamless integration with popular exchanges such as OKX, Binance, and Osmosis.",
+	},
 }
 
+// ╭─────────────────────────────────────────────────────────╮
+// │                  Final Rendering                        │
+// ╰─────────────────────────────────────────────────────────╯
+
+// View renders the home page
 templ View() {
 	@styles.LayoutNoBody("Sonr.ID", true) {
 		@sections.Header()
 		@sections.Hero(hero)
 		@sections.Highlights(highlights)
-		@sections.Mission()
+		@sections.Mission(mission)
-		@sections.Architecture()
+		@sections.Architecture(architecture)
 		@sections.Lowlights()
 		@sections.CallToAction()
 		@sections.Footer()

pkg/nebula/components/marketing/page_templ.go

@@ -17,6 +17,23 @@ import (
 	"log"
 )
 
+// ╭───────────────────────────────────────────────────────────╮
+// │                  Home Routes - Marketing                  │
+// ╰───────────────────────────────────────────────────────────╯
+
+func HomeRoute(c echo.Context) error {
+	s, err := ctx.GetHWAYContext(c)
+	if err != nil {
+		return err
+	}
+	log.Printf("Session ID: %s", s.ID())
+	return ctx.RenderTempl(c, View())
+}
+
+// ╭───────────────────────────────────────────────────────────╮
+// │                  Static Content Values                    │
+// ╰───────────────────────────────────────────────────────────╯
+
 var hero = &models.Hero{
 	TitleFirst:      "Simplified",
 	TitleEmphasis:   "self-custody",
@@ -42,23 +59,23 @@ var highlights = &models.Highlights{
 	Subtitle: "Sonr is a comprehensive system for Identity Management which proteects users across their digital personas while providing Developers a cost-effective solution for decentralized authentication.",
 	Features: []*models.Feature{
 		{
-			Title: "∞-Factor Auth",
+			Title: "∞ Factor Auth",
 			Desc:  "Sonr is designed to work across all platforms and devices, building a encrypted and anonymous identity layer for each user on the internet.",
 			Icon:  nil,
 		},
 		{
-			Title: "Data Ownership",
+			Title: "Control Your Data",
 			Desc:  "Sonr leverages advanced cryptography to permit facilitating Wallet Operations directly on-chain, without the need for a centralized server.",
 			Icon:  nil,
 		},
 		{
-			Title: "Everyday Transactions",
+			Title: "Crypto Enabled",
 			Desc:  "Sonr follows the latest specifications from W3C, DIF, and ICF to essentially have an Interchain-Connected, Smart Account System - seamlessly authenticated with PassKeys.",
 			Icon:  nil,
 		},
 		{
-			Title: "Limitless Possibilities",
+			Title: "Works Everywhere",
-			Desc:  "Sonr is a proudly American Project which operates under the new Wyoming DUNA Legal Framework, ensuring the protection of your digital rights.",
+			Desc:  "Sonr anonymously associates your online identities with a Quantum-Resistant Vault which only you can access.",
 			Icon:  nil,
 		},
 	},
@@ -79,21 +96,17 @@ var mission = &models.Mission{
 		Icon:  nil,
 	},
 	Interoperability: &models.Feature{
-		Title: "American Made DUNA",
+		Title: "Made in the USA",
 		Desc:  "Sonr follows the latest specifications from W3C, DIF, and ICF to essentially have an Interchain-Connected, Smart Account System - seamlessly authenticated with PassKeys.",
 		Icon:  nil,
 	},
 }
 
-func HomeRoute(c echo.Context) error {
+// ╭─────────────────────────────────────────────────────────╮
-	s, err := ctx.GetHWAYContext(c)
+// │                  Final Rendering                        │
-	if err != nil {
+// ╰─────────────────────────────────────────────────────────╯
-		return err
-	}
-	log.Printf("Session ID: %s", s.ID())
-	return ctx.RenderTempl(c, View())
-}
 
+// View renders the home page
 func View() templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@@ -151,7 +164,7 @@ func View() templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = sections.Mission().Render(ctx, templ_7745c5c3_Buffer)
+			templ_7745c5c3_Err = sections.Mission(mission).Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}

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

@@ -1,6 +1,8 @@
 package sections
 
-templ Architecture() {
+import models "github.com/onsonr/sonr/internal/orm/marketing"
+
+templ Architecture(arch *models.Architecture) {
 	<!-- Features #2 -->
 	<section>
 		<div class="py-12 md:py-20">
@@ -11,12 +13,10 @@ templ Architecture() {
 					<h2
 						class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4"
 					>
-						Onchain Security with Offchain Privacy
+						{ arch.Heading }
 					</h2>
 					<p class="text-lg text-zinc-500">
-						Whenever you are ready, just hit publish to turn your site
+						{ arch.Subtitle }
-						sketches into an actual designs. No creating, no skills, no
-						reshaping.
 					</p>
 				</div>
 				<div
@@ -38,12 +38,11 @@ templ Architecture() {
 									></path>
 								</svg>
 								<h3 class="font-inter-tight font-semibold text-zinc-900">
-									Decentralized Identity
+									{ arch.Primary.Title }
 								</h3>
 							</div>
 							<p class="grow max-w-md text-sm text-zinc-500">
-								Create teams and organize your designs into folders using
+								{ arch.Primary.Desc }
-								project specs and insights.
 							</p>
 						</div>
 						<figure>
@@ -72,12 +71,11 @@ templ Architecture() {
 									></path>
 								</svg>
 								<h3 class="font-inter-tight font-semibold text-zinc-900">
-									IPFS Vaults
+									{ arch.Secondary.Title }
 								</h3>
 							</div>
 							<p class="grow max-w-md text-sm text-zinc-500">
-								Generate images and explore new ways of presenting your
+								{ arch.Secondary.Desc }
-								designs with AI.
 							</p>
 						</div>
 						<figure>
@@ -106,12 +104,11 @@ templ Architecture() {
 									></path>
 								</svg>
 								<h3 class="font-inter-tight font-semibold text-zinc-900">
-									Service Records
+									{ arch.Tertiary.Title }
 								</h3>
 							</div>
 							<p class="grow max-w-md text-sm text-zinc-500">
-								Get your scenes inside your projects using simple embed
+								{ arch.Tertiary.Desc }
-								code/snippets.
 							</p>
 						</div>
 						<figure>
@@ -140,11 +137,11 @@ templ Architecture() {
 									></path>
 								</svg>
 								<h3 class="font-inter-tight font-semibold text-zinc-900">
-									Authentication & Authorization
+									{ arch.Quaternary.Title }
 								</h3>
 							</div>
 							<p class="grow max-w-md text-sm text-zinc-500">
-								Easily make drag and drop interactions without coding.
+								{ arch.Quaternary.Desc }
 							</p>
 						</div>
 						<figure>
@@ -173,11 +170,11 @@ templ Architecture() {
 									></path>
 								</svg>
 								<h3 class="font-inter-tight font-semibold text-zinc-900">
-									Decentralized Exchange
+									{ arch.Quinary.Title }
 								</h3>
 							</div>
 							<p class="grow max-w-md text-sm text-zinc-500">
-								Create tasks, projects, issues and more in just seconds.
+								{ arch.Quinary.Desc }
 							</p>
 						</div>
 						<figure>

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

@@ -1,6 +1,8 @@
 package sections
 
-templ Mission() {
+import models "github.com/onsonr/sonr/internal/orm/marketing"
+
+templ Mission(mission *models.Mission) {
 	<!-- Features #3 -->
 	<section
 		class="relative bg-zinc-800 after:absolute after:top-0 after:right-0 after:h-full after:w-96 after:pointer-events-none after:bg-gradient-to-l after:from-zinc-800 max-lg:after:hidden"
@@ -18,17 +20,15 @@ templ Mission() {
 							<div
 								class="inline-flex text-sm font-medium text-zinc-400 px-4 py-0.5 border border-transparent [background:linear-gradient(theme(colors.zinc.800),theme(colors.zinc.800))_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] rounded-full mb-4"
 							>
-								L1 Blockchain
+								{ mission.Eyebrow }
 							</div>
 							<h3
 								class="font-inter-tight text-3xl font-bold text-zinc-200 mb-4"
 							>
-								The Protocol for Decentralized Identity & Authentication
+								{ mission.Heading }
 							</h3>
 							<p class="text-lg text-zinc-500">
-								We're creating the Global Standard for Decentralized Identity. 
+								{ mission.Subtitle }
-								Authenticate users with PassKeys, Issue Crypto Wallets, Build 
-								Payment flows, Send Encrypted Messages - all on a single platform.
 							</p>
 						</div>
 						<!-- Tabs buttons -->
@@ -52,11 +52,10 @@ templ Mission() {
 									<div
 										class="font-inter-tight text-lg font-semibold text-zinc-200 mb-1"
 									>
-										Make designs feel real
+										{ mission.Experience.Title }
 									</div>
 									<div class="text-zinc-500">
-										Save time and keep things consistent with reusable
+										{ mission.Experience.Desc }
-										images, and 3D assets in shared libraries.
 									</div>
 								</div>
 							</button>
@@ -79,11 +78,10 @@ templ Mission() {
 									<div
 										class="font-inter-tight text-lg font-semibold text-zinc-200 mb-1"
 									>
-										Bring creatives closer
+										{ mission.Compliance.Title }
 									</div>
 									<div class="text-zinc-500">
-										Save time and keep things consistent with reusable
+										{ mission.Compliance.Desc }
-										images, and 3D assets in shared libraries.
 									</div>
 								</div>
 							</button>
@@ -106,11 +104,10 @@ templ Mission() {
 									<div
 										class="font-inter-tight text-lg font-semibold text-zinc-200 mb-1"
 									>
-										Scale and align your design team
+										{ mission.Interoperability.Title }
 									</div>
 									<div class="text-zinc-500">
-										Save time and keep things consistent with reusable
+										{ mission.Interoperability.Desc }
-										images, and 3D assets in shared libraries.
 									</div>
 								</div>
 							</button>