diff --git a/packages/console/app/src/routes/index.css b/packages/console/app/src/routes/index.css index f04297104..6f658771f 100644 --- a/packages/console/app/src/routes/index.css +++ b/packages/console/app/src/routes/index.css @@ -475,66 +475,40 @@ body { } } - [data-component="desktop-app-available"] { - background: var(--color-surface-raised-base); - border: 1px solid var(--color-border-weak); + [data-component="desktop-app-banner"] { display: flex; - margin-bottom: 48px; + align-items: center; + gap: 12px; + margin-bottom: 32px; - [data-slot="desktop-icon"] { - border-right: 1px solid var(--color-border-weak); - width: 56px; - height: 72px; - background: var(--color-surface-raised-base-active); - display: flex; - align-items: center; - justify-content: center; - position: relative; - - img { - width: 40px; - height: 40px; - opacity: 100%; - } - - [data-slot="dot"] { - border-radius: 100px; - width: 6px; - height: 6px; - background: var(--color-background-strong); - position: absolute; - bottom: 5px; - left: 24px; - opacity: 0; - } + [data-slot="badge"] { + background: var(--color-background-strong); + color: var(--color-text-inverted); + font-weight: 500; + padding: 4px 8px; + line-height: 1; } - &[data-animating] [data-slot="desktop-icon"] img { - animation: iconBounce 1s ease-in-out forwards; + [data-slot="text"] { + color: var(--color-text-strong); + line-height: 1.4; } - &[data-animating] [data-slot="desktop-icon"] [data-slot="dot"] { - animation: dotFadeInOut 6s ease-out forwards; + a { + color: var(--color-text-weak); + text-decoration: underline; + text-underline-offset: 2px; + text-decoration-thickness: 1px; + margin-left: 4px; + white-space: nowrap; } + a:hover { + color: var(--color-text); + } - - [data-slot="desktop-copy"] { - display: flex; - align-items: center; - padding: 20px; - gap: 16px; - flex: 1; - cursor: default; - - span { - color: var(--color-text-strong); - line-height: 1; - } - - a { - color: var(--color-text-weak); - } + @media (max-width: 40rem) { + flex-wrap: wrap; } } @@ -1212,48 +1186,3 @@ body { } } } - -@keyframes iconBounce { - 0%, 100% { - transform: translateY(0); - } - 50% { - transform: translateY(-10px); - } -} - 25% { - transform: translateY(-10px); - } - 50% { - transform: translateY(0); - } - 75% { - transform: translateY(-10px); - } -} - -@keyframes dotAppear { - 0% { - opacity: 0; - transform: scale(0); - } - 100% { - opacity: 0.5; - transform: scale(1); - } -} - -@keyframes dotFadeInOut { - 0%, 16% { - opacity: 0; - } - 20% { - opacity: 0.4; - } - 90% { - opacity: 0.4; - } - 100% { - opacity: 0; - } -} diff --git a/packages/console/app/src/routes/index.tsx b/packages/console/app/src/routes/index.tsx index edccb3577..86a03f01b 100644 --- a/packages/console/app/src/routes/index.tsx +++ b/packages/console/app/src/routes/index.tsx @@ -3,7 +3,6 @@ import { Title, Meta, Link } from "@solidjs/meta" // import { HttpHeader } from "@solidjs/start" import video from "../asset/lander/opencode-min.mp4" import videoPoster from "../asset/lander/opencode-poster.png" -import desktopAppIcon from "../asset/lander/desktop-app-icon.png" import { IconCopy, IconCheck } from "../component/icon" import { A, createAsync } from "@solidjs/router" import { EmailSignup } from "~/component/email-signup" @@ -13,9 +12,8 @@ import { Header } from "~/component/header" import { Footer } from "~/component/footer" import { Legal } from "~/component/legal" import { github } from "~/lib/github" -import { createMemo, createSignal } from "solid-js" +import { createMemo } from "solid-js" import { config } from "~/config" -import avatarDavid from "~/asset/lander/avatar-david.png" function CopyStatus() { return ( @@ -30,18 +28,6 @@ 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 6s for dot fade in/out - setTimeout(() => { - setIsAnimating(false) - }, 6000) - } - } - const handleCopyClick = (event: Event) => { const button = event.currentTarget as HTMLButtonElement const text = button.textContent @@ -66,14 +52,10 @@ export default function Home() {
-
-
- -
-
-
- Now available on desktop for macOS, Windows, and Linux. Learn more -
+
+ New + Desktop app available in beta on macOS, Windows, and Linux. + Download now
@@ -87,96 +69,85 @@ export default function Home() { Free models included or connect any model from any provider, including Claude, GPT, Gemini and more.

- - Get started for free - - - -
- {/*
*/} - {/* */} - {/* */} - {/* */} - {/* curl*/} - {/* */} - {/* */} - {/* npm*/} - {/* */} - {/* */} - {/* bun*/} - {/* */} - {/* */} - {/* brew*/} - {/* */} - {/* */} - {/* paru*/} - {/* */} - {/* */} - {/* */} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/*
*/} - {/* */} - {/*
*/} +
+ + + + curl + + + npm + + + bun + + + brew + + + paru + + + +
+ + + + + + + + + + + + + + + +
+ +