mirror of
https://github.com/psviderski/uncloud.git
synced 2026-08-26 11:03:34 +00:00
website: refine styles for index and hub
This commit is contained in:
Pasha Sviderski
+65
-23
@@ -33,15 +33,7 @@
|
||||
<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">
|
||||
<style>
|
||||
/* Prevent all inline SVGs from appearing full screen */
|
||||
svg {
|
||||
max-width: 24px;
|
||||
max-height: 24px;
|
||||
}
|
||||
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -67,6 +59,15 @@
|
||||
<nav class="flex grow">
|
||||
<!-- Left side navigation -->
|
||||
<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>
|
||||
<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>
|
||||
@@ -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"
|
||||
href="/blog">Blog</a>
|
||||
</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"
|
||||
href="https://psviderski.substack.com/" target="_blank">Newsletter</a>
|
||||
</li>
|
||||
@@ -213,7 +215,7 @@
|
||||
<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">
|
||||
<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
|
||||
Discord</p>
|
||||
</a>
|
||||
@@ -714,11 +716,51 @@ prod-3 201.45.91.123:51820 1m56s ago 11ms 5.12MB 9.34MB
|
||||
</div>
|
||||
</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 →</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 -->
|
||||
<section id="faq" class="relative bg-zinc-50">
|
||||
<div class="py-12 md:py-20">
|
||||
<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">
|
||||
<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
Frequently asked questions
|
||||
@@ -731,17 +773,17 @@ prod-3 201.45.91.123:51820 1m56s ago 11ms 5.12MB 9.34MB
|
||||
</div>
|
||||
|
||||
<div class="divide-y divide-zinc-200 border-y border-zinc-200">
|
||||
<details class="group py-5">
|
||||
<details class="group">
|
||||
<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>
|
||||
<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"
|
||||
aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/>
|
||||
</svg>
|
||||
</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
|
||||
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
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<details class="group py-5">
|
||||
<details class="group">
|
||||
<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>
|
||||
<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"
|
||||
aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/>
|
||||
</svg>
|
||||
</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
|
||||
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
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<details class="group py-5">
|
||||
<details class="group">
|
||||
<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>
|
||||
<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"
|
||||
aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14m-7-7h14"/>
|
||||
</svg>
|
||||
</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>
|
||||
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.
|
||||
|
||||
Reference in New Issue
Block a user