diff --git a/src/lang/locales/en-US.json b/src/lang/locales/en-US.json
index 04f995b89..d43ffb55d 100644
--- a/src/lang/locales/en-US.json
+++ b/src/lang/locales/en-US.json
@@ -69,7 +69,11 @@
       "view-symbol": "View symbol",
       "view-sample-code": "View sample code"
     },
-    "view-more": "View more"
+    "view-more": "View more",
+    "hero": {
+      "title": "Developer Documentation",
+      "copy": "Browse the latest API reference."
+    }
   },
   "declarations": {
     "hide-other-declarations": "Hide other declarations",
diff --git a/src/lang/locales/ja-JP.json b/src/lang/locales/ja-JP.json
index 280bffe1d..b24244253 100644
--- a/src/lang/locales/ja-JP.json
+++ b/src/lang/locales/ja-JP.json
@@ -69,7 +69,11 @@
       "view-symbol": "記号を表示",
       "view-sample-code": "サンプルコードを表示"
     },
-    "view-more": "さらに表示"
+    "view-more": "さらに表示",
+    "hero": {
+      "title": "デベロッパドキュメント",
+      "copy": "最新のAPIリファレンスを閲覧できます。"
+    }
   },
   "declarations": {
     "hide-other-declarations": "ほかの宣言を非表示",
diff --git a/src/lang/locales/ko-KR.json b/src/lang/locales/ko-KR.json
index 68b1afe7c..7dad7ec32 100644
--- a/src/lang/locales/ko-KR.json
+++ b/src/lang/locales/ko-KR.json
@@ -69,7 +69,11 @@
       "view-symbol": "기호 보기",
       "view-sample-code": "샘플 코드 보기"
     },
-    "view-more": "더 보기"
+    "view-more": "더 보기",
+    "hero": {
+      "title": "개발자 문서",
+      "copy": "최신 API 레퍼런스를 확인하세요."
+    }
   },
   "declarations": {
     "hide-other-declarations": "다른 선언 가리기",
diff --git a/src/lang/locales/zh-CN.json b/src/lang/locales/zh-CN.json
index 5b779adf1..70236c2de 100644
--- a/src/lang/locales/zh-CN.json
+++ b/src/lang/locales/zh-CN.json
@@ -69,7 +69,11 @@
       "view-symbol": "查看符号",
       "view-sample-code": "查看示例代码"
     },
