philipp/uncloud
1
0
Fork 0
mirror of https://github.com/psviderski/uncloud.git synced 2026-08-26 11:03:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

website: refine styles for index and hub

Browse Source
This commit is contained in:
Pasha Sviderski
2026-07-09 18:56:46 +10:00
parent 7964273552
commit e684795aee
6 changed files with 601 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/landing/css/style.css
+45 -1
View File
@@ -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/base';
@import 'tailwindcss/components'; @import 'tailwindcss/components';
@@ -13,3 +13,47 @@
[x-cloak=""] { [x-cloak=""] {
display: none; 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);
}
website/landing/hub.html
+67 -144
View File
@@ -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."> 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.">
<meta name="twitter:image" content="https://uncloud.run/images/logo-wide.png"> <meta name="twitter:image" content="https://uncloud.run/images/logo-wide.png">
<meta name="twitter:image:alt" content="Uncloud Hub - Observability for self-hosted apps"> <meta name="twitter:image:alt" content="Uncloud Hub - Observability for self-hosted apps">
<style>
/* Prevent decorative inline SVGs from appearing full screen if styles fail to size them. */
svg {
max-width: 24px;
max-height: 24px;
}
/* Decorative SVGs opt out of the guard above. */
svg.svg-free {
max-width: none;
max-height: none;
}
/* Handwritten note variant for dark sections (overrides the .hw-note color). */
.hw-note-light {
color: #a1a1aa;
}
/* Red marker highlight: a hand-swiped stroke with uneven rounded edges.
The isolation keeps the negative z-index swipe above section backgrounds. */
.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);
}
html {
scroll-behavior: smooth;
}
/* Hide the default disclosure marker on FAQ items across browsers. */
details.faq-item > summary {
list-style: none;
}
details.faq-item > summary::-webkit-details-marker {
display: none;
}
details.faq-item[open] .faq-plus {
transform: rotate(45deg);
}
</style>
</head> </head>
<body class="font-inter antialiased bg-white text-zinc-900 tracking-tight"> <body class="font-inter antialiased bg-white text-zinc-900 tracking-tight">
@@ -174,12 +116,9 @@
<section <section
class="relative before:absolute before:inset-0 before:h-80 before:pointer-events-none before:bg-gradient-to-b before:from-zinc-100 before:-z-10"> class="relative before:absolute before:inset-0 before:h-80 before:pointer-events-none before:bg-gradient-to-b before:from-zinc-100 before:-z-10">
<div class="pt-32 pb-12 md:pt-40 md:pb-20"> <div class="pt-32 pb-12 md:pt-40 md:pb-20">
<!-- Section content -->
<div class="px-4 sm:px-6"> <div class="px-4 sm:px-6">
<div class="max-w-3xl mx-auto"> <div class="max-w-3xl mx-auto">
<div class="text-center pb-12 md:pb-16"> <div class="text-center pb-12 md:pb-16">
<!-- Eyebrow -->
<!-- Eyebrow: quiet tracked mono kicker, no container. -->
<p class="mb-5 font-mono text-xs font-medium uppercase tracking-[0.25em] text-violet-600"> <p class="mb-5 font-mono text-xs font-medium uppercase tracking-[0.25em] text-violet-600">
Coming soon Coming soon
</p> </p>
@@ -215,7 +154,8 @@
<div class="flex justify-center relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-violet-700 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10"> <div class="flex justify-center relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-violet-700 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10">
<div class="hidden md:block absolute -top-9 left-16 lg:left-32 z-10"> <div class="hidden md:block absolute -top-9 left-16 lg:left-32 z-10">
<span class="hw-note inline-block -rotate-3 text-zinc-600">your whole cluster on one screen</span> <span class="hw-note inline-block -rotate-3 text-zinc-600">your whole cluster on one screen</span>
<svg class="svg-free inline-block w-10 h-10 ml-1 translate-y-4 text-zinc-400" <svg class="inline-block w-10 h-10 ml-1 translate-y-4 text-zinc-400"
width="40" height="40"
viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 6c14 2 26 10 30 28M34 34l-8-3.5M34 34l1.5-8.5" stroke="currentColor" <path d="M4 6c14 2 26 10 30 28M34 34l-8-3.5M34 34l1.5-8.5" stroke="currentColor"
stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
@@ -264,7 +204,7 @@
<a href="https://uncloud.run/discord" target="_blank" rel="noopener" <a href="https://uncloud.run/discord" target="_blank" rel="noopener"
class="group block relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden"> class="group block relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span <h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span
x-data="counter(380)" x-text="counterValue">380</span></h4> x-data="counter(390)" x-text="counterValue">390</span>+</h4>
<p class="text-zinc-500 transition-colors group-hover:text-zinc-800">Discord <p class="text-zinc-500 transition-colors group-hover:text-zinc-800">Discord
members</p> members</p>
</a> </a>
@@ -275,7 +215,7 @@
</div> </div>
</section> </section>
<!-- Day-2 problem: deploying is the easy part, running it is the job. --> <!-- Day-2 problem -->
<section id="not-done" class="relative bg-zinc-900"> <section id="not-done" class="relative bg-zinc-900">
<div class="py-12 md:py-20"> <div class="py-12 md:py-20">
<div class="max-w-6xl mx-auto px-4 sm:px-6"> <div class="max-w-6xl mx-auto px-4 sm:px-6">
@@ -290,11 +230,9 @@
</p> </p>
</div> </div>
<!-- Launch checklist: setup complete, running it wide open. -->
<div class="max-w-xl mx-auto"> <div class="max-w-xl mx-auto">
<div class="rounded-2xl border border-zinc-700/60 bg-zinc-950 overflow-hidden"> <div class="rounded-2xl border border-zinc-700/60 bg-zinc-950 overflow-hidden">
<!-- The easy part: checked off. -->
<ul class="px-5 sm:px-8 py-6 space-y-4"> <ul class="px-5 sm:px-8 py-6 space-y-4">
<li class="flex items-center gap-3.5"> <li class="flex items-center gap-3.5">
<span class="w-7 flex items-center justify-center shrink-0" <span class="w-7 flex items-center justify-center shrink-0"
@@ -330,7 +268,6 @@
</li> </li>
</ul> </ul>
<!-- Divider: where the setup guide ends and running in production begins. -->
<div class="relative"> <div class="relative">
<hr class="border-t border-dashed border-zinc-700" aria-hidden="true"> <hr class="border-t border-dashed border-zinc-700" aria-hidden="true">
<span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full border border-red-500/30 bg-[#200f11] px-3 py-1 font-inter-tight text-[11px] font-semibold uppercase tracking-widest text-red-400"> <span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full border border-red-500/30 bg-[#200f11] px-3 py-1 font-inter-tight text-[11px] font-semibold uppercase tracking-widest text-red-400">
@@ -338,7 +275,6 @@
</span> </span>
</div> </div>
<!-- The real work: still open questions. -->
<ul class="px-5 sm:px-8 pt-8 pb-6 space-y-4 bg-red-500/5"> <ul class="px-5 sm:px-8 pt-8 pb-6 space-y-4 bg-red-500/5">
<li class="flex items-center gap-3.5"> <li class="flex items-center gap-3.5">
<span class="w-7 flex items-center justify-center shrink-0 text-lg font-semibold text-red-400 leading-none" <span class="w-7 flex items-center justify-center shrink-0 text-lg font-semibold text-red-400 leading-none"
@@ -370,8 +306,9 @@
<!-- Handwritten bridge: an arrow from the note up into the open questions. --> <!-- Handwritten bridge: an arrow from the note up into the open questions. -->
<p class="relative text-center mt-5"> <p class="relative text-center mt-5">
<span class="hw-note hw-note-light inline-block -rotate-2">that's what Hub is for</span> <span class="hw-note inline-block -rotate-2 text-zinc-400">that's what Hub is for</span>
<svg class="svg-free absolute left-1/2 bottom-1 ml-[7.5rem] w-12 h-24 text-zinc-400" <svg class="absolute left-1/2 bottom-1 ml-[6rem] w-12 h-24 text-zinc-400"
width="48" height="96"
viewBox="0 0 48 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> viewBox="0 0 48 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4 88c24-4 40-28 26-76M30 12l-2.5 8.5M30 12l6.5 6" stroke="currentColor" <path d="M4 88c24-4 40-28 26-76M30 12l-2.5 8.5M30 12l6.5 6" stroke="currentColor"
stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/> stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -383,7 +320,7 @@
</div> </div>
</section> </section>
<!-- Dashboard overview: what Hub shows you. --> <!-- Dashboard overview -->
<section class="relative bg-white"> <section class="relative bg-white">
<div class="py-12 md:py-20"> <div class="py-12 md:py-20">
<div class="max-w-6xl mx-auto px-4 sm:px-6"> <div class="max-w-6xl mx-auto px-4 sm:px-6">
@@ -452,7 +389,7 @@
<!-- Right: dashboard screenshot --> <!-- Right: dashboard screenshot -->
<div> <div>
<div class="rounded-2xl overflow-hidden border border-zinc-200 shadow-xl shadow-zinc-950/10"> <div class="rounded-2xl overflow-hidden border border-zinc-200 shadow-xl shadow-zinc-950/10">
<img src="images/dashboard-overview.png" width="2880" height="1960" <img src="images/hub-overview.webp" width="2560" height="1742"
alt="Uncloud Hub cluster overview dashboard, design preview" class="w-full block"> alt="Uncloud Hub cluster overview dashboard, design preview" class="w-full block">
</div> </div>
</div> </div>
@@ -461,7 +398,7 @@
</div> </div>
</section> </section>
<!-- Value stack: what you get. --> <!-- Value stack -->
<section class="relative bg-zinc-50"> <section class="relative bg-zinc-50">
<div class="py-12 md:py-20"> <div class="py-12 md:py-20">
<div class="max-w-6xl mx-auto px-4 sm:px-6"> <div class="max-w-6xl mx-auto px-4 sm:px-6">
@@ -649,7 +586,7 @@
<h3 class="font-inter-tight font-semibold text-zinc-900 mb-2">Monitor everything</h3> <h3 class="font-inter-tight font-semibold text-zinc-900 mb-2">Monitor everything</h3>
<p class="text-sm text-zinc-500 leading-relaxed"> <p class="text-sm text-zinc-500 leading-relaxed">
Explore your cluster, services, metrics, and logs in one place. See how each deploy 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.
</p> </p>
</div> </div>
</div> </div>
@@ -736,17 +673,15 @@
<div class="divide-y divide-zinc-200 border-t border-b border-zinc-200"> <div class="divide-y divide-zinc-200 border-t border-b border-zinc-200">
<details class="faq-item group"> <details class="group">
<summary class="flex items-center justify-between gap-4 py-5 cursor-pointer"> <summary
<span class="font-inter-tight font-semibold text-zinc-900">Do I need Hub to use Uncloud?</span> 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">
<span class="faq-plus shrink-0 text-zinc-400 transition-transform" <span>Do I need Hub to use Uncloud?</span>
<svg class="w-5 h-5 shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-45"
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"
aria-hidden="true"> aria-hidden="true">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/>
stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" </svg>
y2="19"/><line x1="5" y1="12"
x2="19"
y2="12"/></svg>
</span>
</summary> </summary>
<p class="text-zinc-500 leading-relaxed pb-5"> <p class="text-zinc-500 leading-relaxed pb-5">
No. <a class="underline hover:text-zinc-900" href="/">Uncloud</a> is open source No. <a class="underline hover:text-zinc-900" href="/">Uncloud</a> is open source
@@ -757,17 +692,15 @@
</p> </p>
</details> </details>
<details class="faq-item group"> <details class="group">
<summary class="flex items-center justify-between gap-4 py-5 cursor-pointer"> <summary
<span class="font-inter-tight font-semibold text-zinc-900">Is Hub open source too?</span> 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">
<span class="faq-plus shrink-0 text-zinc-400 transition-transform" <span>Is Hub open source too?</span>
<svg class="w-5 h-5 shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-45"
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"
aria-hidden="true"> aria-hidden="true">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/>
stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" </svg>
y2="19"/><line x1="5" y1="12"
x2="19"
y2="12"/></svg>
</span>
</summary> </summary>
<p class="text-zinc-500 leading-relaxed pb-5"> <p class="text-zinc-500 leading-relaxed pb-5">
No, and no point pretending otherwise. Uncloud, the orchestrator, is Apache 2.0. Hub No, and no point pretending otherwise. Uncloud, the orchestrator, is Apache 2.0. Hub
@@ -776,17 +709,15 @@
</p> </p>
</details> </details>
<details class="faq-item group"> <details class="group">
<summary class="flex items-center justify-between gap-4 py-5 cursor-pointer"> <summary
<span class="font-inter-tight font-semibold text-zinc-900">What data leaves my machines?</span> 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">
<span class="faq-plus shrink-0 text-zinc-400 transition-transform" <span>What data leaves my machines?</span>
<svg class="w-5 h-5 shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-45"
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"
aria-hidden="true"> aria-hidden="true">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/>
stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" </svg>
y2="19"/><line x1="5" y1="12"
x2="19"
y2="12"/></svg>
</span>
</summary> </summary>
<p class="text-zinc-500 leading-relaxed pb-5"> <p class="text-zinc-500 leading-relaxed pb-5">
Metrics and logs will flow to Hub. Storing, graphing, and searching them is the Metrics and logs will flow to Hub. Storing, graphing, and searching them is the
@@ -797,17 +728,15 @@
</p> </p>
</details> </details>
<details class="faq-item group"> <details class="group">
<summary class="flex items-center justify-between gap-4 py-5 cursor-pointer"> <summary
<span class="font-inter-tight font-semibold text-zinc-900">What access does Hub get to my cluster?</span> 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">
<span class="faq-plus shrink-0 text-zinc-400 transition-transform" <span>What access does Hub get to my cluster?</span>
<svg class="w-5 h-5 shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-45"
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"
aria-hidden="true"> aria-hidden="true">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/>
stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" </svg>
y2="19"/><line x1="5" y1="12"
x2="19"
y2="12"/></svg>
</span>
</summary> </summary>
<p class="text-zinc-500 leading-relaxed pb-5"> <p class="text-zinc-500 leading-relaxed pb-5">
The connection model is being designed right now with early access users. The intent The connection model is being designed right now with early access users. The intent
@@ -818,17 +747,15 @@
</p> </p>
</details> </details>
<details class="faq-item group"> <details class="group">
<summary class="flex items-center justify-between gap-4 py-5 cursor-pointer"> <summary
<span class="font-inter-tight font-semibold text-zinc-900">What happens to my apps if Hub goes down?</span> 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">
<span class="faq-plus shrink-0 text-zinc-400 transition-transform" <span>What happens to my apps if Hub goes down?</span>
<svg class="w-5 h-5 shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-45"
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"
aria-hidden="true"> aria-hidden="true">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/>
stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" </svg>
y2="19"/><line x1="5" y1="12"
x2="19"
y2="12"/></svg>
</span>
</summary> </summary>
<p class="text-zinc-500 leading-relaxed pb-5"> <p class="text-zinc-500 leading-relaxed pb-5">
Nothing. Your apps run on your servers and Uncloud doesn't depend on Hub to Nothing. Your apps run on your servers and Uncloud doesn't depend on Hub to
@@ -836,17 +763,15 @@
</p> </p>
</details> </details>
<details class="faq-item group"> <details class="group">
<summary class="flex items-center justify-between gap-4 py-5 cursor-pointer"> <summary
<span class="font-inter-tight font-semibold text-zinc-900">Why not just run my own Grafana stack?</span> 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">
<span class="faq-plus shrink-0 text-zinc-400 transition-transform" <span>Why not just run my own Grafana stack?</span>
<svg class="w-5 h-5 shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-45"
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"
aria-hidden="true"> aria-hidden="true">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/>
stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" </svg>
y2="19"/><line x1="5" y1="12"
x2="19"
y2="12"/></svg>
</span>
</summary> </summary>
<p class="text-zinc-500 leading-relaxed pb-5"> <p class="text-zinc-500 leading-relaxed pb-5">
You can and if you do already, keep it. Grafana, Prometheus, VictoriaMetrics and You can and if you do already, keep it. Grafana, Prometheus, VictoriaMetrics and
@@ -855,17 +780,15 @@
</p> </p>
</details> </details>
<details class="faq-item group"> <details class="group">
<summary class="flex items-center justify-between gap-4 py-5 cursor-pointer"> <summary
<span class="font-inter-tight font-semibold text-zinc-900">When can I use it, and what will it cost?</span> 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">
<span class="faq-plus shrink-0 text-zinc-400 transition-transform" <span>When can I use it, and what will it cost?</span>
<svg class="w-5 h-5 shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-45"
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"
aria-hidden="true"> aria-hidden="true">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/>
stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" </svg>
y2="19"/><line x1="5" y1="12"
x2="19"
y2="12"/></svg>
</span>
</summary> </summary>
<p class="text-zinc-500 leading-relaxed pb-5"> <p class="text-zinc-500 leading-relaxed pb-5">
Hub is in active development and everything on this page is a design preview. Hub is in active development and everything on this page is a design preview.
website/landing/images/hub-hero.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

website/landing/images/hub-overview.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

website/landing/index.html
+65 -23
View File
@@ -33,15 +33,7 @@
<meta name="twitter:image" content="https://uncloud.run/images/logo-wide.png"> <meta name="twitter:image" content="https://uncloud.run/images/logo-wide.png">
<meta name="twitter:image:alt" content="Uncloud logo - Self-host web apps with ease"> <meta name="twitter:image:alt" content="Uncloud logo - Self-host web apps with ease">
<style> <style>
/* Prevent all inline SVGs from appearing full screen */
svg {
max-width: 24px;
max-height: 24px;
}
.text-balance {
text-wrap: balance;
}
</style> </style>
</head> </head>
@@ -67,6 +59,15 @@
<nav class="flex grow"> <nav class="flex grow">
<!-- Left side navigation --> <!-- Left side navigation -->
<ul class="flex items-center"> <ul class="flex items-center">
<li>
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-2 sm:px-5 py-2 transition inline-flex items-center"
href="/hub">
Hub
<span class="inline-block ml-1 -translate-y-1.5 -rotate-[8deg] text-[10px] font-semibold uppercase tracking-wide text-violet-700 bg-violet-100 px-1.5 py-0.5 rounded">
New
</span>
</a>
</li>
<li> <li>
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-2 sm:px-5 py-2 transition" <a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-2 sm:px-5 py-2 transition"
href="/docs">Docs</a> href="/docs">Docs</a>
@@ -75,7 +76,8 @@
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-2 sm:px-5 py-2 transition" <a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-2 sm:px-5 py-2 transition"
href="/blog">Blog</a> href="/blog">Blog</a>
</li> </li>
<li> <!-- Hidden on small screens to keep the nav from overflowing at 390px. -->
<li class="hidden md:block">
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-2 sm:px-5 py-2 transition" <a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-2 sm:px-5 py-2 transition"
href="https://psviderski.substack.com/" target="_blank">Newsletter</a> href="https://psviderski.substack.com/" target="_blank">Newsletter</a>
</li> </li>
@@ -213,7 +215,7 @@
<a href="https://uncloud.run/discord" target="_blank" rel="noopener" <a href="https://uncloud.run/discord" target="_blank" rel="noopener"
class="group block relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden"> class="group block relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span <h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span
x-data="counter(380)" x-text="counterValue">380</span></h4> x-data="counter(390)" x-text="counterValue">390</span>+</h4>
<p class="text-zinc-500 transition-colors group-hover:text-zinc-800">Fans on <p class="text-zinc-500 transition-colors group-hover:text-zinc-800">Fans on
Discord</p> Discord</p>
</a> </a>
@@ -714,11 +716,51 @@ prod-3 201.45.91.123:51820 1m56s ago 11ms 5.12MB 9.34MB
</div> </div>
</section> </section>
<!-- Uncloud Hub -->
<section class="relative bg-violet-50 border-y border-violet-100">
<div class="py-12 md:py-20">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
<div class="lg:max-w-md lg:col-start-2 lg:row-start-1">
<div class="font-mono text-xs font-medium uppercase tracking-[0.18em] text-violet-600 mb-4">
Coming soon
</div>
<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
<span class="text-violet-600">Uncloud Hub</span>: see what's happening in
production
</h2>
<p class="text-lg text-zinc-500 mb-6">
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.
</p>
<div class="flex flex-wrap items-center gap-x-6 gap-y-4">
<a class="btn text-zinc-100 bg-zinc-900 hover:bg-zinc-800 shadow"
href="/hub">Learn about Hub</a>
<a class="text-sm font-medium text-violet-700 hover:text-violet-900 transition"
href="/hub#early-access">Get early access &rarr;</a>
</div>
<p class="mt-5 text-sm text-zinc-500">
Hub is how we plan to fund Uncloud's full-time development.<br>
Uncloud itself stays Apache 2.0 and works fully without Hub.
</p>
</div>
<div class="lg:col-start-1 lg:row-start-1 rounded-xl overflow-hidden border border-zinc-200 shadow-2xl shadow-zinc-950/10">
<img src="./images/hub-hero.webp" width="2560" height="1520"
alt="Uncloud Hub cluster overview dashboard, design preview"
class="w-full block" loading="lazy">
</div>
</div>
</div>
</div>
</section>
<!-- FAQ --> <!-- FAQ -->
<section id="faq" class="relative bg-zinc-50"> <section id="faq" class="relative bg-zinc-50">
<div class="py-12 md:py-20"> <div class="py-12 md:py-20">
<div class="max-w-6xl mx-auto px-4 sm:px-6"> <div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="max-w-3xl mx-auto"> <div class="max-w-2xl mx-auto">
<div class="text-center pb-8 md:pb-12"> <div class="text-center pb-8 md:pb-12">
<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4"> <h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
Frequently asked questions Frequently asked questions
@@ -731,17 +773,17 @@ prod-3 201.45.91.123:51820 1m56s ago 11ms 5.12MB 9.34MB
</div> </div>
<div class="divide-y divide-zinc-200 border-y border-zinc-200"> <div class="divide-y divide-zinc-200 border-y border-zinc-200">
<details class="group py-5"> <details class="group">
<summary <summary
class="flex items-center justify-between gap-4 cursor-pointer list-none [&::-webkit-details-marker]:hidden font-inter-tight text-lg font-semibold text-zinc-900"> 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">
<span>How is this different from Docker Swarm?</span> <span>How is this different from Docker Swarm?</span>
<svg class="w-4 h-4 shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-45" <svg class="w-5 h-5 shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-45"
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"
aria-hidden="true"> aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/> <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/>
</svg> </svg>
</summary> </summary>
<p class="mt-3 text-zinc-500"> <p class="text-zinc-500 leading-relaxed pb-5">
Swarm needs a Raft quorum of manager nodes and has been in maintenance mode for 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 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 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
</p> </p>
</details> </details>
<details class="group py-5"> <details class="group">
<summary <summary
class="flex items-center justify-between gap-4 cursor-pointer list-none [&::-webkit-details-marker]:hidden font-inter-tight text-lg font-semibold text-zinc-900"> 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">
<span>What happens when a machine goes down?</span> <span>What happens when a machine goes down?</span>
<svg class="w-4 h-4 shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-45" <svg class="w-5 h-5 shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-45"
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"
aria-hidden="true"> aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/> <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/>
</svg> </svg>
</summary> </summary>
<p class="mt-3 text-zinc-500"> <p class="text-zinc-500 leading-relaxed pb-5">
The rest of the cluster keeps working. There's no control plane to lose, and 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 healthy replicas on other machines keep serving traffic. Uncloud deliberately
doesn't auto-reschedule containers. You decide when to replace the machine and 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
</p> </p>
</details> </details>
<details class="group py-5"> <details class="group">
<summary <summary
class="flex items-center justify-between gap-4 cursor-pointer list-none [&::-webkit-details-marker]:hidden font-inter-tight text-lg font-semibold text-zinc-900"> 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">
<span>Will it replace my CI/CD?</span> <span>Will it replace my CI/CD?</span>
<svg class="w-4 h-4 shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-45" <svg class="w-5 h-5 shrink-0 text-zinc-400 transition-transform duration-200 group-open:rotate-45"
fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"
aria-hidden="true"> aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/> <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/>
</svg> </svg>
</summary> </summary>
<p class="mt-3 text-zinc-500"> <p class="text-zinc-500 leading-relaxed pb-5">
No, and that's deliberate. <code>uc</code> No, and that's deliberate. <code>uc</code>
is just a CLI that connects to your cluster over SSH. Run <code>uc deploy</code> is just a CLI that connects to your cluster over SSH. Run <code>uc deploy</code>
locally or in GitHub Actions to integrate with existing workflows. locally or in GitHub Actions to integrate with existing workflows.
website/landing/style.css
+417 -195
View File
File diff suppressed because it is too large Load Diff