From 439f7f984c7829a1cd503f27d1038452a8adef2e Mon Sep 17 00:00:00 2001 From: Prad Nukala Date: Fri, 27 Sep 2024 20:07:00 -0400 Subject: [PATCH] refactor: adjust devbox configuration to reflect nebula changes --- .github/workflows/buf-publish.yml | 15 + devbox.json | 32 +- nebula/assets/css/styles.css | 1524 +++++++++++++++++++++++------ nebula/blocks/footer.templ | 100 ++ nebula/blocks/footer_templ.go | 40 + nebula/blocks/headers.templ | 32 + nebula/blocks/headers_templ.go | 40 + nebula/blocks/sections.templ | 117 +++ nebula/blocks/sections_templ.go | 40 + nebula/bun.lockb | Bin 46872 -> 47716 bytes nebula/package.json | 9 +- nebula/pages/home.templ | 3 + nebula/pages/home_templ.go | 24 + nebula/src/motr.ts | 1 - nebula/src/styles.css | 178 +++- nebula/tailwind.config.js | 51 +- process-compose.yaml | 4 +- 17 files changed, 1895 insertions(+), 315 deletions(-) create mode 100644 nebula/blocks/footer.templ create mode 100644 nebula/blocks/footer_templ.go create mode 100644 nebula/blocks/headers.templ create mode 100644 nebula/blocks/headers_templ.go create mode 100644 nebula/blocks/sections.templ create mode 100644 nebula/blocks/sections_templ.go diff --git a/.github/workflows/buf-publish.yml b/.github/workflows/buf-publish.yml index 623e14a1e..4dec25aba 100644 --- a/.github/workflows/buf-publish.yml +++ b/.github/workflows/buf-publish.yml @@ -38,3 +38,18 @@ jobs: r2-bucket: pkljar source-dir: config/pkl destination-dir: . + + upload_nebula_cdn: + runs-on: ubuntu-latest + steps: + - name: checkout + uses: actions/checkout@v4 + - name: Upload to R2 + uses: ryand56/r2-upload-action@latest + with: + r2-account-id: ${{ secrets.R2_ACCOUNT_ID }} + r2-access-key-id: ${{ secrets.R2_ACCESS_KEY_ID }} + r2-secret-access-key: ${{ secrets.R2_SECRET_ACCESS_KEY }} + r2-bucket: nebula + source-dir: nebula/assets + destination-dir: . diff --git a/devbox.json b/devbox.json index 61e62a9b2..ddd6b7abc 100644 --- a/devbox.json +++ b/devbox.json @@ -8,35 +8,33 @@ "cloudflared@latest" ], "env": { - "ACC0_ADDRESS": "idx1efd63aw40lxf3n4mhf7dzhjkr453axur9vjt6y", - "ACC0_MNEMONIC": "$(skate get ACC0_MNEMONIC)", - "ACC0_NAME": "acc0", - "ACC1_ADDRESS": "idx1hj5fveer5cjtn4wd6wstzugjfdxzl0xpecp0nd", - "ACC1_MNEMONIC": "$(skate get ACC1_MNEMONIC)", - "ACC1_NAME": "acc1", - "BINARY": "sonrd", - "TUNNEL_TOKEN": "$(skate get CLOUDFLARE_TUNNEL_TOKEN)", "GOPATH": "$HOME/go", "PATH": "$HOME/go/bin:$PATH", - "TEMPL_EXPERIMENT": "rawgo", "CHAIN_ID": "sonr-testnet-1", "DENOM": "usnr", "KEYRING": "test", - "MONIKER": "florence" + "MONIKER": "florence", + "BINARY": "sonrd", + "ACC0_NAME": "acc0", + "ACC1_NAME": "acc1", + "ACC0_ADDRESS": "idx1efd63aw40lxf3n4mhf7dzhjkr453axur9vjt6y", + "ACC1_ADDRESS": "idx1hj5fveer5cjtn4wd6wstzugjfdxzl0xpecp0nd", + "ACC0_MNEMONIC": "$(skate get ACC0_MNEMONIC)", + "ACC1_MNEMONIC": "$(skate get ACC1_MNEMONIC)", + "TUNNEL_TOKEN": "$(skate get CLOUDFLARE_TUNNEL_TOKEN)", + "TEMPL_EXPERIMENT": "rawgo" }, "shell": { "scripts": { - "install": ["make install"], "build:docker": ["make local-image"], - "build:dwn": ["make dwn"], - "build:motr": ["make motr"], - "build:nebula": ["bun --cwd nebula run build"], - "build:sonrd": ["make build"], + "build:motr": ["cd nebula && bun run build", "make motr"], + "build:nebula": ["cd nebula && bun run build"], + "build:sonrd": ["make dwn", "make build"], "gen:proto": ["make proto-gen"], "gen:pkl": ["make pkl"], "gen:templ": ["make templ"], - "start:motr": ["make start-motr"], - "watch:nebula": ["bun --cwd nebula run watch"] + "start:motr": ["make templ", "make motr", "make start-motr"], + "start:testnet": ["make templ", "make install", "make sh-testnet"] } } } diff --git a/nebula/assets/css/styles.css b/nebula/assets/css/styles.css index 9c953eaef..79dd184ae 100644 --- a/nebula/assets/css/styles.css +++ b/nebula/assets/css/styles.css @@ -1,6 +1,8 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Inter+Tight:ital,wght@0,500;0,600;0,700;1,700&display=fallback"); + /* src/css/styles.css */ -*, ::before, ::after { +*, ::before, ::after{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; @@ -54,7 +56,7 @@ --tw-contain-style: ; } -::backdrop { +::backdrop{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; @@ -554,1211 +556,2173 @@ video { display: none; } -.absolute { +[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #fff; + border-color: #6b7280; + border-width: 1px; + border-radius: 0px; + padding-top: 0.5rem; + padding-right: 0.75rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-shadow: 0 0 #0000; +} + +[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{ + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + border-color: #2563eb; +} + +input::-moz-placeholder, textarea::-moz-placeholder{ + color: #6b7280; + opacity: 1; +} + +input::placeholder,textarea::placeholder{ + color: #6b7280; + opacity: 1; +} + +::-webkit-datetime-edit-fields-wrapper{ + padding: 0; +} + +::-webkit-date-and-time-value{ + min-height: 1.5em; + text-align: inherit; +} + +::-webkit-datetime-edit{ + display: inline-flex; +} + +::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{ + padding-top: 0; + padding-bottom: 0; +} + +select{ + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.5rem center; + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + padding-right: 2.5rem; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; +} + +[multiple],[size]:where(select:not([size="1"])){ + background-image: initial; + background-position: initial; + background-repeat: unset; + background-size: initial; + padding-right: 0.75rem; + -webkit-print-color-adjust: unset; + print-color-adjust: unset; +} + +[type='checkbox'],[type='radio']{ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + display: inline-block; + vertical-align: middle; + background-origin: border-box; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + flex-shrink: 0; + height: 1rem; + width: 1rem; + color: #2563eb; + background-color: #fff; + border-color: #6b7280; + border-width: 1px; + --tw-shadow: 0 0 #0000; +} + +[type='checkbox']{ + border-radius: 0px; +} + +[type='radio']{ + border-radius: 100%; +} + +[type='checkbox']:focus,[type='radio']:focus{ + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 2px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} + +[type='checkbox']:checked,[type='radio']:checked{ + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +[type='checkbox']:checked{ + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); +} + +@media (forced-colors: active) { + [type='checkbox']:checked{ + -webkit-appearance: auto; + -moz-appearance: auto; + appearance: auto; + } +} + +[type='radio']:checked{ + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); +} + +@media (forced-colors: active) { + [type='radio']:checked{ + -webkit-appearance: auto; + -moz-appearance: auto; + appearance: auto; + } +} + +[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{ + border-color: transparent; + background-color: currentColor; +} + +[type='checkbox']:indeterminate{ + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +@media (forced-colors: active) { + [type='checkbox']:indeterminate{ + -webkit-appearance: auto; + -moz-appearance: auto; + appearance: auto; + } +} + +[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{ + border-color: transparent; + background-color: currentColor; +} + +[type='file']{ + background: unset; + border-color: inherit; + border-width: 0; + border-radius: 0; + padding: 0; + font-size: unset; + line-height: inherit; +} + +[type='file']:focus{ + outline: 1px solid ButtonText; + outline: 1px auto -webkit-focus-ring-color; +} + +.absolute{ position: absolute; } -.relative { +.relative{ position: relative; } -.left-0 { +.left-0{ left: 0px; } -.left-1\/2 { +.left-1\/2{ left: 50%; } -.right-0 { +.right-0{ right: 0px; } -.top-0 { +.top-0{ top: 0px; } -.z-10 { +.top-2{ + top: 0.5rem; +} + +.-z-10{ + z-index: -10; +} + +.z-10{ z-index: 10; } -.z-20 { +.z-20{ z-index: 20; } -.z-30 { +.z-30{ z-index: 30; } -.z-50 { +.z-50{ z-index: 50; } -.mx-auto { +.mx-auto{ margin-left: auto; margin-right: auto; } -.mb-1 { +.mb-1{ margin-bottom: 0.25rem; } -.mb-3 { +.mb-2{ + margin-bottom: 0.5rem; +} + +.mb-3{ margin-bottom: 0.75rem; } -.mb-6 { +.mb-4{ + margin-bottom: 1rem; +} + +.mb-6{ margin-bottom: 1.5rem; } -.ml-2 { +.mb-8{ + margin-bottom: 2rem; +} + +.ml-1{ + margin-left: 0.25rem; +} + +.ml-2{ margin-left: 0.5rem; } -.mr-1 { +.mr-1{ margin-right: 0.25rem; } -.mr-7 { +.mr-4{ + margin-right: 1rem; +} + +.mr-7{ margin-right: 1.75rem; } -.mt-1 { +.mt-1{ margin-top: 0.25rem; } -.mt-12 { +.mt-12{ margin-top: 3rem; } -.mt-2 { +.mt-2{ margin-top: 0.5rem; } -.mt-5 { +.mt-4{ + margin-top: 1rem; +} + +.mt-5{ margin-top: 1.25rem; } -.mt-6 { +.mt-6{ margin-top: 1.5rem; } -.block { +.block{ display: block; } -.inline-block { +.inline-block{ display: inline-block; } -.flex { +.flex{ display: flex; } -.inline-flex { +.inline-flex{ display: inline-flex; } -.table { +.table{ display: table; } -.inline-grid { +.grid{ + display: grid; +} + +.inline-grid{ display: inline-grid; } -.h-10 { +.h-10{ height: 2.5rem; } -.h-14 { +.h-14{ height: 3.5rem; } -.h-20 { +.h-20{ height: 5rem; } -.h-3 { +.h-3{ height: 0.75rem; } -.h-32 { +.h-32{ height: 8rem; } -.h-5 { +.h-5{ height: 1.25rem; } -.h-6 { +.h-6{ height: 1.5rem; } -.h-8 { +.h-8{ height: 2rem; } -.h-9 { +.h-9{ height: 2.25rem; } -.h-auto { +.h-auto{ height: auto; } -.h-full { +.h-full{ height: 100%; } -.w-1\/2 { +.w-1\/2{ width: 50%; } -.w-14 { +.w-14{ width: 3.5rem; } -.w-16 { +.w-16{ width: 4rem; } -.w-20 { +.w-20{ width: 5rem; } -.w-3 { +.w-3{ width: 0.75rem; } -.w-4 { +.w-4{ width: 1rem; } -.w-5 { +.w-5{ width: 1.25rem; } -.w-6 { +.w-6{ width: 1.5rem; } -.w-8 { +.w-8{ width: 2rem; } -.w-\[365px\] { +.w-\[365px\]{ width: 365px; } -.w-\[full\] { +.w-\[calc\(100\%\+1rem\)\]{ + width: calc(100% + 1rem); +} + +.w-\[full\]{ width: full; } -.w-auto { +.w-auto{ width: auto; } -.w-fit { +.w-fit{ width: -moz-fit-content; width: fit-content; } -.w-full { +.w-full{ width: 100%; } -.min-w-full { +.min-w-full{ min-width: 100%; } -.max-w-2xl { +.max-w-2xl{ max-width: 42rem; } -.max-w-lg { +.max-w-3xl{ + max-width: 48rem; +} + +.max-w-6xl{ + max-width: 72rem; +} + +.max-w-lg{ max-width: 32rem; } -.max-w-sm { +.max-w-screen-sm{ + max-width: 640px; +} + +.max-w-sm{ max-width: 24rem; } -.max-w-xl { +.max-w-xl{ max-width: 36rem; } -.-translate-x-0 { +.max-w-xs{ + max-width: 20rem; +} + +.shrink-0{ + flex-shrink: 0; +} + +.grow{ + flex-grow: 1; +} + +.-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-1\/2 { +.-translate-x-1\/2{ --tw-translate-x: -50%; 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-4 { +.-translate-x-4{ --tw-translate-x: -1rem; 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-7 { +.-translate-x-7{ --tw-translate-x: -1.75rem; 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\.5 { +.-translate-y-0\.5{ --tw-translate-y: -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-y-24 { +.translate-y-24{ --tw-translate-y: 6rem; 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-3 { +.translate-y-3{ --tw-translate-y: 0.75rem; 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-px { +.translate-y-px{ --tw-translate-y: 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)); } -.cursor-default { +.cursor-default{ cursor: default; } -.cursor-pointer { +.cursor-pointer{ cursor: pointer; } -.select-none { +.select-none{ -webkit-user-select: none; -moz-user-select: none; user-select: none; } -.grid-cols-3 { +.grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } -.flex-row { +.flex-row{ flex-direction: row; } -.flex-col { +.flex-col{ flex-direction: column; } -.items-start { +.flex-wrap{ + flex-wrap: wrap; +} + +.items-start{ align-items: flex-start; } -.items-center { +.items-center{ align-items: center; } -.justify-center { +.justify-end{ + justify-content: flex-end; +} + +.justify-center{ justify-content: center; } -.justify-between { +.justify-between{ justify-content: space-between; } -.gap-2 { +.gap-12{ + gap: 3rem; +} + +.gap-2{ gap: 0.5rem; } -.gap-3 { +.gap-3{ gap: 0.75rem; } -.gap-x-3 { +.gap-8{ + gap: 2rem; +} + +.gap-x-3{ -moz-column-gap: 0.75rem; column-gap: 0.75rem; } -.space-x-1 > :not([hidden]) ~ :not([hidden]) { +.gap-y-3{ + row-gap: 0.75rem; +} + +.space-x-1 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(0.25rem * var(--tw-space-x-reverse)); margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); } -.space-x-3 > :not([hidden]) ~ :not([hidden]) { +.space-x-3 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); } -.space-y-1 > :not([hidden]) ~ :not([hidden]) { +.space-x-4 > :not([hidden]) ~ :not([hidden]){ + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +} + +.space-y-1 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } -.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { +.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); } -.space-y-2 > :not([hidden]) ~ :not([hidden]) { +.space-y-2 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } -.space-y-3 > :not([hidden]) ~ :not([hidden]) { +.space-y-3 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } -.divide-y > :not([hidden]) ~ :not([hidden]) { +.space-y-4 > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.divide-y > :not([hidden]) ~ :not([hidden]){ --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); } -.divide-neutral-200 > :not([hidden]) ~ :not([hidden]) { +.divide-neutral-200 > :not([hidden]) ~ :not([hidden]){ --tw-divide-opacity: 1; border-color: rgb(229 229 229 / var(--tw-divide-opacity)); } -.overflow-hidden { +.overflow-hidden{ overflow: hidden; } -.overflow-x-auto { +.overflow-x-auto{ overflow-x: auto; } -.whitespace-nowrap { +.whitespace-nowrap{ white-space: nowrap; } -.rounded { +.rounded{ border-radius: 0.25rem; } -.rounded-full { +.rounded-full{ border-radius: 9999px; } -.rounded-lg { +.rounded-lg{ border-radius: 0.5rem; } -.rounded-md { +.rounded-md{ border-radius: 0.375rem; } -.border { +.border{ border-width: 1px; } -.border-2 { +.border-2{ border-width: 2px; } -.border-t { +.border-t{ border-top-width: 1px; } -.border-blue-600 { +.border-blue-600{ --tw-border-opacity: 1; border-color: rgb(37 99 235 / var(--tw-border-opacity)); } -.border-gray-100 { +.border-gray-100{ --tw-border-opacity: 1; border-color: rgb(243 244 246 / var(--tw-border-opacity)); } -.border-gray-200\/70 { +.border-gray-200\/70{ border-color: rgb(229 231 235 / 0.7); } -.border-green-600 { +.border-green-600{ --tw-border-opacity: 1; border-color: rgb(22 163 74 / var(--tw-border-opacity)); } -.border-neutral-200\/60 { +.border-neutral-200\/60{ border-color: rgb(229 229 229 / 0.6); } -.border-neutral-200\/70 { +.border-neutral-200\/70{ border-color: rgb(229 229 229 / 0.7); } -.border-neutral-300 { +.border-neutral-300{ --tw-border-opacity: 1; border-color: rgb(212 212 212 / var(--tw-border-opacity)); } -.border-neutral-900 { +.border-neutral-900{ --tw-border-opacity: 1; border-color: rgb(23 23 23 / var(--tw-border-opacity)); } -.border-red-600 { +.border-red-600{ --tw-border-opacity: 1; border-color: rgb(220 38 38 / var(--tw-border-opacity)); } -.border-transparent { +.border-transparent{ border-color: transparent; } -.border-white { +.border-white{ --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity)); } -.border-yellow-500 { +.border-yellow-500{ --tw-border-opacity: 1; border-color: rgb(234 179 8 / var(--tw-border-opacity)); } -.bg-blue-50 { +.border-zinc-200{ + --tw-border-opacity: 1; + border-color: rgb(228 228 231 / var(--tw-border-opacity)); +} + +.bg-blue-50{ --tw-bg-opacity: 1; background-color: rgb(239 246 255 / var(--tw-bg-opacity)); } -.bg-blue-600 { +.bg-blue-600{ --tw-bg-opacity: 1; background-color: rgb(37 99 235 / var(--tw-bg-opacity)); } -.bg-gray-100 { +.bg-gray-100{ --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } -.bg-green-50 { +.bg-green-50{ --tw-bg-opacity: 1; background-color: rgb(240 253 244 / var(--tw-bg-opacity)); } -.bg-green-500 { +.bg-green-500{ --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity)); } -.bg-green-600 { +.bg-green-600{ --tw-bg-opacity: 1; background-color: rgb(22 163 74 / var(--tw-bg-opacity)); } -.bg-neutral-50 { +.bg-neutral-50{ --tw-bg-opacity: 1; background-color: rgb(250 250 250 / var(--tw-bg-opacity)); } -.bg-neutral-900 { +.bg-neutral-900{ --tw-bg-opacity: 1; background-color: rgb(23 23 23 / var(--tw-bg-opacity)); } -.bg-neutral-950 { +.bg-neutral-950{ --tw-bg-opacity: 1; background-color: rgb(10 10 10 / var(--tw-bg-opacity)); } -.bg-red-50 { +.bg-red-50{ --tw-bg-opacity: 1; background-color: rgb(254 242 242 / var(--tw-bg-opacity)); } -.bg-red-600 { +.bg-red-600{ --tw-bg-opacity: 1; background-color: rgb(220 38 38 / var(--tw-bg-opacity)); } -.bg-transparent { +.bg-transparent{ background-color: transparent; } -.bg-white { +.bg-white{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-yellow-50 { +.bg-yellow-50{ --tw-bg-opacity: 1; background-color: rgb(254 252 232 / var(--tw-bg-opacity)); } -.bg-yellow-500 { +.bg-yellow-500{ --tw-bg-opacity: 1; background-color: rgb(234 179 8 / var(--tw-bg-opacity)); } -.bg-yellow-600 { +.bg-yellow-600{ --tw-bg-opacity: 1; background-color: rgb(202 138 4 / var(--tw-bg-opacity)); } -.object-cover { +.bg-zinc-900{ + --tw-bg-opacity: 1; + background-color: rgb(24 24 27 / var(--tw-bg-opacity)); +} + +.bg-gradient-to-r{ + background-image: linear-gradient(to right, var(--tw-gradient-stops)); +} + +.from-zinc-500{ + --tw-gradient-from: #71717a var(--tw-gradient-from-position); + --tw-gradient-to: rgb(113 113 122 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.via-zinc-900{ + --tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), #18181b var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.to-zinc-900{ + --tw-gradient-to: #18181b var(--tw-gradient-to-position); +} + +.bg-clip-text{ + -webkit-background-clip: text; + background-clip: text; +} + +.fill-current{ + fill: currentColor; +} + +.fill-zinc-300{ + fill: #d4d4d8; +} + +.object-cover{ -o-object-fit: cover; object-fit: cover; } -.p-1 { +.p-1{ padding: 0.25rem; } -.p-4 { +.p-4{ padding: 1rem; } -.p-5 { +.p-5{ padding: 1.25rem; } -.p-6 { +.p-6{ padding: 1.5rem; } -.p-7 { +.p-7{ padding: 1.75rem; } -.px-2\.5 { +.px-2\.5{ padding-left: 0.625rem; padding-right: 0.625rem; } -.px-3 { +.px-3{ padding-left: 0.75rem; padding-right: 0.75rem; } -.px-3\.5 { +.px-3\.5{ padding-left: 0.875rem; padding-right: 0.875rem; } -.px-4 { +.px-4{ padding-left: 1rem; padding-right: 1rem; } -.px-5 { +.px-5{ padding-left: 1.25rem; padding-right: 1.25rem; } -.px-7 { +.px-7{ padding-left: 1.75rem; padding-right: 1.75rem; } -.py-0\.5 { +.py-0\.5{ padding-top: 0.125rem; padding-bottom: 0.125rem; } -.py-1 { +.py-1{ padding-top: 0.25rem; padding-bottom: 0.25rem; } -.py-2 { +.py-2{ padding-top: 0.5rem; padding-bottom: 0.5rem; } -.py-3 { +.py-3{ padding-top: 0.75rem; padding-bottom: 0.75rem; } -.py-4 { +.py-4{ padding-top: 1rem; padding-bottom: 1rem; } -.pb-1 { +.py-8{ + padding-top: 2rem; + padding-bottom: 2rem; +} + +.pb-1{ padding-bottom: 0.25rem; } -.pb-2 { +.pb-12{ + padding-bottom: 3rem; +} + +.pb-2{ padding-bottom: 0.5rem; } -.pb-3 { +.pb-3{ padding-bottom: 0.75rem; } -.pb-6 { +.pb-4{ + padding-bottom: 1rem; +} + +.pb-6{ padding-bottom: 1.5rem; } -.pl-4 { +.pl-4{ padding-left: 1rem; } -.pr-2 { +.pr-2{ padding-right: 0.5rem; } -.pr-4 { +.pr-4{ padding-right: 1rem; } -.pt-0 { +.pt-0{ padding-top: 0px; } -.pt-2 { +.pt-2{ padding-top: 0.5rem; } -.pt-8 { +.pt-32{ + padding-top: 8rem; +} + +.pt-8{ padding-top: 2rem; } -.text-left { +.text-left{ text-align: left; } -.text-right { +.text-center{ + text-align: center; +} + +.text-right{ text-align: right; } -.text-2xl { +.font-inter-tight{ + font-family: Inter Tight, sans-serif; +} + +.text-2xl{ font-size: 1.5rem; - line-height: 2rem; + line-height: 1.415; + letter-spacing: -0.017em; } -.text-base { +.text-4xl{ + font-size: 2.5rem; + line-height: 1.25; + letter-spacing: -0.017em; +} + +.text-base{ font-size: 1rem; - line-height: 1.5rem; + line-height: 1.5; + letter-spacing: -0.017em; } -.text-lg { +.text-lg{ font-size: 1.125rem; - line-height: 1.75rem; + line-height: 1.5; + letter-spacing: -0.017em; } -.text-sm { +.text-sm{ font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.5715; } -.text-xl { +.text-xl{ font-size: 1.25rem; - line-height: 1.75rem; + line-height: 1.5; + letter-spacing: -0.017em; } -.text-xs { +.text-xs{ font-size: 0.75rem; - line-height: 1rem; + line-height: 1.5; } -.font-bold { +.font-bold{ font-weight: 700; } -.font-medium { +.font-medium{ font-weight: 500; } -.font-normal { +.font-normal{ font-weight: 400; } -.font-semibold { +.font-semibold{ font-weight: 600; } -.uppercase { +.uppercase{ text-transform: uppercase; } -.leading-none { +.italic{ + font-style: italic; +} + +.tabular-nums{ + --tw-numeric-spacing: tabular-nums; + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); +} + +.leading-none{ line-height: 1; } -.tracking-tight { +.tracking-tight{ letter-spacing: -0.025em; } -.tracking-wide { +.tracking-wide{ letter-spacing: 0.025em; } -.text-blue-500 { +.text-blue-500{ --tw-text-opacity: 1; color: rgb(59 130 246 / var(--tw-text-opacity)); } -.text-blue-600 { +.text-blue-600{ --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity)); } -.text-gray-400 { +.text-gray-400{ --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); } -.text-gray-400\/70 { +.text-gray-400\/70{ color: rgb(156 163 175 / 0.7); } -.text-gray-500 { +.text-gray-500{ --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); } -.text-gray-600 { +.text-gray-600{ --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity)); } -.text-gray-700 { +.text-gray-700{ --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); } -.text-gray-900 { +.text-gray-900{ --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); } -.text-green-500 { +.text-green-500{ --tw-text-opacity: 1; color: rgb(34 197 94 / var(--tw-text-opacity)); } -.text-green-600 { +.text-green-600{ --tw-text-opacity: 1; color: rgb(22 163 74 / var(--tw-text-opacity)); } -.text-neutral-100 { +.text-neutral-100{ --tw-text-opacity: 1; color: rgb(245 245 245 / var(--tw-text-opacity)); } -.text-neutral-500 { +.text-neutral-500{ --tw-text-opacity: 1; color: rgb(115 115 115 / var(--tw-text-opacity)); } -.text-neutral-800 { +.text-neutral-800{ --tw-text-opacity: 1; color: rgb(38 38 38 / var(--tw-text-opacity)); } -.text-neutral-900 { +.text-neutral-900{ --tw-text-opacity: 1; color: rgb(23 23 23 / var(--tw-text-opacity)); } -.text-red-500 { +.text-red-500{ --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity)); } -.text-red-600 { +.text-red-600{ --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity)); } -.text-white { +.text-transparent{ + color: transparent; +} + +.text-white{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-yellow-600 { +.text-yellow-600{ --tw-text-opacity: 1; color: rgb(202 138 4 / var(--tw-text-opacity)); } -.opacity-50 { +.text-zinc-100{ + --tw-text-opacity: 1; + color: rgb(244 244 245 / var(--tw-text-opacity)); +} + +.text-zinc-500{ + --tw-text-opacity: 1; + color: rgb(113 113 122 / var(--tw-text-opacity)); +} + +.text-zinc-600{ + --tw-text-opacity: 1; + color: rgb(82 82 91 / var(--tw-text-opacity)); +} + +.text-zinc-700{ + --tw-text-opacity: 1; + color: rgb(63 63 70 / var(--tw-text-opacity)); +} + +.text-zinc-800{ + --tw-text-opacity: 1; + color: rgb(39 39 42 / var(--tw-text-opacity)); +} + +.text-zinc-900{ + --tw-text-opacity: 1; + color: rgb(24 24 27 / var(--tw-text-opacity)); +} + +.opacity-50{ opacity: 0.5; } -.opacity-70 { +.opacity-70{ opacity: 0.7; } -.shadow-sm { +.shadow{ + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-2xl{ + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-sm{ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.transition-all { +.shadow-zinc-950\/20{ + --tw-shadow-color: rgb(9 9 11 / 0.2); + --tw-shadow: var(--tw-shadow-colored); +} + +.transition{ + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition-all{ transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } -.transition-colors { +.transition-colors{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } -.duration-100 { +.duration-100{ transition-duration: 100ms; } -.duration-200 { +.duration-200{ transition-duration: 200ms; } -.duration-300 { +.duration-300{ transition-duration: 300ms; } -.ease-out { +.ease-out{ transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } +.\[background\:linear-gradient\(theme\(colors\.white\)\2c theme\(colors\.white\)\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.zinc\.300\)\2c theme\(colors\.zinc\.100\)\2c theme\(colors\.zinc\.300\)\)_border-box\]{ + background: linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#d4d4d8,#f4f4f5,#d4d4d8) border-box; +} + +/* See Alpine.js: https://github.com/alpinejs/alpine#x-cloak */ + +[x-cloak=""] { + display: none; +} + /* Custom styles */ -.placeholder\:text-neutral-400::-moz-placeholder { +.form-input:focus, +.form-textarea:focus, +.form-multiselect:focus, +.form-select:focus, +.form-checkbox:focus, +.form-radio:focus{ + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +/* Hamburger button */ + +.hamburger svg > *:nth-child(1), +.hamburger svg > *:nth-child(2), +.hamburger svg > *:nth-child(3) { + transform-origin: center; + transform: rotate(0deg); +} + +.hamburger svg > *:nth-child(1) { + transition: + y 0.1s 0.25s ease-in, + transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), + opacity 0.1s ease-in; +} + +.hamburger svg > *:nth-child(2) { + transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); +} + +.hamburger svg > *:nth-child(3) { + transition: + y 0.1s 0.25s ease-in, + transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), + width 0.1s 0.25s ease-in; +} + +.hamburger.active svg > *:nth-child(1) { + opacity: 0; + y: 11; + transform: rotate(225deg); + transition: + y 0.1s ease-out, + transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), + opacity 0.1s 0.12s ease-out; +} + +.hamburger.active svg > *:nth-child(2) { + transform: rotate(225deg); + transition: transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); +} + +.hamburger.active svg > *:nth-child(3) { + y: 11; + transform: rotate(135deg); + transition: + y 0.1s ease-out, + transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), + width 0.1s ease-out; +} + +/* Typography */ + +.h1{ + font-size: 3.25rem; + line-height: 1.2; + letter-spacing: -0.017em; + font-weight: 700; +} + +.h2{ + font-size: 2.5rem; + line-height: 1.25; + letter-spacing: -0.017em; + font-weight: 700; +} + +.h3{ + font-size: 2rem; + line-height: 1.3125; + letter-spacing: -0.017em; + font-weight: 700; +} + +.h4{ + font-size: 1.5rem; + line-height: 1.415; + letter-spacing: -0.017em; + font-weight: 700; +} + +@media (min-width: 768px) { + .h1{ + font-size: 3.75rem; + line-height: 1.1666; + letter-spacing: -0.017em; + } + + .h2{ + font-size: 3.25rem; + line-height: 1.2; + letter-spacing: -0.017em; + } + + .h3{ + font-size: 2.5rem; + line-height: 1.25; + letter-spacing: -0.017em; + } +} + +/* Buttons */ + +.btn, +.btn-sm{ + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 0.375rem; + border-width: 1px; + border-color: transparent; + font-size: 0.875rem; + line-height: 1.5715; + font-weight: 500; + letter-spacing: 0em; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.btn{ + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.btn-sm{ + padding-left: 0.5rem; + padding-right: 0.5rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +/* Forms */ + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + -webkit-appearance: none; +} + +.form-input, +.form-textarea, +.form-multiselect, +.form-select, +.form-checkbox, +.form-radio{ + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(228 228 231 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-shadow-color: rgb(0 0 0 / 0.05); + --tw-shadow: var(--tw-shadow-colored); +} + +.form-input:focus, +.form-textarea:focus, +.form-multiselect:focus, +.form-select:focus, +.form-checkbox:focus, +.form-radio:focus{ + --tw-border-opacity: 1; + border-color: rgb(161 161 170 / var(--tw-border-opacity)); +} + +.form-input, +.form-textarea, +.form-multiselect, +.form-select, +.form-checkbox{ + border-radius: 0.25rem; +} + +.form-input, +.form-textarea, +.form-multiselect, +.form-select{ + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.5715; + --tw-text-opacity: 1; + color: rgb(82 82 91 / var(--tw-text-opacity)); +} + +.form-input::-moz-placeholder, .form-textarea::-moz-placeholder{ + --tw-placeholder-opacity: 1; + color: rgb(161 161 170 / var(--tw-placeholder-opacity)); +} + +.form-input::placeholder, +.form-textarea::placeholder{ + --tw-placeholder-opacity: 1; + color: rgb(161 161 170 / var(--tw-placeholder-opacity)); +} + +.form-select{ + padding-right: 2.5rem; +} + +.form-checkbox, +.form-radio{ + --tw-text-opacity: 1; + color: rgb(39 39 42 / var(--tw-text-opacity)); +} + +.form-checkbox{ + border-radius: 0.125rem; +} + +/* Chrome, Safari and Opera */ + +.no-scrollbar::-webkit-scrollbar { + display: none; +} + +.no-scrollbar { + -ms-overflow-style: none; + /* IE and Edge */ + scrollbar-width: none; + /* Firefox */ +} + +.placeholder\:text-neutral-400::-moz-placeholder{ --tw-text-opacity: 1; color: rgb(163 163 163 / var(--tw-text-opacity)); } -.placeholder\:text-neutral-400::placeholder { +.placeholder\:text-neutral-400::placeholder{ --tw-text-opacity: 1; color: rgb(163 163 163 / var(--tw-text-opacity)); } -.hover\:bg-blue-100:hover { +.before\:pointer-events-none::before{ + content: var(--tw-content); + pointer-events: none; +} + +.before\:absolute::before{ + content: var(--tw-content); + position: absolute; +} + +.before\:inset-0::before{ + content: var(--tw-content); + inset: 0px; +} + +.before\:-top-12::before{ + content: var(--tw-content); + top: -3rem; +} + +.before\:-z-10::before{ + content: var(--tw-content); + z-index: -10; +} + +.before\:h-80::before{ + content: var(--tw-content); + height: 20rem; +} + +.before\:h-96::before{ + content: var(--tw-content); + height: 24rem; +} + +.before\:w-96::before{ + content: var(--tw-content); + width: 24rem; +} + +.before\:rounded-full::before{ + content: var(--tw-content); + border-radius: 9999px; +} + +.before\:bg-zinc-900::before{ + content: var(--tw-content); + --tw-bg-opacity: 1; + background-color: rgb(24 24 27 / var(--tw-bg-opacity)); +} + +.before\:bg-gradient-to-b::before{ + content: var(--tw-content); + background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); +} + +.before\:from-zinc-100::before{ + content: var(--tw-content); + --tw-gradient-from: #f4f4f5 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(244 244 245 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.before\:opacity-\[\.15\]::before{ + content: var(--tw-content); + opacity: .15; +} + +.before\:blur-3xl::before{ + content: var(--tw-content); + --tw-blur: blur(64px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.after\:absolute::after{ + content: var(--tw-content); + position: absolute; +} + +.after\:right-0::after{ + content: var(--tw-content); + right: 0px; +} + +.after\:top-1\/2::after{ + content: var(--tw-content); + top: 50%; +} + +.after\:hidden::after{ + content: var(--tw-content); + display: none; +} + +.after\:h-8::after{ + content: var(--tw-content); + height: 2rem; +} + +.after\:w-px::after{ + content: var(--tw-content); + width: 1px; +} + +.after\:-translate-y-1\/2::after{ + content: var(--tw-content); + --tw-translate-y: -50%; + 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)); +} + +.after\:border-l::after{ + content: var(--tw-content); + border-left-width: 1px; +} + +.after\:border-dashed::after{ + content: var(--tw-content); + border-style: dashed; +} + +.after\:border-zinc-300::after{ + content: var(--tw-content); + --tw-border-opacity: 1; + border-color: rgb(212 212 216 / var(--tw-border-opacity)); +} + +.last\:after\:hidden:last-child::after{ + content: var(--tw-content); + display: none; +} + +.hover\:bg-blue-100:hover{ --tw-bg-opacity: 1; background-color: rgb(219 234 254 / var(--tw-bg-opacity)); } -.hover\:bg-blue-600:hover { +.hover\:bg-blue-600:hover{ --tw-bg-opacity: 1; background-color: rgb(37 99 235 / var(--tw-bg-opacity)); } -.hover\:bg-blue-700:hover { +.hover\:bg-blue-700:hover{ --tw-bg-opacity: 1; background-color: rgb(29 78 216 / var(--tw-bg-opacity)); } -.hover\:bg-gray-50:hover { +.hover\:bg-gray-50:hover{ --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); } -.hover\:bg-green-100:hover { +.hover\:bg-green-100:hover{ --tw-bg-opacity: 1; background-color: rgb(220 252 231 / var(--tw-bg-opacity)); } -.hover\:bg-green-600:hover { +.hover\:bg-green-600:hover{ --tw-bg-opacity: 1; background-color: rgb(22 163 74 / var(--tw-bg-opacity)); } -.hover\:bg-green-700:hover { +.hover\:bg-green-700:hover{ --tw-bg-opacity: 1; background-color: rgb(21 128 61 / var(--tw-bg-opacity)); } -.hover\:bg-neutral-100:hover { +.hover\:bg-neutral-100:hover{ --tw-bg-opacity: 1; background-color: rgb(245 245 245 / var(--tw-bg-opacity)); } -.hover\:bg-neutral-800:hover { +.hover\:bg-neutral-800:hover{ --tw-bg-opacity: 1; background-color: rgb(38 38 38 / var(--tw-bg-opacity)); } -.hover\:bg-neutral-900:hover { +.hover\:bg-neutral-900:hover{ --tw-bg-opacity: 1; background-color: rgb(23 23 23 / var(--tw-bg-opacity)); } -.hover\:bg-red-100:hover { +.hover\:bg-red-100:hover{ --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity)); } -.hover\:bg-red-600:hover { +.hover\:bg-red-600:hover{ --tw-bg-opacity: 1; background-color: rgb(220 38 38 / var(--tw-bg-opacity)); } -.hover\:bg-red-700:hover { +.hover\:bg-red-700:hover{ --tw-bg-opacity: 1; background-color: rgb(185 28 28 / var(--tw-bg-opacity)); } -.hover\:bg-yellow-100:hover { +.hover\:bg-yellow-100:hover{ --tw-bg-opacity: 1; background-color: rgb(254 249 195 / var(--tw-bg-opacity)); } -.hover\:bg-yellow-500:hover { +.hover\:bg-yellow-500:hover{ --tw-bg-opacity: 1; background-color: rgb(234 179 8 / var(--tw-bg-opacity)); } -.hover\:bg-yellow-700:hover { +.hover\:bg-yellow-700:hover{ --tw-bg-opacity: 1; background-color: rgb(161 98 7 / var(--tw-bg-opacity)); } -.hover\:text-blue-600:hover { +.hover\:bg-zinc-800:hover{ + --tw-bg-opacity: 1; + background-color: rgb(39 39 42 / var(--tw-bg-opacity)); +} + +.hover\:text-blue-600:hover{ --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity)); } -.hover\:text-blue-700:hover { +.hover\:text-blue-700:hover{ --tw-text-opacity: 1; color: rgb(29 78 216 / var(--tw-text-opacity)); } -.hover\:text-green-600:hover { +.hover\:text-green-600:hover{ --tw-text-opacity: 1; color: rgb(22 163 74 / var(--tw-text-opacity)); } -.hover\:text-neutral-600:hover { +.hover\:text-neutral-600:hover{ --tw-text-opacity: 1; color: rgb(82 82 82 / var(--tw-text-opacity)); } -.hover\:text-neutral-700:hover { +.hover\:text-neutral-700:hover{ --tw-text-opacity: 1; color: rgb(64 64 64 / var(--tw-text-opacity)); } -.hover\:text-neutral-900:hover { +.hover\:text-neutral-900:hover{ --tw-text-opacity: 1; color: rgb(23 23 23 / var(--tw-text-opacity)); } -.hover\:text-red-600:hover { +.hover\:text-red-600:hover{ --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity)); } -.hover\:text-white:hover { +.hover\:text-white:hover{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } -.hover\:text-yellow-700:hover { +.hover\:text-yellow-700:hover{ --tw-text-opacity: 1; color: rgb(161 98 7 / var(--tw-text-opacity)); } -.hover\:underline:hover { +.hover\:text-zinc-900:hover{ + --tw-text-opacity: 1; + color: rgb(24 24 27 / var(--tw-text-opacity)); +} + +.hover\:underline:hover{ text-decoration-line: underline; } -.focus\:border-neutral-300:focus { +.focus\:border-neutral-300:focus{ --tw-border-opacity: 1; border-color: rgb(212 212 212 / var(--tw-border-opacity)); } -.focus\:bg-white:focus { +.focus\:bg-white:focus{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.focus\:outline-none:focus { +.focus\:outline-none:focus{ outline: 2px solid transparent; outline-offset: 2px; } -.focus\:ring-2:focus { +.focus\:ring-2:focus{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.focus\:ring-blue-100:focus { +.focus\:ring-blue-100:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(219 234 254 / var(--tw-ring-opacity)); } -.focus\:ring-blue-700:focus { +.focus\:ring-blue-700:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(29 78 216 / var(--tw-ring-opacity)); } -.focus\:ring-gray-700:focus { +.focus\:ring-gray-700:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity)); } -.focus\:ring-green-100:focus { +.focus\:ring-green-100:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(220 252 231 / var(--tw-ring-opacity)); } -.focus\:ring-green-700:focus { +.focus\:ring-green-700:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(21 128 61 / var(--tw-ring-opacity)); } -.focus\:ring-neutral-100:focus { +.focus\:ring-neutral-100:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(245 245 245 / var(--tw-ring-opacity)); } -.focus\:ring-neutral-200\/60:focus { +.focus\:ring-neutral-200\/60:focus{ --tw-ring-color: rgb(229 229 229 / 0.6); } -.focus\:ring-neutral-400:focus { +.focus\:ring-neutral-400:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(163 163 163 / var(--tw-ring-opacity)); } -.focus\:ring-neutral-900:focus { +.focus\:ring-neutral-900:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(23 23 23 / var(--tw-ring-opacity)); } -.focus\:ring-red-100:focus { +.focus\:ring-red-100:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(254 226 226 / var(--tw-ring-opacity)); } -.focus\:ring-red-700:focus { +.focus\:ring-red-700:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(185 28 28 / var(--tw-ring-opacity)); } -.focus\:ring-yellow-100:focus { +.focus\:ring-yellow-100:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(254 249 195 / var(--tw-ring-opacity)); } -.focus\:ring-yellow-700:focus { +.focus\:ring-yellow-700:focus{ --tw-ring-opacity: 1; --tw-ring-color: rgb(161 98 7 / var(--tw-ring-opacity)); } -.focus\:ring-offset-2:focus { +.focus\:ring-offset-2:focus{ --tw-ring-offset-width: 2px; } -.focus-visible\:outline-none:focus-visible { +.focus-visible\:outline-none:focus-visible{ outline: 2px solid transparent; outline-offset: 2px; } -.focus-visible\:ring-2:focus-visible { +.focus-visible\:ring-2:focus-visible{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.focus-visible\:ring-offset-2:focus-visible { +.focus-visible\:ring-offset-2:focus-visible{ --tw-ring-offset-width: 2px; } -.active\:bg-white:active { +.active\:bg-white:active{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.disabled\:pointer-events-none:disabled { +.disabled\:pointer-events-none:disabled{ pointer-events: none; } -.disabled\:cursor-not-allowed:disabled { +.disabled\:cursor-not-allowed:disabled{ cursor: not-allowed; } -.disabled\:opacity-50:disabled { +.disabled\:opacity-50:disabled{ opacity: 0.5; } -.peer:disabled ~ .peer-disabled\:cursor-not-allowed { +.peer:disabled ~ .peer-disabled\:cursor-not-allowed{ cursor: not-allowed; } -.peer:disabled ~ .peer-disabled\:opacity-70 { +.peer:disabled ~ .peer-disabled\:opacity-70{ opacity: 0.7; } -@media (min-width: 640px) { - .sm\:mb-0 { - margin-bottom: 0px; +@media not all and (min-width: 640px){ + .max-sm\:order-1{ + order: 1; } } -@media (min-width: 768px) { - .md\:flex-row { +@media (min-width: 640px){ + .sm\:col-span-6{ + grid-column: span 6 / span 6; + } + + .sm\:mb-0{ + margin-bottom: 0px; + } + + .sm\:inline-flex{ + display: inline-flex; + } + + .sm\:max-w-none{ + max-width: none; + } + + .sm\:grid-cols-12{ + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .sm\:grid-cols-2{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .sm\:justify-center{ + justify-content: center; + } + + .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]){ + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); + } + + .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]){ + --tw-space-y-reverse: 0; + margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0px * var(--tw-space-y-reverse)); + } + + .sm\:px-6{ + padding-left: 1.5rem; + padding-right: 1.5rem; + } +} + +@media (min-width: 768px){ + .md\:top-6{ + top: 1.5rem; + } + + .md\:col-span-3{ + grid-column: span 3 / span 3; + } + + .md\:-mx-5{ + margin-left: -1.25rem; + margin-right: -1.25rem; + } + + .md\:max-w-none{ + max-width: none; + } + + .md\:grid-cols-4{ + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .md\:flex-row{ flex-direction: row; } - .md\:gap-4 { + .md\:gap-0{ + gap: 0px; + } + + .md\:gap-4{ gap: 1rem; } - .md\:gap-6 { + .md\:gap-6{ gap: 1.5rem; } + + .md\:px-5{ + padding-left: 1.25rem; + padding-right: 1.25rem; + } + + .md\:py-12{ + padding-top: 3rem; + padding-bottom: 3rem; + } + + .md\:pb-16{ + padding-bottom: 4rem; + } + + .md\:pb-20{ + padding-bottom: 5rem; + } + + .md\:pt-40{ + padding-top: 10rem; + } + + .md\:text-3xl{ + font-size: 2rem; + line-height: 1.3125; + letter-spacing: -0.017em; + } + + .md\:text-5xl{ + font-size: 3.25rem; + line-height: 1.2; + letter-spacing: -0.017em; + } + + .md\:after\:block::after{ + content: var(--tw-content); + display: block; + } } -@media (min-width: 1024px) { - .lg\:text-2xl { +@media (min-width: 1024px){ + .lg\:col-span-2{ + grid-column: span 2 / span 2; + } + + .lg\:col-span-6{ + grid-column: span 6 / span 6; + } + + .lg\:p-24{ + padding: 6rem; + } + + .lg\:px-5{ + padding-left: 1.25rem; + padding-right: 1.25rem; + } + + .lg\:text-2xl{ font-size: 1.5rem; - line-height: 2rem; + line-height: 1.415; + letter-spacing: -0.017em; } - .lg\:text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; + .lg\:text-3xl{ + font-size: 2rem; + line-height: 1.3125; + letter-spacing: -0.017em; } - .lg\:text-xl { + .lg\:text-xl{ font-size: 1.25rem; - line-height: 1.75rem; + line-height: 1.5; + letter-spacing: -0.017em; } } -.\[\&\:has\(svg\)\]\:pl-11:has(svg) { +.\[\&\:has\(svg\)\]\:pl-11:has(svg){ padding-left: 2.75rem; } -.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div { +.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div{ --tw-translate-y: -3px; 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)); } -.\[\&\>svg\]\:absolute>svg { +.\[\&\>svg\]\:absolute>svg{ position: absolute; } -.\[\&\>svg\]\:left-4>svg { +.\[\&\>svg\]\:left-4>svg{ left: 1rem; } -.\[\&\>svg\]\:top-4>svg { +.\[\&\>svg\]\:top-4>svg{ top: 1rem; } -.\[\&_\.active-breadcrumb\]\:font-medium .active-breadcrumb { +.\[\&_\.active-breadcrumb\]\:font-medium .active-breadcrumb{ font-weight: 500; } -.\[\&_\.active-breadcrumb\]\:text-neutral-600 .active-breadcrumb { +.\[\&_\.active-breadcrumb\]\:text-neutral-600 .active-breadcrumb{ --tw-text-opacity: 1; color: rgb(82 82 82 / var(--tw-text-opacity)); } diff --git a/nebula/blocks/footer.templ b/nebula/blocks/footer.templ new file mode 100644 index 000000000..e3aaf4f19 --- /dev/null +++ b/nebula/blocks/footer.templ @@ -0,0 +1,100 @@ +package blocks + +templ FooterMarketingNav() { + + +} diff --git a/nebula/blocks/footer_templ.go b/nebula/blocks/footer_templ.go new file mode 100644 index 000000000..51e614c0f --- /dev/null +++ b/nebula/blocks/footer_templ.go @@ -0,0 +1,40 @@ +// Code generated by templ - DO NOT EDIT. + +// templ: version: v0.2.778 +package blocks + +//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 FooterMarketingNav() 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/nebula/blocks/headers.templ b/nebula/blocks/headers.templ new file mode 100644 index 000000000..531250649 --- /dev/null +++ b/nebula/blocks/headers.templ @@ -0,0 +1,32 @@ +package blocks + +templ HeaderMarketingNav() { + +
+
+
+
+ +
+ + + Logo + +
+ + +
+
+
+
+} diff --git a/nebula/blocks/headers_templ.go b/nebula/blocks/headers_templ.go new file mode 100644 index 000000000..5ef91ea96 --- /dev/null +++ b/nebula/blocks/headers_templ.go @@ -0,0 +1,40 @@ +// Code generated by templ - DO NOT EDIT. + +// templ: version: v0.2.778 +package blocks + +//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 HeaderMarketingNav() 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("
\"Logo\"
") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return templ_7745c5c3_Err + }) +} + +var _ = templruntime.GeneratedTemplate diff --git a/nebula/blocks/sections.templ b/nebula/blocks/sections.templ new file mode 100644 index 000000000..a027777ec --- /dev/null +++ b/nebula/blocks/sections.templ @@ -0,0 +1,117 @@ +package blocks + +templ SectionHero() { + +
+
+ +
+
+
+

