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 784492aec..86d31b16c 100755 Binary files a/nebula/bun.lockb and b/nebula/bun.lockb differ 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: