feat: implement hero section using Pkl

cmd/motrd/proxy.go

@@ -26,7 +26,6 @@ func NewProxyCmd() *cobra.Command {
 			}
 
 			e.GET("/", pages.Home)
-			e.GET("/config", nebula.GetConfig)
 			e.GET("/allocate", pages.Profile)
 
 			if err := e.Start(":1323"); err != http.ErrServerClosed {

pkg/nebula/assets/config.pkl

@@ -1,2 +1,30 @@
-import "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 = "560";
+		height = "560;
+	};
+};
+
+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/components/sections/hero.templ

@@ -1,19 +1,8 @@
 package sections
 
-type Hero struct {
+import "github.com/onsonr/sonr/pkg/nebula/models"
-	TitleFirst    string
-	TitleEmphasis string
-	TitleSecond   string
-	Subtitle      string
 
-	PrimaryButtonText string
+templ SectionHero(hero *models.Hero) {
-	PrimaryButtonLink string
-
-	SecondaryButtonText string
-	SecondaryButtonLink string
-}
-
-templ SectionHero(hero Hero) {
 	<!-- Hero -->
 	<section class="relative before:absolute before:inset-0 before:h-80 before:pointer-events-none before:bg-gradient-to-b before:from-zinc-100 before:-z-10">
 		<div class="pt-32 pb-12 md:pt-40 md:pb-20">
@@ -36,29 +25,29 @@ templ SectionHero(hero Hero) {
 						</p>
 						<div class="max-w-xs mx-auto sm:max-w-none sm:inline-flex sm:justify-center space-y-4 sm:space-y-0 sm:space-x-4">
 							<div>
-								<a class="btn text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow" href={ templ.SafeURL(hero.PrimaryButtonLink) }>{ hero.PrimaryButtonText }</a>
+								<a class="btn text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow" href={ templ.SafeURL(hero.PrimaryButton.Href) }>{ hero.PrimaryButton.Text }</a>
 							</div>
 							<div>
-								<a class="btn text-zinc-600 bg-white hover:text-zinc-900 w-full shadow" href={ templ.SafeURL(hero.SecondaryButtonLink) }>{ hero.SecondaryButtonText }</a>
+								<a class="btn text-zinc-600 bg-white hover:text-zinc-900 w-full shadow" href={ templ.SafeURL(hero.SecondaryButton.Href) }>{ hero.SecondaryButton.Text }</a>
 							</div>
 						</div>
 					</div>
 				</div>
-				@heroImage()
+				@heroImage(hero)
 				@stats()
 			</div>
 		</div>
 	</section>
 }
 
-templ heroImage() {
+templ heroImage(hero *models.Hero) {
 	<!-- Image -->
 	<div class="max-w-5xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10 from-zinc-100 to-white">
 		<img
 			class="rounded-lg"
-			src="https://cdn.sonr.id/img/hero-clipped.svg"
+			src={ hero.Image.Src }
-			width="560"
+			width={ hero.Image.Width }
-			height="560"
+			height={ hero.Image.Height }
 			alt="Hero"
 		/>
 	</div>

pkg/nebula/components/sections/hero_templ.go

@@ -8,20 +8,9 @@ package sections
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
-type Hero struct {
+import "github.com/onsonr/sonr/pkg/nebula/models"
-	TitleFirst    string
-	TitleEmphasis string
-	TitleSecond   string
-	Subtitle      string
 
-	PrimaryButtonText string
+func SectionHero(hero *models.Hero) templ.Component {
-	PrimaryButtonLink string
-
-	SecondaryButtonText string
-	SecondaryButtonLink string
-}
-
-func SectionHero(hero Hero) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -49,7 +38,7 @@ func SectionHero(hero 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/sections/hero.templ`, Line: 25, Col: 24}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 14, Col: 24}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -62,7 +51,7 @@ func SectionHero(hero 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/sections/hero.templ`, Line: 27, Col: 28}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 16, Col: 28}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -75,7 +64,7 @@ func SectionHero(hero 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/sections/hero.templ`, Line: 32, Col: 25}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 21, Col: 25}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -88,7 +77,7 @@ func SectionHero(hero 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/sections/hero.templ`, Line: 35, Col: 22}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 24, Col: 22}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
@@ -98,7 +87,7 @@ func SectionHero(hero Hero) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var6 templ.SafeURL = templ.SafeURL(hero.PrimaryButtonLink)
+		var templ_7745c5c3_Var6 templ.SafeURL = templ.SafeURL(hero.PrimaryButton.Href)
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var6)))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -108,9 +97,9 @@ func SectionHero(hero Hero) templ.Component {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var7 string
-		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(hero.PrimaryButtonText)
+		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/sections/hero.templ`, Line: 39, Col: 152}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 28, Col: 154}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
@@ -120,7 +109,7 @@ func SectionHero(hero Hero) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var8 templ.SafeURL = templ.SafeURL(hero.SecondaryButtonLink)
+		var templ_7745c5c3_Var8 templ.SafeURL = templ.SafeURL(hero.SecondaryButton.Href)
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var8)))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -130,9 +119,9 @@ func SectionHero(hero Hero) templ.Component {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var9 string
-		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(hero.SecondaryButtonText)
+		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/sections/hero.templ`, Line: 42, Col: 155}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 31, Col: 157}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
@@ -142,7 +131,7 @@ func SectionHero(hero Hero) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = heroImage().Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = heroImage(hero).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -158,7 +147,7 @@ func SectionHero(hero Hero) templ.Component {
 	})
 }
 
