feat: add homepage architecture section

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
-						sketches into an actual designs. No creating, no skills, no
-						reshaping.
+						{ arch.Subtitle }
 					</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
-								project specs and insights.
+								{ arch.Primary.Desc }
 							</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
-								designs with AI.
+								{ arch.Secondary.Desc }
 							</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
-								code/snippets.
+								{ arch.Tertiary.Desc }
 							</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. 
-								Authenticate users with PassKeys, Issue Crypto Wallets, Build 
-								Payment flows, Send Encrypted Messages - all on a single platform.
+								{ mission.Subtitle }
 							</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
-										images, and 3D assets in shared libraries.
+										{ mission.Experience.Desc }
 									</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
-										images, and 3D assets in shared libraries.
+										{ mission.Compliance.Desc }
 									</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
-										images, and 3D assets in shared libraries.
+										{ mission.Interoperability.Desc }
 									</div>
 								</div>
 							</button>