Component Showcase

Página que muestra componentes que no se usan actualmente en el landing page principal pero están disponibles para uso futuro.

Acceso

URL: /components

Archivo: app/src/landing-page/ComponentShowcasePage.tsx

Propósito

Esta página sirve como:

• Catálogo visual de componentes disponibles
• Referencia para reutilización en otras páginas
• Documentación viva con ejemplos interactivos

Componentes Showcased

1. ExamplesCarousel

Archivo: components/ExamplesCarousel.tsx

Carrusel horizontal de categorías con imágenes. Ideal para mostrar diferentes áreas de cursos o proyectos.

Uso:

import ExamplesCarousel from "./components/ExamplesCarousel";
import { getExamples } from "./contentSections";

const examples = getExamples(t);
<ExamplesCarousel examples={examples} />;

2. ExampleHighlightedFeature (AIReady)

Archivo: ExampleHighlightedFeature.tsx

Sección destacada con imagen y texto. Perfecto para resaltar características principales, anuncios o promociones.

Uso:

import AIReady from "./ExampleHighlightedFeature";

<AIReady />;

Nota: Las traducciones están en landing.highlightedFeature.

3. SpecializationAreas

Archivo: components/SpecializationAreas.tsx

Chips/badges de áreas de especialización. Útil para mostrar habilidades, tecnologías o categorías de cursos.

Uso:

import SpecializationAreas from "./components/SpecializationAreas";

<SpecializationAreas />;

Nota: Las traducciones están en landing.specializations.

4. FeaturesGrid

Archivo: components/FeaturesGrid.tsx

Grid estilo bento para mostrar características. Soporta diferentes tamaños y configuraciones.

Uso:

import FeaturesGrid from "./components/FeaturesGrid";
import { getFeatures } from "./contentSections";

const features = getFeatures(t);
<FeaturesGrid features={features} />;

Propiedades de cada feature: | Propiedad | Tipo | Descripción | | ------------- | ------------------------------ | ------------------------------------ | | name | string | Título de la feature | | description | string | Descripción corta | | emoji | string | Emoji a mostrar | | icon | ReactNode | Icono alternativo al emoji | | href | string | Link al hacer click | | size | ‘small’ | ‘medium’ | ‘large’ | Tamaño en el grid | | direction | ‘col’ | ‘row’ | … | Dirección del contenido | | align | ‘center’ | ‘left’ | Alineación | | fullWidthIcon | boolean | Si el icono ocupa todo el ancho |

Traducciones Requeridas

Estos componentes usan claves de traducción en landing.ts:

// Para ExamplesCarousel
landing.contentSections.examples;
landing.contentSections.examplesSection.title;

// Para ExampleHighlightedFeature
landing.highlightedFeature.name;
landing.highlightedFeature.description;

// Para SpecializationAreas
landing.specializations.title;
landing.specializations.description;
landing.specializations.items;

// Para FeaturesGrid
landing.featuresGrid.title;
landing.featuresGrid.description;
landing.contentSections.features;

Content Sections

Las funciones getter en contentSections.tsx:

// Para FeaturesGrid
export function getFeatures(t: (key: string) => any): GridFeature[];

// Para ExamplesCarousel
export function getExamples(t: (key: string) => any);

Cómo Agregar a Otras Páginas

1. Importar el componente y su getter (si aplica)
2. Usar useTranslation() para obtener t
3. Llamar al getter con t
4. Renderizar el componente

Ejemplo:

import { useTranslation } from "../shared/i18n";
import FeaturesGrid from "./components/FeaturesGrid";
import { getFeatures } from "./contentSections";

export default function MyPage() {
  const { t } = useTranslation();
  const features = getFeatures(t);

  return <FeaturesGrid features={features} />;
}

Ver También

• Landing Components - Componentes activos del landing page
• UI Components - Componentes base de ShadCN