HabitaMe Landing Page

Landing page oficial de HabitaMe, la plataforma que facilita la búsqueda segura de habitaciones en alquiler. Esta web presenta la propuesta de valor de la marca, guía al usuario a través de las secciones clave y abre el canal de contacto con el equipo.

---

📝 Secciones de la Landing

• Hero: Propuesta de valor principal con CTA directo.
• Qué es HabitaMe: Presentación de la plataforma y su misión.
• Cómo Funciona: Proceso en 3 pasos con animaciones al hacer scroll.
• Ventajas: Cards animadas con los diferenciadores clave.
• Contacto: Formulario de contacto integrado.
• Legal: Páginas de Privacidad, Términos y Política de Cookies (RGPD).

---

🚀 Stack Tecnológico

Capa	Tecnología
Framework	Angular 20.3+
Lenguaje	TypeScript 5.9+ (modo estricto)
Detección de cambios	Zoneless + provideZonelessChangeDetection()
Estado reactivo	Angular Signals (signal(), computed())
Renderizado	SSR + Client Hydration (withEventReplay())
Estilos	Vanilla CSS con variables globales en styles.css
Iconografía	SVGs inline (sin dependencias externas)
Testing	Karma + Jasmine (14/14 tests ✅)
Formateo	Prettier preconfigurado

---

📂 Estructura de Carpetas

HabitaMeWeb/
├── src/
│   ├── app/
│   │   ├── core/
│   │   │   └── services/       # Servicios globales (ToastService, CookieConsentService, ContactService)
│   │   ├── layout/
│   │   │   ├── navbar/         # Barra de navegación con scroll listener y menú móvil
│   │   │   └── footer/         # Footer con links y redes sociales (SVG inline)
│   │   ├── pages/
│   │   │   ├── home/           # Página principal
│   │   │   ├── contact/        # Página de contacto (/contacto)
│   │   │   ├── legal/          # Páginas legales (/privacidad, /terminos, /cookies)
│   │   │   └── not-found/      # Página 404
│   │   ├── sections/
│   │   │   ├── hero/           # Sección Hero con CTA principal
│   │   │   ├── about/          # Sección "Qué es HabitaMe"
│   │   │   ├── how-it-works/   # Sección "Cómo Funciona" (animada por scroll)
│   │   │   ├── advantages/     # Sección "Ventajas" (animada por scroll)
│   │   │   └── contact/        # Sección de contacto embebida en Home
│   │   └── shared/
│   │       └── components/
│   │           ├── toast/          # Sistema de notificaciones Toast
│   │           └── cookie-banner/  # Banner de consentimiento de cookies (RGPD)
│   ├── styles.css              # Variables de diseño globales y tokens CSS
│   └── index.html              # Punto de entrada HTML
├── habitame_style_guide.md     # Guía de estilo y arquitectura
└── angular.json

---

⚡ Comandos de Desarrollo

# Instalar dependencias
npm install

# Servidor de desarrollo (http://localhost:4200)
ng serve

# Ejecutar pruebas unitarias
npm run test

# Formatear código con Prettier
npm run format

# Build de producción (SSR)
npm run build

---

🛣️ Rutas Disponibles

Ruta	Componente	Descripción
/	HomePageComponent	Landing page principal
/contacto	ContactPageComponent	Formulario de contacto
/privacidad	PrivacyComponent	Política de privacidad
/terminos	TermsComponent	Términos y condiciones
/cookies	CookiesComponent	Política de cookies
/**	NotFoundComponent	Error 404

---

🏗️ Arquitectura Clave

• Standalone Components: Sin NgModules. Cada componente se importa únicamente donde se necesita.
• Signals: Estado local gestionado con signal() en los servicios de Toast y Cookie Consent.
• Zoneless: Eliminación de Zone.js para una ejecución más predecible y eficiente.
• SSR + Hydration: Renderizado en servidor habilitado con reanudación de eventos en cliente.

---

📌 Autor

Daniel Amores Jiménez — danielamoresdev