[Website] Updated product pages

contributing/DOCS.md

@@ -72,8 +72,8 @@ just website-dev            # Vite dev server on http://127.0.0.1:5173
 Docs/blog links on the landing resolve same-origin (`/docs`, `/blog`), which 404 in standalone
 dev. Point them at a live site while iterating: `just website-dev https://dstack.ai`.
 
-The Sky product page is served at `/products/sky/`. Google Analytics and the social/OG image
-reuse the same property and MkDocs-generated card as the rest of the site.
+Keep page metadata in the HTML entries and `website/src/App/index.tsx` in sync.
+When adding or moving product pages, update the [sitemap template](../mkdocs/overrides/sitemap.xml).
 
 ## Building the whole site
 
@@ -196,7 +196,7 @@ mkdocs/                         # docs_dir for the mkdocs site
 
 website/                        # React (Vite) landing page — served at "/"
 ├── index.html                  # Entry; title, OG/meta, Google Analytics
-├── src/                        # App, pages (Home, Sky), components, routes
+├── src/                        # App, pages (Home, Sky, Factory), components, routes
 └── public/static/              # Landing assets (namespaced to avoid clashing with /assets)
 
 scripts/docs/

mkdocs/assets/stylesheets/cloudscape-docs.css

@@ -292,9 +292,8 @@
     margin-top: 0;
 }
 
-/* The switcher rail — copied from the landing (website/src/styles.css, .gs-rail block): grouped
-   rows under solid bars, with a selected card. The docs and the landing are separate
-   builds, so changes to the rail styles must be mirrored here (and vice versa). */
+/* Shared rail visuals match website/src/styles.css. Docs have no current product,
+   so rows are highlighted only on hover or keyboard focus. */
 .gs-rail {
     display: flex;
     flex-direction: column;
@@ -329,10 +328,11 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
-.gs-opt.gs-opt--on {
+.gs-opt:hover,
+.gs-opt:focus-visible {
     border-radius: 8px;
     background: var(--cs-bg);
-    box-shadow: inset 0 0 0 1px var(--cs-text);
+    box-shadow: inset 0 0 0 0.5px var(--cs-text);
 }
 .gs-opt--feat {
     padding: 13px 14px;

mkdocs/docs/concepts/presets.md

@@ -272,7 +272,7 @@ Presets are pushed to and pulled from the registry hosted at [dstack Sky](https:
 
 Presets are private by default. Set **Presets** to **Public** in the project settings to let anyone browse and pull its presets without signing in, including users of a self-hosted `dstack` server. Only project admins and global admins can change this setting; enabling it does not let anyone join the project.
 
-A self-hosted registry is part of [dstack Factory](https://calendly.com/dstackai/discovery-call){ target="_blank" }.
+A self-hosted registry is part of [dstack Factory](/products/factory/){ target="_blank" }.
 
 ## Export a preset
 

mkdocs/index.md

@@ -1,8 +1,7 @@
 ---
 # The landing page ("/") is now the React app in website/. When the docs are served on
-# their own (e.g. `mkdocs serve`), this page redirects to /docs/. The title/description
-# below are only used to render the social card that the React landing reuses as its OG
-# image (assets/images/social/index.png).
+# their own (e.g. `mkdocs serve`), this page redirects to /docs/. The React landing has
+# its own metadata and social preview, separate from this redirect page.
 template: redirect.html
 title: The orchestration stack for AI infrastructure
 description: dstack is a unified control plane for GPU provisioning and orchestration that works with any GPU cloud, Kubernetes, or on-prem clusters.

mkdocs/overrides/header-2.html

@@ -83,7 +83,7 @@
       <div class="cs-products-menu__popup" role="menu">
         <div class="gs-rail">
           <div class="gs-rail__group">Self-hosted</div>
-          <a class="gs-opt gs-opt--feat gs-opt--on" role="menuitem" href="/" target="_blank" rel="noreferrer">
+          <a class="gs-opt gs-opt--feat" role="menuitem" href="/docs/installation">
             <span class="gs-opt__ic" aria-hidden="true">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>
             </span>
@@ -92,13 +92,13 @@
               <span class="gs-opt__desc">The open-source control plane for AI-native orchestration.</span>
             </span>
           </a>
-          <a class="gs-opt gs-opt--row external-skip" role="menuitem" href="https://calendly.com/dstackai/discovery-call" target="_blank" rel="noreferrer">
+          <a class="gs-opt gs-opt--row external-skip" role="menuitem" href="/products/factory" target="_blank" rel="noreferrer">
             <span class="gs-opt__ic" aria-hidden="true">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg>
             </span>
             <span class="gs-opt__body">
               <span class="gs-opt__name">dstack Factory</span>
-              <span class="gs-opt__desc">A complete software stack for AI labs, inference providers, and data centers.</span>
+              <span class="gs-opt__desc">A heterogeneous orchestration stack for AI token factories.</span>
             </span>
           </a>
           <div class="gs-rail__group">Hosted by us</div>
@@ -108,7 +108,7 @@
             </span>
             <span class="gs-opt__body">
               <span class="gs-opt__name">dstack Sky</span>
-              <span class="gs-opt__desc">An AI cloud with AI-native orchestration. Rent GPUs on demand or bring your own compute.</span>
+              <span class="gs-opt__desc">One account across GPU clouds. Better prices and unified billing.</span>
             </span>
           </a>
         </div>
@@ -153,20 +153,13 @@
         var productsTrigger = productsMenu && productsMenu.querySelector('.cs-products-menu__trigger');
         if (productsTrigger) {
           var closeTimer;
-          var productOptions = Array.from(productsMenu.querySelectorAll('.gs-opt'));
-          var highlightProduct = function (selected) {
-            productOptions.forEach(function (option) {
-              option.classList.toggle('gs-opt--on', option === selected);
-            });
-          };
           var setProductsOpen = function (open) {
             clearTimeout(closeTimer);
             productsMenu.classList.toggle('cs-products-menu--open', open);
             productsTrigger.setAttribute('aria-expanded', String(open));
           };
           productsMenu.addEventListener('mouseenter', function () { setProductsOpen(true); });
           productsMenu.addEventListener('mouseleave', function () {
-            highlightProduct(productOptions[0]);
             closeTimer = setTimeout(function () {
               if (!productsMenu.querySelector(':focus-visible')) setProductsOpen(false);
             }, 150);
@@ -176,9 +169,6 @@
             if (!productsMenu.contains(e.relatedTarget)) setProductsOpen(false);
           });
           productsTrigger.addEventListener('click', function () { setProductsOpen(true); });
-          productOptions.forEach(function (option) {
-            option.addEventListener('mouseenter', function () { highlightProduct(option); });
-          });
           document.addEventListener('click', function (e) {
             if (!productsMenu.contains(e.target)) setProductsOpen(false);
           });

mkdocs/overrides/sitemap.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+{%- for file in pages -%}
+    {% if not file.page.is_link and (file.page.abs_url or file.page.canonical_url) %}
+    <url>
+         <loc>{% if file.page.canonical_url %}{{ file.page.canonical_url|e }}{% else %}{{ file.page.abs_url|e }}{% endif %}</loc>
+         {% if file.page.update_date %}<lastmod>{{file.page.update_date}}</lastmod>{% endif %}
+    </url>
+    {%- endif -%}
+{% endfor %}
+{# Vite product pages are overlaid onto the MkDocs build. #}
+{% for path in ['products/sky/', 'products/factory/'] %}
+    <url>
+         <loc>{{ (config.site_url.rstrip('/') ~ '/' ~ path)|e }}</loc>
+    </url>
+{% endfor %}
+</urlset>

website/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>dstack — The orchestration stack for AI infrastructure</title>
+    <title>dstack — The orchestration stack for heterogeneous AI compute</title>
     <meta
       name="description"
       content="dstack is a unified control plane for GPU provisioning and orchestration that works with any GPU cloud, Kubernetes, or on-prem clusters."
@@ -21,27 +21,25 @@
       } catch (e) {}
     </script>
 
-    <!-- Open Graph / Twitter. The social image is the card MkDocs' social plugin generates
-         for the home page (assets/images/social/index.png); absolute URLs are required by
-         social scrapers. -->
+    <!-- Open Graph / Twitter. Absolute image URLs are required by social scrapers. -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://dstack.ai/" />
-    <meta property="og:title" content="dstack — The orchestration stack for AI infrastructure" />
+    <meta property="og:title" content="dstack — The orchestration stack for heterogeneous AI compute" />
     <meta
       property="og:description"
       content="dstack is a unified control plane for GPU provisioning and orchestration that works with any GPU cloud, Kubernetes, or on-prem clusters."
     />
-    <meta property="og:image" content="https://dstack.ai/assets/images/social/index.png" />
+    <meta property="og:image" content="https://dstack.ai/static-assets/static-assets/images/dstack-social.png" />
     <meta property="og:image:type" content="image/png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="dstack — The orchestration stack for AI infrastructure" />
+    <meta name="twitter:title" content="dstack — The orchestration stack for heterogeneous AI compute" />
     <meta
       name="twitter:description"
       content="dstack is a unified control plane for GPU provisioning and orchestration that works with any GPU cloud, Kubernetes, or on-prem clusters."
     />
-    <meta name="twitter:image" content="https://dstack.ai/assets/images/social/index.png" />
+    <meta name="twitter:image" content="https://dstack.ai/static-assets/static-assets/images/dstack-social.png" />
 
     <!-- Google Analytics (GA4) — same property as the docs/blog (mkdocs.yml). Skipped on
          localhost so local dev doesn't send hits to the production property. -->

website/products/factory/index.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>dstack Factory — A heterogeneous stack for AI token factories</title>
+    <meta
+      name="description"
+      content="dstack Factory is a heterogeneous orchestration stack for AI token factories. It streamlines capacity management, training, and inference deployment and optimization. It includes day-0 support for frontier open models, multi-tenancy, and billing automation."
+    />
+    <link rel="canonical" href="https://dstack.ai/products/factory/" />
+    <link rel="icon" type="image/svg+xml" href="/static/logo-notext.svg" />
+
+    <!-- Apply the saved light/dark choice before first paint, so theme-aware UI (e.g. the header
+         theme toggle) renders in its final state instead of animating from the default once
+         theme.ts's effect runs. Mirrors the dstack-theme key written by theme.ts. -->
+    <script>
+      try {
+        document.documentElement.dataset.theme =
+          localStorage.getItem('dstack-theme') === 'dark' ? 'dark' : 'light';
+      } catch (e) {}
+    </script>
+
+    <!-- Open Graph / Twitter. Absolute image URLs are required by social scrapers. -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://dstack.ai/products/factory/" />
+    <meta property="og:title" content="dstack Factory — A heterogeneous stack for AI token factories" />
+    <meta
+      property="og:description"
+      content="dstack Factory is a heterogeneous orchestration stack for AI token factories. It streamlines capacity management, training, and inference deployment and optimization. It includes day-0 support for frontier open models, multi-tenancy, and billing automation."
+    />
+    <meta property="og:image" content="https://dstack.ai/static-assets/static-assets/images/dstack-factory-social.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="dstack Factory — A heterogeneous stack for AI token factories" />
+    <meta
+      name="twitter:description"
+      content="dstack Factory is a heterogeneous orchestration stack for AI token factories. It streamlines capacity management, training, and inference deployment and optimization. It includes day-0 support for frontier open models, multi-tenancy, and billing automation."
+    />
+    <meta name="twitter:image" content="https://dstack.ai/static-assets/static-assets/images/dstack-factory-social.png" />
+
+    <!-- Google Analytics (GA4) — same property as the docs/blog (mkdocs.yml). Skipped on
+         localhost so local dev doesn't send hits to the production property. -->
+    <script>
+      if (location.hostname !== 'localhost' && location.hostname !== '127.0.0.1') {
+        var s = document.createElement('script');
+        s.async = true;
+        s.src = 'https://www.googletagmanager.com/gtag/js?id=G-JX21114P7B';
+        document.head.appendChild(s);
+        window.dataLayer = window.dataLayer || [];
+        window.gtag = function () { dataLayer.push(arguments); };
+        gtag('js', new Date());
+        gtag('config', 'G-JX21114P7B');
+      }
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

website/products/sky/index.html

@@ -3,10 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>dstack Sky — The AI cloud with AI-native orchestration</title>
+    <title>dstack Sky — One account across GPU clouds</title>
     <meta
       name="description"
-      content="A heterogeneous AI cloud with NVIDIA Blackwell, Hopper, and AMD Instinct GPUs. Access on-demand instances, spot capacity, and reserved clusters."
+      content="dstack Sky combines GPU capacity from multiple cloud partners with competitive pricing, unified billing, and AI-native orchestration."
     />
     <link rel="canonical" href="https://dstack.ai/products/sky/" />
     <link rel="icon" type="image/svg+xml" href="/static/logo-notext.svg" />
@@ -21,27 +21,25 @@
       } catch (e) {}
     </script>
 
-    <!-- Open Graph / Twitter. The social image is the card MkDocs' social plugin generates
-         for the home page (assets/images/social/index.png); absolute URLs are required by
-         social scrapers. -->
+    <!-- Open Graph / Twitter. Absolute image URLs are required by social scrapers. -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://dstack.ai/products/sky/" />
-    <meta property="og:title" content="dstack Sky — The AI cloud with AI-native orchestration" />
+    <meta property="og:title" content="dstack Sky — One account across GPU clouds" />
     <meta
       property="og:description"
-      content="A heterogeneous AI cloud with NVIDIA Blackwell, Hopper, and AMD Instinct GPUs. Access on-demand instances, spot capacity, and reserved clusters."
+      content="dstack Sky combines GPU capacity from multiple cloud partners with competitive pricing, unified billing, and AI-native orchestration."
     />
-    <meta property="og:image" content="https://dstack.ai/assets/images/social/index.png" />
+    <meta property="og:image" content="https://dstack.ai/static-assets/static-assets/images/dstack-sky-social.png" />
     <meta property="og:image:type" content="image/png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="dstack Sky — The AI cloud with AI-native orchestration" />
+    <meta name="twitter:title" content="dstack Sky — One account across GPU clouds" />
     <meta
       name="twitter:description"
-      content="A heterogeneous AI cloud with NVIDIA Blackwell, Hopper, and AMD Instinct GPUs. Access on-demand instances, spot capacity, and reserved clusters."
+      content="dstack Sky combines GPU capacity from multiple cloud partners with competitive pricing, unified billing, and AI-native orchestration."
     />
-    <meta name="twitter:image" content="https://dstack.ai/assets/images/social/index.png" />
+    <meta name="twitter:image" content="https://dstack.ai/static-assets/static-assets/images/dstack-sky-social.png" />
 
     <!-- Google Analytics (GA4) — same property as the docs/blog (mkdocs.yml). Skipped on
          localhost so local dev doesn't send hits to the production property. -->