go/sonr
go/sonr
1
1
Fork 0
mirror of https://github.com/onsonr/sonr.git synced 2025-03-10 13:07:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(marketing): refactor marketing page components

Browse Source
This commit is contained in:
Prad Nukala 2024-10-24 10:31:40 -04:00
parent 7b5ee7b0ed
commit c8657022a2
10 changed files with 327 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
internal/orm/marketing/models.go
View File

@ -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

2
pkg/nebula/components/marketing/modals/intro_video_templ.go
View File

File diff suppressed because one or more lines are too long

106
pkg/nebula/components/marketing/page.templ
View File

@ -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.Highlights(highlights)
@sections.Mission(mission)
@sections.Architecture(architecture)
@sections.Hero()
@sections.Highlights()
@sections.Mission()
@sections.Architecture()
@sections.Lowlights()
@sections.CallToAction()
@sections.Footer()

35
pkg/nebula/components/marketing/page_templ.go
View File

@ -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
}

28
pkg/nebula/components/marketing/sections/architecture.templ
View File

@ -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">

162
pkg/nebula/components/marketing/sections/architecture_templ.go
View File

File diff suppressed because one or more lines are too long

19
pkg/nebula/components/marketing/sections/cta.templ
View File

@ -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>

23
pkg/nebula/components/marketing/sections/hero.templ
View File

@ -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">

30
pkg/nebula/components/marketing/sections/highlights.templ
View File

@ -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">

24
pkg/nebula/components/marketing/sections/mission.templ
View File

@ -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"