chore: bring terminal on landing back, update hero, move demo to bottom

This commit is contained in:
Pavel Sviderski
2025-05-09 22:38:58 +10:00
parent 1ffe9acdd7
commit f49ec465d0
2 changed files with 149 additions and 25 deletions
+64 -21
View File
@@ -61,7 +61,7 @@
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/>
<path d="M9 18c-4.51 2-5-2-7-2"/>
</svg>
<span class="ml-1 hidden sm:inline">View Source</span>
<span class="ml-1 hidden sm:inline">GitHub</span>
</a>
</li>
<li class="ml-1">
@@ -86,13 +86,13 @@
<div class="max-w-3xl mx-auto">
<div class="text-center pb-12 md:pb-16">
<h1 class="font-inter-tight text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-zinc-500 via-zinc-900 to-zinc-900 pb-4">
Run on your servers<br>
Cut cloud costs
Stay simple<br>
Ship more
</h1>
<p class="text-lg text-zinc-500 mb-8">
Uncloud is a lightweight Docker clustering tool for running web apps on your own servers
Uncloud is a lightweight Docker clustering tool for running and scaling web apps on your servers
— from cloud VMs to bare metal.
Replace Heroku and Render, no Kubernetes required.
No Kubernetes required.
</p>
<div class="max-w-xs mx-auto sm:max-w-none sm:inline-flex sm:justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<div>
@@ -117,16 +117,31 @@
</div>
<div class="max-w-3xl mx-auto px-4 sm:px-6 flex justify-center pb-12 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10">
<div class="w-full md:min-h-[420px]">
<script src="https://fast.wistia.com/player.js" async></script>
<script src="https://fast.wistia.com/embed/k47uwt9uau.js" async type="module"></script>
<style>wistia-player[media-id='k47uwt9uau']:not(:defined) {
background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/k47uwt9uau/swatch');
display: block;
filter: blur(5px);
padding-top: 58.33%;
}</style>
<wistia-player media-id="k47uwt9uau" aspect="1.7142857142857142"></wistia-player>
<div class="coding w-full bg-zinc-800 rounded-lg border border-zinc-700/50 shadow-2xl">
<!-- Title bar -->
<div class="pl-4 pt-4 flex items-center">
<div class="flex gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
</div>
</div>
<!-- Terminal content -->
<div class="p-4 text-sm sm:p-6 sm:text-[0.9375rem] text-white overflow-x-auto">
<pre class="text-zinc-500 select-none"># Start with any cloud VM or your own server</pre>
<pre><span class="text-emerald-500 select-none">$ </span>uc machine init root@137.123.45.67</pre>
<pre> </pre>
<pre class="text-zinc-500 select-none"># Deploy your app with automatic HTTPS</pre>
<pre><span class="text-emerald-500 select-none">$ </span>uc run --name my-app -p app.example.com:8000/https app-image:latest</pre>
<pre class="text-zinc-200">✨ Your app is available at <span class="underline">https://app.example.com</span></pre>
<pre> </pre>
<pre class="text-zinc-500 select-none"># Achieve high availability by adding more machines and scaling the app</pre>
<pre><span
class="text-emerald-500 select-none">$ </span>uc machine add ubuntu@65.21.45.67</pre>
<pre><span class="text-emerald-500 select-none">$ </span>uc scale my-app 2</pre>
</div>
</div>
</div>
</div>
@@ -141,7 +156,7 @@
Cloud-like experience you control
</h2>
<p class="text-lg text-zinc-500">
Keep the Docker workflows you love while optimizing infrastructure costs
Keep the Docker workflows you love while optimising infrastructure costs
</p>
</div>
@@ -362,7 +377,7 @@
</div>
</div>
<!-- Fully decentralized -->
<!-- Fully decentralised -->
<div class="text-left flex items-center px-6 py-4 rounded border border-transparent">
<svg class="shrink-0 fill-zinc-400 stroke-zinc-400 mr-3"
xmlns="http://www.w3.org/2000/svg"
@@ -371,11 +386,11 @@
</svg>
<div>
<div class="font-inter-tight text-lg font-semibold text-zinc-200 mb-1">
Fully decentralized
Fully decentralised
</div>
<div>
Unlike traditional orchestrators, there's no central control plane to
maintain. Each machine maintains a synchronized copy of the cluster
maintain. Each machine maintains a synchronised copy of the cluster
state
through peer-to-peer communication, keeping cluster operations
functional
@@ -502,7 +517,7 @@
<h3 class="font-inter-tight font-semibold text-zinc-200">No vendor lock-in</h3>
</div>
<p class="text-sm">Mix cloud providers and your own hardware freely to
optimize costs and performance, without changing how you deploy or manage apps.</p>
optimise costs and performance, without changing how you deploy or manage apps.</p>
</div>
</div>
</div>
@@ -510,9 +525,37 @@
</div>
</section>
<!-- Demo Section -->
<section class="relative bg-white text-zinc-800">
<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 text-center pb-12 md:pb-16">
<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
See in action
</h2>
<p class="text-lg text-zinc-500">
Deploy a highly available web app with automatic HTTPS across multiple regions and on-premises in just a couple minutes.
</p>
</div>
<div class="max-w-3xl mx-auto px-4 sm:px-6 flex justify-center pb-12 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10">
<script src="https://fast.wistia.com/player.js" async></script>
<script src="https://fast.wistia.com/embed/k47uwt9uau.js" async type="module"></script>
<style>wistia-player[media-id='k47uwt9uau']:not(:defined) {
background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/k47uwt9uau/swatch');
display: block;
filter: blur(5px);
padding-top: 58.33%;
}</style>
<wistia-player media-id="k47uwt9uau" aspect="1.7142857142857142" class="w-full rounded-xl shadow-lg"></wistia-player>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section id="subscribe">
<div class="py-12 md:py-20">
<div class="py-12 md:py-20 border-t border-zinc-200">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="relative max-w-3xl mx-auto text-center">
<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">