WIP: Landing refresh

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

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. */

mkdocs/overrides/header-2.html

@@ -101,31 +101,7 @@
         </svg>
       </button>
       <a href="https://github.com/dstackai/dstack" target="_blank" class="md-button md-button--primary github external-skip">GitHub</a>
-      <div class="cs-get-started">
-        <button type="button" class="md-button md-button--primary cs-get-started__main" aria-haspopup="true" aria-expanded="false">Get started</button>
-        <button type="button" class="md-button md-button--primary cs-get-started__toggle" aria-label="Get started options" aria-expanded="false" aria-haspopup="true">
-          {% include ".icons/material/menu-down.svg" %}
-        </button>
-        <div class="cs-get-started__menu" hidden>
-          <span class="cs-get-started__group">Products</span>
-          <a href="{{ 'docs/installation/' | url }}">
-            <span class="cs-get-started__item-title">dstack</span>
-            <span class="cs-get-started__item-desc">The open-source control plane that works across clouds, Kubernetes, and on-prem.</span>
-          </a>
-          <a href="https://sky.dstack.ai" target="_blank">
-            <span class="cs-get-started__item-title">dstack Sky</span>
-            <span class="cs-get-started__item-desc">Access GPU marketplace, or bring your own clouds. Hosted by us.</span>
-          </a>
-          <a href="https://calendly.com/dstackai/discovery-call" target="_blank">
-            <span class="cs-get-started__item-title">dstack Enterprise</span>
-            <span class="cs-get-started__item-desc">Self-hosted with SSO, air-gapped setup, dedicated support, and more.</span>
-          </a>
-          <span class="cs-get-started__group">Login</span>
-          <a href="https://sky.dstack.ai" target="_blank">
-            <span class="cs-get-started__item-title">dstack Sky</span>
-          </a>
-        </div>
-      </div>
+      <a href="https://sky.dstack.ai" target="_blank" class="md-button md-button--primary cs-try-sky external-skip">dstack Sky</a>
     </div>
     <script>
       (function () {
@@ -134,19 +110,6 @@
             document.body.classList.toggle('cs-nav-collapsed');
             // The content column reflows (792↔960), so re-align the right rail's TOC offset.
             window.dispatchEvent(new Event('resize'));
-            return;
-          }
-          var menu = document.querySelector('.cs-get-started__menu');
-          if (!menu) return;
-          var triggers = document.querySelectorAll('.cs-get-started__main, .cs-get-started__toggle');
-          // Both segments open the popup (no default navigation).
-          if (e.target.closest('.cs-get-started__main, .cs-get-started__toggle')) {
-            var hidden = menu.hasAttribute('hidden');
-            menu.toggleAttribute('hidden', !hidden);
-            triggers.forEach(function (t) { t.setAttribute('aria-expanded', String(hidden)); });
-          } else if (!e.target.closest('.cs-get-started__menu')) {
-            menu.setAttribute('hidden', '');
-            triggers.forEach(function (t) { t.setAttribute('aria-expanded', 'false'); });
           }
         });
       })();

website/.gitignore

@@ -1,2 +1,3 @@
 dist
 node_modules
+.vite

website/src/cloudscape-overrides.css

@@ -14,7 +14,6 @@
     not a breakage). Re-derive with:
       grep -roE '\-\-border-divider-section-width-[a-z0-9]+' node_modules/@cloudscape-design/components/container
       grep -roE '\-\-color-border-tabs-[a-z-]+-[a-z0-9]+'    node_modules/@cloudscape-design/components/tabs
-      grep -roE 'awsui_split-trigger-wrapper_[a-z0-9_]+'     node_modules/@cloudscape-design/components/button-dropdown
 */
 
 /* NB: Cloudscape defines these tokens on `body` inside `@layer awsui-base-theme`. Our
@@ -40,27 +39,6 @@ body {
   --color-text-expandable-section-hover-ojzwhd: var(--cs-text); /* FAQ: don't turn the question blue on hover */
 }
 
-/* 3) Split ButtonDropdown ("Get started"): close the gap before the arrow (a 2px
-      margin on the main segment) and drop the main action's trailing padding so the
-      label and arrow sit flush. ButtonDropdown has no `style` prop, so this targets its
-      scoped classes by stable prefix (hash-independent). */
-/* !important is required: Cloudscape boosts its own rules' specificity with a :not(#\9)
-   trick, which an attribute selector can't otherwise outrank. */
-[class*='awsui_split-trigger-wrapper'] > [class*='awsui_trigger-item']:not(:last-child) > [class*='awsui_trigger-button'] {
-  margin-inline-end: 0 !important; /* close the 2px gap before the arrow */
-  padding-inline-end: 16px !important; /* breathing room between the label and the divider */
-}
-/* Match the other top-nav buttons' height (see menuButtonStyle, 7px block). */
-[class*='awsui_split-trigger-wrapper'] [class*='awsui_trigger-button'] {
-  padding-block: 7px !important;
-}
-/* Subtle 0.5px divider between the two segments — a hair lighter/darker than the fill
-   so the split reads, without breaking the single-button look. (Hover stays per-segment,
-   which is Cloudscape's default and the better affordance here.) */
-[class*='awsui_split-trigger-wrapper'] > [class*='awsui_trigger-item']:not(:first-child) > [class*='awsui_trigger-button'] {
-  border-inline-start: 0.5px solid var(--cs-seg-divider) !important;
-}
-
 /* 4) Content tabs.
    a) Full-height vertical separators between tabs (default insets them 12px top/bottom).
       `inset-block: 0` spans only the container's padding box, leaving a 1px gap at top/bottom
@@ -80,87 +58,6 @@ body {
   border-inline: 0 !important;
 }
 
-/* 5) Dropdown menu popups (the "Get started" and "Resources" menus). Targeted by stable
-      class prefix so the rules apply wherever the popup renders.
-   a) Fixed width, flat (no drop-shadow), and a single uniform 0.5px border on all four
-      sides. By default Cloudscape draws top/bottom on the wrapper (1px) and left/right on
-      a ::after — so we set the wrapper border ourselves and drop the ::after layer. */
-[class*='awsui_dropdown-content-wrapper'] {
-  inline-size: 300px !important;
-  box-shadow: none !important;
-  border: 0.5px solid var(--cs-text) !important;
-  border-radius: 12px !important; /* rounded popup */
-  overflow: hidden; /* clip the menu items to the rounded corners */
-}
-[class*='awsui_dropdown-content-wrapper']::after {
-  border: 0 !important;
-}
-/* b) Group headers ("Products" / "Login"). lighter (300) and a touch smaller
-      (15px) in the full text color (no longer muted). */
-[class*='awsui_header_16mm3'] {
-  font-weight: 300 !important;
-  font-size: 15px !important;
-  color: var(--cs-text) !important;
-  padding-inline: 16px !important;
-}
-/* c) Items: bold label (matching the group weight), tighter horizontal padding aligned
-      with the header. The description below keeps its normal/muted styling. */
-[class*='awsui_menu-item'] {
-  padding-inline: 16px !important;
-}
-[class*='awsui_menu-item'] [class*='awsui_main-row'] {
-  font-weight: 600;
-  font-size: 15px; /* (Cloudscape's default popup label is 14px) */
-}
-/* The hovered item still picked up a border in dark mode (the token override didn't hold
-   there), so force it off on the highlighted item itself (the cue is the bg tint). */
-[class*='awsui_item-element'][class*='awsui_highlighted'] {
-  border-color: transparent !important;
-}
-/* Popup item descriptions: normal text color (not muted), 13px / weight 300. A hair of
-   separation (1.5px) from the label above so the two lines don't read as one block. */
-[class*='awsui_secondary-text'] {
-  color: var(--cs-text) !important;
-  margin-block-start: 1.5px;
-  font-size: 13px !important;
-  font-weight: 300 !important;
-}
-/* A little breathing room at the top and bottom of the popup (inside the border). Placed on
-   the first/last rows rather than on the list itself, so a hovered first/last item's
-   background fills that space instead of leaving a thin un-highlighted strip against the
-   border (the hover tint is painted on the item-element, which is what carries the padding). */
-[class*='awsui_options-list'] {
-  padding-block: 0 !important;
-  /* Cloudscape pulls the list 1px into the wrapper border (decrease-block-margin) to overlap
-     its default 1px divider. With our single hairline border that just lets a hovered
-     first/last item's fill paint over the border (most visible in dark mode) — so sit the
-     list flush inside the border instead. */
-  margin-block: 0 !important;
-}
-[class*='awsui_options-list'] > :first-child {
-  padding-block-start: 6px !important;
-}
-/* Last item — flat list (ButtonDropdown without groups, e.g. the Resources menu). */
-[class*='awsui_options-list'] > [class*='awsui_item-element']:last-child {
-  padding-block-end: 6px !important;
-}
-/* Last item — grouped list: the last item inside the last category (e.g. "Get started"). */
-[class*='awsui_options-list'] > [class*='awsui_category']:last-child [class*='awsui_item-element']:last-child {
-  padding-block-end: 6px !important;
-}
-/* d) Push the external-link icon to the right edge of the item. It's rendered inline at
-      the end of the label, so make the label row fill the width and flex the icon out.
-      Scoped under `awsui_main-row` (dropdown-item only) so it doesn't affect the external
-      icons in SideNavigation, which share the `awsui_external-icon` class. */
-[class*='awsui_main-row'] > :first-child {
-  display: flex !important;
-  flex: 1 1 auto !important;
-  align-items: center;
-}
-[class*='awsui_main-row'] [class*='awsui_external-icon'] {
-  margin-inline-start: auto !important;
-}
-
 /* 6) FAQ accordion (ExpandableSection): faint background tint on hover that covers the
       whole block (question + answer) uniformly. Tint the section root, then neutralize
       every inner background (header + content both carry their own white bg) so only the
@@ -199,8 +96,7 @@ body {
 
 /* Primary (filled) buttons use 500 weight per design — outline/normal buttons keep their weight.
    Applies app-wide (new landing + /old). */
-[class*='awsui_variant-primary'],
-.site-get-started [class*='awsui_trigger-button'] {
+[class*='awsui_variant-primary'] {
   font-weight: 500 !important;
 }
 

website/src/components/SiteFooter.tsx

@@ -66,7 +66,7 @@ const footerColumns: FooterColumn[] = [
     heading: 'Company',
     links: [
       { label: 'Blog', href: BLOG_URL },
-      { label: 'Talk to us', href: 'https://calendly.com/dstackai/discovery-call', external: true },
+      { label: 'Get a demo', href: 'https://calendly.com/dstackai/discovery-call', external: true },
       { label: 'Terms of service', href: TERMS_URL },
       { label: 'Privacy policy', href: PRIVACY_URL },
     ],