add landing section to follow the journey and subscribe via email

This commit is contained in:
Pavel Sviderski
2025-01-22 21:26:49 +10:00
parent 911522c388
commit 5061097dff
2 changed files with 129 additions and 123 deletions
+39 -122
View File
@@ -424,7 +424,7 @@
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-200">Deploy anywhere</h3>
</div>
<p class="text-sm text-zinc-500">Run your apps on any Linux machine — from cloud VMs and
<p class="text-sm">Run your apps on any Linux machine — from cloud VMs and
dedicated servers to bare metal at your office or home.</p>
</div>
@@ -437,7 +437,7 @@
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-200">Automatic HTTPS</h3>
</div>
<p class="text-sm text-zinc-500">Get free TLS certificates and automatic HTTPS for your
<p class="text-sm">Get free TLS certificates and automatic HTTPS for your
domains with zero configuration using built-in Caddy reverse proxy.</p>
</div>
@@ -453,7 +453,7 @@
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-200">Load balancing</h3>
</div>
<p class="text-sm text-zinc-500">Distribute traffic across container replicas running on
<p class="text-sm">Distribute traffic across container replicas running on
different machines for improved reliability and performance.</p>
</div>
@@ -466,7 +466,7 @@
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-200">Service discovery</h3>
</div>
<p class="text-sm text-zinc-500">Access any service by its name from any container using the
<p class="text-sm">Access any service by its name from any container using the
built-in DNS that automatically tracks services across your network.</p>
</div>
@@ -479,7 +479,7 @@
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-200">Infrastructure as Code</h3>
</div>
<p class="text-sm text-zinc-500">Define your entire app stack in a familiar Docker Compose
<p class="text-sm">Define your entire app stack in a familiar Docker Compose
file. No need to learn a new config format.</p>
</div>
@@ -494,7 +494,7 @@
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-200">No vendor lock-in</h3>
</div>
<p class="text-sm text-zinc-500">Mix cloud providers and your own hardware freely to
<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>
</div>
</div>
@@ -507,11 +507,11 @@
<section>
<div class="py-12 md:py-20">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="relative 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">Start your
journey
<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">
Be part of the development
<em class="relative not-italic inline-flex justify-center items-end">
today
journey
<svg class="absolute fill-zinc-300 w-[calc(100%+1rem)] -z-10"
xmlns="http://www.w3.org/2000/svg" width="120" height="10" viewBox="0 0 120 10"
aria-hidden="true" preserveAspectRatio="none">
@@ -519,17 +519,33 @@
</svg>
</em>
</h2>
<p class="text-lg text-zinc-500 mb-8">Gray removes creative distances by connecting beginners,
pros, and every team in between. Are you ready to start your journey?</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>
<a class="btn text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow"
href="request-demo.html">Request Demo</a>
</div>
<div>
<a class="btn text-zinc-600 bg-white hover:text-zinc-900 w-full shadow" href="#0">Try
for Free</a>
<p class="text-lg text-zinc-500 mb-8">
Uncloud is an open source project I'm actively developing. I'd love to share this journey with you. Subscribe to follow the progress, get early insights into new features, and be the first to know when it's ready for production use.
<p>
<!-- CTAs -->
<div class="flex flex-col sm:flex-row justify-center gap-4 items-stretch">
<!-- Subscribe form -->
<form class="w-full max-w-sm mx-auto flex">
<input type="email"
class="flex-1 min-w-0 form-input px-4 py-2 text-sm text-zinc-900 bg-white border border-zinc-200 rounded-l border-r-0 rounded-r-none shadow-sm focus:border-zinc-900"
placeholder="Your email address"
required/>
<button type="submit"
class="btn text-zinc-100 bg-zinc-900 hover:bg-zinc-800 rounded-l-none shadow">
Subscribe
</button>
</form>
</div>
<div class="mt-6 text-sm text-zinc-500">
<p>
Want to contribute? Check out the
<a href="https://github.com/psviderski/uncloud/issues"
class="text-zinc-900 hover:underline">GitHub issues</a>
or join the
<a href="https://github.com/psviderski/uncloud/discussions"
class="text-zinc-900 hover:underline">GitHub Discussions</a>.
</p>
</div>
</div>
</div>
@@ -541,115 +557,16 @@
<!-- Site footer -->
<footer>
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<!-- Top area: Blocks -->
<div class="grid sm:grid-cols-12 gap-8 py-8 md:py-12 border-t border-zinc-200">
<!-- 1st block -->
<div class="sm:col-span-6 md:col-span-3 lg:col-span-6 max-sm:order-1 flex flex-col">
<div class="mb-4">
<!-- Logo -->
<a class="flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20"
href="index.html">
<img src="./images/logo.png" width="24" height="24" alt="Logo">
</a>
<div class="flex justify-center py-8 md:py-12 border-t border-zinc-200">
<div class="text-sm text-zinc-500">
Made with ❤️ by <a class="underline hover:text-zinc-900" href="https://github.com/psviderski">Pasha Sviderski</a>
</div>
<div class="grow text-sm text-zinc-500">&copy; Cruip.com. All rights reserved.</div>
<!-- Social links -->
<ul class="flex space-x-4 mt-4 mb-1">
<li>
<a class="flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition"
href="#0" aria-label="Twitter">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path d="m7.063 3 3.495 4.475L14.601 3h2.454l-5.359 5.931L18 17h-4.938l-3.866-4.893L4.771 17H2.316l5.735-6.342L2 3h5.063Zm-.74 1.347H4.866l8.875 11.232h1.36L6.323 4.347Z"/>
</svg>
</a>
</li>
<li>
<a class="flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition"
href="#0" aria-label="Medium">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path d="M17 2H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Zm-1.708 3.791-.858.823a.251.251 0 0 0-.1.241V12.9a.251.251 0 0 0 .1.241l.838.823v.181h-4.215v-.181l.868-.843c.085-.085.085-.11.085-.241V7.993L9.6 14.124h-.329l-2.81-6.13V12.1a.567.567 0 0 0 .156.472l1.129 1.37v.181h-3.2v-.181l1.129-1.37a.547.547 0 0 0 .146-.472V7.351A.416.416 0 0 0 5.683 7l-1-1.209V5.61H7.8l2.4 5.283 2.122-5.283h2.971l-.001.181Z"/>
</svg>
</a>
</li>
<li>
<a class="flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition"
href="#0" aria-label="Telegram">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path d="M17.968 3.276a.338.338 0 0 0-.232-.253 1.192 1.192 0 0 0-.63.045S3.087 8.106 2.286 8.664c-.172.121-.23.19-.259.272-.138.4.293.573.293.573l3.613 1.177a.388.388 0 0 0 .183-.011c.822-.519 8.27-5.222 8.7-5.38.068-.02.118 0 .1.049-.172.6-6.606 6.319-6.64 6.354a.138.138 0 0 0-.05.118l-.337 3.528s-.142 1.1.956 0a30.66 30.66 0 0 1 1.9-1.738c1.242.858 2.58 1.806 3.156 2.3a1 1 0 0 0 .732.283.825.825 0 0 0 .7-.622S17.894 5.292 17.98 3.909c.008-.135.021-.217.021-.317a1.177 1.177 0 0 0-.032-.316Z"/>
</svg>
</a>
</li>
</ul>
</div>
<!-- 2nd block -->
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
<h6 class="text-sm text-zinc-800 font-medium mb-2">Company</h6>
<ul class="text-sm space-y-2">
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">About us</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Diversity & Inclusion</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Blog</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Careers</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Financial statements</a>
</li>
</ul>
</div>
<!-- 3rd block -->
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
<h6 class="text-sm text-zinc-800 font-medium mb-2">Resources</h6>
<ul class="text-sm space-y-2">
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Community</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Terms of service</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Collaboration features</a>
</li>
</ul>
</div>
<!-- 4th block -->
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
<h6 class="text-sm text-zinc-800 font-medium mb-2">Legals</h6>
<ul class="text-sm space-y-2">
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Refund policy</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Terms & Conditions</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Privacy policy</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Brand Kit</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
<!--<script src="./js/vendors/alpinejs.min.js" defer></script>-->
</body>
</html>
+89
View File
@@ -1557,6 +1557,10 @@ input[type="search"]::-webkit-search-results-decoration {
width: 16px;
}
.min-w-0{
min-width: 0px;
}
.max-w-2xl{
max-width: 42rem;
}
@@ -1617,6 +1621,10 @@ input[type="search"]::-webkit-search-results-decoration {
flex-shrink: 0;
}
.flex-grow{
flex-grow: 1;
}
.grow{
flex-grow: 1;
}
@@ -1786,6 +1794,10 @@ input[type="search"]::-webkit-search-results-decoration {
align-items: baseline;
}
.items-stretch{
align-items: stretch;
}
.justify-end{
justify-content: flex-end;
}
@@ -1822,6 +1834,10 @@ input[type="search"]::-webkit-search-results-decoration {
gap: 2rem;
}
.gap-1{
gap: 0.25rem;
}
.space-x-3 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
@@ -1884,6 +1900,10 @@ input[type="search"]::-webkit-search-results-decoration {
overflow-x: auto;
}
.whitespace-nowrap{
white-space: nowrap;
}
.rounded{
border-radius: 0.25rem;
}
@@ -1909,6 +1929,21 @@ input[type="search"]::-webkit-search-results-decoration {
border-top-right-radius: 0.5rem;
}
.rounded-l{
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.rounded-l-none{
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.rounded-r-none{
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.border{
border-width: 1px;
}
@@ -1933,6 +1968,14 @@ input[type="search"]::-webkit-search-results-decoration {
border-top-width: 1px;
}
.border-l-0{
border-left-width: 0px;
}
.border-r-0{
border-right-width: 0px;
}
.border-gray-200{
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -2202,6 +2245,11 @@ input[type="search"]::-webkit-search-results-decoration {
padding-bottom: 2rem;
}
.px-8{
padding-left: 2rem;
padding-right: 2rem;
}
.pb-12{
padding-bottom: 3rem;
}
@@ -2928,6 +2976,10 @@ input[type="search"]::-webkit-search-results-decoration {
color: rgb(24 24 27 / var(--tw-text-opacity));
}
.hover\:underline:hover{
text-decoration-line: underline;
}
.hover\:no-underline:hover{
text-decoration-line: none;
}
@@ -2960,6 +3012,11 @@ input[type="search"]::-webkit-search-results-decoration {
border-color: transparent;
}
.focus\:border-zinc-900:focus{
--tw-border-opacity: 1;
border-color: rgb(24 24 27 / var(--tw-border-opacity));
}
.focus\:bg-gray-200:focus{
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -3078,10 +3135,18 @@ input[type="search"]::-webkit-search-results-decoration {
grid-column: span 6 / span 6;
}
.sm\:col-span-12{
grid-column: span 12 / span 12;
}
.sm\:inline{
display: inline;
}
.sm\:flex{
display: flex;
}
.sm\:inline-flex{
display: inline-flex;
}
@@ -3106,6 +3171,10 @@ input[type="search"]::-webkit-search-results-decoration {
flex-direction: row;
}
.sm\:justify-start{
justify-content: flex-start;
}
.sm\:justify-center{
justify-content: center;
}
@@ -3114,6 +3183,10 @@ input[type="search"]::-webkit-search-results-decoration {
gap: 1rem;
}
.sm\:gap-0{
gap: 0px;
}
.sm\:space-x-4 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -3154,6 +3227,10 @@ input[type="search"]::-webkit-search-results-decoration {
grid-column: span 3 / span 3;
}
.md\:col-span-4{
grid-column: span 4 / span 4;
}
.md\:-mx-5{
margin-left: -1.25rem;
margin-right: -1.25rem;
@@ -3287,6 +3364,18 @@ input[type="search"]::-webkit-search-results-decoration {
grid-column: span 6 / span 6;
}
.lg\:col-span-3{
grid-column: span 3 / span 3;
}
.lg\:col-span-4{
grid-column: span 4 / span 4;
}
.lg\:col-span-5{
grid-column: span 5 / span 5;
}
.lg\:mb-16{
margin-bottom: 4rem;
}