diff --git a/docs.json b/docs.json
index 9642e6400..f57956517 100644
--- a/docs.json
+++ b/docs.json
@@ -666,6 +666,7 @@
"fr/guides/accessibility",
"fr/guides/content-types",
"fr/guides/content-templates",
+ "fr/guides/custom-layouts",
"fr/guides/improving-docs",
"fr/guides/internationalization",
"fr/guides/linking",
@@ -1034,6 +1035,7 @@
"es/guides/accessibility",
"es/guides/content-types",
"es/guides/content-templates",
+ "es/guides/custom-layouts",
"es/guides/improving-docs",
"es/guides/internationalization",
"es/guides/linking",
@@ -1402,6 +1404,7 @@
"zh/guides/accessibility",
"zh/guides/content-types",
"zh/guides/content-templates",
+ "zh/guides/custom-layouts",
"zh/guides/improving-docs",
"zh/guides/internationalization",
"zh/guides/linking",
diff --git a/es/guides/custom-layouts.mdx b/es/guides/custom-layouts.mdx
new file mode 100644
index 000000000..d3f751c77
--- /dev/null
+++ b/es/guides/custom-layouts.mdx
@@ -0,0 +1,254 @@
+---
+title: "Crear diseños de página personalizados"
+sidebarTitle: "Diseños de página personalizados"
+description: "Usa modos de página y componentes para crear páginas de destino, páginas de marketing y otros diseños personalizados."
+keywords: ["landing page", "page mode", "custom mode", "frame mode", "hero section", "landing pages"]
+---
+
+Las páginas de Mintlify usan un diseño estándar de forma predeterminada, con una barra lateral, un área de contenido y una tabla de contenidos. Personaliza este diseño con los [modos de página](/es/organize/pages#page-mode) para crear páginas de destino, vitrinas de funcionalidades o cualquier página que necesite un diseño único.
+
+Esta guía cubre cómo usar los modos de página, Tailwind CSS y los componentes para crear diseños personalizados.
+
+
+ ## Elige un modo de página
+
+
+Configura el campo `mode` en el frontmatter de tu página para controlar qué elementos de la interfaz aparecen.
+
+| Modo | Barra lateral | Tabla de contenidos | Pie de página | Soporte de temas | Ideal para |
+|------|---------------|---------------------|---------------|-------------------|------------|
+| `default` | Sí | Sí | Sí | Todos los temas | Páginas de documentación estándar |
+| `wide` | Sí | No | Sí | Todos los temas | Páginas sin encabezados o que necesitan mayor ancho |
+| `custom` | No | No | No | Todos los temas | Páginas de destino, páginas de marketing o diseños de lienzo completo |
+| `frame` | Sí | No | Modificado | Aspen, Almond, Luma, Sequoia | Contenido personalizado que aún necesita navegación por barra lateral |
+| `center` | No | No | Sí | Mint, Linden, Willow, Maple | Registros de cambios, experiencias de lectura enfocada |
+
+Para páginas de destino, el modo `custom` te brinda el mayor control. Elimina todos los elementos de la interfaz excepto la barra de navegación superior, proporcionándote un lienzo en blanco para construir.
+
+```yaml Example page frontmatter
+---
+title: "Welcome"
+mode: "custom"
+---
+```
+
+
+ ## Crea una página de destino
+
+
+Una página de destino típica combina una sección hero, tarjetas de funcionalidades y llamadas a la acción.
+
+
+ ### Configura la página
+
+
+Crea un archivo MDX con el modo `custom`:
+
+```yaml Example landing page frontmatter
+---
+title: "Documentation"
+description: "Everything you need to build with our platform."
+mode: "custom"
+---
+```
+
+
+ ### Crea una sección hero
+
+
+Usa HTML con clases de Tailwind CSS para construir una sección hero centrada:
+
+```mdx Example hero section
+
+
+ Documentation
+
+
+ Everything you need to build, deploy, and scale your application.
+
+
+ ### Agrega tarjetas de navegación
+
+
+Usa los componentes [Card](/es/components/cards) y [Columns](/es/components/columns) para crear una cuadrícula de enlaces debajo de la sección hero:
+
+```mdx Example navigation cards
+
+
+
+ Get up and running in under five minutes.
+
+
+ Explore endpoints, parameters, and examples.
+
+
+ Step-by-step tutorials for common tasks.
+
+
+ Reusable UI components for your docs.
+
+
+
+```
+
+
+ ### Usa imágenes con soporte para modo oscuro
+
+
+Muestra diferentes imágenes para el modo claro y oscuro usando las clases de visibilidad de Tailwind:
+
+```mdx Example images with dark mode support
+
+
+```
+
+
+ ## Usa componentes de React para diseños interactivos
+
+
+Para elementos reutilizables o interactivos, define [componentes de React](/es/customize/react-components) directamente en tu archivo MDX:
+
+```mdx Example React component
+export const FeatureCard = ({ title, description, href }) => (
+
+
+ {title}
+
+
+ {description}
+
+
+);
+
+
+
+
+
+```
+
+
+ Evita usar la propiedad `style` en elementos HTML. Puede provocar un cambio en el diseño al cargar la página. Usa clases de Tailwind CSS o un [archivo CSS personalizado](/es/customize/custom-scripts) en su lugar.
+
+
+
+ ## Agrega CSS personalizado
+
+
+Para estilos que Tailwind no cubre, agrega un archivo CSS a tu repositorio. Mintlify aplica los archivos CSS a todo el sitio, haciendo que sus nombres de clase estén disponibles en todos los archivos MDX.
+
+
+ Los valores arbitrarios de Tailwind CSS (por ejemplo, `w-[350px]`) no son compatibles. Usa un archivo CSS personalizado para valores que las clases utilitarias de Tailwind no cubran.
+
+
+```css Example custom CSS file
+.landing-hero {
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+ padding: 4rem 2rem;
+}
+
+@media (prefers-color-scheme: dark) {
+ .landing-hero {
+ background: linear-gradient(135deg, #0c1222 0%, #1a1a2e 100%);
+ }
+}
+```
+
+Luego haz referencia a la clase en tu MDX:
+
+```mdx Example custom CSS usage
+
+
Welcome to the docs
+
+```
+
+Consulta [Scripts personalizados](/es/customize/custom-scripts) para más información sobre CSS personalizado y los selectores CSS disponibles.
+
+
+ ## Ejemplo completo
+
+
+Aquí tienes una página de destino completa que combina una sección hero con tarjetas de navegación:
+
+````mdx Example landing page
+---
+title: "Documentation"
+description: "Everything you need to build with our platform."
+mode: "custom"
+---
+
+export const HeroCard = ({ title, description, href, icon }) => (
+
+
+ {title}
+
+
+ {description}
+
+
+);
+
+
+
+ Documentation
+
+
+ Everything you need to build, deploy, and scale your application.
+
+
+
+
+
+
+
+````
+
+
+ ## Consejos
+
+
+- **Prueba en modo claro y oscuro.** Previsualiza tu diseño personalizado tanto en modo claro como oscuro para detectar estilos `dark:` que falten.
+- **Usa las clases `max-w-*`** para limitar el ancho del contenido y mantener el texto legible.
+- **Hazlo responsivo.** Usa los prefijos responsivos de Tailwind (`sm:`, `md:`, `lg:`) para que tu diseño funcione en todos los tamaños de pantalla.
+- **Combina modos.** Usa el modo `custom` para la página principal de tu documentación y el modo `default` para todo lo demás. El modo se configura por página, así que diferentes páginas pueden usar distintos diseños.
+- **Verifica los cambios de diseño.** Si los elementos saltan al cargar la página, reemplaza las propiedades `style` en línea con clases de Tailwind o CSS personalizado.
diff --git a/es/guides/index.mdx b/es/guides/index.mdx
index a115a6d80..affd4c3e7 100644
--- a/es/guides/index.mdx
+++ b/es/guides/index.mdx
@@ -40,6 +40,7 @@ Haz que tu documentación sea de primer nivel.
* [Accesibilidad](/es/guides/accessibility): Haz que tu documentación sea accesible para el mayor número posible de usuarios.
* [Tipos de contenido](/es/guides/content-types): Elige el formato adecuado para tutoriales, guías prácticas, referencias y explicaciones.
* [Plantillas de contenido](/es/guides/content-templates): Copia y modifica plantillas para cada tipo de contenido.
+* [Diseños de página personalizados](/es/guides/custom-layouts): Usa modos de página y componentes para crear páginas de destino y otros diseños personalizados.
* [Mejora tu documentación](/es/guides/improving-docs): Usa datos y comentarios para mejorar tu documentación de forma continua.
* [Internacionalización](/es/guides/internationalization): Configura documentación multilingüe para llegar a una audiencia global.
* [Enlaces](/es/guides/linking): Crea enlaces internos, haz referencia a endpoints de la API y mantén la integridad de los enlaces en toda tu documentación.
diff --git a/es/organize/pages.mdx b/es/organize/pages.mdx
index 4c0ee35e3..ab34f92ff 100644
--- a/es/organize/pages.mdx
+++ b/es/organize/pages.mdx
@@ -131,7 +131,7 @@ mode: "custom"
```
- La propiedad `style` en las páginas con modo personalizado puede provocar un cambio en el diseño al cargar la página. Para evitar este problema, utiliza preferentemente [Tailwind CSS o CSS personalizado](/es/customize/custom-scripts).
+ La propiedad `style` puede provocar un cambio en el diseño al cargar la página. Para evitar este problema, utiliza preferentemente [Tailwind CSS o CSS personalizado](/es/customize/custom-scripts).
@@ -139,7 +139,7 @@ mode: "custom"
### Frame
-El modo Frame ofrece un diseño similar al modo personalizado, pero mantiene la barra lateral de navegación. Usa este modo para incluir HTML y componentes personalizados mientras preservas la experiencia de navegación predeterminada. Solo los temas Aspen, Almond y Luma son compatibles con el modo Frame.
+El modo Frame ofrece un diseño similar al modo personalizado, pero mantiene la barra lateral de navegación. Usa este modo para incluir HTML y componentes personalizados mientras preservas la experiencia de navegación predeterminada. Los temas Aspen, Almond, Luma y Sequoia son compatibles con el modo Frame.
```yaml
---
@@ -152,7 +152,7 @@ mode: "frame"
### Center
-El modo Center elimina la barra lateral y la tabla de contenidos, centrando el contenido. Usa el modo Center para las páginas de cambios u otras páginas donde quieras centrar la atención en el contenido. Los temas Mint y Linden son compatibles con el modo Center.
+El modo Center elimina la barra lateral y la tabla de contenidos, centrando el contenido. Usa el modo Center para las páginas de cambios u otras páginas donde quieras centrar la atención en el contenido. Los temas Mint, Linden, Willow y Maple son compatibles con el modo Center.
```yaml
---
diff --git a/fr/guides/custom-layouts.mdx b/fr/guides/custom-layouts.mdx
new file mode 100644
index 000000000..fcd2bdff8
--- /dev/null
+++ b/fr/guides/custom-layouts.mdx
@@ -0,0 +1,254 @@
+---
+title: "Créer des mises en page personnalisées"
+sidebarTitle: "Mises en page personnalisées"
+description: "Utilisez les modes de page et les composants pour créer des pages de destination, des pages marketing et d'autres mises en page personnalisées."
+keywords: ["landing page", "page mode", "custom mode", "frame mode", "hero section", "landing pages"]
+---
+
+Les pages Mintlify utilisent une mise en page standard par défaut, avec une barre latérale, une zone de contenu et une table des matières. Personnalisez cette mise en page avec les [modes de page](/fr/organize/pages#page-mode) pour créer des pages de destination, des vitrines de fonctionnalités ou toute page nécessitant un design unique.
+
+Ce guide explique comment utiliser les modes de page, Tailwind CSS et les composants pour créer des mises en page personnalisées.
+
+
+ ## Choisir un mode de page
+
+
+Définissez le champ `mode` dans le frontmatter de votre page pour contrôler quels éléments d'interface apparaissent.
+
+| Mode | Barre latérale | Table des matières | Pied de page | Support des thèmes | Idéal pour |
+|------|----------------|--------------------|--------------|---------------------|------------|
+| `default` | Oui | Oui | Oui | Tous les thèmes | Pages de documentation standard |
+| `wide` | Oui | Non | Oui | Tous les thèmes | Pages sans titres ou nécessitant plus de largeur |
+| `custom` | Non | Non | Non | Tous les thèmes | Pages de destination, pages marketing ou mises en page plein écran |
+| `frame` | Oui | Non | Modifié | Aspen, Almond, Luma, Sequoia | Contenu personnalisé nécessitant une navigation par barre latérale |
+| `center` | Non | Non | Oui | Mint, Linden, Willow, Maple | Journaux de modifications, expériences de lecture concentrée |
+
+Pour les pages de destination, le mode `custom` offre le plus de contrôle. Il supprime tous les éléments d'interface à l'exception de la barre de navigation supérieure, vous offrant une toile vierge pour construire.
+
+```yaml Example page frontmatter
+---
+title: "Welcome"
+mode: "custom"
+---
+```
+
+
+ ## Créer une page de destination
+
+
+Une page de destination typique combine une section hero, des cartes de fonctionnalités et des appels à l'action.
+
+
+ ### Configurer la page
+
+
+Créez un fichier MDX avec le mode `custom` :
+
+```yaml Example landing page frontmatter
+---
+title: "Documentation"
+description: "Everything you need to build with our platform."
+mode: "custom"
+---
+```
+
+
+ ### Créer une section hero
+
+
+Utilisez du HTML avec des classes Tailwind CSS pour construire une section hero centrée :
+
+```mdx Example hero section
+
+
+ Documentation
+
+
+ Everything you need to build, deploy, and scale your application.
+
+
+ ### Ajouter des cartes de navigation
+
+
+Utilisez les composants [Card](/fr/components/cards) et [Columns](/fr/components/columns) pour créer une grille de liens sous la section hero :
+
+```mdx Example navigation cards
+
+
+
+ Get up and running in under five minutes.
+
+
+ Explore endpoints, parameters, and examples.
+
+
+ Step-by-step tutorials for common tasks.
+
+
+ Reusable UI components for your docs.
+
+
+
+```
+
+
+ ### Utiliser des images avec support du mode sombre
+
+
+Affichez différentes images pour le mode clair et sombre en utilisant les classes de visibilité de Tailwind :
+
+```mdx Example images with dark mode support
+
+
+```
+
+
+ ## Utiliser des composants React pour des mises en page interactives
+
+
+Pour des éléments réutilisables ou interactifs, définissez des [composants React](/fr/customize/react-components) directement dans votre fichier MDX :
+
+```mdx Example React component
+export const FeatureCard = ({ title, description, href }) => (
+
+
+ {title}
+
+
+ {description}
+
+
+);
+
+
+
+
+
+```
+
+
+ Évitez d'utiliser la propriété `style` sur les éléments HTML. Cela peut provoquer un décalage de la mise en page au chargement de la page. Utilisez des classes Tailwind CSS ou un [fichier CSS personnalisé](/fr/customize/custom-scripts) à la place.
+
+
+
+ ## Ajouter du CSS personnalisé
+
+
+Pour les styles que Tailwind ne couvre pas, ajoutez un fichier CSS à votre dépôt. Mintlify applique les fichiers CSS à l'ensemble du site, rendant leurs noms de classes disponibles dans tous les fichiers MDX.
+
+
+ Les valeurs arbitraires de Tailwind CSS (par exemple, `w-[350px]`) ne sont pas prises en charge. Utilisez un fichier CSS personnalisé pour les valeurs que les classes utilitaires de Tailwind ne couvrent pas.
+
+
+```css Example custom CSS file
+.landing-hero {
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+ padding: 4rem 2rem;
+}
+
+@media (prefers-color-scheme: dark) {
+ .landing-hero {
+ background: linear-gradient(135deg, #0c1222 0%, #1a1a2e 100%);
+ }
+}
+```
+
+Puis référencez la classe dans votre MDX :
+
+```mdx Example custom CSS usage
+
+
Welcome to the docs
+
+```
+
+Consultez [Scripts personnalisés](/fr/customize/custom-scripts) pour en savoir plus sur le CSS personnalisé et les sélecteurs CSS disponibles.
+
+
+ ## Exemple complet
+
+
+Voici une page de destination complète qui combine une section hero avec des cartes de navigation :
+
+````mdx Example landing page
+---
+title: "Documentation"
+description: "Everything you need to build with our platform."
+mode: "custom"
+---
+
+export const HeroCard = ({ title, description, href, icon }) => (
+
+
+ {title}
+
+
+ {description}
+
+
+);
+
+
+
+ Documentation
+
+
+ Everything you need to build, deploy, and scale your application.
+
+
+
+
+
+
+
+````
+
+
+ ## Conseils
+
+
+- **Testez en mode clair et sombre.** Prévisualisez votre mise en page personnalisée dans les deux modes pour détecter les styles `dark:` manquants.
+- **Utilisez les classes `max-w-*`** pour limiter la largeur du contenu et garder le texte lisible.
+- **Pensez au responsive.** Utilisez les préfixes responsive de Tailwind (`sm:`, `md:`, `lg:`) pour que votre mise en page fonctionne sur tous les écrans.
+- **Combinez les modes.** Utilisez le mode `custom` pour la page d'accueil de votre documentation et le mode `default` pour le reste. Le mode se définit par page, ce qui permet à différentes pages d'utiliser différentes mises en page.
+- **Vérifiez les décalages de mise en page.** Si des éléments sautent au chargement de la page, remplacez les propriétés `style` en ligne par des classes Tailwind ou du CSS personnalisé.
diff --git a/fr/guides/index.mdx b/fr/guides/index.mdx
index 8c88dfed5..a9c1aa6e7 100644
--- a/fr/guides/index.mdx
+++ b/fr/guides/index.mdx
@@ -40,6 +40,7 @@ Faites de votre documentation une référence.
* [Accessibilité](/fr/guides/accessibility): Rendez votre documentation accessible au plus grand nombre possible.
* [Types de contenu](/fr/guides/content-types): Choisissez le bon format pour les tutoriels, guides pratiques, références et explications.
* [Modèles de contenu](/fr/guides/content-templates): Dupliquez et adaptez des modèles pour chaque type de contenu.
+* [Mises en page personnalisées](/fr/guides/custom-layouts): Utilisez les modes de page et les composants pour créer des pages de destination et d'autres mises en page personnalisées.
* [Améliorer votre documentation](/fr/guides/improving-docs): Utilisez les données et les retours pour améliorer continuellement votre documentation.
* [Internationalisation](/fr/guides/internationalization): Configurez une documentation multilingue pour atteindre une audience mondiale.
* [Liens](/fr/guides/linking) : Créez des liens internes, référencez des points de terminaison d'API et garantissez l’intégrité des liens dans toute votre documentation.
diff --git a/fr/organize/pages.mdx b/fr/organize/pages.mdx
index 4a431776f..eb6015190 100644
--- a/fr/organize/pages.mdx
+++ b/fr/organize/pages.mdx
@@ -131,14 +131,14 @@ mode: "custom"
```
- La propriété `style` dans les pages en mode personnalisé peut provoquer un décalage de la mise en page lors du chargement de la page. Privilégiez [Tailwind CSS ou un CSS personnalisé](/fr/customize/custom-scripts) pour éviter ce problème.
+ La propriété `style` peut provoquer un décalage de la mise en page lors du chargement de la page. Privilégiez [Tailwind CSS ou un CSS personnalisé](/fr/customize/custom-scripts) pour éviter ce problème.
### Frame
-Le mode Frame propose une mise en page proche du mode personnalisé, tout en conservant la navigation de la barre latérale. Ce mode de page permet d’utiliser du HTML et des composants personnalisés tout en préservant l’expérience de navigation par défaut. Le mode Frame n’est disponible que pour les thèmes Aspen, Almond et Luma.
+Le mode Frame propose une mise en page proche du mode personnalisé, tout en conservant la navigation de la barre latérale. Ce mode de page permet d’utiliser du HTML et des composants personnalisés tout en préservant l’expérience de navigation par défaut. Les thèmes Aspen, Almond, Luma et Sequoia prennent en charge le mode Frame.
```yaml
---
@@ -151,7 +151,7 @@ mode: "frame"
### Centré
-Le mode Centré supprime la barre latérale et la table des matières, et centre le contenu. Utilisez le mode Centré pour le journal des modifications ou d’autres pages où vous souhaitez mettre l’accent sur le contenu. Les thèmes Mint et Linden prennent en charge le mode Centré.
+Le mode Centré supprime la barre latérale et la table des matières, et centre le contenu. Utilisez le mode Centré pour le journal des modifications ou d’autres pages où vous souhaitez mettre l’accent sur le contenu. Les thèmes Mint, Linden, Willow et Maple prennent en charge le mode Centré.
```yaml
---
diff --git a/zh/guides/custom-layouts.mdx b/zh/guides/custom-layouts.mdx
new file mode 100644
index 000000000..5c34e79f9
--- /dev/null
+++ b/zh/guides/custom-layouts.mdx
@@ -0,0 +1,254 @@
+---
+title: "构建自定义页面布局"
+sidebarTitle: "自定义页面布局"
+description: "使用页面模式和组件创建落地页、营销页面和其他自定义布局。"
+keywords: ["landing page", "page mode", "custom mode", "frame mode", "hero section", "landing pages"]
+---
+
+Mintlify 页面默认使用标准布局，包含侧边栏、内容区域和目录。你可以通过[页面模式](/zh/organize/pages#page-mode)自定义此布局，以创建落地页、功能展示页或任何需要独特设计的页面。
+
+本指南介绍如何使用页面模式、Tailwind CSS 和组件来构建自定义布局。
+
+
+ ## 选择页面模式
+
+
+在页面的 frontmatter 中设置 `mode` 字段，以控制显示哪些 UI 元素。
+
+| 模式 | 侧边栏 | 目录 | 页脚 | 主题支持 | 适用场景 |
+|------|--------|------|------|----------|----------|
+| `default` | 是 | 是 | 是 | 所有主题 | 标准文档页面 |
+| `wide` | 是 | 否 | 是 | 所有主题 | 无标题的页面或需要更大宽度的页面 |
+| `custom` | 否 | 否 | 否 | 所有主题 | 落地页、营销页面或全画布布局 |
+| `frame` | 是 | 否 | 修改后 | Aspen、Almond、Luma、Sequoia | 需要侧边栏导航的自定义内容 |
+| `center` | 否 | 否 | 是 | Mint、Linden、Willow、Maple | 更新日志、专注阅读体验 |
+
+对于落地页，`custom` 模式为你提供最大的控制权。它移除除顶部导航栏外的所有 UI 元素，为你提供一块空白画布进行构建。
+
+```yaml Example page frontmatter
+---
+title: "Welcome"
+mode: "custom"
+---
+```
+
+
+ ## 构建落地页
+
+
+一个典型的落地页由 hero 区域、功能卡片和行动号召组合而成。
+
+
+ ### 配置页面
+
+
+创建一个使用 `custom` 模式的 MDX 文件：
+
+```yaml Example landing page frontmatter
+---
+title: "Documentation"
+description: "Everything you need to build with our platform."
+mode: "custom"
+---
+```
+
+
+ ### 创建 hero 区域
+
+
+使用 HTML 和 Tailwind CSS 类来构建一个居中的 hero 区域：
+
+```mdx Example hero section
+
+
+ Documentation
+
+
+ Everything you need to build, deploy, and scale your application.
+
+
+ ### 添加导航卡片
+
+
+使用 [Card](/zh/components/cards) 和 [Columns](/zh/components/columns) 组件在 hero 区域下方创建链接网格：
+
+```mdx Example navigation cards
+
+
+
+ Get up and running in under five minutes.
+
+
+ Explore endpoints, parameters, and examples.
+
+
+ Step-by-step tutorials for common tasks.
+
+
+ Reusable UI components for your docs.
+
+
+
+```
+
+
+ ### 使用支持深色模式的图片
+
+
+使用 Tailwind 的可见性类为浅色和深色模式显示不同的图片：
+
+```mdx Example images with dark mode support
+
+
+```
+
+
+ ## 使用 React 组件构建交互式布局
+
+
+对于可复用或交互式元素，直接在 MDX 文件中定义 [React 组件](/zh/customize/react-components)：
+
+```mdx Example React component
+export const FeatureCard = ({ title, description, href }) => (
+
+
+ {title}
+
+
+ {description}
+
+
+);
+
+
+
+
+
+```
+
+
+ 避免在 HTML 元素上使用 `style` 属性。它可能导致页面加载时出现布局偏移。请改用 Tailwind CSS 类或[自定义 CSS 文件](/zh/customize/custom-scripts)。
+
+
+
+ ## 添加自定义 CSS
+
+
+对于 Tailwind 未涵盖的样式，可向你的仓库中添加 CSS 文件。Mintlify 会在全站范围内应用 CSS 文件，使其类名在所有 MDX 文件中可用。
+
+
+ 不支持 Tailwind CSS 的任意值（例如 `w-[350px]`）。对于 Tailwind 实用类未涵盖的值，请使用自定义 CSS 文件。
+
+
+```css Example custom CSS file
+.landing-hero {
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+ padding: 4rem 2rem;
+}
+
+@media (prefers-color-scheme: dark) {
+ .landing-hero {
+ background: linear-gradient(135deg, #0c1222 0%, #1a1a2e 100%);
+ }
+}
+```
+
+然后在 MDX 中引用该类：
+
+```mdx Example custom CSS usage
+
+
Welcome to the docs
+
+```
+
+参阅[自定义脚本](/zh/customize/custom-scripts)了解更多关于自定义 CSS 和可用 CSS 选择器的信息。
+
+
+ ## 完整示例
+
+
+以下是一个完整的落地页示例，将 hero 区域与导航卡片相结合：
+
+````mdx Example landing page
+---
+title: "Documentation"
+description: "Everything you need to build with our platform."
+mode: "custom"
+---
+
+export const HeroCard = ({ title, description, href, icon }) => (
+
+
+ {title}
+
+
+ {description}
+
+
+);
+
+
+
+ Documentation
+
+
+ Everything you need to build, deploy, and scale your application.
+
+
+
+
+
+
+
+````
+
+
+ ## 提示
+
+
+- **测试浅色和深色模式。** 在两种模式下预览你的自定义布局，以发现遗漏的 `dark:` 样式。
+- **使用 `max-w-*` 类**来限制内容宽度，保持文本可读性。
+- **确保响应式。** 使用 Tailwind 的响应式前缀（`sm:`、`md:`、`lg:`）使你的布局在所有屏幕尺寸上都能正常显示。
+- **组合使用模式。** 对文档首页使用 `custom` 模式，其他页面使用 `default` 模式。模式按页面设置，因此不同页面可以使用不同的布局。
+- **检查布局偏移。** 如果元素在页面加载时发生跳动，请将内联 `style` 属性替换为 Tailwind 类或自定义 CSS。
diff --git a/zh/guides/index.mdx b/zh/guides/index.mdx
index 4dde8ed0d..ca9232ab6 100644
--- a/zh/guides/index.mdx
+++ b/zh/guides/index.mdx
@@ -40,6 +40,7 @@ description: "了解如何通过最佳实践和工作流程创建高效文档。
* [Accessibility](/zh/guides/accessibility)：让尽可能多的用户都能无障碍使用你的文档。
* [Content types](/zh/guides/content-types)：为教程、操作指南、参考文档和解释性文档选择合适的形式。
* [Content templates](/zh/guides/content-templates)：为每种内容类型复用并修改相应的模板。
+* [Custom page layouts](/zh/guides/custom-layouts)：使用页面模式和组件构建落地页和其他自定义布局。
* [Improve your docs](/zh/guides/improving-docs)：利用数据和反馈持续改进你的文档。
* [Internationalization](/zh/guides/internationalization)：配置多语言文档，以触达全球用户。
* [Linking](/zh/guides/linking)：创建内部链接、引用 API 端点，并在整个文档中维护链接的完整性。
diff --git a/zh/organize/pages.mdx b/zh/organize/pages.mdx
index 3310675f3..2311075c4 100644
--- a/zh/organize/pages.mdx
+++ b/zh/organize/pages.mdx
@@ -131,14 +131,14 @@ mode: "custom"
```
- 自定义模式页面上的 `style` 属性可能会在页面加载时导致布局偏移。为避免此问题，建议优先使用 [Tailwind CSS or custom CSS](/zh/customize/custom-scripts)。
+ `style` 属性可能会在页面加载时导致布局偏移。为避免此问题，建议优先使用 [Tailwind CSS or custom CSS](/zh/customize/custom-scripts)。
### Frame
-Frame 模式提供与自定义模式类似的布局，但保留侧边栏导航。使用此模式，可以在保持默认导航体验的同时使用自定义 HTML 和组件。仅 Aspen、Almond 和 Luma 主题支持 Frame 模式。
+Frame 模式提供与自定义模式类似的布局，但保留侧边栏导航。使用此模式，可以在保持默认导航体验的同时使用自定义 HTML 和组件。Aspen、Almond、Luma 和 Sequoia 主题支持 Frame 模式。
```yaml
---
@@ -151,7 +151,7 @@ mode: "frame"
### 居中
-居中模式会移除侧边栏和目录，并将内容居中呈现。对于更新日志或其他希望将重点放在内容上的页面，请使用居中模式。Mint 和 Linden 主题均支持居中模式。
+居中模式会移除侧边栏和目录，并将内容居中呈现。对于更新日志或其他希望将重点放在内容上的页面，请使用居中模式。Mint、Linden、Willow 和 Maple 主题均支持居中模式。
```yaml
---