# Productos y Servicios - FourdPlan

## Componente
**`productsandservices.php`** - Grid de productos y servicios ofrecidos por FourdPlan

## Ubicación
- **Componente:** `frontend/components/productsandservices.php`
- **Configuración:** `backend/config.php` (array `$GLOBALS['SERVICES']`)
- **Imágenes:** `frontend/assets/images/services/`

## Configuración de Servicios

### Agregar un nuevo servicio

Editar `backend/config.php` y agregar entradas al array `$GLOBALS['SERVICES']`:

```php
$GLOBALS['SERVICES'] = array(
    array(
        'title' => 'Nombre del Servicio',
        'description' => 'Descripción breve del servicio',
        'image' => 'nombre-imagen.jpg',  // Opcional
        'icon' => 'material_icon_name',  // Opcional
        'alt' => 'Texto alternativo para la imagen'
    ),
);
```

### Campos disponibles

- **title** (requerido): Nombre del servicio
- **description** (requerido): Descripción corta
- **image** (opcional): Nombre del archivo en `frontend/assets/images/services/`
- **icon** (opcional): Nombre del ícono de Material Icons
- **alt** (requerido): Texto alternativo para accesibilidad

## Servicios Actuales

1. **Transformación tecnológica 2D a BIM** - Plan de implementación BIM
2. **BIM – Modelación y Coordinación** - Consistencia con la construcción
3. **VDC – Simulación 4D / Constructibilidad** - Visualización del proyecto en el tiempo
4. **Fourdplan – Control de proyecto obra gruesa** - Control de avance en tiempo real
5. **VReport360 – Captura 360°** - Registro fotográfico inmersivo del proyecto
6. **Gestión y planificación de proyectos de construcción** - Planificación integral y seguimiento
7. **Renderizados y animaciones 3D** - Visualización fotorrealista de proyectos
8. **Realidad Aumentada** - Visualización de modelos en entorno real
9. **Realidad Virtual** - Experiencia inmersiva del proyecto

## Diseño del Grid

### Layout responsivo
- **Móvil:** 1 columna
- **Tablet:** 2 columnas
- **Desktop:** 3 columnas

### Características de las tarjetas
- Borde de 2px en `brand-bright`
- Sombra que aumenta al hover
- Imagen de 48px de altura (placeholder gradient si no hay imagen)
- Ícono opcional en el footer de la tarjeta
- Transiciones suaves de 300ms

## Imágenes

### Formato recomendado
- **Tamaño:** 400x300px (4:3)
- **Formato:** JPG o PNG
- **Tamaño de archivo:** < 150KB
- **Ubicación:** `frontend/assets/images/services/`

### Placeholder
Si no se proporciona imagen, se muestra un gradient de `brand-bright` a `primary` con ícono de construcción.

## Uso en páginas

```php
<?php component('productsandservices'); ?>
```

## Integración actual

La sección está integrada en:
- [frontend/pages/servicios.php](frontend/pages/servicios.php) - Página de servicios

## Personalización

### Cambiar el título

Editar `frontend/components/productsandservices.php`:

```php
<h2 class="text-4xl md:text-5xl font-light uppercase text-foreground">
    Productos y servicios  <!-- Cambiar este texto -->
</h2>
```

### Ajustar el grid

Modificar las clases del grid en el componente:

```html
<!-- Ejemplo: 2 columnas máximo en desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
```

### Cambiar altura de imagen

Modificar la clase `h-48` en el div de la imagen:

```html
<div class="mb-4 h-64 rounded-lg overflow-hidden bg-background">
```

---

**Última actualización:** Mayo 2026