🎯 Realestic - Real Estate Landing Page

📖 Descripción Breve

Realestic es una landing page moderna y responsiva diseñada para un negocio inmobiliario. Esta maqueta demuestra técnicas avanzadas de desarrollo web utilizando HTML, CSS y JavaScript puro, enfocándose en la creación de una experiencia de usuario fluida y atractiva para la búsqueda y promoción de propiedades inmobiliarias.

El proyecto resuelve la necesidad de una presencia web profesional para agencias inmobiliarias, ofreciendo una interfaz intuitiva que destaca propiedades, servicios y testimonios de manera visualmente impactante. Está dirigido a desarrolladores web que buscan ejemplos prácticos de integración de librerías frontend y diseño responsivo, así como a emprendedores del sector inmobiliario que requieren una base sólida para sus sitios web.

✨ Características Principales

• 🏠 Catálogo de Propiedades: Muestra propiedades con imágenes, detalles y badges de venta/alquiler
• 📱 Diseño Responsivo: Optimizado para desktop, tablet y móvil con breakpoints personalizados
• 🎨 Animaciones Suaves: Transiciones y revelaciones de scroll para una experiencia inmersiva
• 🖼️ Carrusel Interactivo: Testimonios con navegación automática y manual
• 📋 Secciones Informativas: Vision, características, misión y blogs integrados
• 🎯 UX Optimizada: Navegación intuitiva con menú móvil desplegable
• ⚡ Performance: Carga eficiente con assets optimizados y lazy loading implícito

🖼️ Demo/Vistas Previas

Vista previa de la landing page completa mostrando el hero, propiedades destacadas y secciones principales en diseño responsivo.

Para ver la demo en vivo, abre index.html en tu navegador web preferido o visita la demo en vivo.

🛠️ Tecnologías Utilizadas

Tecnología	Versión	Propósito
	5	Estructura semántica del sitio
	3	Estilos, layouts y responsividad
	ES6+	Interactividad y lógica del frontend
	11.x	Carrusel de testimonios
	Latest	Animaciones de revelación al hacer scroll
	3.30.0	Iconografía consistente

🚀 Instalación y Configuración

Este proyecto es completamente estático y no requiere instalación de dependencias complejas. Solo necesitas un navegador web moderno.

Requisitos Previos

