go/sonr
1
0 Fork 0
mirror of https://github.com/sonr-io/sonr.git synced 2026-11-02 13:12:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(marketing): refactor marketing page components

Browse Source
This commit is contained in:
Prad Nukala committed 2024-10-24 10:31:40 -04:00
1 parent 7b5ee7b0ed
commit c8657022a2
10 files changed
+327 -118
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

internal/orm/marketing/models.go
+10 -6
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
pkg/nebula/components/marketing/modals/intro_video_templ.go
+1 -1
View File
@@ -29,7 +29,7 @@ func IntroVideo() templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div x-data=\"{\nsources: {\nmp4: &#39;https://cdn.devdojo.com/pines/videos/coast.mp4&#39;,\nwebm: &#39;https://cdn.devdojo.com/pines/videos/coast.webm&#39;,\nogg: &#39;https://cdn.devdojo.com/pines/videos/coast.ogg&#39;\n},\nplaying: false,\ncontrols: true,\nmuted: false,\nmuteForced: false,\nfullscreen: false,\nended: false,\nmouseleave: false,\nautoHideControlsDelay: 3000,\ncontrolsHideTimeout: null,\nposter: null,\nvideoDuration: 0,\ntimeDurationString: &#39;00:00&#39;,\ntimeElapsedString: &#39;00:00&#39;,\nshowTime: false,\nvolume: 1,\nvolumeBeforeMute: 1,\nvideoPlayerReady: false,\ntimelineSeek(e) {\ntime = this.formatTime(Math.round(e.target.value));\nthis.timeElapsedString = `${time.minutes}:${time.seconds}`;\n},\nmetaDataLoaded(event) {\nthis.videoDuration = event.target.duration;\nthis.$refs.videoProgress.setAttribute(&#39;max&#39;, this.videoDuration);\ntime = this.formatTime(Math.round(this.videoDuration));\nthis.timeDurationString = `${time.minutes}:${time.seconds}`;\nthis.showTime = true;\nthis.videoPlayerReady = true;\n},\ntogglePlay(e) {\nif (this.$refs.player.paused || this.$refs.player.ended) {\nthis.playing = true;\nthis.$refs.player.play();\n} else {\nthis.$refs.player.pause();\nthis.playing = false;\n}\n},\ntoggleMute(){\nthis.muted = !this.muted;\nthis.$refs.player.muted = this.muted;\nif(this.muted){\nthis.volumeBeforeMute = this.volume;\nthis.volume = 0;\n} else {\nthis.volume = this.volumeBeforeMute;\n}\n},\ntimeUpdatedInterval() {\nif (!this.$refs.videoProgress.getAttribute(&#39;max&#39;))\nthis.$refs.videoProgress.setAttribute(&#39;max&#39;, $refs.player.duration);\nthis.$refs.videoProgress.value = this.$refs.player.currentTime;\ntime = this.formatTime(Math.round(this.$refs.player.currentTime));\nthis.timeElapsedString = `${time.minutes}:${time.seconds}`;\n},\nupdateVolume(e) {\nthis.volume = e.target.value;\nthis.$refs.player.volume = this.volume;\nif(this.volume == 0){\nthis.muted = true;\n}\nif(this.muted &amp;&amp; this.volume &gt; 0){\nthis.muted = false;\n}\n},\ntimelineClicked(e) {\nrect = this.$refs.videoProgress.getBoundingClientRect();\npos = (e.pageX - rect.left) / this.$refs.videoProgress.offsetWidth;\nthis.$refs.player.currentTime = pos * this.$refs.player.duration;\n},\nhandleFullscreen() {\nif (document.fullscreenElement !== null) {\n// The document is in fullscreen mode\ndocument.exitFullscreen();\n} else {\n// The document is not in fullscreen mode\nthis.$refs.videoContainer.requestFullscreen();\n}\n},\nmousemoveVideo() {\nif(this.playing){\nthis.resetControlsTimeout();\n} else {\nthis.controls=true;\nclearTimeout(this.controlsHideTimeout);\n}\n},\nvideoEnded() {\nthis.ended = true;\nthis.playing = false;\nthis.$refs.player.currentTime = 0;\n},\nresetControlsTimeout() {\nthis.controls = true;\nclearTimeout(this.controlsHideTimeout);\nlet that = this;\nthis.controlsHideTimeout = setTimeout(function(){\nthat.controls=false\n}, this.autoHideControlsDelay);\n},\nformatTime(timeInSeconds) {\nresult = new Date(timeInSeconds * 1000).toISOString().substring(11, 19);\nreturn {\nminutes: result.substring(3, 5),\nseconds: result.substring(6, 8),\n};\n}\n}\" x-init=\"\nsupportsVideo = document.createElement(&#39;video&#39;).canPlayType;\nif (!supportsVideo) {\nalert(&#39;This browser does not support the video element&#39;);\n}\n$refs.player.load();\n// Hide the default player controls\n$refs.player.controls = false;\n$watch(&#39;playing&#39;, (value) =&gt; {\nif (value) {\nended = false;\ncontrolsHideTimeout = setTimeout(() =&gt; {\ncontrols = false;\n}, autoHideControlsDelay);\n} else {\nclearTimeout(controlsHideTimeout);\ncontrols = true;\n}\n});\nif (!document?.fullscreenEnabled) {\n$refs.fullscreenButton.style.display = &#39;none&#39;;\n}\ndocument.addEventListener(&#39;fullscreenchange&#39;, (e) =&gt; {\nfullscreen = !!document.fullscreenElement;\n});\n\" x-ref=\"videoContainer\" @mouseleave=\"mouseleave=true\" @mousemove=\"mousemoveVideo\" class=\"relative h-[360px] min-w-[640px] overflow-hidden rounded-md aspect-video\"><video x-ref=\"player\" @loadedmetadata=\"metaDataLoaded\" @timeupdate=\"timeUpdatedInterval\" @ended=\"videoEnded\" preload=\"metadata\" :poster=\"poster\" class=\"relative z-10 object-cover w-full h-full bg-black\" crossorigin=\"anonymous\"><source :src=\"sources.mp4\" type=\"video/mp4\"> <source :src=\"sources.webm\" type=\"video/webm\"> <source :src=\"sources.ogg\" type=\"video/ogg\"></video><div x-show=\"videoPlayerReady\" class=\"absolute inset-0 w-full h-full\"><div x-ref=\"videoBackground\" @click=\"togglePlay()\" class=\"absolute inset-0 z-30 flex items-center justify-center w-full h-full bg-black bg-opacity-0 cursor-pointer group\"><div x-show=\"playing\" x-transition:enter=\"transition ease-out duration-1000\" x-transition:enter-start=\"scale-50 opacity-100\" x-transition:enter-end=\"scale-100 opacity-0\" class=\"absolute z-20 flex items-center justify-center w-24 h-24 bg-blue-600Line truncated
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div x-data=\"{\nsources: {\nmp4: &#39;https://cdn.devdojo.com/pines/videos/coast.mp4&#39;,\nwebm: &#39;https://cdn.devdojo.com/pines/videos/coast.webm&#39;,\nogg: &#39;https://cdn.devdojo.com/pines/videos/coast.ogg&#39;\n},\nplaying: false,\ncontrols: true,\nmuted: false,\nmuteForced: false,\nfullscreen: false,\nended: false,\nmouseleave: false,\nautoHideControlsDelay: 3000,\ncontrolsHideTimeout: null,\nposter: null,\nvideoDuration: 0,\ntimeDurationString: &#39;00:00&#39;,\ntimeElapsedString: &#39;00:00&#39;,\nshowTime: false,\nvolume: 1,\nvolumeBeforeMute: 1,\nvideoPlayerReady: false,\ntimelineSeek(e) {\ntime = this.formatTime(Math.round(e.target.value));\nthis.timeElapsedString = `${time.minutes}:${time.seconds}`;\n},\nmetaDataLoaded(event) {\nthis.videoDuration = event.target.duration;\nthis.$refs.videoProgress.setAttribute(&#39;max&#39;, this.videoDuration);\ntime = this.formatTime(Math.round(this.videoDuration));\nthis.timeDurationString = `${time.minutes}:${time.seconds}`;\nthis.showTime = true;\nthis.videoPlayerReady = true;\n},\ntogglePlay(e) {\nif (this.$refs.player.paused || this.$refs.player.ended) {\nthis.playing = true;\nthis.$refs.player.play();\n} else {\nthis.$refs.player.pause();\nthis.playing = false;\n}\n},\ntoggleMute(){\nthis.muted = !this.muted;\nthis.$refs.player.muted = this.muted;\nif(this.muted){\nthis.volumeBeforeMute = this.volume;\nthis.volume = 0;\n} else {\nthis.volume = this.volumeBeforeMute;\n}\n},\ntimeUpdatedInterval() {\nif (!this.$refs.videoProgress.getAttribute(&#39;max&#39;))\nthis.$refs.videoProgress.setAttribute(&#39;max&#39;, $refs.player.duration);\nthis.$refs.videoProgress.value = this.$refs.player.currentTime;\ntime = this.formatTime(Math.round(this.$refs.player.currentTime));\nthis.timeElapsedString = `${time.minutes}:${time.seconds}`;\n},\nupdateVolume(e) {\nthis.volume = e.target.value;\nthis.$refs.player.volume = this.volume;\nif(this.volume == 0){\nthis.muted = true;\n}\nif(this.muted &amp;&amp; this.volume &gt; 0){\nthis.muted = false;\n}\n},\ntimelineClicked(e) {\nrect = this.$refs.videoProgress.getBoundingClientRect();\npos = (e.pageX - rect.left) / this.$refs.videoProgress.offsetWidth;\nthis.$refs.player.currentTime = pos * this.$refs.player.duration;\n},\nhandleFullscreen() {\nif (document.fullscreenElement !== null) {\n// The document is in fullscreen mode\ndocument.exitFullscreen();\n} else {\n// The document is not in fullscreen mode\nthis.$refs.videoContainer.requestFullscreen();\n}\n},\nmousemoveVideo() {\nif(this.playing){\nthis.resetControlsTimeout();\n} else {\nthis.controls=true;\nclearTimeout(this.controlsHideTimeout);\n}\n},\nvideoEnded() {\nthis.ended = true;\nthis.playing = false;\nthis.$refs.player.currentTime = 0;\n},\nresetControlsTimeout() {\nthis.controls = true;\nclearTimeout(this.controlsHideTimeout);\nlet that = this;\nthis.controlsHideTimeout = setTimeout(function(){\nthat.controls=false\n}, this.autoHideControlsDelay);\n},\nformatTime(timeInSeconds) {\nresult = new Date(timeInSeconds * 1000).toISOString().substring(11, 19);\nreturn {\nminutes: result.substring(3, 5),\nseconds: result.substring(6, 8),\n};\n}\n}\" x-data=\"introVideo\" x-ref=\"videoContainer\" @mouseleave=\"mouseleave=true\" @mousemove=\"mousemoveVideo\" class=\"relative h-[360px] min-w-[640px] overflow-hidden rounded-md aspect-video\"><video x-ref=\"player\" @loadedmetadata=\"metaDataLoaded\" @timeupdate=\"timeUpdatedInterval\" @ended=\"videoEnded\" preload=\"metadata\" :poster=\"poster\" class=\"relative z-10 object-cover w-full h-full bg-black\" crossorigin=\"anonymous\"><source :src=\"sources.mp4\" type=\"video/mp4\"> <source :src=\"sources.webm\" type=\"video/webm\"> <source :src=\"sources.ogg\" type=\"video/ogg\"></video><div x-show=\"videoPlayerReady\" class=\"absolute inset-0 w-full h-full\"><div x-ref=\"videoBackground\" @click=\"togglePlay()\" class=\"absolute inset-0 z-30 flex items-center justify-center w-full h-full bg-black bg-opacity-0 cursor-pointer group\"><div x-show=\"playing\" x-transition:enter=\"transition ease-out duration-1000\" x-transition:enter-start=\"scale-50 opacity-100\" x-transition:enter-end=\"scale-100 opacity-0\" class=\"absolute z-20 flex items-center justify-center w-24 h-24 bg-blue-600 rounded-full opacity-0 bg-opacity-20\" x-cloak><svg class=\"w-10 h-10 translate-x-0.5 text-white\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.42737 3.41611C6.46665 2.24586 4.00008 3.67188 4.00007 5.9427L4 18.0572C3.99999 20.329 6.46837 21.7549 8.42907 20.5828L18.5698 14.5207C20.4775 13.3802 20.4766 10.6076 18.568 9.46853L8.42737 3.41611Z\" fill=\"currentColor\"></path></svg></div><div x-show=\"!playing &amp;&amp; !ended\" x-transition:enter=\"transition ease-out duration-1000\" x-transition:enter-start=\"scale-50 opacity-100\" x-transition:enter-end=\"scale-100 opacity-0\" class=\"absolute z-20 flex items-center justify-center w-24 h-24 bg-bluLine truncated
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
pkg/nebula/components/marketing/page.templ
+4 -102
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()
pkg/nebula/components/marketing/page_templ.go
+32 -3
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
}
pkg/nebula/components/marketing/sections/architecture.templ
+27 -1
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">
pkg/nebula/components/marketing/sections/architecture_templ.go
+160 -2
View File
@@ -8,7 +8,9 @@ package sections
import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
func Architecture() templ.Component {
import models "github.com/onsonr/sonr/internal/orm/marketing"
func Architecture(arch *models.Architecture) 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 {
@@ -29,7 +31,163 @@ func Architecture() templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Features #2 --><section><div class=\"py-12 md:py-20\"><div class=\"max-w-5xl mx-auto px-4 sm:px-6\"><div class=\"relative max-w-3xl mx-auto text-center pb-12 md:pb-20\"><h2 class=\"font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4\">Onchain Security with Offchain Privacy</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.</p></div><div class=\"max-w-xs mx-auto sm:max-w-none grid sm:grid-cols-2 md:grid-cols-3 gap-8 sm:gap-4 lg:gap-8\"><article class=\"sm:col-span-2 flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg\"><div class=\"grow flex flex-col p-5 pt-6\"><div class=\"flex items-center space-x-3 mb-1\"><svg class=\"inline-flex fill-zinc-400\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"M17 9c.6 0 1 .4 1 1v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h6c.6 0 1 .4 1 1s-.4 1-1 1H4v12h12v-6c0-.6.4-1 1-1Zm-.7-6.7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-8 8c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l8-8Z\"></path></svg><h3 class=\"font-inter-tight font-semibold text-zinc-900\">Decentralized Identity</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.</p></div><figure><img class=\"h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto\" src=\"./images/feature-post-01.png\" width=\"721\" height=\"280\" alt=\"Feature Post 01\"></figure></article><article class=\"flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg\"><div class=\"grow flex flex-col p-5 pt-6\"><div class=\"flex items-center space-x-3 mb-1\"><svg class=\"inline-flex fill-zinc-400\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"m6.035 17.335-4-14c-.2-.8.5-1.5 1.3-1.3l14 4c.9.3 1 1.5.1 1.9l-6.6 2.9-2.8 6.6c-.5.9-1.7.8-2-.1Zm-1.5-12.8 2.7 9.5 1.9-4.4c.1-.2.3-.4.5-.5l4.4-1.9-9.5-2.7Z\"></path></svg><h3 class=\"font-inter-tight font-semibold text-zinc-900\">IPFS Vaults</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.</p></div><figure><img class=\"h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto\" src=\"./images/feature-post-02.png\" width=\"342\" height=\"280\" alt=\"Feature Post 02\"></figure></article><article class=\"flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg\"><div class=\"grow flex flex-col p-5 pt-6\"><div class=\"flex items-center space-x-3 mb-1\"><svg class=\"inline-flex fill-zinc-400\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"M8.974 16c-.3 0-.7-.2-.9-.5l-2.2-3.7-2.1 2.8c-.3.4-1 .5-1.4.2-.4-.3-.5-1-.2-1.4l3-4c.2-.3.5-.4.9-.4.3 0 .6.2.8.5l2 3.3 3.3-8.1c0-.4.4-.7.8-.7s.8.2.9.6l4 8c.2.5 0 1.1-.4 1.3-.5.2-1.1 0-1.3-.4l-3-6-3.2 7.9c-.2.4-.6.6-1 .6Z\"></path></svg><h3 class=\"font-inter-tight font-semibold text-zinc-900\">Service Records</h3></div><p class=\"grow max-w-md text-sm text-zinc-500\">Get your scenes inside your projects using simple embed code/snippets.</p></div><figure><img class=\"h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto\" src=\"./images/feature-post-03.png\" width=\"342\" height=\"280\" alt=\"Feature Post 03\"></figure></article><article class=\"flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg\"><div class=\"grow flex flex-col p-5 pt-6\"><div class=\"flex items-center space-x-3 mb-1\"><svg class=\"inline-flex fill-zinc-400\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"M9.3 11.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM9.3 17.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM2.3 12.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0Z\"></path></svg><h3 class=\"font-inter-tight font-semibold text-zinc-900\">Authentication & Authorization</h3></div><p class=\"grow max-w-md text-sm text-zinc-500\">Easily make drag and drop interactions without coding.</p></div><figure><img class=\"h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto\Line truncated
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Features #2 --><section><div class=\"py-12 md:py-20\"><div class=\"max-w-5xl mx-auto px-4 sm:px-6\"><div class=\"relative max-w-3xl mx-auto text-center pb-12 md:pb-20\"><h2 class=\"font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Heading)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 16, Col: 20}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h2><p class=\"text-lg text-zinc-500\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Subtitle)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 19, Col: 21}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div><div class=\"max-w-xs mx-auto sm:max-w-none grid sm:grid-cols-2 md:grid-cols-3 gap-8 sm:gap-4 lg:gap-8\"><article class=\"sm:col-span-2 flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg\"><div class=\"grow flex flex-col p-5 pt-6\"><div class=\"flex items-center space-x-3 mb-1\"><svg class=\"inline-flex fill-zinc-400\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"M17 9c.6 0 1 .4 1 1v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h6c.6 0 1 .4 1 1s-.4 1-1 1H4v12h12v-6c0-.6.4-1 1-1Zm-.7-6.7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-8 8c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l8-8Z\"></path></svg><h3 class=\"font-inter-tight font-semibold text-zinc-900\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Primary.Title)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 41, Col: 29}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h3></div><p class=\"grow max-w-md text-sm text-zinc-500\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Primary.Desc)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 45, Col: 27}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div><figure><img class=\"h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto\" src=\"./images/feature-post-01.png\" width=\"721\" height=\"280\" alt=\"Feature Post 01\"></figure></article><article class=\"flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg\"><div class=\"grow flex flex-col p-5 pt-6\"><div class=\"flex items-center space-x-3 mb-1\"><svg class=\"inline-flex fill-zinc-400\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"m6.035 17.335-4-14c-.2-.8.5-1.5 1.3-1.3l14 4c.9.3 1 1.5.1 1.9l-6.6 2.9-2.8 6.6c-.5.9-1.7.8-2-.1Zm-1.5-12.8 2.7 9.5 1.9-4.4c.1-.2.3-.4.5-.5l4.4-1.9-9.5-2.7Z\"></path></svg><h3 class=\"font-inter-tight font-semibold text-zinc-900\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Secondary.Title)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 74, Col: 31}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h3></div><p class=\"grow max-w-md text-sm text-zinc-500\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Secondary.Desc)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 78, Col: 29}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div><figure><img class=\"h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto\" src=\"./images/feature-post-02.png\" width=\"342\" height=\"280\" alt=\"Feature Post 02\"></figure></article><article class=\"flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg\"><div class=\"grow flex flex-col p-5 pt-6\"><div class=\"flex items-center space-x-3 mb-1\"><svg class=\"inline-flex fill-zinc-400\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"M8.974 16c-.3 0-.7-.2-.9-.5l-2.2-3.7-2.1 2.8c-.3.4-1 .5-1.4.2-.4-.3-.5-1-.2-1.4l3-4c.2-.3.5-.4.9-.4.3 0 .6.2.8.5l2 3.3 3.3-8.1c0-.4.4-.7.8-.7s.8.2.9.6l4 8c.2.5 0 1.1-.4 1.3-.5.2-1.1 0-1.3-.4l-3-6-3.2 7.9c-.2.4-.6.6-1 .6Z\"></path></svg><h3 class=\"font-inter-tight font-semibold text-zinc-900\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Tertiary.Title)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 107, Col: 30}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h3></div><p class=\"grow max-w-md text-sm text-zinc-500\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Tertiary.Desc)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 111, Col: 28}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div><figure><img class=\"h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto\" src=\"./images/feature-post-03.png\" width=\"342\" height=\"280\" alt=\"Feature Post 03\"></figure></article><article class=\"flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg\"><div class=\"grow flex flex-col p-5 pt-6\"><div class=\"flex items-center space-x-3 mb-1\"><svg class=\"inline-flex fill-zinc-400\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"M9.3 11.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM9.3 17.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM2.3 12.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0Z\"></path></svg><h3 class=\"font-inter-tight font-semibold text-zinc-900\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Quaternary.Title)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 140, Col: 32}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h3></div><p class=\"grow max-w-md text-sm text-zinc-500\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Quaternary.Desc)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 144, Col: 30}
}
_, 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("</p></div><figure><img class=\"h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto\" src=\"./images/feature-post-04.png\" width=\"342\" height=\"280\" alt=\"Feature Post 04\"></figure></article><article class=\"flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg\"><div class=\"grow flex flex-col p-5 pt-6\"><div class=\"flex items-center space-x-3 mb-1\"><svg class=\"inline-flex fill-zinc-400\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"M16 2H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h8.667l3.733 2.8A1 1 0 0 0 18 17V4a2 2 0 0 0-2-2Zm0 13-2.4-1.8a1 1 0 0 0-.6-.2H4V4h12v11Z\"></path></svg><h3 class=\"font-inter-tight font-semibold text-zinc-900\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var12 string
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Quinary.Title)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 173, Col: 29}
}
_, 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("</h3></div><p class=\"grow max-w-md text-sm text-zinc-500\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var13 string
templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(arch.Quinary.Desc)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/marketing/sections/architecture.templ`, Line: 177, Col: 27}
}
_, 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("</p></div><figure><img class=\"h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto\" src=\"./images/feature-post-05.png\" width=\"342\" height=\"280\" alt=\"Feature Post 05\"></figure></article></div></div></div></section>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
pkg/nebula/components/marketing/sections/cta.templ
+19
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>
pkg/nebula/components/marketing/sections/hero.templ
+22 -1
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">
pkg/nebula/components/marketing/sections/highlights.templ
+29 -1
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">
pkg/nebula/components/marketing/sections/mission.templ
+23 -1
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"