Browse Source

wip: lander updates

David Hill 2 months ago
parent
commit
f0274fd29f

+ 1 - 1
packages/console/app/src/routes/brand/index.css

@@ -266,7 +266,7 @@
 
     h1 {
       font-size: 1.5rem;
-      font-weight: 500;
+      font-weight: 700;
       color: var(--color-text-strong);
       margin-bottom: 1rem;
     }

+ 2 - 2
packages/console/app/src/routes/enterprise/index.css

@@ -289,7 +289,7 @@
   [data-component="enterprise-column-1"] {
     h1 {
       font-size: 1.5rem;
-      font-weight: 500;
+      font-weight: 700;
       color: var(--color-text-strong);
       margin-bottom: 1rem;
     }
@@ -441,7 +441,7 @@
 
       h3 {
         font-size: 16px;
-        font-weight: 500;
+        font-weight: 700;
         color: var(--color-text-strong);
         margin-bottom: 12px;
       }

+ 17 - 3
packages/console/app/src/routes/index.css

@@ -332,7 +332,7 @@ body {
     display: flex;
     flex-direction: column;
     max-width: 100%;
-    padding: calc(var(--vertical-padding) * 2) var(--padding);
+    padding: calc(var(--vertical-padding) * 1.5) var(--padding);
 
     @media (max-width: 30rem) {
       padding: var(--vertical-padding) var(--padding);
@@ -514,8 +514,7 @@ body {
     }
 
     &[data-animating] [data-slot="desktop-icon"] [data-slot="dot"] {
-      opacity: 0.4;
-      transition: opacity 0.3s ease-out 1s;
+      animation: dotFadeInOut 6s ease-out forwards;
     }
 
 
@@ -1243,3 +1242,18 @@ body {
     transform: scale(1);
   }
 }
+
+@keyframes dotFadeInOut {
+  0%, 16% {
+    opacity: 0;
+  }
+  20% {
+    opacity: 0.4;
+  }
+  90% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 0;
+  }
+}

+ 21 - 2
packages/console/app/src/routes/index.tsx

@@ -35,10 +35,10 @@ export default function Home() {
   const handleDesktopCopyHover = () => {
     if (!isAnimating()) {
       setIsAnimating(true)
-      // Animation duration is 1s for icon + 1s delay + 0.3s for dot = ~2.3s total
+      // Animation duration is 6s for dot fade in/out
       setTimeout(() => {
         setIsAnimating(false)
-      }, 2300)
+      }, 6000)
     }
   }
 
@@ -776,6 +776,17 @@ export default function Home() {
                     />
                   </svg>
                 </div>
+                <div>
+                  <svg
+                    width="24"
+                    height="24"
+                    viewBox="0 0 50 50"
+                    fill="currentColor"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path d="M49.04,24.001l-1.082-0.043h-0.001C36.134,23.492,26.508,13.866,26.042,2.043L25.999,0.96C25.978,0.424,25.537,0,25,0	s-0.978,0.424-0.999,0.96l-0.043,1.083C23.492,13.866,13.866,23.492,2.042,23.958L0.96,24.001C0.424,24.022,0,24.463,0,25	c0,0.537,0.424,0.978,0.961,0.999l1.082,0.042c11.823,0.467,21.449,10.093,21.915,21.916l0.043,1.083C24.022,49.576,24.463,50,25,50	s0.978-0.424,0.999-0.96l0.043-1.083c0.466-11.823,10.092-21.449,21.915-21.916l1.082-0.042C49.576,25.978,50,25.537,50,25	C50,24.463,49.576,24.022,49.04,24.001z"></path>
+                  </svg>
+                </div>
                 <div>
                   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path
@@ -806,6 +817,14 @@ export default function Home() {
                     />
                   </svg>
                 </div>
+                <div>
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M12.0962 3L10.0998 5.6577H1.59858L3.59417 3H12.0972H12.0962ZM22.3162 18.3432L20.3215 21H11.8497L13.8425 18.3432H22.3162ZM23 3L9.492 21H1L14.508 3H23Z"
+                      fill="black"
+                    />
+                  </svg>
+                </div>
               </div>
               <A href="/zen">
                 <span>Learn about Zen </span>

+ 3 - 3
packages/console/app/src/routes/zen/index.css

@@ -280,7 +280,7 @@ body {
     h1 {
       font-size: 28px;
       color: var(--color-text-strong);
-      font-weight: 500;
+      font-weight: 700;
       margin-bottom: 16px;
       display: block;
 
@@ -369,7 +369,7 @@ body {
 
     h3 {
       font-size: 16px;
-      font-weight: 500;
+      font-weight: 700;
       color: var(--color-text-strong);
       margin-bottom: 12px;
     }
@@ -442,7 +442,7 @@ body {
     [data-slot="privacy-title"] {
       h3 {
         font-size: 16px;
-        font-weight: 500;
+        font-weight: 700;
         color: var(--color-text);
         margin-bottom: 12px;
       }