-func heroImage() templ.Component {
+func heroImage(hero *models.Hero) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -179,7 +168,46 @@ func heroImage() templ.Component {
 			templ_7745c5c3_Var10 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Image --><div class=\"max-w-5xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10 from-zinc-100 to-white\"><img class=\"rounded-lg\" src=\"https://cdn.sonr.id/img/hero-clipped.svg\" width=\"560\" height=\"560\" alt=\"Hero\"></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Image --><div class=\"max-w-5xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10 from-zinc-100 to-white\"><img class=\"rounded-lg\" src=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(hero.Image.Src)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 48, Col: 23}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" width=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(hero.Image.Width)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 49, Col: 27}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" height=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 string
+		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(hero.Image.Height)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/nebula/components/sections/hero.templ`, Line: 50, Col: 29}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" alt=\"Hero\"></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -203,9 +231,9 @@ func stats() templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var11 := templ.GetChildren(ctx)
+		templ_7745c5c3_Var14 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var11 == nil {
+		if templ_7745c5c3_Var14 == nil {
-			templ_7745c5c3_Var11 = templ.NopComponent
+			templ_7745c5c3_Var14 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Stats --><div class=\"max-w-4xl mx-auto px-4 sm:px-6 justify-center items-center\"><div class=\"max-w-sm mx-auto grid gap-12 sm:grid-cols-2 md:grid-cols-4 md:-mx-5 md:gap-0 items-end md:max-w-none\"><!-- 1st item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(476)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 2nd item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(1.44)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 3rd item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(1.5)\" x-text=\"counterValue\">0</span>M+</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div></div>")

pkg/nebula/models/Footer.pkl.go

@@ -0,0 +1,12 @@
+// Code generated from Pkl module `models`. DO NOT EDIT.
+package models
+
+type Footer struct {
+	Logo *Image `pkl:"logo"`
+
+	SocialLinks []*SocialLink `pkl:"socialLinks"`
+
+	CompanyLinks []*Link `pkl:"companyLinks"`
+
+	ResourcesLinks []*Link `pkl:"resourcesLinks"`
+}

pkg/nebula/models/Image.pkl.go

@@ -4,7 +4,7 @@ package models
 type Image struct {
 	Src string `pkl:"src"`
 
-	Width int `pkl:"width"`
+	Width string `pkl:"width"`
 
-	Height int `pkl:"height"`
+	Height string `pkl:"height"`
 }

pkg/nebula/models/Models.pkl.go

@@ -8,6 +8,7 @@ import (
 )
 
 type Models struct {
+	Hero *Hero `pkl:"hero"`
 }
 
 // LoadFromPath loads the pkl module at the given path and evaluates it into a Models
@@ -26,22 +27,6 @@ func LoadFromPath(ctx context.Context, path string) (ret *Models, err error) {
 	return ret, err
 }
 
-// LoadFromURL loads the pkl module at the given URL and evaluates it into a Models
-func LoadFromURL(ctx context.Context, url string) (ret *Models, err error) {
-	evaluator, err := pkl.NewEvaluator(ctx, pkl.PreconfiguredOptions)
-	if err != nil {
-		return nil, err
-	}
-	defer func() {
-		cerr := evaluator.Close()
-		if err == nil {
-			err = cerr
-		}
-	}()
-	ret, err = Load(ctx, evaluator, pkl.UriSource(url))
-	return ret, err
-}
-
 // Load loads the pkl module at the given source and evaluates it with the given evaluator into a Models
 func Load(ctx context.Context, evaluator pkl.Evaluator, source *pkl.ModuleSource) (*Models, error) {
 	var ret Models

pkg/nebula/models/common.go

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

pkg/nebula/models/init.pkl.go

@@ -5,10 +5,11 @@ import "github.com/apple/pkl-go/pkl"
 
 func init() {
 	pkl.RegisterMapping("models", Models{})
+	pkl.RegisterMapping("models#Hero", Hero{})
+	pkl.RegisterMapping("models#Button", Button{})
 	pkl.RegisterMapping("models#Image", Image{})
+	pkl.RegisterMapping("models#Stat", Stat{})
 	pkl.RegisterMapping("models#Link", Link{})
 	pkl.RegisterMapping("models#SocialLink", SocialLink{})
-	pkl.RegisterMapping("models#Button", Button{})
+	pkl.RegisterMapping("models#Footer", Footer{})
-	pkl.RegisterMapping("models#Stat", Stat{})
-	pkl.RegisterMapping("models#Hero", Hero{})
 }

pkg/nebula/models/marketing.go

@@ -1 +0,0 @@
-package models

pkg/nebula/nebula.go

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

pkg/nebula/pages/home.templ

@@ -4,23 +4,18 @@ import (
 	"github.com/labstack/echo/v4"
 	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
 	"github.com/onsonr/sonr/pkg/nebula/components/sections"
+	"github.com/onsonr/sonr/pkg/nebula/models"
 )
 
 func Home(c echo.Context) error {
-	hero := sections.Hero{
+	mdls, err := models.GetModels()
-		TitleFirst:          "Simplified",
+	if err != nil {
-		TitleEmphasis:       "self-custody",
+		return err
-		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.",
-		PrimaryButtonText:   "Get Started",
-		PrimaryButtonLink:   "/register",
-		SecondaryButtonText: "Learn More",
-		SecondaryButtonLink: "/about",
 	}
-	return echoResponse(c, homeView(hero))
+	return echoResponse(c, homeView(mdls.Hero))
 }
 
-templ homeView(hero sections.Hero) {
+templ homeView(hero *models.Hero) {
 	@blocks.LayoutNoBody("Sonr.ID", true) {
 		@sections.HeaderMarketingNav()
 		@sections.SectionHero(hero)

pkg/nebula/pages/home_templ.go

@@ -12,23 +12,18 @@ import (
 	"github.com/labstack/echo/v4"
 	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
 	"github.com/onsonr/sonr/pkg/nebula/components/sections"
+	"github.com/onsonr/sonr/pkg/nebula/models"
 )
 
 func Home(c echo.Context) error {
-	hero := sections.Hero{
+	mdls, err := models.GetModels()
-		TitleFirst:          "Simplified",
+	if err != nil {
-		TitleEmphasis:       "self-custody",
+		return err
-		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.",
-		PrimaryButtonText:   "Get Started",
-		PrimaryButtonLink:   "/register",
-		SecondaryButtonText: "Learn More",
-		SecondaryButtonLink: "/about",
 	}
-	return echoResponse(c, homeView(hero))
+	return echoResponse(c, homeView(mdls.Hero))
 }
 
-func homeView(hero sections.Hero) templ.Component {
+func homeView(hero *models.Hero) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {

pkl/uiux.pkl

@@ -6,8 +6,8 @@ import "package://pkg.pkl-lang.org/pkl-go/pkl.golang@0.5.0#/go.pkl"
 
 class Image {
 	src: String
-	width: Int
+	width: String
-	height: Int
+	height: String
 }
 
 class Link {
@@ -25,9 +25,13 @@ class Button {
 	href: String
 }
 
-class Stat {
+class Stats {
-	value: String
+	firstValue: String	
-	label: String
+	firstLabel: String
+	secondValue: String
+	secondLabel: String
+	thirdValue: String
+	thirdLabel: String
 }
 
 class Hero {
@@ -38,7 +42,17 @@ class Hero {
   primaryButton: Button
   secondaryButton: Button
   image: Image
-  stats: List<Stat>
 }
 
+class Footer {
+	logo: Image
+	mediumLink: SocialLink
+	twitterLink: SocialLink
+	discordLink: SocialLink
+	githubLink: SocialLink
+	companyLinks: List<Link>
+	resourcesLinks: List<Link>
+}
 
+hero : Hero
+stats : Stats