# Documentación del Frontend

## **Tecnología Base**

- **Framework:** Angular 20
- **Lenguaje:** TypeScript
- **Estilos:** SCSS
- **Gestión de Estado:** RxJS (si aplica)
- **Rutas:** Angular Router

## **Estructura del Proyecto**

El proyecto estará organizado en módulos y componentes para maximizar la reutilización y la escalabilidad. La estructura inicial será:

```FileSystem
src/
  app/
    core/                # Servicios y lógica compartida
    shared/              # Componentes y directivas reutilizables
    features/            # Módulos específicos de características
      home/              # Página principal
      gallery/           # Página de galería
      profile/           # Página de perfil
    app-routing.module.ts
    app.module.ts
  assets/                # Recursos estáticos como imágenes
  environments/          # Configuraciones de entorno
```

## **Componentes Principales**

### **Menú de Navegación (`MenuComponent`)**

- **Descripción:** Componente para la navegación entre las diferentes secciones de la aplicación.
- **Propiedades:**
  - `links: Array<{ label: string, route: string }>`: Lista de enlaces.
- **Eventos:**
  - `onLinkClick`: Evento emitido al hacer clic en un enlace.

### **Galería (`GalleryComponent`)**

- **Descripción:** Componente para mostrar una colección de imágenes.
- **Propiedades:**
  - `images: Array<{ src: string, alt: string }>`: Lista de imágenes.
- **Eventos:**
  - `onImageClick`: Evento emitido al seleccionar una imagen.

### **Imagen (`ImageComponent`)**

- **Descripción:** Componente para mostrar una imagen individual.
- **Propiedades:**
  - `src: string`: URL de la imagen.
  - `alt: string`: Texto alternativo.
- **Eventos:**
  - `onClick`: Evento emitido al hacer clic en la imagen.

### **Pie de Página (`FooterComponent`)**

- **Descripción:** Componente para mostrar información adicional en la parte inferior de la página.
- **Propiedades:**
  - `links: Array<{ label: string, url: string }>`: Enlaces a recursos externos.

### **Página Principal (`HomePageComponent`)**

- **Descripción:** Página que combina el menú, la galería y el pie de página.
- **Componentes Hijos:**
  - `MenuComponent`
  - `GalleryComponent`
  - `FooterComponent`