2 files changed, 23 insertions, 9 deletions
diff --git a/packages/console/app/src/routes/index.css b/packages/console/app/src/routes/index.css
index dc296e4d4..0fcbe7527 100644
--- a/packages/console/app/src/routes/index.css
+++ b/packages/console/app/src/routes/index.css
@@ -509,11 +509,11 @@ body {
       }
     }
 
-    &:has([data-slot="desktop-copy"]:hover) [data-slot="desktop-icon"] img {
+    &[data-animating] [data-slot="desktop-icon"] img {
       animation: iconBounce 1s ease-in-out forwards;
     }
 
-    &:has([data-slot="desktop-copy"]:hover) [data-slot="desktop-icon"] [data-slot="dot"] {
+    &[data-animating] [data-slot="desktop-icon"] [data-slot="dot"] {
       opacity: 0.4;
       transition: opacity 0.3s ease-out 1s;
     }
@@ -525,6 +525,8 @@ body {
       align-items: center;
       padding: 20px;
       gap: 16px;
+      flex: 1;
+      cursor: default;
 
       span {
         color: var(--color-text-strong);
@@ -564,7 +566,7 @@ body {
     h1 {
       font-size: 38px;
       color: var(--color-text-strong);
-      font-weight: 500;
+      font-weight: 700;
       margin-bottom: 8px;
 
       @media (max-width: 60rem) {
@@ -667,7 +669,7 @@ body {
 
     h3 {
       font-size: 16px;
-      font-weight: 500;
+      font-weight: 700;
       color: var(--color-text-strong);
       margin-bottom: 12px;
     }
@@ -772,7 +774,7 @@ body {
     [data-slot="privacy-title"] {
       h3 {
         font-size: 16px;
-        font-weight: 500;
+        font-weight: 700;
         color: var(--color-text-strong);
         margin-bottom: 12px;
       }
@@ -798,7 +800,7 @@ body {
   [data-slot="zen-cta-copy"] {
     strong {
       color: var(--color-text-strong);
-      font-weight: 500;
+      font-weight: 700;
       margin-bottom: 16px;
       display: block;
     }
diff --git a/packages/console/app/src/routes/index.tsx b/packages/console/app/src/routes/index.tsx
index bcd538420..04a66f8b0 100644
--- a/packages/console/app/src/routes/index.tsx
+++ b/packages/console/app/src/routes/index.tsx
@@ -13,7 +13,7 @@ import { Header } from "~/component/header"
 import { Footer } from "~/component/footer"
 import { Legal } from "~/component/legal"
 import { github } from "~/lib/github"
-import { createMemo } from "solid-js"
+import { createMemo, createSignal } from "solid-js"
 import { config } from "~/config"
 import avatarDavid from "~/asset/lander/avatar-david.png"
 
@@ -30,6 +30,18 @@ export default function Home() {
   const githubData = createAsync(() => github())
   const release = createMemo(() => githubData()?.release)
 
+  const [isAnimating, setIsAnimating] = createSignal(false)
+
+  const handleDesktopCopyHover = () => {
+    if (!isAnimating()) {
+      setIsAnimating(true)
+      // Animation duration is 1s for icon + 1s delay + 0.3s for dot = ~2.3s total
+      setTimeout(() => {
+        setIsAnimating(false)
+      }, 2300)
+    }
+  }
+
   const handleCopyClick = (event: Event) => {
     const button = event.currentTarget as HTMLButtonElement
     const text = button.textContent
@@ -54,12 +66,12 @@ export default function Home() {
 
         <div data-component="content">
           <section data-component="hero">
-            <div data-component="desktop-app-available">
+            <div data-component="desktop-app-available" data-animating={isAnimating() ? "" : undefined}>
               <div data-slot="desktop-icon">
                 <img src={desktopAppIcon} alt="" />
                 <div data-slot="dot"></div>
               </div>
-              <div data-slot="desktop-copy">
+              <div data-slot="desktop-copy" onMouseEnter={handleDesktopCopyHover}>
                 <span>Now available on desktop for macOS, Windows, and Linux.</span> <a href="/download">Learn more</a>
               </div>
             </div>