feat(marketing): refactor marketing page components

internal/orm/marketing/models.go

@@ -5,6 +5,16 @@ type Button struct {
 	Href string
 }
 
+type Image struct {
+	Src    string
+	Width  string
+	Height string
+}
+
+// ╭──────────────────────────────────────────────────────────╮
+// │                  Generic Models                          │
+// ╰──────────────────────────────────────────────────────────╯
+
 type Feature struct {
 	Title string
 	Desc  string
@@ -12,12 +22,6 @@ type Feature struct {
 	Image *Image
 }
 
-type Image struct {
-	Src    string
-	Width  string
-	Height string
-}
-
 type Stat struct {
 	Value string
 	Denom string

pkg/nebula/components/marketing/page.templ

@@ -3,7 +3,6 @@ package marketing
 import (
 	"github.com/labstack/echo/v4"
 	"github.com/onsonr/sonr/internal/ctx"
-	models "github.com/onsonr/sonr/internal/orm/marketing"
 	"github.com/onsonr/sonr/pkg/nebula/components/marketing/sections"
 	"github.com/onsonr/sonr/pkg/nebula/global/styles"
 	"log"
@@ -26,103 +25,6 @@ func HomeRoute(c echo.Context) error {
 // │                  Static Content Values                    │
 // ╰───────────────────────────────────────────────────────────╯
 
-// hero is the (1st) home page hero section
-var hero = &models.Hero{
-	TitleFirst:      "Simplified",
-	TitleEmphasis:   "self-custody",
-	TitleSecond:     "for everyone",
-	Subtitle:        "Sonr is a modern re-imagination of online user identity, empowering users to take ownership of their digital footprint and unlocking a new era of self-sovereignty.",
-	PrimaryButton:   &models.Button{Text: "Get Started", Href: "/register"},
-	SecondaryButton: &models.Button{Text: "Learn More", Href: "/about"},
-	Image: &models.Image{
-		Src:    "https://cdn.sonr.id/img/hero-clipped.svg",
-		Width:  "500",
-		Height: "500",
-	},
-	Stats: []*models.Stat{
-		{Value: "476", Label: "Assets packed with power beyond your imagiation.", Denom: "K"},
-		{Value: "1.44", Label: "Assets packed with power beyond your imagination.", Denom: "K"},
-		{Value: "1.5", Label: "Assets packed with power beyond your imagination.", Denom: "M+"},
-		{Value: "750", Label: "Assets packed with power beyond your imagination.", Denom: "K"},
-	},
-}
-
-// 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",
-			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: "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: "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: "Works Everywhere",
-			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: "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: "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: "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,
-	},
-}
-
-// architecture is the (4th) home page architecture section
-var architecture = &models.Architecture{
-	Heading:  "Onchain Security with Offchain Privacy",
-	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{
-		Title: "Decentralized Identity",
-		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                        │
 // ╰─────────────────────────────────────────────────────────╯
@@ -131,10 +33,10 @@ var architecture = &models.Architecture{
 templ View() {
 	@styles.LayoutNoBody("Sonr.ID", true) {
 		@sections.Header()
-		@sections.Hero(hero)
+		@sections.Hero()
-		@sections.Highlights(highlights)
+		@sections.Highlights()
-		@sections.Mission(mission)
+		@sections.Mission()
-		@sections.Architecture(architecture)
+		@sections.Architecture()
 		@sections.Lowlights()
 		@sections.CallToAction()
 		@sections.Footer()

pkg/nebula/components/marketing/page_templ.go

@@ -34,6 +34,7 @@ func HomeRoute(c echo.Context) error {
 // │                  Static Content Values                    │
 // ╰───────────────────────────────────────────────────────────╯
 
+// hero is the (1st) home page hero section
 var hero = &models.Hero{
 	TitleFirst:      "Simplified",
 	TitleEmphasis:   "self-custody",
@@ -54,6 +55,7 @@ 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.",
@@ -81,17 +83,18 @@ var highlights = &models.Highlights{
 	},
 }
 
+// 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,
 	},
@@ -102,6 +105,32 @@ var mission = &models.Mission{
 	},
 }
 
+// architecture is the (4th) home page architecture section
+var architecture = &models.Architecture{
+	Heading:  "Onchain Security with Offchain Privacy",
+	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{
+		Title: "Decentralized Identity",
+		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                        │
 // ╰─────────────────────────────────────────────────────────╯
@@ -172,7 +201,7 @@ func View() templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = sections.Architecture().Render(ctx, templ_7745c5c3_Buffer)
+			templ_7745c5c3_Err = sections.Architecture(architecture).Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}

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

@@ -2,7 +2,33 @@ package sections
 
 import models "github.com/onsonr/sonr/internal/orm/marketing"
 
-templ Architecture(arch *models.Architecture) {
+// architecture is the (4th) home page architecture section
+var arch = &models.Architecture{
+	Heading:  "Onchain Security with Offchain Privacy",
+	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{
+		Title: "Decentralized Identity",
+		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.",
+	},
+}
+
+templ Architecture() {
 	<!-- Features #2 -->
 	<section>
 		<div class="py-12 md:py-20">

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

@@ -1,5 +1,24 @@
 package sections
 
+import models "github.com/onsonr/sonr/internal/orm/marketing"
+
+var cta = &models.CallToAction{
+	Logo: &models.Image{
+		Src:    "https://cdn.sonr.id/logo-zinc.svg",
+		Width:  "60",
+		Height: "60",
+	},
+	Heading:  "Take control of your Identity",
+	Subtitle: "Sonr is a decentralized, permissionless, and censorship-resistant identity network.",
+	Primary: &models.Button{
+		Href: "request-demo.html",
+		Text: "Register",
+	},
+	Secondary: &models.Button{
+		Href: "#0",
+		Text: "Learn More",
+	},
+}
 
 templ CallToAction() {
 	<section>

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

@@ -6,7 +6,28 @@ import (
 	"github.com/onsonr/sonr/pkg/nebula/global/ui"
 )
 
-templ Hero(hero *models.Hero) {
+// hero is the (1st) home page hero section
+var hero = &models.Hero{
+	TitleFirst:      "Simplified",
+	TitleEmphasis:   "self-custody",
+	TitleSecond:     "for everyone",
+	Subtitle:        "Sonr is a modern re-imagination of online user identity, empowering users to take ownership of their digital footprint and unlocking a new era of self-sovereignty.",
+	PrimaryButton:   &models.Button{Text: "Get Started", Href: "/register"},
+	SecondaryButton: &models.Button{Text: "Learn More", Href: "/about"},
+	Image: &models.Image{
+		Src:    "https://cdn.sonr.id/img/hero-clipped.svg",
+		Width:  "500",
+		Height: "500",
+	},
+	Stats: []*models.Stat{
+		{Value: "476", Label: "Assets packed with power beyond your imagiation.", Denom: "K"},
+		{Value: "1.44", Label: "Assets packed with power beyond your imagination.", Denom: "K"},
+		{Value: "1.5", Label: "Assets packed with power beyond your imagination.", Denom: "M+"},
+		{Value: "750", Label: "Assets packed with power beyond your imagination.", Denom: "K"},
+	},
+}
+
+templ Hero() {
 	<!-- Hero -->
 	<section class="relative before:absolute before:inset-0 before:h-80 before:pointer-events-none before:bg-gradient-to-b before:from-zinc-100 before:-z-10">
 		<div class="pt-32 pb-12 md:pt-40 md:pb-20">

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

@@ -5,7 +5,35 @@ import (
 	models "github.com/onsonr/sonr/internal/orm/marketing"
 )
 
-templ Highlights(highlights *models.Highlights) {
+// 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",
+			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: "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: "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: "Works Everywhere",
+			Desc:  "Sonr anonymously associates your online identities with a Quantum-Resistant Vault which only you can access.",
+			Icon:  nil,
+		},
+	},
+}
+
+templ Highlights() {
 	<!-- Features -->
 	<section class="relative bg-zinc-50">
 		<div class="py-12 md:py-20">

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

@@ -2,7 +2,29 @@ package sections
 
 import models "github.com/onsonr/sonr/internal/orm/marketing"
 
-templ Mission(mission *models.Mission) {
+// 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: "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: "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: "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,
+	},
+}
+
+templ Mission() {
 	<!-- Features #3 -->
 	<section
 		class="relative bg-zinc-800 after:absolute after:top-0 after:right-0 after:h-full after:w-96 after:pointer-events-none after:bg-gradient-to-l after:from-zinc-800 max-lg:after:hidden"