chore: replace terminal example with a demo video on landing

This commit is contained in:
Pavel Sviderski
2025-03-06 15:49:06 +10:00
parent fff17dbb60
commit cf65cecd9e
2 changed files with 26 additions and 109 deletions
+15 -29
View File
@@ -4,7 +4,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Deploy Docker Apps on Your Infrastructure | Uncloud</title> <title>Deploy Docker Apps on Your Infrastructure | Uncloud</title>
<meta name="description" content="Uncloud helps you deploy container applications on your infrastructure — from cloud VMs to bare metal. Replace Heroku and Render, no Kubernetes required."> <meta name="description"
content="Uncloud helps you deploy container applications on your infrastructure — from cloud VMs to bare metal. Replace Heroku and Render, no Kubernetes required.">
<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"/>
@@ -13,7 +14,8 @@
<!-- OpenGraph tags for social media --> <!-- OpenGraph tags for social media -->
<meta property="og:title" content="Deploy Docker Apps on Your Infrastructure | Uncloud"/> <meta property="og:title" content="Deploy Docker Apps on Your Infrastructure | Uncloud"/>
<meta property="og:description" content="Uncloud helps you deploy container applications on your infrastructure — from cloud VMs to bare metal. Replace Heroku and Render, no Kubernetes required." /> <meta property="og:description"
content="Uncloud helps you deploy container applications on your infrastructure — from cloud VMs to bare metal. Replace Heroku and Render, no Kubernetes required."/>
<meta property="og:image" content="https://uncloud.run/images/logo-wide.png"/> <meta property="og:image" content="https://uncloud.run/images/logo-wide.png"/>
<meta property="og:image:alt" content="Uncloud logo - Deploy container apps with ease"/> <meta property="og:image:alt" content="Uncloud logo - Deploy container apps with ease"/>
<meta property="og:url" content="https://uncloud.run"/> <meta property="og:url" content="https://uncloud.run"/>
@@ -24,7 +26,8 @@
<meta property="twitter:url" content="https://uncloud.run"> <meta property="twitter:url" content="https://uncloud.run">
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Deploy Docker Apps on Your Infrastructure | Uncloud"> <meta name="twitter:title" content="Deploy Docker Apps on Your Infrastructure | Uncloud">
<meta name="twitter:description" content="Uncloud helps you deploy container applications on your infrastructure — from cloud VMs to bare metal. Replace Heroku and Render, no Kubernetes required."> <meta name="twitter:description"
content="Uncloud helps you deploy container applications on your infrastructure — from cloud VMs to bare metal. Replace Heroku and Render, no Kubernetes required.">
<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 - Deploy container apps with ease"> <meta name="twitter:image:alt" content="Uncloud logo - Deploy container apps with ease">
</head> </head>
@@ -114,32 +117,15 @@
</div> </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="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="coding w-full bg-zinc-800 rounded-lg border border-zinc-700/50 shadow-2xl"> <script src="https://fast.wistia.com/player.js" async></script>
<!-- Title bar --> <script src="https://fast.wistia.com/embed/k47uwt9uau.js" async type="module"></script>
<div class="pl-4 pt-4 flex items-center"> <style>wistia-player[media-id='k47uwt9uau']:not(:defined) {
<div class="flex gap-2"> background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/k47uwt9uau/swatch');
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div> display: block;
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div> filter: blur(5px);
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div> padding-top: 58.33%;
</div> }</style>
</div> <wistia-player media-id="k47uwt9uau" aspect="1.7142857142857142"></wistia-player>
<!-- 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 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 --replicas 2</pre>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>
+5 -74
View File
@@ -1314,14 +1314,6 @@ input[type="search"]::-webkit-search-results-decoration {
height: 3.5rem; height: 3.5rem;
} }
.h-2{
height: 0.5rem;
}
.h-2\.5{
height: 0.625rem;
}
.h-24{ .h-24{
height: 6rem; height: 6rem;
} }
@@ -1342,14 +1334,6 @@ input[type="search"]::-webkit-search-results-decoration {
min-height: 100vh; min-height: 100vh;
} }
.w-2{
width: 0.5rem;
}
.w-2\.5{
width: 0.625rem;
}
.w-4{ .w-4{
width: 1rem; width: 1rem;
} }
@@ -1418,12 +1402,6 @@ 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)); 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-cols-1{
grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr));
} }
@@ -1468,10 +1446,6 @@ input[type="search"]::-webkit-search-results-decoration {
justify-content: space-between; justify-content: space-between;
} }
.gap-2{
gap: 0.5rem;
}
.gap-3{ .gap-3{
gap: 0.75rem; gap: 0.75rem;
} }
@@ -1534,10 +1508,6 @@ input[type="search"]::-webkit-search-results-decoration {
overflow: hidden; overflow: hidden;
} }
.overflow-x-auto{
overflow-x: auto;
}
.rounded{ .rounded{
border-radius: 0.25rem; border-radius: 0.25rem;
} }
@@ -1616,10 +1586,6 @@ input[type="search"]::-webkit-search-results-decoration {
border-color: rgb(228 228 231 / var(--tw-border-opacity)); 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{ .bg-gray-100{
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity)); background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1630,26 +1596,11 @@ input[type="search"]::-webkit-search-results-decoration {
background-color: rgb(229 231 235 / var(--tw-bg-opacity)); 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{ .bg-white{
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); 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{ .bg-zinc-50{
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(250 250 250 / var(--tw-bg-opacity)); background-color: rgb(250 250 250 / var(--tw-bg-opacity));
@@ -1701,10 +1652,6 @@ input[type="search"]::-webkit-search-results-decoration {
stroke: #a1a1aa; stroke: #a1a1aa;
} }
.p-4{
padding: 1rem;
}
.p-5{ .p-5{
padding: 1.25rem; padding: 1.25rem;
} }
@@ -1772,18 +1719,10 @@ input[type="search"]::-webkit-search-results-decoration {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.pl-4{
padding-left: 1rem;
}
.pt-32{ .pt-32{
padding-top: 8rem; padding-top: 8rem;
} }
.pt-4{
padding-top: 1rem;
}
.pt-6{ .pt-6{
padding-top: 1.5rem; padding-top: 1.5rem;
} }
@@ -1897,11 +1836,6 @@ input[type="search"]::-webkit-search-results-decoration {
color: transparent; color: transparent;
} }
.text-white{
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-zinc-100{ .text-zinc-100{
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(244 244 245 / var(--tw-text-opacity)); color: rgb(244 244 245 / var(--tw-text-opacity));
@@ -1964,6 +1898,11 @@ input[type="search"]::-webkit-search-results-decoration {
--tw-shadow: var(--tw-shadow-colored); --tw-shadow: var(--tw-shadow-colored);
} }
.blur{
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{ .filter{
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
} }
@@ -2258,18 +2197,10 @@ input[type="search"]::-webkit-search-results-decoration {
margin-bottom: calc(0px * var(--tw-space-y-reverse)); margin-bottom: calc(0px * var(--tw-space-y-reverse));
} }
.sm\:p-6{
padding: 1.5rem;
}
.sm\:px-6{ .sm\:px-6{
padding-left: 1.5rem; padding-left: 1.5rem;
padding-right: 1.5rem; padding-right: 1.5rem;
} }
.sm\:text-\[0\.9375rem\]{
font-size: 0.9375rem;
}
} }
@media (min-width: 768px){ @media (min-width: 768px){