diff --git a/website/landing/css/style.css b/website/landing/css/style.css index 993483f2..aa3e2ab5 100644 --- a/website/landing/css/style.css +++ b/website/landing/css/style.css @@ -1,4 +1,4 @@ -@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'); +@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&family=Caveat:wght@600&display=fallback'); @import 'tailwindcss/base'; @import 'tailwindcss/components'; @@ -13,3 +13,47 @@ [x-cloak=""] { display: none; } + +/* Smooth in-page anchor scrolling, disabled for users who prefer reduced motion. */ +html { + scroll-behavior: smooth; +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } +} + +.text-balance { + text-wrap: balance; +} +/* Handwritten margin notes. */ +.hw-note { + font-family: 'Caveat', cursive; + font-weight: 600; + font-size: 1.5rem; + line-height: 1.2; +} + +/* A hand-swiped stroke with uneven rounded edges. */ +.marker-red { + position: relative; + white-space: nowrap; + color: #fff; + isolation: isolate; +} + +.marker-red::before { + content: ""; + position: absolute; + z-index: -1; + inset: 0.08em -0.18em -0.02em -0.14em; + background: linear-gradient(100deg, + rgba(220, 38, 38, 0.82) 0%, + rgba(239, 68, 68, 0.95) 28%, + rgba(225, 29, 72, 0.9) 72%, + rgba(220, 38, 38, 0.88) 100%); + border-radius: 0.3em 0.5em 0.4em 0.6em; + transform: skew(-10deg) rotate(-0.5deg); +} diff --git a/website/landing/hub.html b/website/landing/hub.html index 60ea0337..5e5ef591 100644 --- a/website/landing/hub.html +++ b/website/landing/hub.html @@ -32,64 +32,6 @@ content="Uncloud Hub will add a dashboard, metrics, logs, and alerts to the Uncloud clusters you already run. Skip the weekend of wiring Prometheus, Loki, and Grafana. Join the early access list."> - @@ -174,12 +116,9 @@
-
- -

Coming soon

@@ -215,7 +154,8 @@
- +
@@ -290,11 +230,9 @@

-
-
-
@@ -338,7 +275,6 @@
-

  • - that's what Hub is for - that's what Hub is for +

- +
@@ -452,7 +389,7 @@
- Uncloud Hub cluster overview dashboard, design preview
@@ -461,7 +398,7 @@
- +
@@ -649,7 +586,7 @@

Monitor everything

Explore your cluster, services, metrics, and logs in one place. See how each deploy - behaves in production, and let alerts find you when something needs attention. + behaves in production, and receive alerts when something needs attention.

@@ -736,17 +673,15 @@
-
- - Do I need Hub to use Uncloud? - +
+ + Do I need Hub to use Uncloud? +

No. Uncloud is open source @@ -757,17 +692,15 @@

-
- - Is Hub open source too? - +
+ + Is Hub open source too? +

No, and no point pretending otherwise. Uncloud, the orchestrator, is Apache 2.0. Hub @@ -776,17 +709,15 @@

-
- - What data leaves my machines? - +
+ + What data leaves my machines? +

Metrics and logs will flow to Hub. Storing, graphing, and searching them is the @@ -797,17 +728,15 @@

-
- - What access does Hub get to my cluster? - +
+ + What access does Hub get to my cluster? +

The connection model is being designed right now with early access users. The intent @@ -818,17 +747,15 @@

-
- - What happens to my apps if Hub goes down? - +
+ + What happens to my apps if Hub goes down? +

Nothing. Your apps run on your servers and Uncloud doesn't depend on Hub to @@ -836,17 +763,15 @@

-
- - Why not just run my own Grafana stack? - +
+ + Why not just run my own Grafana stack? +

You can and if you do already, keep it. Grafana, Prometheus, VictoriaMetrics and @@ -855,17 +780,15 @@

-
- - When can I use it, and what will it cost? - +
+ + When can I use it, and what will it cost? +

Hub is in active development and everything on this page is a design preview. diff --git a/website/landing/images/hub-hero.webp b/website/landing/images/hub-hero.webp new file mode 100644 index 00000000..8bbf2a10 Binary files /dev/null and b/website/landing/images/hub-hero.webp differ diff --git a/website/landing/images/hub-overview.webp b/website/landing/images/hub-overview.webp new file mode 100644 index 00000000..3fbc5261 Binary files /dev/null and b/website/landing/images/hub-overview.webp differ diff --git a/website/landing/index.html b/website/landing/index.html index f4446714..615b9e04 100644 --- a/website/landing/index.html +++ b/website/landing/index.html @@ -33,15 +33,7 @@ @@ -67,6 +59,15 @@

+ +
+
+
+
+
+
+ Coming soon +
+

+ Uncloud Hub: see what's happening in + production +

+

+ A hosted dashboard and observability stack for your Uncloud clusters. Connect a + cluster and get metrics, logs, and alerts for every service and machine, without + building and monitoring the monitoring yourself. +

+
+ Learn about Hub + Get early access → +
+

+ Hub is how we plan to fund Uncloud's full-time development.
+ Uncloud itself stays Apache 2.0 and works fully without Hub. +

+
+ +
+ Uncloud Hub cluster overview dashboard, design preview +
+
+
+
+
+
-
+

Frequently asked questions @@ -731,17 +773,17 @@ prod-3 201.45.91.123:51820 1m56s ago 11ms 5.12MB 9.34MB

-
+
+ class="flex items-center justify-between gap-4 py-5 cursor-pointer list-none [&::-webkit-details-marker]:hidden font-inter-tight font-semibold text-zinc-900"> How is this different from Docker Swarm? - -

+

Swarm needs a Raft quorum of manager nodes and has been in maintenance mode for years. Uncloud has no control plane at all. Machines sync state peer to peer, and any subset keeps working. You also get WireGuard networking across clouds and even @@ -750,17 +792,17 @@ prod-3 201.45.91.123:51820 1m56s ago 11ms 5.12MB 9.34MB

-
+
+ class="flex items-center justify-between gap-4 py-5 cursor-pointer list-none [&::-webkit-details-marker]:hidden font-inter-tight font-semibold text-zinc-900"> What happens when a machine goes down? - -

+

The rest of the cluster keeps working. There's no control plane to lose, and healthy replicas on other machines keep serving traffic. Uncloud deliberately doesn't auto-reschedule containers. You decide when to replace the machine and @@ -768,17 +810,17 @@ prod-3 201.45.91.123:51820 1m56s ago 11ms 5.12MB 9.34MB

-
+
+ class="flex items-center justify-between gap-4 py-5 cursor-pointer list-none [&::-webkit-details-marker]:hidden font-inter-tight font-semibold text-zinc-900"> Will it replace my CI/CD? - -

+

No, and that's deliberate. uc is just a CLI that connects to your cluster over SSH. Run uc deploy locally or in GitHub Actions to integrate with existing workflows. diff --git a/website/landing/style.css b/website/landing/style.css index 130e0602..e42fbe63 100644 --- a/website/landing/style.css +++ b/website/landing/style.css @@ -1,4 +1,4 @@ -@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'); +@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&family=Caveat:wght@600&display=fallback'); /* ! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com @@ -1187,20 +1187,40 @@ input[type="search"]::-webkit-search-results-decoration { inset: 0px; } +.-top-9{ + top: -2.25rem; +} + +.bottom-1{ + bottom: 0.25rem; +} + .left-1\/2{ left: 50%; } +.left-16{ + left: 4rem; +} + .top-0{ top: 0px; } +.top-1\/2{ + top: 50%; +} + .top-2{ top: 0.5rem; } -.-z-10{ - z-index: -10; +.isolate{ + isolation: isolate; +} + +.z-10{ + z-index: 10; } .z-30{ @@ -1220,14 +1240,26 @@ input[type="search"]::-webkit-search-results-decoration { margin-bottom: 0.25rem; } +.mb-1\.5{ + margin-bottom: 0.375rem; +} + .mb-2{ margin-bottom: 0.5rem; } +.mb-3{ + margin-bottom: 0.75rem; +} + .mb-4{ margin-bottom: 1rem; } +.mb-5{ + margin-bottom: 1.25rem; +} + .mb-6{ margin-bottom: 1.5rem; } @@ -1244,12 +1276,12 @@ input[type="search"]::-webkit-search-results-decoration { margin-left: 0.5rem; } -.mr-2{ - margin-right: 0.5rem; +.ml-\[6rem\]{ + margin-left: 6rem; } -.mr-3{ - margin-right: 0.75rem; +.mr-2{ + margin-right: 0.5rem; } .mr-4{ @@ -1288,6 +1320,10 @@ input[type="search"]::-webkit-search-results-decoration { margin-top: 1rem; } +.mt-5{ + margin-top: 1.25rem; +} + .mt-6{ margin-top: 1.5rem; } @@ -1300,6 +1336,10 @@ input[type="search"]::-webkit-search-results-decoration { display: block; } +.inline-block{ + display: inline-block; +} + .inline{ display: inline; } @@ -1320,6 +1360,14 @@ input[type="search"]::-webkit-search-results-decoration { display: none; } +.h-10{ + height: 2.5rem; +} + +.h-11{ + height: 2.75rem; +} + .h-14{ height: 3.5rem; } @@ -1328,10 +1376,6 @@ input[type="search"]::-webkit-search-results-decoration { height: 0.5rem; } -.h-2\.5{ - height: 0.625rem; -} - .h-24{ height: 6rem; } @@ -1360,6 +1404,18 @@ input[type="search"]::-webkit-search-results-decoration { min-height: 100vh; } +.w-10{ + width: 2.5rem; +} + +.w-11{ + width: 2.75rem; +} + +.w-12{ + width: 3rem; +} + .w-14{ width: 3.5rem; } @@ -1368,10 +1424,6 @@ input[type="search"]::-webkit-search-results-decoration { width: 0.5rem; } -.w-2\.5{ - width: 0.625rem; -} - .w-3{ width: 0.75rem; } @@ -1384,6 +1436,10 @@ input[type="search"]::-webkit-search-results-decoration { width: 1.25rem; } +.w-7{ + width: 1.75rem; +} + .w-8{ width: 2rem; } @@ -1392,10 +1448,6 @@ input[type="search"]::-webkit-search-results-decoration { width: 36rem; } -.w-\[calc\(100\%\+1rem\)\]{ - width: calc(100% + 1rem); -} - .w-full{ width: 100%; } @@ -1404,6 +1456,10 @@ input[type="search"]::-webkit-search-results-decoration { min-width: 0px; } +.max-w-2xl{ + max-width: 42rem; +} + .max-w-3xl{ max-width: 48rem; } @@ -1416,6 +1472,10 @@ input[type="search"]::-webkit-search-results-decoration { max-width: 72rem; } +.max-w-lg{ + max-width: 32rem; +} + .max-w-md{ max-width: 28rem; } @@ -1449,11 +1509,46 @@ input[type="search"]::-webkit-search-results-decoration { 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-1{ + --tw-translate-y: -0.25rem; + 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-1\.5{ + --tw-translate-y: -0.375rem; + 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-1\/2{ + --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)); +} + .-translate-y-1\/3{ --tw-translate-y: -33.333333%; 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-4{ + --tw-translate-y: 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)); +} + +.-rotate-2{ + --tw-rotate: -2deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.-rotate-3{ + --tw-rotate: -3deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.-rotate-\[8deg\]{ + --tw-rotate: -8deg; + 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)); +} + .transform{ 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)); } @@ -1467,6 +1562,10 @@ input[type="search"]::-webkit-search-results-decoration { user-select: none; } +.resize-none{ + resize: none; +} + .list-none{ list-style-type: none; } @@ -1483,12 +1582,12 @@ input[type="search"]::-webkit-search-results-decoration { flex-direction: column; } -.items-start{ - align-items: flex-start; +.flex-wrap{ + flex-wrap: wrap; } -.items-end{ - align-items: flex-end; +.items-start{ + align-items: flex-start; } .items-center{ @@ -1531,10 +1630,18 @@ input[type="search"]::-webkit-search-results-decoration { gap: 0.75rem; } +.gap-3\.5{ + gap: 0.875rem; +} + .gap-4{ gap: 1rem; } +.gap-5{ + gap: 1.25rem; +} + .gap-6{ gap: 1.5rem; } @@ -1543,10 +1650,12 @@ input[type="search"]::-webkit-search-results-decoration { gap: 2rem; } -.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))); +.gap-x-6{ + column-gap: 1.5rem; +} + +.gap-y-4{ + row-gap: 1rem; } .space-x-4 > :not([hidden]) ~ :not([hidden]){ @@ -1555,12 +1664,6 @@ input[type="search"]::-webkit-search-results-decoration { margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); } -.space-y-12 > :not([hidden]) ~ :not([hidden]){ - --tw-space-y-reverse: 0; - margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(3rem * var(--tw-space-y-reverse)); -} - .space-y-16 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse))); @@ -1604,10 +1707,18 @@ input[type="search"]::-webkit-search-results-decoration { overflow-x: auto; } +.whitespace-nowrap{ + white-space: nowrap; +} + .rounded{ border-radius: 0.25rem; } +.rounded-2xl{ + border-radius: 1rem; +} + .rounded-full{ border-radius: 9999px; } @@ -1636,11 +1747,19 @@ input[type="search"]::-webkit-search-results-decoration { border-width: 2px; } +.border-\[1\.5px\]{ + border-width: 1.5px; +} + .border-y{ border-top-width: 1px; border-bottom-width: 1px; } +.border-b{ + border-bottom-width: 1px; +} + .border-b-2{ border-bottom-width: 2px; } @@ -1653,6 +1772,10 @@ input[type="search"]::-webkit-search-results-decoration { border-top-width: 1px; } +.border-dashed{ + border-style: dashed; +} + .border-gray-200{ --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); @@ -1663,10 +1786,24 @@ input[type="search"]::-webkit-search-results-decoration { border-color: rgb(209 213 219 / var(--tw-border-opacity)); } +.border-red-500\/30{ + border-color: rgb(239 68 68 / 0.3); +} + .border-transparent{ border-color: transparent; } +.border-violet-100{ + --tw-border-opacity: 1; + border-color: rgb(237 233 254 / var(--tw-border-opacity)); +} + +.border-violet-300{ + --tw-border-opacity: 1; + border-color: rgb(196 181 253 / var(--tw-border-opacity)); +} + .border-zinc-200{ --tw-border-opacity: 1; border-color: rgb(228 228 231 / var(--tw-border-opacity)); @@ -1682,8 +1819,13 @@ input[type="search"]::-webkit-search-results-decoration { border-color: rgb(82 82 91 / var(--tw-border-opacity)); } -.border-zinc-700\/50{ - border-color: rgb(63 63 70 / 0.5); +.border-zinc-700{ + --tw-border-opacity: 1; + border-color: rgb(63 63 70 / var(--tw-border-opacity)); +} + +.border-zinc-700\/60{ + border-color: rgb(63 63 70 / 0.6); } .border-zinc-800{ @@ -1691,6 +1833,11 @@ input[type="search"]::-webkit-search-results-decoration { border-color: rgb(39 39 42 / var(--tw-border-opacity)); } +.bg-\[\#200f11\]{ + --tw-bg-opacity: 1; + background-color: rgb(32 15 17 / var(--tw-bg-opacity)); +} + .bg-\[\#5bbf6a\]{ --tw-bg-opacity: 1; background-color: rgb(91 191 106 / var(--tw-bg-opacity)); @@ -1716,14 +1863,27 @@ input[type="search"]::-webkit-search-results-decoration { background-color: rgb(229 231 235 / var(--tw-bg-opacity)); } -.bg-green-500{ - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); +.bg-red-500\/5{ + background-color: rgb(239 68 68 / 0.05); } -.bg-red-500{ +.bg-violet-100{ --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(237 233 254 / var(--tw-bg-opacity)); +} + +.bg-violet-50{ + --tw-bg-opacity: 1; + background-color: rgb(245 243 255 / var(--tw-bg-opacity)); +} + +.bg-violet-50\/60{ + background-color: rgb(245 243 255 / 0.6); +} + +.bg-violet-600{ + --tw-bg-opacity: 1; + background-color: rgb(124 58 237 / var(--tw-bg-opacity)); } .bg-white{ @@ -1731,11 +1891,6 @@ input[type="search"]::-webkit-search-results-decoration { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-yellow-500{ - --tw-bg-opacity: 1; - background-color: rgb(234 179 8 / var(--tw-bg-opacity)); -} - .bg-zinc-100{ --tw-bg-opacity: 1; background-color: rgb(244 244 245 / var(--tw-bg-opacity)); @@ -1798,26 +1953,14 @@ input[type="search"]::-webkit-search-results-decoration { fill: currentColor; } -.fill-zinc-300{ - fill: #d4d4d8; -} - -.fill-zinc-400{ - fill: #a1a1aa; -} - -.stroke-zinc-400{ - stroke: #a1a1aa; -} - -.p-4{ - padding: 1rem; -} - .p-5{ padding: 1.25rem; } +.p-6{ + padding: 1.5rem; +} + .px-0{ padding-left: 0px; padding-right: 0px; @@ -1833,16 +1976,31 @@ input[type="search"]::-webkit-search-results-decoration { padding-right: 0.25rem; } +.px-1\.5{ + padding-left: 0.375rem; + padding-right: 0.375rem; +} + .px-2{ padding-left: 0.5rem; padding-right: 0.5rem; } +.px-3{ + padding-left: 0.75rem; + padding-right: 0.75rem; +} + .px-4{ padding-left: 1rem; padding-right: 1rem; } +.px-5{ + padding-left: 1.25rem; + padding-right: 1.25rem; +} + .px-6{ padding-left: 1.5rem; padding-right: 1.5rem; @@ -1858,6 +2016,11 @@ input[type="search"]::-webkit-search-results-decoration { padding-bottom: 0.125rem; } +.py-1{ + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + .py-12{ padding-top: 3rem; padding-bottom: 3rem; @@ -1883,21 +2046,25 @@ input[type="search"]::-webkit-search-results-decoration { padding-bottom: 0.875rem; } -.py-4{ - padding-top: 1rem; - padding-bottom: 1rem; -} - .py-5{ padding-top: 1.25rem; padding-bottom: 1.25rem; } +.py-6{ + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + .py-8{ padding-top: 2rem; padding-bottom: 2rem; } +.pb-10{ + padding-bottom: 2.5rem; +} + .pb-12{ padding-bottom: 3rem; } @@ -1906,12 +2073,16 @@ input[type="search"]::-webkit-search-results-decoration { padding-bottom: 1rem; } -.pb-8{ - padding-bottom: 2rem; +.pb-5{ + padding-bottom: 1.25rem; } -.pl-4{ - padding-left: 1rem; +.pb-6{ + padding-bottom: 1.5rem; +} + +.pb-8{ + padding-bottom: 2rem; } .pl-5{ @@ -1922,12 +2093,8 @@ input[type="search"]::-webkit-search-results-decoration { padding-top: 8rem; } -.pt-4{ - padding-top: 1rem; -} - -.pt-6{ - padding-top: 1.5rem; +.pt-8{ + padding-top: 2rem; } .text-left{ @@ -1974,6 +2141,14 @@ input[type="search"]::-webkit-search-results-decoration { letter-spacing: -0.017em; } +.text-\[10px\]{ + font-size: 10px; +} + +.text-\[11px\]{ + font-size: 11px; +} + .text-\[13px\]{ font-size: 13px; } @@ -2004,6 +2179,10 @@ input[type="search"]::-webkit-search-results-decoration { font-weight: 700; } +.font-extrabold{ + font-weight: 800; +} + .font-medium{ font-weight: 500; } @@ -2045,10 +2224,22 @@ input[type="search"]::-webkit-search-results-decoration { letter-spacing: 0.18em; } +.tracking-\[0\.25em\]{ + letter-spacing: 0.25em; +} + .tracking-tight{ letter-spacing: -0.025em; } +.tracking-wide{ + letter-spacing: 0.025em; +} + +.tracking-widest{ + letter-spacing: 0.1em; +} + .text-black{ --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); @@ -2059,11 +2250,6 @@ input[type="search"]::-webkit-search-results-decoration { color: rgb(59 130 246 / var(--tw-text-opacity)); } -.text-emerald-500{ - --tw-text-opacity: 1; - color: rgb(16 185 129 / var(--tw-text-opacity)); -} - .text-gray-500{ --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); @@ -2099,6 +2285,11 @@ input[type="search"]::-webkit-search-results-decoration { color: rgb(79 70 229 / var(--tw-text-opacity)); } +.text-red-400{ + --tw-text-opacity: 1; + color: rgb(248 113 113 / var(--tw-text-opacity)); +} + .text-red-500{ --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity)); @@ -2113,6 +2304,16 @@ input[type="search"]::-webkit-search-results-decoration { color: transparent; } +.text-violet-600{ + --tw-text-opacity: 1; + color: rgb(124 58 237 / var(--tw-text-opacity)); +} + +.text-violet-700{ + --tw-text-opacity: 1; + color: rgb(109 40 217 / var(--tw-text-opacity)); +} + .text-white{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -2229,6 +2430,17 @@ input[type="search"]::-webkit-search-results-decoration { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-xl{ + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-zinc-950\/10{ + --tw-shadow-color: rgb(9 9 11 / 0.1); + --tw-shadow: var(--tw-shadow-colored); +} + .shadow-zinc-950\/20{ --tw-shadow-color: rgb(9 9 11 / 0.2); --tw-shadow: var(--tw-shadow-colored); @@ -2239,11 +2451,6 @@ input[type="search"]::-webkit-search-results-decoration { --tw-shadow: var(--tw-shadow-colored); } -.blur{ - --tw-blur: blur(8px); - 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); -} - .blur-3xl{ --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); @@ -2277,20 +2484,37 @@ input[type="search"]::-webkit-search-results-decoration { transition-duration: 200ms; } -.\[background\:linear-gradient\(theme\(colors\.white\)\2c theme\(colors\.zinc\.50\)\)_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,#fafafa) padding-box,linear-gradient(120deg,#d4d4d8,#f4f4f5,#d4d4d8) border-box; -} - -.\[background\:linear-gradient\(theme\(colors\.zinc\.800\)\2c theme\(colors\.zinc\.800\)\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.zinc\.700\)\2c theme\(colors\.zinc\.700\/0\)\2c theme\(colors\.zinc\.700\)\)_border-box\]{ - background: linear-gradient(#27272a,#27272a) padding-box,linear-gradient(120deg,#3f3f46,rgb(63 63 70 / 0),#3f3f46) border-box; -} - /* See Alpine.js: https://github.com/alpinejs/alpine#x-cloak */ [x-cloak=""] { display: none; } +/* Smooth in-page anchor scrolling, disabled for users who prefer reduced motion. */ + +html { + scroll-behavior: smooth; +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } +} + +.text-balance { + text-wrap: balance; +} + +/* Handwritten margin notes. */ + +.hw-note { + font-family: 'Caveat', cursive; + font-weight: 600; + font-size: 1.5rem; + line-height: 1.2; +} + .before\:pointer-events-none::before{ content: var(--tw-content); pointer-events: none; @@ -2347,6 +2571,12 @@ input[type="search"]::-webkit-search-results-decoration { border-radius: 9999px; } +.before\:bg-violet-700::before{ + content: var(--tw-content); + --tw-bg-opacity: 1; + background-color: rgb(109 40 217 / var(--tw-bg-opacity)); +} + .before\:bg-zinc-900::before{ content: var(--tw-content); --tw-bg-opacity: 1; @@ -2376,11 +2606,6 @@ input[type="search"]::-webkit-search-results-decoration { 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\:pointer-events-none::after{ - content: var(--tw-content); - pointer-events: none; -} - .after\:absolute::after{ content: var(--tw-content); position: absolute; @@ -2391,11 +2616,6 @@ input[type="search"]::-webkit-search-results-decoration { right: 0px; } -.after\:top-0::after{ - content: var(--tw-content); - top: 0px; -} - .after\:top-1\/2::after{ content: var(--tw-content); top: 50%; @@ -2411,16 +2631,6 @@ input[type="search"]::-webkit-search-results-decoration { height: 2rem; } -.after\:h-full::after{ - content: var(--tw-content); - height: 100%; -} - -.after\:w-96::after{ - content: var(--tw-content); - width: 24rem; -} - .after\:w-px::after{ content: var(--tw-content); width: 1px; @@ -2448,28 +2658,30 @@ input[type="search"]::-webkit-search-results-decoration { border-color: rgb(212 212 216 / var(--tw-border-opacity)); } -.after\:bg-gradient-to-l::after{ - content: var(--tw-content); - background-image: linear-gradient(to left, var(--tw-gradient-stops)); -} - -.after\:from-zinc-800::after{ - content: var(--tw-content); - --tw-gradient-from: #27272a var(--tw-gradient-from-position); - --tw-gradient-to: rgb(39 39 42 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - .last\:after\:hidden:last-child::after{ content: var(--tw-content); display: none; } +.hover\:border-violet-600:hover{ + --tw-border-opacity: 1; + border-color: rgb(124 58 237 / var(--tw-border-opacity)); +} + +.hover\:bg-violet-100\/60:hover{ + background-color: rgb(237 233 254 / 0.6); +} + .hover\:bg-white:hover{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.hover\:bg-zinc-100:hover{ + --tw-bg-opacity: 1; + background-color: rgb(244 244 245 / var(--tw-bg-opacity)); +} + .hover\:bg-zinc-700:hover{ --tw-bg-opacity: 1; background-color: rgb(63 63 70 / var(--tw-bg-opacity)); @@ -2480,6 +2692,16 @@ input[type="search"]::-webkit-search-results-decoration { background-color: rgb(39 39 42 / var(--tw-bg-opacity)); } +.hover\:text-violet-900:hover{ + --tw-text-opacity: 1; + color: rgb(76 29 149 / var(--tw-text-opacity)); +} + +.hover\:text-white:hover{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + .hover\:text-zinc-100:hover{ --tw-text-opacity: 1; color: rgb(244 244 245 / var(--tw-text-opacity)); @@ -2490,10 +2712,6 @@ input[type="search"]::-webkit-search-results-decoration { color: rgb(24 24 27 / var(--tw-text-opacity)); } -.hover\:underline:hover{ - text-decoration-line: underline; -} - .hover\:decoration-zinc-100:hover{ text-decoration-color: #f4f4f5; } @@ -2611,17 +2829,14 @@ input[type="search"]::-webkit-search-results-decoration { } } -@media not all and (min-width: 1024px){ - .max-lg\:after\:hidden::after{ - content: var(--tw-content); - display: none; - } -} - @media not all and (min-width: 768px){ .max-md\:order-1{ order: 1; } + + .max-md\:hidden{ + display: none; + } } @media (min-width: 640px){ @@ -2657,8 +2872,8 @@ input[type="search"]::-webkit-search-results-decoration { justify-content: center; } - .sm\:gap-4{ - gap: 1rem; + .sm\:gap-12{ + gap: 3rem; } .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]){ @@ -2673,10 +2888,6 @@ input[type="search"]::-webkit-search-results-decoration { margin-bottom: calc(0px * var(--tw-space-y-reverse)); } - .sm\:p-6{ - padding: 1.5rem; - } - .sm\:px-5{ padding-left: 1.25rem; padding-right: 1.25rem; @@ -2687,15 +2898,16 @@ input[type="search"]::-webkit-search-results-decoration { padding-right: 1.5rem; } + .sm\:px-8{ + padding-left: 2rem; + padding-right: 2rem; + } + .sm\:text-3xl{ font-size: 2rem; line-height: 1.3125; letter-spacing: -0.017em; } - - .sm\:text-\[0\.9375rem\]{ - font-size: 0.9375rem; - } } @media (min-width: 768px){ @@ -2703,6 +2915,10 @@ input[type="search"]::-webkit-search-results-decoration { top: 1.5rem; } + .md\:col-span-2{ + grid-column: span 2 / span 2; + } + .md\:col-span-3{ grid-column: span 3 / span 3; } @@ -2720,10 +2936,22 @@ input[type="search"]::-webkit-search-results-decoration { margin-bottom: 0px; } + .md\:mt-14{ + margin-top: 3.5rem; + } + .md\:mt-16{ margin-top: 4rem; } + .md\:block{ + display: block; + } + + .md\:flex{ + display: flex; + } + .md\:max-w-4xl{ max-width: 56rem; } @@ -2744,10 +2972,30 @@ input[type="search"]::-webkit-search-results-decoration { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .md\:grid-cols-\[2fr_4\.5fr\]{ + grid-template-columns: 2fr 4.5fr; + } + + .md\:items-start{ + align-items: flex-start; + } + .md\:gap-0{ gap: 0px; } + .md\:gap-16{ + gap: 4rem; + } + + .md\:gap-5{ + gap: 1.25rem; + } + + .md\:gap-6{ + gap: 1.5rem; + } + .md\:space-y-28 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(7rem * calc(1 - var(--tw-space-y-reverse))); @@ -2778,6 +3026,10 @@ input[type="search"]::-webkit-search-results-decoration { padding-bottom: 3rem; } + .md\:pb-14{ + padding-bottom: 3.5rem; + } + .md\:pb-16{ padding-bottom: 4rem; } @@ -2790,6 +3042,10 @@ input[type="search"]::-webkit-search-results-decoration { padding-top: 10rem; } + .md\:text-left{ + text-align: left; + } + .md\:text-3xl{ font-size: 2rem; line-height: 1.3125; @@ -2808,6 +3064,12 @@ input[type="search"]::-webkit-search-results-decoration { letter-spacing: -0.017em; } + .md\:text-6xl{ + font-size: 3.75rem; + line-height: 1.1666; + letter-spacing: -0.017em; + } + .md\:after\:block::after{ content: var(--tw-content); display: block; @@ -2815,10 +3077,18 @@ input[type="search"]::-webkit-search-results-decoration { } @media (min-width: 1024px){ + .lg\:left-32{ + left: 8rem; + } + .lg\:col-span-2{ grid-column: span 2 / span 2; } + .lg\:col-span-3{ + grid-column: span 3 / span 3; + } + .lg\:col-span-8{ grid-column: span 8 / span 8; } @@ -2839,34 +3109,10 @@ input[type="search"]::-webkit-search-results-decoration { margin-top: 4rem; } - .lg\:mt-24{ - margin-top: 6rem; - } - - .lg\:mt-36{ - margin-top: 9rem; - } - - .lg\:flex{ - display: flex; - } - - .lg\:min-w-\[524px\]{ - min-width: 524px; - } - - .lg\:max-w-6xl{ - max-width: 72rem; - } - .lg\:max-w-md{ max-width: 28rem; } - .lg\:max-w-none{ - max-width: none; - } - .lg\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -2879,22 +3125,6 @@ input[type="search"]::-webkit-search-results-decoration { gap: 4rem; } - .lg\:gap-8{ - gap: 2rem; - } - - .lg\:space-x-12 > :not([hidden]) ~ :not([hidden]){ - --tw-space-x-reverse: 0; - margin-right: calc(3rem * var(--tw-space-x-reverse)); - margin-left: calc(3rem * calc(1 - var(--tw-space-x-reverse))); - } - - .lg\: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)); - } - .lg\:text-4xl{ font-size: 2.5rem; line-height: 1.25; @@ -2902,14 +3132,6 @@ input[type="search"]::-webkit-search-results-decoration { } } -@media (min-width: 1536px){ - .\32xl\:space-x-24 > :not([hidden]) ~ :not([hidden]){ - --tw-space-x-reverse: 0; - margin-right: calc(6rem * var(--tw-space-x-reverse)); - margin-left: calc(6rem * calc(1 - var(--tw-space-x-reverse))); - } -} - .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{ display: none; }