From fa54584128f7b92b9cf49bdbb4979d2d731dd023 Mon Sep 17 00:00:00 2001
From: Pavel Sviderski <me@psviderski.name>
Date: Fri, 10 Jan 2025 14:07:44 +1000
Subject: [PATCH] add logo and project name

---
 site/images/logo.svg |  7 +++++
 site/index.html      | 56 +++++++++++++++++++--------------------
 site/style.css       | 63 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 97 insertions(+), 29 deletions(-)
 create mode 100644 site/images/logo.svg

diff --git a/site/images/logo.svg b/site/images/logo.svg
new file mode 100644
index 00000000..f84b81ed
--- /dev/null
+++ b/site/images/logo.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
+    <g>
+        <rect x="0" y="0" width="80" height="80" rx="10" fill="#18181B"/>
+        <path d="M20 32 L20 48 L36 48 L36 32 M60 32 L45 32 L45 48 L60 48" stroke="white" stroke-width="6" fill="none"
+              stroke-linecap="square" stroke-linejoin="miter"/>
+    </g>
+</svg>
diff --git a/site/index.html b/site/index.html
index 53a83ec3..2ac076f5 100644
--- a/site/index.html
+++ b/site/index.html
@@ -15,37 +15,35 @@
 
     <!-- Site header -->
     <header class="absolute top-2 md:top-6 w-full z-30">
-        <div class="px-4 sm:px-6">
-            <div class="max-w-3xl mx-auto">
-                <div class="flex items-center justify-between h-14 border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg px-3">
-
-                    <!-- Site branding -->
-                    <div class="shrink-0 mr-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>
-
-                    <!-- Desktop navigation -->
-                    <nav class="flex grow">
-
-                        <!-- Desktop sign in links -->
-                        <ul class="flex grow justify-end flex-wrap items-center">
-                            <li>
-                                <a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition"
-                                   href="login.html">Log in</a>
-                            </li>
-                            <li class="ml-1">
-                                <a class="btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow"
-                                   href="request-demo.html">Request Demo</a>
-                            </li>
-                        </ul>
-
-                    </nav>
+        <div class="max-w-6xl mx-auto px-4 sm:px-6">
+            <div class="flex items-center justify-between h-14">
 
+                <!-- Site branding -->
+                <div class="shrink-0 mr-4">
+                    <a class="flex items-center" href="index.html">
+                        <img class="w-8 h-8 rounded shadow-sm shadow-zinc-950/20" src="./images/logo.svg"
+                             alt="Logo">
+                        <span class="ml-2 font-semibold text-lg text-zinc-900">uncloud</span>
+                    </a>
                 </div>
+
+                <!-- Desktop navigation -->
+                <nav class="flex grow">
+
+                    <!-- Desktop sign in links -->
+                    <ul class="flex grow justify-end flex-wrap items-center">
+                        <li>
+                            <a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition"
+                               href="login.html">Log in</a>
+                        </li>
+                        <li class="ml-1">
+                            <a class="btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow"
+                               href="request-demo.html">Request Demo</a>
+                        </li>
+                    </ul>
+
+                </nav>
+
             </div>
         </div>
     </header>
diff --git a/site/style.css b/site/style.css
index cd0a0621..7c678ec9 100644
--- a/site/style.css
+++ b/site/style.css
@@ -1343,6 +1343,14 @@ input[type="search"]::-webkit-search-results-decoration {
   margin-top: 2rem;
 }
 
+.mr-1{
+  margin-right: 0.25rem;
+}
+
+.mr-14{
+  margin-right: 3.5rem;
+}
+
 .box-content{
   box-sizing: content-box;
 }
@@ -1455,6 +1463,10 @@ input[type="search"]::-webkit-search-results-decoration {
   width: 100%;
 }
 
+.w-28{
+  width: 7rem;
+}
+
 .max-w-2xl{
   max-width: 42rem;
 }
@@ -1702,6 +1714,10 @@ input[type="search"]::-webkit-search-results-decoration {
   gap: 2rem;
 }
 
+.gap-3{
+  gap: 0.75rem;
+}
+
 .space-x-3 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
@@ -2028,6 +2044,11 @@ input[type="search"]::-webkit-search-results-decoration {
   padding-bottom: 2rem;
 }
 
+.py-1{
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .pb-12{
   padding-bottom: 3rem;
 }
@@ -2143,6 +2164,10 @@ input[type="search"]::-webkit-search-results-decoration {
   letter-spacing: -0.025em;
 }
 
+.tracking-normal{
+  letter-spacing: 0em;
+}
+
 .text-black{
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -2288,6 +2313,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-xl{
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-black\/5{
   --tw-shadow-color: rgb(0 0 0 / 0.05);
   --tw-shadow: var(--tw-shadow-colored);
@@ -2298,6 +2329,11 @@ input[type="search"]::-webkit-search-results-decoration {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.shadow-zinc-950{
+  --tw-shadow-color: #09090b;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .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);
 }
@@ -2670,6 +2706,11 @@ input[type="search"]::-webkit-search-results-decoration {
   background-color: rgb(39 39 42 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-zinc-600:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(82 82 91 / var(--tw-bg-opacity));
+}
+
 .hover\:from-zinc-900:hover{
   --tw-gradient-from: #18181b var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);
@@ -2690,10 +2731,23 @@ input[type="search"]::-webkit-search-results-decoration {
   color: rgb(24 24 27 / var(--tw-text-opacity));
 }
 
+.hover\:text-black:hover{
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.hover\:underline:hover{
+  text-decoration-line: underline;
+}
+
 .hover\:no-underline:hover{
   text-decoration-line: none;
 }
 
+.hover\:decoration-zinc-500:hover{
+  text-decoration-color: #71717a;
+}
+
 .hover\:opacity-100:hover{
   opacity: 1;
 }
@@ -2904,6 +2958,10 @@ input[type="search"]::-webkit-search-results-decoration {
     margin-bottom: 0px;
   }
 
+  .md\:block{
+    display: block;
+  }
+
   .md\:max-w-4xl{
     max-width: 56rem;
   }
@@ -3000,6 +3058,11 @@ input[type="search"]::-webkit-search-results-decoration {
     grid-column: span 6 / span 6;
   }
 
+  .lg\:mx-1{
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+  }
+
   .lg\:mb-16{
     margin-bottom: 4rem;
   }