From cbd613c505aa69b4d707d71433905b92e97fae44 Mon Sep 17 00:00:00 2001
From: JohnFreddyTutistar <johnfre.157@gmail.com>
Date: Mon, 3 Jun 2024 21:24:24 -0500
Subject: [PATCH] docs(es): translate
 docs/es/reference/defaul-theme-home-page.md

---
 docs/es/reference/default-theme-home-page.md | 168 +++++++++++++++++++
 1 file changed, 168 insertions(+)
 create mode 100644 docs/es/reference/default-theme-home-page.md

diff --git a/docs/es/reference/default-theme-home-page.md b/docs/es/reference/default-theme-home-page.md
new file mode 100644
index 00000000..459c0dca
--- /dev/null
+++ b/docs/es/reference/default-theme-home-page.md
@@ -0,0 +1,168 @@
+# Página Inicial {#home-page}
+
+El tema predeterminado de VitePress proporciona un diseño de página de inicio, que también puedes ver en uso [en la página de inicio de este sitio web](../). Puedes usarlo en cualquiera de sus páginas especificando `layout: home` en [frontmatter](./frontmatter-config).
+
+```yaml
+---
+layout: home
+---
+```
+
+Sin embargo, esta opción por sí sola no sirve de mucho. Puede agregar varias "secciones" predefinidas diferentes a la página de inicio configurando opciones adicionales como `hero` y `features`.
+
+## Sección Hero {#hero-section}
+
+La sección _Hero_ queda en la parte superior de la página de inicio. Asi es como se puede configurar la sección _Hero_.
+
+```yaml
+---
+layout: home
+
+hero:
+  name: VitePress
+  text: Generador de sitios web estaticos con Vite & Vue.
+  tagline: Lorem ipsum...
+  image:
+    src: /logo.png
+    alt: VitePress
+  actions:
+    - theme: brand
+      text: Iniciar
+      link: /guide/what-is-vitepress
+    - theme: alt
+      text: Ver en GitHub
+      link: https://github.com/vuejs/vitepress
+---
+```
+
+```ts
+interface Hero {
+  // El string que se muestra encima del `text`. Viene con el color de la marca
+  // y se espera que sea breve, como el nombre del producto.
+  name?: string
+
+  // El texto principal de la sección de hero.
+  // Esto se definirá como un tag `h1`.
+  text: string
+
+  // Eslogan que se muestra abajo del `text`.
+  tagline?: string
+
+  // La imagen se muestra junto al área de texto y eslogan.
+  image?: ThemeableImage
+
+  // Botones accionables para mostrar en la sección principal de la página de inicio.
+  actions?: HeroAction[]
+}
+
+type ThemeableImage =
+  | string
+  | { src: string; alt?: string }
+  | { light: string; dark: string; alt?: string }
+
+interface HeroAction {
+  // Tema de color de botón. Estándar: `brand`.
+  theme?: 'brand' | 'alt'
+
+  // Etqueta del botón.
+  text: string
+
+  // Destino del enlace del botón.
+  link: string
+
+  // Atributo target del link.
+  target?: string
+
+  // Atributo rel del link.
+  rel?: string
+}
+```
+
+### Personalizando el color del nombre {#customizing-the-name-color}
+
+VitePress usa el color de la marca (`--vp-c-brand-1`) para `name`. Sin embargo, puedes personalizar este color anulando la variable `--vp-home-hero-name-color`.
+
+```css
+:root {
+  --vp-home-hero-name-color: blue;
+}
+```
+
+También puedes personalizarlo aún más combinando  `--vp-home-hero-name-background` para dar al `name` un color degradado.
+
+```css
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff);
+}
+```
+
+## Sección de caracteristicas {#features-section}
+
+En la sección de funciones, puede enumerar cualquier cantidad de funciones que desee mostrar inmediatamente después de la sección. _Hero_. Para configurarlo seleccione la opción `features` para el frontmatter.
+
+Puede proporcionar un icono para cada función, que puede ser un emoji o cualquier tipo de imagen. Cuando el icono configurado es una imagen (svg, png, jpeg...), debes proporcionar al ícono el ancho y alto apropiados; También puedes proporcionar la descripción, su tamaño intrínseco y sus variantes para temas oscuros y claros cuando sea necesario.
+
+```yaml
+---
+layout: home
+
+features:
+  - icon: 🛠️
+    title: Sencillo y minimalista, siempre
+    details: Lorem ipsum...
+  - icon:
+      src: /cool-feature-icon.svg
+    title: Otra caracteristica interesante
+    details: Lorem ipsum...
+  - icon:
+      dark: /dark-feature-icon.svg
+      light: /light-feature-icon.svg
+    title: Otra caracteristica interesante
+    details: Lorem ipsum...
+---
+```
+
+```ts
+interface Feature {
+  // Muestra el icono en cada cuadro de funcón.
+  icon?: FeatureIcon
+
+  // Título de la caracteristica.
+  title: string
+
+  // Detalles de la caracteristicas.
+  details: string
+
+  // Enlace al hacer clic en el componente de funcionalidad
+  // El vínculo puede ser interno o externo.
+  //
+  // ex. `guide/reference/default-theme-home-page` ou `https://example.com`
+  link?: string
+
+  // Texto del enlace que se mostrará dentro del componente de funcionalidad.
+  //  Mejor usado con opción `link`.
+  //
+  // ex. `Saiba mais`, `Visitar página`, etc.
+  linkText?: string
+
+  // Atributo rel de enlace para la opción `link`.
+  //
+  // ex. `external`
+  rel?: string
+
+  // Atributo de destino del enlace para la opción `link`.
+  target?: string
+}
+
+type FeatureIcon =
+  | string
+  | { src: string; alt?: string; width?: string; height: string }
+  | {
+      light: string
+      dark: string
+      alt?: string
+      width?: string
+      height: string
+    }
+```