From dfa6e001c50f1b446731e7a6b5eeefe428892e74 Mon Sep 17 00:00:00 2001
From: Pavel Sviderski <me@psviderski.name>
Date: Fri, 9 May 2025 22:56:07 +1000
Subject: [PATCH] chore: cross over kubernetes on landing hero

---
 website/index.html | 43 +++++++++++++++++++++++++++++++++++--------
 website/style.css  | 20 ++++++++++++++++++++
 2 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/website/index.html b/website/index.html
index 2fc10e10..99d8846e 100644
--- a/website/index.html
+++ b/website/index.html
@@ -66,7 +66,9 @@
                         </li>
                         <li class="ml-1">
                             <a class="btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow"
-                               href="https://github.com/psviderski/uncloud/?tab=readme-ov-file#-quick-start">Get Started</a>
+                               href="https://github.com/psviderski/uncloud/?tab=readme-ov-file#-quick-start">
+                                Get Started
+                            </a>
                         </li>
                     </ul>
                 </nav>
@@ -86,18 +88,41 @@
                     <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">
-                                Stay simple<br>
+                                Stay simple
+                                <span class="relative inline-block">Kubernetes
+                                    <svg class="absolute inset-0 w-full h-full z-10 pointer-events-none"
+                                         viewBox="0 0 100 30"
+                                         preserveAspectRatio="none">
+                                        <path d="M3,4 C12,8 25,14 40,16 C55,18 72,22 97,26" stroke="#dc2626"
+                                              stroke-width="3.5"
+                                              fill="none" stroke-linecap="round"
+                                              style="vector-effect: non-scaling-stroke; opacity: 0.9;">
+                                            <animate attributeName="stroke-width" values="3.2;3.8;3.3;3.9;3.5"
+                                                     dur="0.2s"
+                                                     repeatCount="1"/>
+                                        </path>
+                                        <path d="M5,27 C18,22 28,16 45,14 C65,11 80,8 95,3" stroke="#dc2626"
+                                              stroke-width="3.5"
+                                              fill="none" stroke-linecap="round"
+                                              style="vector-effect: non-scaling-stroke; opacity: 0.9;">
+                                            <animate attributeName="stroke-width" values="3.7;3.3;3.9;3.2;3.6"
+                                                     dur="0.2s"
+                                                     repeatCount="1"/>
+                                        </path>
+                                    </svg>
+                                </span><br>
                                 Ship more
                             </h1>
                             <p class="text-lg text-zinc-500 mb-8">
-                                Uncloud is a lightweight Docker clustering tool for running and scaling web apps on your servers
-                                — from cloud VMs to bare metal.
-                                No Kubernetes required.
+                                Uncloud is a lightweight Docker clustering tool for running and scaling web apps on your
+                                servers — from cloud VMs to bare metal. 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>
                                     <a class="btn text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow"
-                                       href="https://github.com/psviderski/uncloud/?tab=readme-ov-file#-quick-start">Quick Start</a>
+                                       href="https://github.com/psviderski/uncloud/?tab=readme-ov-file#-quick-start">
+                                        Quick Start
+                                    </a>
                                 </div>
                                 <div>
                                     <a class="btn text-zinc-600 bg-white hover:text-zinc-900 w-full shadow flex items-center justify-center"
@@ -534,7 +559,8 @@
                             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.
+                            Deploy a highly available web app with automatic HTTPS across multiple regions and
+                            on-premises in just a couple minutes.
                         </p>
                     </div>
 
@@ -547,7 +573,8 @@
                             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>
+                        <wistia-player media-id="k47uwt9uau" aspect="1.7142857142857142"
+                                       class="w-full rounded-xl shadow-lg"></wistia-player>
                     </div>
                 </div>
             </div>
diff --git a/website/style.css b/website/style.css
index 32ea2fbb..7a31b641 100644
--- a/website/style.css
+++ b/website/style.css
@@ -1185,6 +1185,10 @@ input[type="search"]::-webkit-search-results-decoration {
   transition: y 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.1s ease-out;
 }
 
+.pointer-events-none{
+  pointer-events: none;
+}
+
 .visible{
   visibility: visible;
 }
@@ -1201,6 +1205,10 @@ input[type="search"]::-webkit-search-results-decoration {
   position: relative;
 }
 
+.inset-0{
+  inset: 0px;
+}
+
 .top-2{
   top: 0.5rem;
 }
@@ -1209,6 +1217,10 @@ input[type="search"]::-webkit-search-results-decoration {
   z-index: -10;
 }
 
+.z-10{
+  z-index: 10;
+}
+
 .z-30{
   z-index: 30;
 }
@@ -1290,6 +1302,10 @@ input[type="search"]::-webkit-search-results-decoration {
   display: block;
 }
 
+.inline-block{
+  display: inline-block;
+}
+
 .inline{
   display: inline;
 }
@@ -1338,6 +1354,10 @@ input[type="search"]::-webkit-search-results-decoration {
   height: 2rem;
 }
 
+.h-full{
+  height: 100%;
+}
+
 .min-h-screen{
   min-height: 100vh;
 }