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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
website/index.html
+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">
website/style.css
+85 -4
View File
@@ -1314,6 +1314,14 @@ input[type="search"]::-webkit-search-results-decoration {
height: 3.5rem;
}
.h-2{
height: 0.5rem;
}
.h-2\.5{
height: 0.625rem;
}
.h-24{
height: 6rem;
}
@@ -1334,6 +1342,14 @@ input[type="search"]::-webkit-search-results-decoration {
min-height: 100vh;
}
.w-2{
width: 0.5rem;
}
.w-2\.5{
width: 0.625rem;
}
.w-4{
width: 1rem;
}
@@ -1402,6 +1418,12 @@ 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));
}
.select-none{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.grid-cols-1{
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@@ -1446,6 +1468,10 @@ input[type="search"]::-webkit-search-results-decoration {
justify-content: space-between;
}
.gap-2{
gap: 0.5rem;
}
.gap-3{
gap: 0.75rem;
}
@@ -1508,6 +1534,10 @@ input[type="search"]::-webkit-search-results-decoration {
overflow: hidden;
}
.overflow-x-auto{
overflow-x: auto;
}
.rounded{
border-radius: 0.25rem;
}
@@ -1586,6 +1616,10 @@ input[type="search"]::-webkit-search-results-decoration {
border-color: rgb(228 228 231 / var(--tw-border-opacity));
}
.border-zinc-700\/50{
border-color: rgb(63 63 70 / 0.5);
}
.bg-gray-100{
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1596,11 +1630,26 @@ 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{
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.bg-white{
--tw-bg-opacity: 1;
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-50{
--tw-bg-opacity: 1;
background-color: rgb(250 250 250 / var(--tw-bg-opacity));
@@ -1652,6 +1701,10 @@ input[type="search"]::-webkit-search-results-decoration {
stroke: #a1a1aa;
}
.p-4{
padding: 1rem;
}
.p-5{
padding: 1.25rem;
}
@@ -1719,10 +1772,18 @@ input[type="search"]::-webkit-search-results-decoration {
padding-bottom: 1rem;
}
.pl-4{
padding-left: 1rem;
}
.pt-32{
padding-top: 8rem;
}
.pt-4{
padding-top: 1rem;
}
.pt-6{
padding-top: 1.5rem;
}
@@ -1836,6 +1897,11 @@ input[type="search"]::-webkit-search-results-decoration {
color: transparent;
}
.text-white{
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-zinc-100{
--tw-text-opacity: 1;
color: rgb(244 244 245 / var(--tw-text-opacity));
@@ -1861,6 +1927,11 @@ input[type="search"]::-webkit-search-results-decoration {
color: rgb(82 82 91 / 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));
@@ -1887,6 +1958,12 @@ 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-lg{
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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);
@@ -2197,10 +2274,18 @@ input[type="search"]::-webkit-search-results-decoration {
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.sm\:p-6{
padding: 1.5rem;
}
.sm\:px-6{
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.sm\:text-\[0\.9375rem\]{
font-size: 0.9375rem;
}
}
@media (min-width: 768px){
@@ -2212,10 +2297,6 @@ input[type="search"]::-webkit-search-results-decoration {
margin-bottom: 0px;
}
.md\:min-h-\[420px\]{
min-height: 420px;
}
.md\:max-w-4xl{
max-width: 56rem;
}