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

add terminal demo to hero section

Browse Source
This commit is contained in:
Pavel Sviderski
2025-01-16 15:50:40 +10:00
parent 6c197085d0
commit b016252821
1 changed files with 46 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/index.html
+46 -11
View File
@@ -3,12 +3,12 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Gray HTML Demo - Home</title> <title>Deploy Docker apps on your own infrastructure | Uncloud</title>
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<link href="./style.css" rel="stylesheet"> <link href="./style.css" rel="stylesheet">
<link rel="apple-touch-icon" href="./images/apple-touch-icon.png" sizes="180x180" /> <link rel="apple-touch-icon" href="./images/apple-touch-icon.png" sizes="180x180"/>
<link rel="icon" type="image/svg+xml" href="./images/logo.svg" /> <link rel="icon" type="image/svg+xml" href="./images/logo.svg"/>
<link rel="alternate icon" type="image/png" href="./images/favicon.png" sizes="96x96" /> <link rel="alternate icon" type="image/png" href="./images/favicon.png" sizes="96x96"/>
</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">
@@ -69,7 +69,8 @@
Cut cloud costs Cut cloud costs
</h1> </h1>
<p class="text-lg text-zinc-500 mb-8"> <p class="text-lg text-zinc-500 mb-8">
Uncloud is a lightweight Docker clustering tool for running web apps on your own servers — from cloud VMs to bare metal. Uncloud is a lightweight Docker clustering tool for running web apps on your own servers
— from cloud VMs to bare metal.
Replace Heroku and Render, no Kubernetes required. Replace Heroku and Render, no Kubernetes required.
</p> </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 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">
@@ -78,17 +79,49 @@
href="quickstart.html">Quick Start</a> href="quickstart.html">Quick Start</a>
</div> </div>
<div> <div>
<a class="btn text-zinc-600 bg-white hover:text-zinc-900 w-full shadow" href="#0">Try <a class="btn text-zinc-600 bg-white hover:text-zinc-900 w-full shadow flex items-center justify-center"
for Free</a> href="https://github.com/yourusername/uncloud">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<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>
Star on GitHub
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Image -->
<div class="max-w-6xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 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="max-w-3xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 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">
<img class="rounded-lg shadow-2xl" src="./images/hero-image.png" width="1104" height="620" <div class="coding w-full bg-zinc-800 rounded-lg border border-zinc-700/50 shadow-2xl">
alt="Hero"> <!-- 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 hardware</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 registry/app</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 --replicas 2</pre>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>
@@ -779,6 +812,8 @@
</div> </div>
<script src="./js/vendors/alpinejs.min.js" defer></script>
</body> </body>
</html> </html>