From 6c6b38a2e3bc47aa545869dc5e7cd5ce537cd22e Mon Sep 17 00:00:00 2001 From: Prad Nukala Date: Wed, 23 Oct 2024 11:36:59 -0400 Subject: [PATCH] feat(css): add new utility classes for group hover --- pkg/nebula/assets/css/styles.css | 395 ++++++++++++++++++ .../components/authentication/modal.templ | 1 + .../components/authentication/modal_templ.go | 3 + .../components/authentication/view_templ.go | 1 + .../marketing/modals/intro_video.templ | 282 +++++++++++++ .../marketing/modals/intro_video_templ.go | 40 ++ pkg/nebula/components/marketing/page.templ | 81 ++++ pkg/nebula/components/marketing/route.go | 18 - pkg/nebula/components/marketing/static.go | 71 ---- 9 files changed, 803 insertions(+), 89 deletions(-) create mode 100644 pkg/nebula/components/marketing/modals/intro_video.templ create mode 100644 pkg/nebula/components/marketing/modals/intro_video_templ.go delete mode 100644 pkg/nebula/components/marketing/route.go delete mode 100644 pkg/nebula/components/marketing/static.go diff --git a/pkg/nebula/assets/css/styles.css b/pkg/nebula/assets/css/styles.css index b86047f6c..a91aa9348 100644 --- a/pkg/nebula/assets/css/styles.css +++ b/pkg/nebula/assets/css/styles.css @@ -1028,6 +1028,10 @@ select{ } } +.invisible{ + visibility: hidden; +} + .fixed{ position: fixed; } @@ -1108,6 +1112,16 @@ select{ margin: 0.5rem; } +.mx-0{ + margin-left: 0px; + margin-right: 0px; +} + +.mx-3{ + margin-left: 0.75rem; + margin-right: 0.75rem; +} + .mx-auto{ margin-left: auto; margin-right: auto; @@ -1145,6 +1159,10 @@ select{ margin-left: 0.5rem; } +.mr-0\.5{ + margin-right: 0.125rem; +} + .mr-1{ margin-right: 0.25rem; } @@ -1169,6 +1187,10 @@ select{ margin-right: 1.75rem; } +.mt-0\.5{ + margin-top: 0.125rem; +} + .mt-1{ margin-top: 0.25rem; } @@ -1221,10 +1243,30 @@ select{ display: none; } +.aspect-video{ + aspect-ratio: 16 / 9; +} + +.h-1{ + height: 0.25rem; +} + +.h-1\.5{ + height: 0.375rem; +} + +.h-1\/4{ + height: 25%; +} + .h-10{ height: 2.5rem; } +.h-12{ + height: 3rem; +} + .h-14{ height: 3.5rem; } @@ -1233,6 +1275,10 @@ select{ height: 5rem; } +.h-24{ + height: 6rem; +} + .h-3{ height: 0.75rem; } @@ -1261,10 +1307,18 @@ select{ height: 2.25rem; } +.h-\[18px\]{ + height: 18px; +} + .h-\[280px\]{ height: 280px; } +.h-\[360px\]{ + height: 360px; +} + .h-auto{ height: auto; } @@ -1281,6 +1335,18 @@ select{ min-height: 100vh; } +.w-0{ + width: 0px; +} + +.w-10{ + width: 2.5rem; +} + +.w-12{ + width: 3rem; +} + .w-14{ width: 3.5rem; } @@ -1293,6 +1359,10 @@ select{ width: 5rem; } +.w-24{ + width: 6rem; +} + .w-3{ width: 0.75rem; } @@ -1313,6 +1383,10 @@ select{ width: 2rem; } +.w-\[18px\]{ + width: 18px; +} + .w-\[22rem\]{ width: 22rem; } @@ -1346,6 +1420,10 @@ select{ width: 100vw; } +.min-w-\[640px\]{ + min-width: 640px; +} + .max-w-2xl{ max-width: 42rem; } @@ -1437,16 +1515,36 @@ select{ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.-translate-y-8{ + --tw-translate-y: -2rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.-translate-y-full{ + --tw-translate-y: -100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .translate-x-0{ --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.translate-x-0\.5{ + --tw-translate-x: 0.125rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .translate-x-8{ --tw-translate-x: 2rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.translate-x-px{ + --tw-translate-x: 1px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .translate-y-0{ --tw-translate-y: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1472,6 +1570,11 @@ select{ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.translate-y-full{ + --tw-translate-y: 100%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .rotate-1{ --tw-rotate: 1deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1483,6 +1586,18 @@ select{ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.scale-50{ + --tw-scale-x: .5; + --tw-scale-y: .5; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.scale-75{ + --tw-scale-x: .75; + --tw-scale-y: .75; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .scale-90{ --tw-scale-x: .9; --tw-scale-y: .9; @@ -1529,6 +1644,12 @@ select{ cursor: pointer; } +.appearance-none{ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + .grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -1763,6 +1884,11 @@ select{ border-color: rgb(82 82 91 / var(--tw-border-opacity)); } +.bg-black{ + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} + .bg-blue-50{ --tw-bg-opacity: 1; background-color: rgb(239 246 255 / var(--tw-bg-opacity)); @@ -1847,14 +1973,42 @@ select{ background-color: rgb(24 24 27 / var(--tw-bg-opacity)); } +.bg-opacity-0{ + --tw-bg-opacity: 0; +} + +.bg-opacity-20{ + --tw-bg-opacity: 0.2; +} + +.bg-opacity-80{ + --tw-bg-opacity: 0.8; +} + .bg-opacity-90{ --tw-bg-opacity: 0.9; } +.bg-gradient-to-b{ + background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); +} + .bg-gradient-to-r{ background-image: linear-gradient(to right, var(--tw-gradient-stops)); } +.from-black{ + --tw-gradient-from: #000 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-transparent{ + --tw-gradient-from: transparent var(--tw-gradient-from-position); + --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + .from-zinc-100{ --tw-gradient-from: #f4f4f5 var(--tw-gradient-from-position); --tw-gradient-to: rgb(244 244 245 / 0) var(--tw-gradient-to-position); @@ -1872,6 +2026,14 @@ select{ --tw-gradient-stops: var(--tw-gradient-from), #18181b var(--tw-gradient-via-position), var(--tw-gradient-to); } +.to-black{ + --tw-gradient-to: #000 var(--tw-gradient-to-position); +} + +.to-transparent{ + --tw-gradient-to: transparent var(--tw-gradient-to-position); +} + .to-white{ --tw-gradient-to: #fff var(--tw-gradient-to-position); } @@ -2087,6 +2249,10 @@ select{ font-family: Inter Tight, sans-serif; } +.font-mono{ + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + .text-2xl{ font-size: 1.5rem; line-height: 1.415; @@ -2310,10 +2476,18 @@ select{ opacity: 1; } +.opacity-20{ + opacity: 0.2; +} + .opacity-60{ opacity: 0.6; } +.opacity-80{ + opacity: 0.8; +} + .mix-blend-exclusion{ mix-blend-mode: exclusion; } @@ -2372,10 +2546,22 @@ select{ transition-duration: 150ms; } +.delay-200{ + transition-delay: 200ms; +} + .duration-100{ transition-duration: 100ms; } +.duration-1000{ + transition-duration: 1000ms; +} + +.duration-150{ + transition-duration: 150ms; +} + .duration-200{ transition-duration: 200ms; } @@ -3019,6 +3205,12 @@ input[type="search"]::-webkit-search-results-decoration { display: none; } +.hover\:scale-100:hover{ + --tw-scale-x: 1; + --tw-scale-y: 1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .hover\:bg-blue-100:hover{ --tw-bg-opacity: 1; background-color: rgb(219 234 254 / var(--tw-bg-opacity)); @@ -3283,6 +3475,25 @@ input[type="search"]::-webkit-search-results-decoration { opacity: 0.5; } +.group:hover .group-hover\:visible{ + visibility: visible; +} + +.group:hover .group-hover\:mx-1{ + margin-left: 0.25rem; + margin-right: 0.25rem; +} + +.group:hover .group-hover\:w-12{ + width: 3rem; +} + +.group:hover .group-hover\:scale-110{ + --tw-scale-x: 1.1; + --tw-scale-y: 1.1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .group:hover .group-hover\:\[animation-play-state\:paused\]{ animation-play-state: paused; } @@ -3594,6 +3805,190 @@ input[type="search"]::-webkit-search-results-decoration { } } +.\[\&\:\:-moz-range-progress\]\:rounded-full::-moz-range-progress{ + border-radius: 9999px; +} + +.\[\&\:\:-moz-range-progress\]\:bg-blue-600::-moz-range-progress{ + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); +} + +.\[\&\:\:-moz-range-progress\]\:bg-white::-moz-range-progress{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.\[\&\:\:-moz-range-progress\]\:bg-opacity-80::-moz-range-progress{ + --tw-bg-opacity: 0.8; +} + +.\[\&\:\:-moz-range-thumb\]\:h-1\.5::-moz-range-thumb{ + height: 0.375rem; +} + +.\[\&\:\:-moz-range-thumb\]\:h-2::-moz-range-thumb{ + height: 0.5rem; +} + +.\[\&\:\:-moz-range-thumb\]\:w-1\.5::-moz-range-thumb{ + width: 0.375rem; +} + +.\[\&\:\:-moz-range-thumb\]\:w-2::-moz-range-thumb{ + width: 0.5rem; +} + +.\[\&\:\:-moz-range-thumb\]\:appearance-none::-moz-range-thumb{ + -moz-appearance: none; + appearance: none; +} + +.\[\&\:\:-moz-range-thumb\]\:rounded-full::-moz-range-thumb{ + border-radius: 9999px; +} + +.\[\&\:\:-moz-range-thumb\]\:border-0::-moz-range-thumb{ + border-width: 0px; +} + +.\[\&\:\:-moz-range-thumb\]\:bg-white::-moz-range-thumb{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.\[\&\:\:-moz-range-track\]\:rounded-full::-moz-range-track{ + border-radius: 9999px; +} + +.\[\&\:\:-moz-range-track\]\:bg-neutral-200::-moz-range-track{ + --tw-bg-opacity: 1; + background-color: rgb(229 229 229 / var(--tw-bg-opacity)); +} + +.\[\&\:\:-ms-fill-lower\]\:rounded-full::-ms-fill-lower{ + border-radius: 9999px; +} + +.\[\&\:\:-ms-fill-lower\]\:bg-blue-600::-ms-fill-lower{ + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); +} + +.\[\&\:\:-ms-fill-lower\]\:bg-white::-ms-fill-lower{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.\[\&\:\:-ms-fill-lower\]\:bg-opacity-80::-ms-fill-lower{ + --tw-bg-opacity: 0.8; +} + +.\[\&\:\:-ms-thumb\]\:h-1\.5::-ms-thumb{ + height: 0.375rem; +} + +.\[\&\:\:-ms-thumb\]\:h-2::-ms-thumb{ + height: 0.5rem; +} + +.\[\&\:\:-ms-thumb\]\:w-1\.5::-ms-thumb{ + width: 0.375rem; +} + +.\[\&\:\:-ms-thumb\]\:w-2::-ms-thumb{ + width: 0.5rem; +} + +.\[\&\:\:-ms-thumb\]\:appearance-none::-ms-thumb{ + appearance: none; +} + +.\[\&\:\:-ms-thumb\]\:rounded-full::-ms-thumb{ + border-radius: 9999px; +} + +.\[\&\:\:-ms-thumb\]\:border-0::-ms-thumb{ + border-width: 0px; +} + +.\[\&\:\:-ms-thumb\]\:bg-white::-ms-thumb{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.\[\&\:\:-ms-track\]\:rounded-full::-ms-track{ + border-radius: 9999px; +} + +.\[\&\:\:-ms-track\]\:bg-neutral-200::-ms-track{ + --tw-bg-opacity: 1; + background-color: rgb(229 229 229 / var(--tw-bg-opacity)); +} + +.\[\&\:\:-webkit-slider-runnable-track\]\:overflow-hidden::-webkit-slider-runnable-track{ + overflow: hidden; +} + +.\[\&\:\:-webkit-slider-runnable-track\]\:rounded-full::-webkit-slider-runnable-track{ + border-radius: 9999px; +} + +.\[\&\:\:-webkit-slider-runnable-track\]\:bg-white::-webkit-slider-runnable-track{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.\[\&\:\:-webkit-slider-runnable-track\]\:bg-opacity-30::-webkit-slider-runnable-track{ + --tw-bg-opacity: 0.3; +} + +.\[\&\:\:-webkit-slider-thumb\]\:h-1\.5::-webkit-slider-thumb{ + height: 0.375rem; +} + +.\[\&\:\:-webkit-slider-thumb\]\:h-2::-webkit-slider-thumb{ + height: 0.5rem; +} + +.\[\&\:\:-webkit-slider-thumb\]\:w-1\.5::-webkit-slider-thumb{ + width: 0.375rem; +} + +.\[\&\:\:-webkit-slider-thumb\]\:w-2::-webkit-slider-thumb{ + width: 0.5rem; +} + +.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb{ + -webkit-appearance: none; + appearance: none; +} + +.\[\&\:\:-webkit-slider-thumb\]\:rounded-full::-webkit-slider-thumb{ + border-radius: 9999px; +} + +.\[\&\:\:-webkit-slider-thumb\]\:border-0::-webkit-slider-thumb{ + border-width: 0px; +} + +.\[\&\:\:-webkit-slider-thumb\]\:bg-white::-webkit-slider-thumb{ + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.\[\&\:\:-webkit-slider-thumb\]\:shadow-\[-995px_0px_0px_990px_\#2463eb\]::-webkit-slider-thumb{ + --tw-shadow: -995px 0px 0px 990px #2463eb; + --tw-shadow-colored: -995px 0px 0px 990px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.\[\&\:\:-webkit-slider-thumb\]\:shadow-\[-995px_0px_0px_990px_rgba\(255\2c _255\2c _255\2c _0\.8\)\]::-webkit-slider-thumb{ + --tw-shadow: -995px 0px 0px 990px rgba(255, 255, 255, 0.8); + --tw-shadow-colored: -995px 0px 0px 990px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .\[\&\>div\]\:mx-3>div{ margin-left: 0.75rem; margin-right: 0.75rem; diff --git a/pkg/nebula/components/authentication/modal.templ b/pkg/nebula/components/authentication/modal.templ index 1970264f5..0d38ae341 100644 --- a/pkg/nebula/components/authentication/modal.templ +++ b/pkg/nebula/components/authentication/modal.templ @@ -26,3 +26,4 @@ templ AuthorizeModal(c echo.Context) { @sections.AuthorizeStart() } } + diff --git a/pkg/nebula/components/authentication/modal_templ.go b/pkg/nebula/components/authentication/modal_templ.go index 88e43050d..cc1f9b037 100644 --- a/pkg/nebula/components/authentication/modal_templ.go +++ b/pkg/nebula/components/authentication/modal_templ.go @@ -14,6 +14,7 @@ import ( "github.com/onsonr/sonr/pkg/nebula/global/styles" ) +// RegisterModal returns the Register Modal. func RegisterModal(c echo.Context) 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 @@ -61,6 +62,7 @@ func RegisterModal(c echo.Context) templ.Component { }) } +// LoginModal returns the Login Modal. func LoginModal(c echo.Context) 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 @@ -108,6 +110,7 @@ func LoginModal(c echo.Context) templ.Component { }) } +// AuthorizeModal returns the Authorize Modal. func AuthorizeModal(c echo.Context) 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 diff --git a/pkg/nebula/components/authentication/view_templ.go b/pkg/nebula/components/authentication/view_templ.go index 1436237b1..1767d08f1 100644 --- a/pkg/nebula/components/authentication/view_templ.go +++ b/pkg/nebula/components/authentication/view_templ.go @@ -10,6 +10,7 @@ import templruntime "github.com/a-h/templ/runtime" import echo "github.com/labstack/echo/v4" +// CurrentView checks if the user is logged in. func CurrentView(c echo.Context) 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 diff --git a/pkg/nebula/components/marketing/modals/intro_video.templ b/pkg/nebula/components/marketing/modals/intro_video.templ new file mode 100644 index 000000000..1835f587b --- /dev/null +++ b/pkg/nebula/components/marketing/modals/intro_video.templ @@ -0,0 +1,282 @@ +package modals + +templ IntroVideo() { +
+ +
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+ + +
+ +
+
+
+
+
+ +
+
+
+
+ + +
+
+
+
+
+} diff --git a/pkg/nebula/components/marketing/modals/intro_video_templ.go b/pkg/nebula/components/marketing/modals/intro_video_templ.go new file mode 100644 index 000000000..62f636008 --- /dev/null +++ b/pkg/nebula/components/marketing/modals/intro_video_templ.go @@ -0,0 +1,40 @@ +// Code generated by templ - DO NOT EDIT. + +// templ: version: v0.2.778 +package modals + +//lint:file-ignore SA4006 This context is only used if a nested component is present. + +import "github.com/a-h/templ" +import templruntime "github.com/a-h/templ/runtime" + +func IntroVideo() 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 { + return templ_7745c5c3_CtxErr + } + templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W) + if !templ_7745c5c3_IsBuffer { + defer func() { + templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer) + if templ_7745c5c3_Err == nil { + templ_7745c5c3_Err = templ_7745c5c3_BufErr + } + }() + } + ctx = templ.InitializeContext(ctx) + templ_7745c5c3_Var1 := templ.GetChildren(ctx) + if templ_7745c5c3_Var1 == nil { + templ_7745c5c3_Var1 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return templ_7745c5c3_Err + }) +} + +var _ = templruntime.GeneratedTemplate diff --git a/pkg/nebula/components/marketing/page.templ b/pkg/nebula/components/marketing/page.templ index 40427855c..b29cb6dc6 100644 --- a/pkg/nebula/components/marketing/page.templ +++ b/pkg/nebula/components/marketing/page.templ @@ -1,10 +1,91 @@ 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" ) +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"}, + }, +} + +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: "Data Ownership", + Desc: "Sonr leverages advanced cryptography to permit facilitating Wallet Operations directly on-chain, without the need for a centralized server.", + Icon: nil, + }, + { + Title: "Everyday Transactions", + 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: "Limitless Possibilities", + Desc: "Sonr is a proudly American Project which operates under the new Wyoming DUNA Legal Framework, ensuring the protection of your digital rights.", + Icon: nil, + }, + }, +} + +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", + 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", + 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: "American Made DUNA", + 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, + }, +} + +func HomeRoute(c echo.Context) error { + s, err := ctx.GetHWAYContext(c) + if err != nil { + return err + } + log.Printf("Session ID: %s", s.ID()) + return ctx.RenderTempl(c, View()) +} + templ View() { @styles.LayoutNoBody("Sonr.ID", true) { @sections.Header() diff --git a/pkg/nebula/components/marketing/route.go b/pkg/nebula/components/marketing/route.go deleted file mode 100644 index 9e132a075..000000000 --- a/pkg/nebula/components/marketing/route.go +++ /dev/null @@ -1,18 +0,0 @@ -package marketing - -import ( - "log" - - "github.com/labstack/echo/v4" - - "github.com/onsonr/sonr/internal/ctx" -) - -func HomeRoute(c echo.Context) error { - s, err := ctx.GetHWAYContext(c) - if err != nil { - return err - } - log.Printf("Session ID: %s", s.ID()) - return ctx.RenderTempl(c, View()) -} diff --git a/pkg/nebula/components/marketing/static.go b/pkg/nebula/components/marketing/static.go deleted file mode 100644 index 0a6d91503..000000000 --- a/pkg/nebula/components/marketing/static.go +++ /dev/null @@ -1,71 +0,0 @@ -package marketing - -import models "github.com/onsonr/sonr/internal/orm/marketing" - -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 imagination.", 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"}, - }, -} - -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: "Data Ownership", - Desc: "Sonr leverages advanced cryptography to permit facilitating Wallet Operations directly on-chain, without the need for a centralized server.", - Icon: nil, - }, - { - Title: "Everyday Transactions", - 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: "Limitless Possibilities", - Desc: "Sonr is a proudly American Project which operates under the new Wyoming DUNA Legal Framework, ensuring the protection of your digital rights.", - Icon: nil, - }, - }, -} - -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", - 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", - 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: "American Made DUNA", - 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, - }, -}