From 7c6f383bdf46d362503ecf82961ba1594b530ad8 Mon Sep 17 00:00:00 2001 From: Andrey Cheptsov Date: Wed, 24 Jun 2026 21:59:37 +0200 Subject: [PATCH 1/4] Refresh landing nav, CTAs, and AI-native cards Navigation: - Remove Benchmarks (landing + docs) and Discord (docs) menu items - Add a "Products" hover menu (desktop) and Products section (mobile) - Make GitHub the primary button, dstack Sky a normal button (landing + docs) Hero / CTAs: - Hero: "Install open-source" + primary "Try dstack Sky" - Get started: "dstack" block with primary "Install open-source" + "Quickstart" - FAQ: add primary "Talk to us" before Discord - "Access marketplace GPUs" CTA renamed to "Try dstack Sky" - Drop the Backends / Kubernetes / SSH fleets buttons AI-native orchestration cards: - Reuse the landing's dotted outline (shared DashedBorder), thin stroke - Add a category label with a gradient dot, tighter title, muted copy Cleanup: - Remove dead Cloudscape ButtonDropdown / cs-get-started CSS - Ignore website/.vite Co-Authored-By: Claude Opus 4.8 (1M context) --- mkdocs.yml | 2 - mkdocs/assets/stylesheets/cloudscape-docs.css | 152 +++--------------- mkdocs/overrides/header-2.html | 39 +---- website/.gitignore | 1 + website/src/cloudscape-overrides.css | 106 +----------- website/src/components/SiteNavigation.tsx | 146 ++++++++++------- website/src/pages/Home/ExploreSection.tsx | 19 +-- website/src/pages/Home/FaqSection.tsx | 12 +- website/src/pages/Home/GetStartedSection.tsx | 1 + website/src/pages/Home/HomePage.tsx | 13 +- website/src/styles.css | 149 +++++++++++++---- 11 files changed, 258 insertions(+), 382 deletions(-) diff --git a/mkdocs.yml b/mkdocs.yml index 2fc74935a..62d7feabf 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -397,10 +397,8 @@ nav: - llms-full.txt: https://dstack.ai/llms-full.txt - skill.md: https://dstack.ai/skill.md - Case studies: blog/case-studies.md - - Benchmarks: blog/benchmarks.md - Blog: - blog/index.md - - Discord: https://discord.gg/u8SmfwPpMd" target="_blank # - Changelog: https://github.com/dstackai/dstack/releases" target="_blank # - GitHub: https://github.com/dstackai/dstack" target="_blank # - Sign in: https://sky.dstack.ai" target="_blank diff --git a/mkdocs/assets/stylesheets/cloudscape-docs.css b/mkdocs/assets/stylesheets/cloudscape-docs.css index cabeb93b9..b9c7bec2e 100644 --- a/mkdocs/assets/stylesheets/cloudscape-docs.css +++ b/mkdocs/assets/stylesheets/cloudscape-docs.css @@ -204,15 +204,15 @@ white-space: nowrap; } -/* GitHub → outlined "GitHub" with a trailing external-link glyph (no star count). */ -[data-md-color-primary=white] .md-header__buttons .md-button--primary.github, -[data-md-color-primary=white] .md-header__buttons .md-button--primary.github:hover { - background: transparent; - color: var(--cs-text); - border: 1px solid var(--cs-border); +/* GitHub → filled (primary) "GitHub" with a trailing external-link glyph (no star count). */ +[data-md-color-primary=white] .md-header__buttons .md-button--primary.github { + background: var(--cs-text); + color: var(--cs-bg); + border: 1px solid var(--cs-text); + font-weight: 500 !important; /* filled primary uses 500; the outlined Try-Sky button stays 700 */ } -/* Gap between GitHub and Get started → 20px to match /old (was 5px). */ +/* Gap between GitHub and dstack Sky → 20px to match /old (was 5px). */ .md-header__buttons .md-button.github { margin-right: 20px; } @@ -235,138 +235,36 @@ mask: var(--cs-ext-icon) center / contain no-repeat; } -/* Get started → /old's split button (dark primary main + caret) with a dropdown menu. */ -.md-header__buttons .cs-get-started { - position: relative; - display: inline-flex; - align-items: stretch; - margin-right: 5px; -} - -[data-md-color-primary=white] .md-header__buttons .cs-get-started .md-button--primary, -[data-md-color-primary=white] .md-header__buttons .cs-get-started .md-button--primary:hover { - background: var(--cs-text); - color: var(--cs-bg); - border: 1px solid var(--cs-text); - margin: 0; - /* Primary (filled) button uses 500 weight per design — the GitHub outline button stays 700. */ - font-weight: 500 !important; +/* Try dstack Sky → outlined (normal) pill with a trailing external-link glyph, sitting after + the now-filled GitHub button (the two swapped emphasis vs the old GitHub + Get started). */ +[data-md-color-primary=white] .md-header__buttons .md-button--primary.cs-try-sky { + background: transparent; + color: var(--cs-text); + border: 1px solid var(--cs-border); } - -/* Hover states (Cloudscape): the outlined GitHub button fills subtly (NOT black — landing.css - forces `background:black !important` on primary hover, so these need !important too); the dark - Get-started button lightens to the button-hover token. */ -[data-md-color-primary=white] .md-header__buttons .md-button--primary.github:hover { +[data-md-color-primary=white] .md-header__buttons .md-button--primary.cs-try-sky:hover { background: var(--cs-hover) !important; border-color: var(--cs-border) !important; color: var(--cs-text) !important; } -/* Hovering EITHER segment lights up BOTH (the whole pill reads as one button that opens the menu). */ -[data-md-color-primary=white] .md-header__buttons .cs-get-started:hover .md-button--primary { - background: var(--cs-btn-hover) !important; - border-color: var(--cs-btn-hover) !important; - color: var(--cs-bg) !important; -} - -.md-header__buttons .cs-get-started__main { - border-radius: 12px 0 0 12px !important; - border-right: 0 !important; - cursor: pointer; - /* No separator now, so pull the caret in close to the label (was 18px + the toggle's 6px). */ - padding-right: 6px !important; -} - -/* No segment separator — the caret reads as part of the same button. */ -.md-header__buttons .cs-get-started__toggle { - border-radius: 0 12px 12px 0 !important; - padding: 0 6px !important; - border-left: 0 !important; - cursor: pointer; -} - -.md-header__buttons .cs-get-started__toggle svg { - width: 18px; - height: 18px; - fill: currentColor; -} - -/* Matches the new landing / old Get-started popup (cloudscape-overrides.css): fixed 300px, flat - (no shadow), a single 0.5px cs-text border, 12px radius clipped to rounded corners. */ -.md-header__buttons .cs-get-started__menu { - position: absolute; - top: calc(100% + 6px); - right: 0; - min-width: 300px; - padding: 8px 0; - display: flex; - flex-direction: column; - background: var(--cs-bg); - border: 0.5px solid var(--cs-text); - border-radius: 12px; - box-shadow: none; - overflow: hidden; - z-index: 1000; - /* Match the landing dropdown's subpixel smoothing (Material defaults to antialiased = thinner). */ - -webkit-font-smoothing: auto; - -moz-osx-font-smoothing: auto; -} - -.md-header__buttons .cs-get-started__menu[hidden] { - display: none; -} - -/* Group headers ("Products" / "Login") → 15px / 300, ~5.5px vertical padding, like the landing. */ -.md-header__buttons .cs-get-started__group { - padding: 5.5px 16px; - font-size: 15px; - font-weight: 300; - color: var(--cs-text); -} - -/* Items → 4px/16px padding; a 15/600 heading-color title with an optional description below. */ -.md-header__buttons .cs-get-started__menu a { - display: flex; - flex-direction: column; - padding: 4px 16px; - font-size: 15px; - font-weight: 600; - color: var(--cs-text); - text-decoration: none; -} -.md-header__buttons .cs-get-started__item-title { - color: var(--cs-nav-heading); -} -/* The generic external-link "↗" is an a::after rendered as a block, so the column flex dropped it - onto its own line below the description. Suppress it and put the icon inline after the TITLE - text instead (external items only), like the landing. */ -.md-header__buttons .cs-get-started__menu a::after { - content: none !important; - display: none !important; -} -.md-header__buttons .cs-get-started__menu a[target="_blank"] .cs-get-started__item-title::after { +.md-header__buttons .md-button.cs-try-sky::after { content: ""; display: inline-block; - width: 13px; - height: 13px; - margin-left: 5px; - vertical-align: middle; + width: 16px; + height: 16px; + margin-left: 6px; + flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--cs-ext-icon) center / contain no-repeat; mask: var(--cs-ext-icon) center / contain no-repeat; } -/* Description: 13px / 300 / full text color (light weight reads muted) / 16px line-height, like - the landing's secondary text. */ -.md-header__buttons .cs-get-started__item-desc { - margin-top: 1.5px; - font-size: 13px; - font-weight: 300; - line-height: 16px; - color: var(--cs-text); - white-space: normal; -} -.md-header__buttons .cs-get-started__menu a:hover { - background: var(--cs-hover); +/* GitHub hover: the filled GitHub button lightens to the button-hover token. landing.css forces + `background:black !important` on primary hover, so these need !important to win. */ +[data-md-color-primary=white] .md-header__buttons .md-button--primary.github:hover { + background: var(--cs-btn-hover) !important; + border-color: var(--cs-btn-hover) !important; + color: var(--cs-bg) !important; } /* Burger (desktop sidebar toggle) — far left, like /old. */ diff --git a/mkdocs/overrides/header-2.html b/mkdocs/overrides/header-2.html index f6887a7a3..a38ef5d80 100644 --- a/mkdocs/overrides/header-2.html +++ b/mkdocs/overrides/header-2.html @@ -101,31 +101,7 @@ GitHub -
- - - -
+ dstack Sky