• Navegador web moderno (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
• Conexión a internet para cargar CDN de librerías externas

Pasos de Instalación

1. Clona el repositorio:

   git clone https://github.com/Seb-RM/Js_Html_Css_LandingPage-Real-Estate-Site.git
   cd Js_Html_Css_LandingPage-Real-Estate-Site

2. Abre el proyecto:

   # En Windows
   start index.html
   
   # O simplemente abre index.html en tu navegador

Configuración Opcional

Si deseas modificar las librerías externas, actualiza las URLs en index.html:

<!-- Para usar versiones locales -->
<script src="path/to/local/swiper-bundle.min.js"></script>
<script src="path/to/local/scrollreveal.min.js"></script>

📚 Guía de Uso

Navegación Básica

• Header: Navega entre secciones usando el menú principal
• Hero: Punto de entrada con llamada a acción principal
• Propiedades: Explora el catálogo de inmuebles disponibles
• Testimonios: Lee experiencias de clientes (carrusel automático)

Interacciones Clave

• Menú Móvil: Toca el ícono de menú en dispositivos móviles
• Sección "How it Works": Haz clic en las pestañas para cambiar imágenes
• Carrusel de Testimonios: Usa flechas de navegación o puntos de paginación

Personalización

Para adaptar el contenido:

1. Edita textos en index.html
2. Reemplaza imágenes en Assets/images/
3. Modifica colores en Css/base.css (variables CSS)
4. Ajusta animaciones en Js/app.js

⚙️ Explicación Técnica

📁 index.html

Propósito: Archivo principal que define la estructura semántica y contenido de la landing page.

Conceptos Clave:

• HTML semántico con secciones bien definidas
• Integración de CDN para librerías externas
• Atributos data- para JavaScript
• Meta tags para SEO y responsividad

Fragmentos Destacados:

<!-- Estructura del header con navegación responsiva -->
<header class="site-header">
    <div class="container">
        <div class="grid grid-cols-3 md:grid-cols-2">
            <div class="site-header__logo">...</div>
            <nav class="navigation">...</nav>
            <div class="mobile-menu__trigger">...</div>
        </div>
    </div>
</header>

API/DOM:

• Utiliza clases CSS para manipulación vía JavaScript
• Atributos data-tab para control de pestañas
• Estructura accesible con roles implícitos

📁 Css/base.css

Propósito: Define el sistema de diseño base con variables CSS, utilidades y estilos globales.

Conceptos Clave:

• CSS Custom Properties (variables) para tema consistente
• Sistema de grid CSS nativo
• Utilidades responsivas con media queries
• Animaciones y transiciones optimizadas

Fragmentos Destacados:

:root {
    --color-primary: #3675ff;
    --color-primary__light: #edf3ff;
    /* Variables de color para tema */
}

.grid {
    display: grid;
    grid-auto-flow: dense;
}

@media (max-width: 820px) {
    .md\:hidden { display: none; }
    /* Utilidades responsivas */
}

API/DOM:

• Manipula estilos dinámicamente vía JavaScript
• Define estados hover/active para interactividad
• Controla layout responsivo con CSS Grid y Flexbox

📁 Css/style.css

Propósito: Estilos específicos del componente y layouts personalizados para cada sección.

Conceptos Clave:

• Arquitectura CSS modular por componentes
• Posicionamiento absoluto/relativo para overlays
• Estilos específicos para librerías integradas (Swiper)
• Media queries para breakpoints personalizados

Fragmentos Destacados:

/* Estilos para el carrusel de testimonios */
.swiper-button-next,
.swiper-button-prev {
    width: 42px;
    height: 42px;
    transition: all 0.3s ease-in-out;
}

/* Sistema de pestañas interactivas */
.tabs__item {
    padding-left: 3rem;
    border-left: 4px solid var(--color-primary);
    filter: grayscale(1);
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.3s ease;
}

API/DOM:

• Define selectores para manipulación JavaScript
• Controla estados visuales de componentes interactivos
• Gestiona animaciones CSS para transiciones suaves

📁 Js/app.js

Propósito: Maneja la lógica interactiva del sitio, incluyendo navegación móvil, pestañas y animaciones.

Conceptos Clave:

• Event-driven programming con addEventListener
• Manipulación del DOM para cambios dinámicos
• Integración de librerías externas (Swiper, ScrollReveal)
• Patrón de módulos con funciones encapsuladas

Fragmentos Destacados:

// Sistema de pestañas para "How it works"
const tabItems = document.querySelectorAll(".tabs__item");
tabItems.forEach((tab) => {
    tab.addEventListener("click", () => {
        // Remover clase active de todas las pestañas
        tabItems.forEach((item) => item.classList.remove("active"));
        // Agregar clase active a la pestaña clickeada
        tab.classList.add("active");
        
        const tabNumber = tab.getAttribute("data-tab");
        // Ocultar todas las imágenes
        imageWrappers.forEach((imageWrapper) => {
            imageWrapper.classList.remove("active");
        });
        // Mostrar imagen correspondiente
        const activeImage = document.querySelector(
            `.image-wrapper[data-tab="${tabNumber}"]`
        );
        activeImage.classList.add("active");
    });
});

API/DOM:

• Eventos: Click handlers para menú móvil y pestañas
• Manipulación: classList.add/remove para estados visuales
• Selección: querySelector/querySelectorAll para elementos dinámicos
• Atributos: getAttribute para data-tab, control de flujo
• Integración: Inicialización de Swiper con configuración personalizada

Flujo de Datos:

1. Entrada: Eventos de usuario (clicks, scroll)
2. Procesamiento: Lógica condicional para cambiar estados
3. Salida: Actualización visual del DOM (clases, visibilidad)

🎯 Arquitectura

Js_Html_Css_LandingPage-Real-Estate-Site
├── index.html (Estructura y contenido)
├── Css/
│   ├── base.css (Sistema de diseño, variables, utilidades)
│   └── style.css (Estilos específicos por componente)
├── Js/
│   └── app.js (Lógica interactiva y integraciones)
└── Assets/
    ├── fonts/ (Tipografía personalizada)
    ├── images/ (Imágenes optimizadas)
    └── icons/ (Iconos vía CDN)

Patrones Implementados:

• Component-Based CSS: Estilos modulares por sección
• Event Delegation: Manejo eficiente de eventos múltiples
• Progressive Enhancement: Funcionalidad básica sin JavaScript
• Mobile-First: Diseño responsivo con breakpoints ascendentes

---

Desarrollado con ❤️ para demostrar técnicas modernas de desarrollo web frontend.