-    "view-more": "查看更多"
+    "view-more": "查看更多",
+    "hero": {
+      "title": "开发者文档",
+      "copy": "浏览最新的 API 参考。"
+    }
   },
   "declarations": {
     "hide-other-declarations": "隐藏其他声明",
diff --git a/src/mixins/indexDataFetcher.js b/src/mixins/indexDataFetcher.js
index 10d41881d..2940a80df 100644
--- a/src/mixins/indexDataFetcher.js
+++ b/src/mixins/indexDataFetcher.js
@@ -28,8 +28,10 @@ export default {
           interfaceLanguages,
           references = {},
         } = await fetchData(this.indexDataPath);
+        const topLevelNodes = Object.values(interfaceLanguages || {}).flat();
         const flatChildren = Object.freeze(flattenNavigationIndex(interfaceLanguages));
         IndexStore.setFlatChildren(flatChildren);
+        IndexStore.setTopLevelNodes(topLevelNodes);
         IndexStore.setTechnologyProps(extractTechnologyProps(interfaceLanguages));
         IndexStore.setReferences(references);
         IndexStore.setIncludedArchiveIdentifiers(includedArchiveIdentifiers);
diff --git a/src/routes.js b/src/routes.js
index 11343bed5..d916fa49e 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -16,6 +16,14 @@ import {
 import ServerError from 'theme/views/ServerError.vue';
 import NotFound from 'theme/views/NotFound.vue';
 
+export const homeRoute = {
+  path: '/',
+  name: 'home-index',
+  component: () => import(
+    /* webpackChunkName: "home-index" */ 'theme/views/Index.vue'
+  ),
+};
+
 export const fallbackRoutes = [
   {
     path: '*',
@@ -54,6 +62,7 @@ export const pagesRoutes = [
 ];
 
 export default [
+  homeRoute,
   ...pagesRoutes,
   ...fallbackRoutes,
 ];
diff --git a/src/setup-utils/SwiftDocCRenderRouter.js b/src/setup-utils/SwiftDocCRenderRouter.js
index 26a70308d..8558a9b89 100644
--- a/src/setup-utils/SwiftDocCRenderRouter.js
+++ b/src/setup-utils/SwiftDocCRenderRouter.js
@@ -14,12 +14,13 @@ import {
   restoreScrollOnReload,
   scrollBehavior,
 } from 'docc-render/utils/router-utils';
-import routes, { fallbackRoutes } from 'docc-render/routes';
+import { homeRoute, pagesRoutes, fallbackRoutes } from 'docc-render/routes';
 import { baseUrl } from 'docc-render/utils/theme-settings';
 import { addPrefixedRoutes } from 'docc-render/utils/route-utils';
 
 const defaultRoutes = [
-  ...addPrefixedRoutes(routes),
+  homeRoute,
+  ...addPrefixedRoutes(pagesRoutes),
   ...fallbackRoutes,
 ];
 
diff --git a/src/stores/IndexStore.js b/src/stores/IndexStore.js
index 39333424f..600f5b290 100644
--- a/src/stores/IndexStore.js
+++ b/src/stores/IndexStore.js
@@ -11,6 +11,7 @@
 export default {
   state: {
     flatChildren: null,
+    topLevelNodes: [],
     references: {},
     apiChanges: null,
     apiChangesVersion: null,
@@ -21,6 +22,7 @@ export default {
   },
   reset() {
     this.state.flatChildren = null;
+    this.state.topLevelNodes = [];
     this.state.references = {};
     this.state.apiChanges = null;
     this.state.apiChangesVersion = null;
@@ -35,6 +37,9 @@ export default {
   setReferences(references) {
     this.state.references = references;
   },
+  setTopLevelNodes(nodes) {
+    this.state.topLevelNodes = nodes || [];
+  },
   setApiChanges(diff) {
     this.state.apiChanges = diff;
   },
diff --git a/src/views/Index.vue b/src/views/Index.vue
new file mode 100644
index 000000000..85a12288b
--- /dev/null
+++ b/src/views/Index.vue
@@ -0,0 +1,315 @@
+<!--
+  This source file is part of the Swift.org open source project
+
+  Copyright (c) 2024 Apple Inc. and the Swift project authors
+  Licensed under Apache License v2.0 with Runtime Library Exception
+
+  See https://swift.org/LICENSE.txt for license information
+  See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+-->
+
+<template>
+  <DocumentationLayout
+    :enableNavigator="true"
+    :interfaceLanguage="interfaceLanguage"
+    :references="indexState.references"
+    :navigatorFixedWidth="296"
+    :quickNavNodes="topLevelIndexNodes"
+  >
+    <template #nav-title="{ className }">
+      <h2 :class="className">{{ $t('documentation.title') || 'Documentation' }}</h2>
+    </template>
+
+    <template #navigator="{
+      scrollLockID,
+      breakpoint,
+      sidenavVisibleOnMobile,
+      handleToggleSidenav,
+      enableQuickNavigation,
+      openQuickNavigationModal,
+    }">
+      <Navigator
+        key="base-navigator"
+        v-show="sidenavVisibleOnMobile || breakpoint === BreakpointName.large"
+        v-bind="topLevelNavigatorProps"
+        :parent-topic-identifiers="parentTopicIdentifiers"
+        :references="references"
+        :scrollLockID="scrollLockID"
+        :render-filter-on-top="breakpoint !== BreakpointName.large"
+        @close="handleToggleSidenav(breakpoint)"
+      >
+        <template v-if="enableQuickNavigation" #filter>
+          <QuickNavigationButton @click.native="openQuickNavigationModal" />
+        </template>
+        <template #above-navigator-head>
+          <slot name="above-navigator-head"/>
+        </template>
+        <template #navigator-head="{ className }">
+          <slot name="nav-title" :className="className" />
+        </template>
+      </Navigator>
+    </template>
+
+    <template #content>
+      <main class="index-page">
+        <section class="hero">
+          <h1 class="hero__title">{{ $t('documentation.hero.title') }}</h1>
+          <p class="hero__lede">
+            {{ $t('documentation.hero.copy') }}
+          </p>
+        </section>
+
+        <section v-if="documentation.length" class="index-section index-section--grid">
+          <header class="index-section__header">
+            <h2>Frameworks</h2>
+          </header>
+          <p v-if="isLoading">Loading index…</p>
+          <div v-else class="card-grid">
+            <RouterLink
+              v-for="doc in documentation"
+              :key="doc.path"
+              :to="doc.path"
+              class="feature-card"
+            >
+              <div class="feature-card__icon">
+                <TopicTypeIcon
+                  :type="doc.type || 'module'"
+                  :with-colors="false"
+                  :shouldCalculateOptimalWidth="false"
+                />
+              </div>
+              <div class="feature-card__body">
+                <h3 class="feature-card__title">{{ doc.title || doc.path }}</h3>
+              </div>
+              <span v-if="doc.beta" class="feature-card__tag">Beta</span>
+            </RouterLink>
+          </div>
+        </section>
+
+        <section v-if="tutorials.length" class="index-section index-section--grid">
+          <header class="index-section__header">
+            <h2>Tutorials</h2>
+          </header>
+          <p v-if="isLoading">Loading index…</p>
+          <div v-else class="card-grid">
+            <RouterLink
+              v-for="tutorial in tutorials"
+              :key="tutorial.path"
+              :to="tutorial.path"
+              class="feature-card"
+            >
+              <div class="feature-card__icon">
+                <TopicTypeIcon
+                  :type="tutorial.type || 'tutorial'"
+                  :with-colors="false"
+                  :shouldCalculateOptimalWidth="false"
+                />
+              </div>
+              <div class="feature-card__body">
+                <h3 class="feature-card__title">{{ tutorial.title || tutorial.path }}</h3>
+              </div>
+              <span v-if="tutorial.beta" class="feature-card__tag">Beta</span>
+            </RouterLink>
+          </div>
+        </section>
+      </main>
+    </template>
+  </DocumentationLayout>
+</template>
+
+<script>
+import Language from 'docc-render/constants/Language';
+import DocumentationLayout from 'theme/components/DocumentationLayout.vue';
+import Navigator from 'docc-render/components/Navigator.vue';
+import QuickNavigationButton from 'docc-render/components/Navigator/QuickNavigationButton.vue';
+import TopicTypeIcon from 'docc-render/components/TopicTypeIcon.vue';
+import DocumentationTopicStore from 'docc-render/stores/DocumentationTopicStore';
+import { BreakpointName } from 'docc-render/utils/breakpoints';
+import { INDEX_ROOT_KEY } from 'docc-render/constants/sidebar';
+import { hashCode } from 'docc-render/utils/navigatorData';
+import communicationBridgeUtils from 'docc-render/mixins/communicationBridgeUtils';
+import indexDataFetcher from 'theme/mixins/indexDataFetcher';
+import indexDataGetter from 'theme/mixins/indexDataGetter';
+
+export default {
+  name: 'Index',
+  components: {
+    DocumentationLayout,
+    Navigator,
+    QuickNavigationButton,
+    TopicTypeIcon,
+  },
+  mixins: [indexDataFetcher, indexDataGetter, communicationBridgeUtils],
+  data: () => ({
+    // fallback interface language used by indexDataGetter
+    interfaceLanguage: Language.swift.key.url,
+    store: DocumentationTopicStore,
+    BreakpointName,
+  }),
+  provide() {
+    return {
+      store: this.store,
+    };
+  },
+  computed: {
+    references() {
+      return this.indexState.references;
+    },
+    parentTopicIdentifiers() {
+      return [];
+    },
+    topLevelIndexNodes() {
+      const nodes = this.indexState.topLevelNodes || [];
+      const siblingsCount = nodes.length;
+      return nodes.map((node, index) => ({
+        uid: hashCode(node.path || node.title || `${index}`),
+        title: node.title,
+        path: node.path,
+        type: node.type,
+        parent: INDEX_ROOT_KEY,
+        childUIDs: [],
+        depth: 0,
+        index,
+        siblingsCount,
+      })).filter(item => item.path);
+    },
+    topLevelNavigatorProps() {
+      return {
+        ...this.navigatorProps,
+        flatChildren: this.topLevelIndexNodes,
+        // hide the technology header to avoid duplicate top entry
+        technologyProps: null,
+      };
+    },
+    documentation() {
+      const docs = this.topLevelIndexNodes
+        .filter(node => node.path?.startsWith('/documentation/'));
+      return docs;
+    },
+    tutorials() {
+      const tops = this.topLevelIndexNodes
+        .filter(node => node.path?.startsWith('/tutorials/'));
+      return tops;
+    },
+    isLoading() {
+      const { flatChildren, errorFetching } = this.indexState;
+      return !flatChildren && !errorFetching;
+    },
+  },
+  watch: {
+    indexNodes() {
+      this.$nextTick(this.newContentMounted);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.index-page {
+  width: 100%;
+  padding: 32px 28px 56px;
+  box-sizing: border-box;
+}
+
+.index-section {
+  margin-top: 32px;
+}
+
+.index-section__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.hero {
+  background: linear-gradient(315deg, var(--color-fill-secondary), var(--color-fill-tertiary));
+  color: var(--colors-header-text, var(--color-header-text));
+  padding: 40px 32px;
+  border-radius: 20px;
+  box-shadow: 0 20px 60px var(--color-card-shadow);
+  text-align: center;
+  width: 50%;
+  margin: 0 auto 32px;
+  display: flex;
+  flex-direction: column;
+}
+
+.hero__title {
+  margin: 0 0 8px;
+}
+
+.hero__lede {
+  margin: 0;
+  color: var(--colors-text, var(--color-text));
+}
+
+.index-section--grid {
+  margin-top: 32px;
+}
+
+.card-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+@media (max-width: 1024px) {
+  .hero {
+    width: unset;
+  }
+
+  .card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .card-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.feature-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  background: var(--color-card-background);
+  color: var(--color-card-content-text);
+  border-radius: 12px;
+  border: 1px solid var(--color-link-block-card-border);
+  text-decoration: none;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 30px var(--color-card-shadow);
+  border-color: var(--color-navigator-item-hover);
+}
+
+.feature-card__icon {
+  font-size: 1.5rem;
+}
+
+.feature-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.feature-card__title {
+  margin: 0;
+}
+
+.feature-card__tag {
+  align-self: flex-start;
+  font-size: 0.75rem;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--color-standard-yellow);
+  color: var(--color-figure-orange);
+}
+
+</style>
diff --git a/tests/unit/mixins/indexDataFetcher.spec.js b/tests/unit/mixins/indexDataFetcher.spec.js
index aefb01d7a..29329f3ac 100644
--- a/tests/unit/mixins/indexDataFetcher.spec.js
+++ b/tests/unit/mixins/indexDataFetcher.spec.js
@@ -258,6 +258,7 @@ describe('indexDataFetcher', () => {
       errorFetching: false,
       errorFetchingDiffs: false,
       technologyProps: {},
+      topLevelNodes: [],
     });
   });
 
diff --git a/tests/unit/stores/IndexStore.spec.js b/tests/unit/stores/IndexStore.spec.js
index 76f6990cd..a460012e0 100644
--- a/tests/unit/stores/IndexStore.spec.js
+++ b/tests/unit/stores/IndexStore.spec.js
@@ -57,6 +57,7 @@ describe('IndexStore', () => {
     errorFetching: false,
     errorFetchingDiffs: false,
     technologyProps: {},
+    topLevelNodes: [],
   };
 
   beforeEach(() => {
diff --git a/tests/unit/views/Index.spec.js b/tests/unit/views/Index.spec.js
new file mode 100644
index 000000000..a13e3a498
--- /dev/null
+++ b/tests/unit/views/Index.spec.js
@@ -0,0 +1,98 @@
+/**
+ * This source file is part of the Swift.org open source project
+ *
+ * Copyright (c) 2025 Apple Inc. and the Swift project authors
+ * Licensed under Apache License v2.0 with Runtime Library Exception
+ *
+ * See https://swift.org/LICENSE.txt for license information
+ * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+*/
+
+import { shallowMount } from '@vue/test-utils';
+import Index from '@/views/Index.vue';
+import Navigator from 'docc-render/components/Navigator.vue';
+
+const defaultMocks = {
+  $bridge: {
+    on: jest.fn(),
+    off: jest.fn(),
+    send: jest.fn(),
+  },
+  $route: {},
+};
+
+const messages = {
+  'documentation.hero.title': 'Developer Documentation',
+  'documentation.hero.copy': 'Browse the latest API reference.',
+};
+
+const DocumentationLayoutStub = {
+  name: 'DocumentationLayout',
+  props: ['enableNavigator', 'interfaceLanguage', 'references', 'navigatorFixedWidth', 'quickNavNodes'],
+  template: '<div><slot name="navigator"></slot><slot name="content"></slot></div>',
+};
+
+const baseDataFn = (
+  Index.options && Index.options.data
+    ? Index.options.data.bind(Index)
+    : () => ({})
+);
+const baseData = baseDataFn();
+
+const mountWith = (indexStateOverrides = {}, extraOptions = {}) => shallowMount(Index, {
+  mocks: {
+    ...defaultMocks,
+    $t: key => messages[key] || key,
+    $te: key => Boolean(messages[key]),
+  },
+  stubs: {
+    DocumentationLayout: DocumentationLayoutStub,
+    Navigator: false,
+    QuickNavigationButton: true,
+    TopicTypeIcon: true,
+    RouterLink: {
+      render(h) { return h('a', {}, this.$slots.default); },
+    },
+    ...(extraOptions.stubs || {}),
+  },
+  data: () => ({
+    ...baseData,
+    indexState: {
+      ...(baseData.indexState || {}),
+      flatChildren: [],
+      topLevelNodes: [],
+      references: {},
+      ...indexStateOverrides,
+    },
+  }),
+  computed: {
+    indexNodes: () => [],
+    ...(extraOptions.computed || {}),
+  },
+});
+
+describe('Index view', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders hero text from translation keys', () => {
+    const wrapper = mountWith();
+    expect(wrapper.find('.hero__title').text()).toBe('Developer Documentation');
+    expect(wrapper.find('.hero__lede').text()).toBe('Browse the latest API reference.');
+  });
+
+  it('passes top-level nodes to navigator only', () => {
+    const topLevelNodes = [{ path: '/documentation/foo', title: 'Foo', type: 'module' }];
+    const wrapper = mountWith({ topLevelNodes });
+    const nav = wrapper.findComponent(Navigator);
+    expect(nav.exists()).toBe(true);
+    expect(nav.props('flatChildren').length).toBe(1);
+    expect(nav.props('flatChildren')[0].path).toBe('/documentation/foo');
+  });
+
+  it('hides sections when lists are empty', () => {
+    const wrapper = mountWith();
+    expect(wrapper.find('section.index-section--grid').exists()).toBe(false);
+  });
+});