+ The creative + + platform + + + for cross-functional work +

+

+ Turbocharge your creative process with a powerful AI design platform that gives creatives the power of creating without limits. +

+
+ + +
+
+
+
+ +
+ Hero +
+ +
+
+ +
+

0K

+

Assets packed with power beyond your imagination.

+
+ +
+

0K

+

Assets packed with power beyond your imagination.

+
+ +
+

0M+

+

Assets packed with power beyond your imagination.

+
+ +
+

0K

+

Assets packed with power beyond your imagination.

+
+
+ + +
+
+
+} diff --git a/nebula/blocks/sections_templ.go b/nebula/blocks/sections_templ.go new file mode 100644 index 000000000..ed91b5d1a --- /dev/null +++ b/nebula/blocks/sections_templ.go @@ -0,0 +1,40 @@ +// Code generated by templ - DO NOT EDIT. + +// templ: version: v0.2.778 +package blocks + +//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 SectionHero() 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("

The creative platform for cross-functional work

Turbocharge your creative process with a powerful AI design platform that gives creatives the power of creating without limits.

\"Hero\"

0K

Assets packed with power beyond your imagination.

0K

Assets packed with power beyond your imagination.

0M+

Assets packed with power beyond your imagination.

0K

Assets packed with power beyond your imagination.

") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return templ_7745c5c3_Err + }) +} + +var _ = templruntime.GeneratedTemplate diff --git a/nebula/bun.lockb b/nebula/bun.lockb index 784492aec2c24071dead9130f1a76fb3332469c7..86d31b16c69a1c784d6e6c0e9296a54b9817342d 100755 GIT binary patch delta 9333 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 KL#KG_-uYk3%OQ9G delta 8765 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 PGDM_H#|mkn^7#J(ioJUp diff --git a/nebula/package.json b/nebula/package.json index d8282e991..c460aa269 100644 --- a/nebula/package.json +++ b/nebula/package.json @@ -1,4 +1,6 @@ { + "name": "nebula", + "version": "0.0.1", "scripts": { "fetch:deps": "bun run .deps.mjs", "build:ts": "tsc", @@ -9,13 +11,14 @@ "watch": "bun run watch:ts & bun run watch:css" }, "devDependencies": { + "htmx.org": "^1.9.12", + "alpinejs": "^3.14.1", + "@tailwindcss/typography": "^0.5.15", + "@tailwindcss/forms": "^0.5.7", "tailwindcss": "^3.3.0", "typescript": "^4.9.0" }, "dependencies": { - "@tailwindcss/typography": "^0.5.15", - "alpinejs": "^3.14.1", - "htmx.org": "^1.9.12", "node-fetch": "^3.3.2" } } diff --git a/nebula/pages/home.templ b/nebula/pages/home.templ index 4efa07a33..2fe4a92c0 100644 --- a/nebula/pages/home.templ +++ b/nebula/pages/home.templ @@ -11,6 +11,8 @@ func Home(c echo.Context) error { templ homeView() { @blocks.Layout("Sonr.ID", true) { + @blocks.HeaderMarketingNav() + @blocks.SectionHero() @blocks.Card("home-view", blocks.SizeLarge) { @blocks.H1("Sonr.ID") @blocks.Text("A Decentralized Web Node Client for the Sonr Network.") @@ -25,5 +27,6 @@ templ homeView() { @blocks.PoweredBySonr() } + @blocks.FooterMarketingNav() } } diff --git a/nebula/pages/home_templ.go b/nebula/pages/home_templ.go index 643ea8f0b..051559e9e 100644 --- a/nebula/pages/home_templ.go +++ b/nebula/pages/home_templ.go @@ -50,6 +50,22 @@ func homeView() templ.Component { }() } ctx = templ.InitializeContext(ctx) + templ_7745c5c3_Err = blocks.HeaderMarketingNav().Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = blocks.SectionHero().Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } templ_7745c5c3_Var3 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W) @@ -144,6 +160,14 @@ func homeView() templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = blocks.FooterMarketingNav().Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } return templ_7745c5c3_Err }) templ_7745c5c3_Err = blocks.Layout("Sonr.ID", true).Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer) diff --git a/nebula/src/motr.ts b/nebula/src/motr.ts index bc775f7bb..fc59116f1 100644 --- a/nebula/src/motr.ts +++ b/nebula/src/motr.ts @@ -1,5 +1,4 @@ import "htmx.org"; import "alpinejs"; -import Dexie from "dexie"; console.log("Hello from TypeScript!"); diff --git a/nebula/src/styles.css b/nebula/src/styles.css index 606004e4e..ed929e5e0 100644 --- a/nebula/src/styles.css +++ b/nebula/src/styles.css @@ -1,6 +1,178 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Inter+Tight:ital,wght@0,500;0,600;0,700;1,700&display=fallback"); + /* src/css/styles.css */ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "tailwindcss/utilities"; + +/* See Alpine.js: https://github.com/alpinejs/alpine#x-cloak */ +[x-cloak=""] { + display: none; +} /* Custom styles */ +.form-input:focus, +.form-textarea:focus, +.form-multiselect:focus, +.form-select:focus, +.form-checkbox:focus, +.form-radio:focus { + @apply ring-0; +} + +/* Hamburger button */ +.hamburger svg > *:nth-child(1), +.hamburger svg > *:nth-child(2), +.hamburger svg > *:nth-child(3) { + transform-origin: center; + transform: rotate(0deg); +} + +.hamburger svg > *:nth-child(1) { + transition: + y 0.1s 0.25s ease-in, + transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), + opacity 0.1s ease-in; +} + +.hamburger svg > *:nth-child(2) { + transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); +} + +.hamburger svg > *:nth-child(3) { + transition: + y 0.1s 0.25s ease-in, + transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), + width 0.1s 0.25s ease-in; +} + +.hamburger.active svg > *:nth-child(1) { + opacity: 0; + y: 11; + transform: rotate(225deg); + transition: + y 0.1s ease-out, + transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), + opacity 0.1s 0.12s ease-out; +} + +.hamburger.active svg > *:nth-child(2) { + transform: rotate(225deg); + transition: transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); +} + +.hamburger.active svg > *:nth-child(3) { + y: 11; + transform: rotate(135deg); + transition: + y 0.1s ease-out, + transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), + width 0.1s ease-out; +} + +/* Typography */ +.h1 { + @apply text-5xl font-bold; +} + +.h2 { + @apply text-4xl font-bold; +} + +.h3 { + @apply text-3xl font-bold; +} + +.h4 { + @apply text-2xl font-bold; +} + +@screen md { + .h1 { + @apply text-6xl; + } + + .h2 { + @apply text-5xl; + } + + .h3 { + @apply text-4xl; + } +} + +/* Buttons */ +.btn, +.btn-sm { + @apply text-sm font-medium inline-flex items-center justify-center border border-transparent rounded-md tracking-normal transition; +} + +.btn { + @apply px-4 py-2; +} + +.btn-sm { + @apply px-2 py-1; +} + +/* Forms */ +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + -webkit-appearance: none; +} + +.form-input, +.form-textarea, +.form-multiselect, +.form-select, +.form-checkbox, +.form-radio { + @apply bg-white border border-zinc-200 focus:border-zinc-400 shadow shadow-black/5; +} + +.form-input, +.form-textarea, +.form-multiselect, +.form-select, +.form-checkbox { + @apply rounded; +} + +.form-input, +.form-textarea, +.form-multiselect, +.form-select { + @apply text-zinc-600 text-sm px-4 py-2; +} + +.form-input, +.form-textarea { + @apply placeholder-zinc-400; +} + +.form-select { + @apply pr-10; +} + +.form-checkbox, +.form-radio { + @apply text-zinc-800; +} + +.form-checkbox { + @apply rounded-sm; +} + +/* Chrome, Safari and Opera */ +.no-scrollbar::-webkit-scrollbar { + display: none; +} + +.no-scrollbar { + -ms-overflow-style: none; + /* IE and Edge */ + scrollbar-width: none; + /* Firefox */ +} diff --git a/nebula/tailwind.config.js b/nebula/tailwind.config.js index 6fed7693e..9fc344f2d 100644 --- a/nebula/tailwind.config.js +++ b/nebula/tailwind.config.js @@ -1,12 +1,45 @@ // tailwind.config.js module.exports = { - content: [ - "./blocks/**/*.{templ,html}", - "./pages/**/*.{templ,html}", - "./src/**/*.ts", - ], - theme: { - extend: {}, - }, - plugins: [require("@tailwindcss/typography")], + content: [ + "./blocks/**/*.{templ,html}", + "./pages/**/*.{templ,html}", + "./src/**/*.ts", + ], + theme: { + extend: { + fontFamily: { + inter: ["Inter", "sans-serif"], + "inter-tight": ["Inter Tight", "sans-serif"], + }, + fontSize: { + xs: ["0.75rem", { lineHeight: "1.5" }], + sm: ["0.875rem", { lineHeight: "1.5715" }], + base: ["1rem", { lineHeight: "1.5", letterSpacing: "-0.017em" }], + lg: ["1.125rem", { lineHeight: "1.5", letterSpacing: "-0.017em" }], + xl: ["1.25rem", { lineHeight: "1.5", letterSpacing: "-0.017em" }], + "2xl": ["1.5rem", { lineHeight: "1.415", letterSpacing: "-0.017em" }], + "3xl": ["2rem", { lineHeight: "1.3125", letterSpacing: "-0.017em" }], + "4xl": ["2.5rem", { lineHeight: "1.25", letterSpacing: "-0.017em" }], + "5xl": ["3.25rem", { lineHeight: "1.2", letterSpacing: "-0.017em" }], + "6xl": ["3.75rem", { lineHeight: "1.1666", letterSpacing: "-0.017em" }], + "7xl": ["4.5rem", { lineHeight: "1.1666", letterSpacing: "-0.017em" }], + }, + animation: { + "infinite-scroll": "infinite-scroll 60s linear infinite", + "infinite-scroll-inverse": + "infinite-scroll-inverse 60s linear infinite", + }, + keyframes: { + "infinite-scroll": { + from: { transform: "translateX(0)" }, + to: { transform: "translateX(-100%)" }, + }, + "infinite-scroll-inverse": { + from: { transform: "translateX(-100%)" }, + to: { transform: "translateX(0)" }, + }, + }, + }, + }, + plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")], }; diff --git a/process-compose.yaml b/process-compose.yaml index 5e80c4b1c..159c7169f 100644 --- a/process-compose.yaml +++ b/process-compose.yaml @@ -11,7 +11,7 @@ processes: sonr: namespace: testnet - command: "make sh-testnet" + command: "devbox run start:testnet" restart: on_failure max_restarts: 1 depends: @@ -19,7 +19,7 @@ processes: motr: namespace: testnet - command: "make start-motr" + command: "devbox run start:motr" restart: on_failure max_restarts: 1 depends: