[Docs] Minor update to the landing page

mkdocs/docs/index.md

@@ -19,8 +19,8 @@ It streamlines development, training, and inference, and is compatible with any
      dstackai/static-assets repo. The files are self-contained (embedded fonts + logos);
      the pair swaps with the docs theme via .arch-svg in
      mkdocs/assets/stylesheets/cloudscape-docs.css. -->
-<img class="arch-svg arch-svg--light" src="https://dstack.ai/static-assets/static-assets/images/dstack-architecture-diagram.svg" alt="dstack architecture: an orchestration layer between AI frameworks and models on top, and GPU clouds, Kubernetes, on-prem clusters, and hardware below.">
-<img class="arch-svg arch-svg--dark" src="https://dstack.ai/static-assets/static-assets/images/dstack-architecture-diagram-dark.svg" alt="dstack architecture: an orchestration layer between AI frameworks and models on top, and GPU clouds, Kubernetes, on-prem clusters, and hardware below.">
+<img class="arch-svg arch-svg--light" src="https://dstack.ai/static-assets/static-assets/images/dstack-architecture-diagram.svg" alt="dstack architecture: an orchestration layer between AI frameworks and models on top, and GPU clouds, Kubernetes, VMs, bare-metal, and hardware below.">
+<img class="arch-svg arch-svg--dark" src="https://dstack.ai/static-assets/static-assets/images/dstack-architecture-diagram-dark.svg" alt="dstack architecture: an orchestration layer between AI frameworks and models on top, and GPU clouds, Kubernetes, VMs, bare-metal, and hardware below.">
 
 ### Set up the server
 

website/src/components/ArchitectureDiagram.tsx

@@ -1,5 +1,4 @@
 import { asset } from '../asset';
-import { DashedBorder } from './DashedBorder';
 
 // Layered "vendor-agnostic" architecture diagram, rebuilt as HTML/CSS (replaces the previous
 // static SVG). Logos are recolored to the current text color via CSS masking (see .arch-logo in
