diff --git a/packages/ui/src/assets/fonts/tx-02.woff2 b/packages/console/app/public/fonts/berkley-mono.woff2 similarity index 100% rename from packages/ui/src/assets/fonts/tx-02.woff2 rename to 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 (
-
- -
-

OpenCode will be available on desktop soon

+

Be the first to know when we release new products

Join the waitlist for early access.

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() {
-
+
-
+
Now available on desktop for macOS, Windows, and Linux. Learn more
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); }