wip: lander updates

5 files changed, 34 insertions, 14 deletions

diff --git a/packages/console/app/public/fonts/berkley-mono.woff2 b/packages/console/app/public/fonts/berkley-mono.woff2
new file mode 100644
index 000000000..d18fc3912
--- /dev/null
+++ b/packages/console/app/public/fonts/berkley-mono.woff2
diff --git a/packages/console/app/src/component/email-signup.tsx b/packages/console/app/src/component/email-signup.tsx
index 4943921e7..65f81b5fc 100644
--- a/packages/console/app/src/component/email-signup.tsx
+++ b/packages/console/app/src/component/email-signup.tsx
@@ -25,11 +25,8 @@ export function EmailSignup() {
   const submission = useSubmission(emailSignup)
   return (
     <section data-component="email">
-      <div data-slot="dock">
-        <img src={dock} alt="" />
-      </div>
       <div data-slot="section-title">
-        <h3>OpenCode will be available on desktop soon</h3>
+        <h3>Be the first to know when we release new products</h3>
         <p>Join the waitlist for early access.</p>
       </div>
       <form data-slot="form" action={emailSignup} method="post">
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>
diff --git a/packages/console/app/src/style/token/font.css b/packages/console/app/src/style/token/font.css
index 67143e662..5a5f19da6 100644
--- a/packages/console/app/src/style/token/font.css
+++ b/packages/console/app/src/style/token/font.css
@@ -1,3 +1,11 @@
+@font-face {
+  font-family: "Berkeley Mono";
+  src: url("/fonts/berkley-mono.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
 body {
   --font-size-2xs: 0.6875rem;
   --font-size-xs: 0.75rem;
@@ -15,6 +23,7 @@ body {
   --font-size-9xl: 8rem;
 
   --font-mono:
-    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    "Berkeley Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
   --font-sans: var(--font-mono);
 }