@@ -21,8 +20,7 @@ const FRAMEWORKS: Logo[] = [
   { key: 'pytorch', label: 'PyTorch', src: logoSrc('pytorch.svg') },
   { key: 'vllm', label: 'vLLM', src: logoSrc('vllm.svg') },
   { key: 'sglang', label: 'SGLang', src: logoSrc('sglang.svg') },
-  { key: 'meta', label: 'Meta', src: logoSrc('meta.svg') },
-  { key: 'huggingface', label: 'Hugging Face', src: logoSrc('huggingface.svg') },
+  { key: 'smg', label: 'SMG', src: logoSrc('smg.svg') },
 ];
 
 const MODELS: Logo[] = [
@@ -82,17 +80,14 @@ function LogoRow({ logos }: { logos: Logo[] }) {
 export function ArchitectureDiagram() {
   return (
     <div className="arch-diagram-wrap">
-      <div className="arch-diagram" role="img" aria-label="dstack architecture: an orchestration layer between AI frameworks and models on top, and GPU clouds, Kubernetes, on-prem clusters, and hardware below.">
-        {/* Top: what plugs in on top of the orchestration layer. "Any model" spans the last two
-            columns so it lines up with Kubernetes + on-prem below. */}
-        <div className="arch-row">
+      <div className="arch-diagram" role="img" aria-label="dstack architecture: an orchestration layer between AI frameworks and models on top, and GPU clouds, Kubernetes, VMs, bare-metal, and hardware below.">
+        {/* Top: what plugs in on top of the orchestration layer. */}
+        <div className="arch-row arch-row--inputs">
           <div className="arch-cell">
-            <DashedBorder />
             <span className="arch-cell__label">Any framework</span>
             <LogoRow logos={FRAMEWORKS} />
           </div>
           <div className="arch-cell arch-cell--model">
-            <DashedBorder />
             <span className="arch-cell__label">Any model</span>
             <LogoRow logos={MODELS} />
           </div>
@@ -105,35 +100,30 @@ export function ArchitectureDiagram() {
             <LogoMark logo={DOCKER} />
           </div>
           <div className="arch-orchestration__cells">
-            {['Fleets', 'Dev environments', 'Tasks', 'Services', 'Volumes'].map(name => (
+            {['Projects', 'Fleets', 'Runs', 'Presets', 'Gateways'].map(name => (
               <div className="arch-subcell" key={name}>
-                <DashedBorder />
                 {name}
               </div>
             ))}
           </div>
         </div>
 
         {/* Bottom: where workloads run */}
-        <div className="arch-row">
+        <div className="arch-row arch-row--compute">
           <div className="arch-cell arch-cell--gpu">
-            <DashedBorder />
             <LogoRow logos={GPU_CLOUDS} />
-            <span className="arch-cell__label">Any cloud</span>
+            <span className="arch-cell__label">Clouds</span>
           </div>
-          <div className="arch-cell">
-            <DashedBorder />
-            <LogoRow logos={[KUBERNETES]} />
+          <div className="arch-cell arch-cell--platform">
+            <LogoMark logo={KUBERNETES} />
             <span className="arch-cell__label">Kubernetes</span>
           </div>
-          <div className="arch-cell arch-cell--center">
-            <DashedBorder />
-            <span className="arch-cell__label">On-prem clusters</span>
+          <div className="arch-cell arch-cell--platform">
+            <span className="arch-cell__label">VMs or bare-metal</span>
           </div>
         </div>
 
         <div className="arch-cell arch-cell--full arch-cell--hw">
-          <DashedBorder />
           <span className="arch-cell__label">Any hardware</span>
           <LogoRow logos={HARDWARE} />
         </div>

website/src/pages/Home/ExploreSection.tsx

@@ -1,8 +1,6 @@
 import { useState } from 'react';
-import Icon from '@cloudscape-design/components/icon';
 import { AlternatingDocBlock } from '../../components/AlternatingDocBlock';
 import { ArchitectureDiagram } from '../../components/ArchitectureDiagram';
-import { DashedBorder } from '../../components/DashedBorder';
 import { highlightTerms } from '../../components/highlightTerms';
 import { docsUrl } from '../../routes';
 import { CapList, CloudGlyph, KubernetesGlyph, ServerGlyph } from './GetStartedSection';
@@ -11,21 +9,22 @@ import { CapList, CloudGlyph, KubernetesGlyph, ServerGlyph } from './GetStartedS
 // three run types (dev environments, tasks, services) into one card; there's no single runs
 // concept page, so it links to the quickstart ("creating fleets and submitting runs").
 const keyConcepts = [
-  { name: 'Fleets', label: 'Cloud & on-prem', href: docsUrl('concepts/fleets'), description: 'Provision and manage clusters across clouds, Kubernetes, and on-prem.' },
-  { name: 'Runs', label: 'Dev, training, and inference', href: docsUrl('quickstart'), description: 'Run dev environments, training tasks, and inference services on your fleets.' },
-  { name: 'Gateways', label: 'Ingress', href: docsUrl('concepts/gateways'), description: 'Manage auto-scaling, rate limits, ingress, custom domains, etc.' },
-  { name: 'Presets', label: 'Inference optimization', href: docsUrl('concepts/presets'), description: 'Agent-based inference optimization toolkit, and a preset registry.' },
+  { name: 'Projects', href: docsUrl('concepts/projects'), description: 'Multi-tenancy and resource isolation' },
+  { name: 'Fleets', href: docsUrl('concepts/fleets'), description: 'Cluster provisioning and monitoring' },
+  { name: 'Runs', href: docsUrl('quickstart'), description: 'Training and inference primitives' },
+  { name: 'Presets', href: docsUrl('concepts/presets'), description: 'Agent-based inference optimization' },
+  { name: 'Gateways', href: docsUrl('concepts/gateways'), description: 'Ingress, auto-scaling, rate limits, etc' },
 ];
 
 // The main marketing content: a sequence of alternating documentation blocks.
 export function ExploreSection() {
   return (
     <section className="docs-section explore-section" id="explore">
       <AlternatingDocBlock visual={<ArchitectureDiagram />} title="Vendor-agnostic, open-source" imageFirst>
-        dstack unifies fleets, dev environments, tasks, services, volumes, and gateways in one control plane for AI workloads.
+        dstack gives cloud tenants and data-center operators a unified control plane for managing compute and orchestrating AI workloads.
         <br />
         <br />
-        It’s built for containerized AI workloads with a simple CLI, UI, and API. No Kubernetes or Slurm hassle required.
+        It improves operational efficiency and removes vendor lock-in. No more hassle of building your own compute stack on top of Kubernetes or Slurm.
       </AlternatingDocBlock>
 
       <KeyConceptsBlock />
@@ -68,7 +67,7 @@ function BringComputeBlock() {
               className={`gs-tab${pane === 'onprem' ? ' gs-tab--on' : ''}`}
               onClick={() => setPane('onprem')}
             >
-              On-prem clusters
+              On-prem
             </button>
             <button
               type="button"
@@ -110,15 +109,15 @@ function BringComputeBlock() {
       title="Bring your own compute"
       imageFirst
     >
-      dstack natively integrates with the major GPU clouds and automates provisioning of clusters.
-      Authorize dstack by configuring backends with your credentials, and dstack will provision fleets
-      and schedule workloads in your own cloud account.
-      <br />
-      <br />
       Have bare-metal servers or VMs with SSH access? Point dstack to those hosts and provide SSH
       credentials to create an SSH fleet. Have an existing Kubernetes cluster? Point dstack's
       Kubernetes backend to the kubeconfig. dstack will schedule workloads on them alongside cloud
       clusters.
+      <br />
+      <br />
+      dstack natively integrates with the major GPU clouds and automates provisioning of clusters.
+      Authorize dstack by configuring backends with your credentials, and dstack will provision fleets
+      and schedule workloads in your own cloud account.
     </AlternatingDocBlock>
   );
 }
@@ -127,29 +126,25 @@ function KeyConceptsBlock() {
   return (
     <AlternatingDocBlock
       visual={
-        <div className="concept-grid">
-          {keyConcepts.map(concept => (
-            // Whole card is the link so it reads as clickable, with an ActionCard-style
-            // arrow. Kept as a real <a> (open-in-new-tab / SEO) rather than Cloudscape's
-            // onClick-only ActionCard component.
-            <a className="media-card concept-card" href={concept.href} key={concept.name}>
-              <DashedBorder />
-              <span className="concept-card__label">{concept.label}</span>
-              <h3>
-                {concept.name}
-                <span className="concept-card__arrow" aria-hidden="true"><Icon name="angle-right" /></span>
-              </h3>
-              <p>{highlightTerms(concept.description)}</p>
-            </a>
-          ))}
+        <div className="concept-grid-wrap">
+          <div className="concept-grid">
+            {keyConcepts.map(concept => (
+              // Whole card is the link so it reads as clickable. Kept as a real <a>
+              // (open-in-new-tab / SEO) rather than Cloudscape's onClick-only ActionCard.
+              <a className="media-card concept-card" href={concept.href} key={concept.name}>
+                <h3>{concept.name}</h3>
+                <p>{highlightTerms(concept.description)}</p>
+              </a>
+            ))}
+          </div>
         </div>
       }
       title="AI-native orchestration"
     >
-      Managing AI infrastructure requires first-class primitives for accelerator provisioning, workload scheduling, and observability.
+      Managing AI infrastructure requires first-class primitives for compute management, training, inference, and observability that support heterogeneous AI compute.
       <br />
       <br />
-      dstack offers a streamlined interface for development, training, and inference built for heterogeneous AI compute.
+      dstack provides a streamlined interface to efficiently utilize cloud compute, run data-center operations, or run your own AI token factory at planet scale.
     </AlternatingDocBlock>
   );
 }

website/src/pages/Home/FaqSection.tsx

@@ -9,19 +9,19 @@ import { highlightTerms } from '../../components/highlightTerms';
 const faqItems = [
   {
     q: 'How does dstack differ from Slurm?',
-    a: 'Slurm is a battle-tested system with decades of production use in HPC environments. dstack, by contrast, is built for modern ML/AI workloads with cloud-native provisioning and a container-first architecture. While both support distributed training and batch jobs, dstack also natively supports development and production-grade inference.',
+    a: 'Slurm is a battle-tested workload manager with decades of production use in HPC environments. dstack is a unified orchestration layer built for containerized AI workloads and heterogeneous AI compute. While both support batch jobs and distributed training, dstack also provides first-class primitives for compute management, inference, and observability, including native cloud provisioning.',
   },
   {
     q: 'How does dstack compare to Kubernetes?',
-    a: "Kubernetes is a general-purpose container orchestrator. dstack also orchestrates containers, but it provides a lightweight, streamlined interface that's purpose-built for ML. You declare dev environments, tasks, services, and fleets with simple configuration, and dstack provisions GPUs, manages clusters via fleets with fine-grained controls, and optimizes cost and utilization, all while keeping a simple CLI and UI.",
+    a: 'Kubernetes is a general-purpose container orchestrator. dstack also orchestrates containers, but provides a lightweight, streamlined interface purpose-built for AI workloads, with first-class primitives for compute management, training, inference, and observability. It can use Kubernetes as a compute backend or work directly with cloud GPUs, pre-provisioned VMs, or bare-metal, helping cloud tenants and data-center operators improve utilization without building and maintaining their own AI orchestration stack.',
   },
   {
     q: 'Can I use dstack with Kubernetes?',
-    a: 'Yes. You can connect existing Kubernetes clusters using the Kubernetes backend and run dev environments, tasks, and services on them. Choose the Kubernetes backend if your GPUs already run on Kubernetes and your team depends on its ecosystem and tooling. Otherwise, VM-based backends (for cloud GPUs) or SSH fleets (for on-prem) are often a better fit.',
+    a: 'Yes. Connect existing Kubernetes clusters through the Kubernetes backend, and dstack will schedule AI workloads on them alongside cloud GPUs, VMs, and bare-metal. Use the Kubernetes backend when your GPUs already run on Kubernetes or your team relies on its ecosystem and tooling. Otherwise, cloud backends are often simpler for cloud GPUs, and SSH fleets for pre-provisioned VMs or bare-metal.',
   },
   {
     q: 'When should I use dstack?',
-    a: "dstack accelerates ML development with a simple, ML-native interface: spin up dev environments, run single-node or distributed tasks, and deploy services without infrastructure overhead. It radically reduces GPU costs through smart orchestration and fine-grained fleet controls, including efficient reuse, right-sizing, and support for spot, on-demand, and reserved capacity. It's 100% interoperable with your stack, working with any open-source frameworks and tools and your own Docker images and code, across GPU clouds, Kubernetes, and on-prem GPUs.",
+    a: 'Use dstack as a unified orchestration layer for cluster management, training, and inference, built for heterogeneous AI compute. It is designed for cloud tenants, data-center operators, and teams running their own AI token factory at planet scale.',
   },
 ];