Cabaña

Cabaña Linda

Centro 5 personas

Descripción

Linda cabaña --- // src/pages/index.astro import Layout from '../layouts/Layout.astro'; import Seo from '../components/Seo.astro'; import { getDepartamentos, getTipos, getZonas, getHomeImage } from '../lib/airtable.js'; interface Depto { id: string; nombre: string; slug: string; portada: string; fotos: string[]; precio: string; precio_num: number; tipoSlug: string; tipoNombre: string; zonaSlug: string; zonaNombre: string; destacado: boolean; score: number; } interface TipoItem { id: string; nombre: string; slug: string; icon?: string | null; } interface ZonaItem { id: string; nombre: string; slug: string; portada?: string | null; } const homeImageUrl = (await getHomeImage()) || '/placeholder-home.jpg'; const deptos = ((await getDepartamentos()) || []) as Depto[]; const tipos = ((await getTipos()) || []) as TipoItem[]; const zonas = ((await getZonas()) || []) as ZonaItem[]; // Destacados const featured = deptos .filter((d: Depto) => d.destacado === true || String(d.destacado).toLowerCase() === 'true') .slice(0, 3); // Mapa zonasPorTipo: tipoSlug → { zonaSlug: zonaName } const zonasPorTipo: Record<string, Record<string, string>> = {}; deptos.forEach((d: Depto) => { if (!d.tipoSlug) return; zonasPorTipo[d.tipoSlug] = zonasPorTipo[d.tipoSlug] || {}; if (d.zonaSlug && d.zonaNombre) { zonasPorTipo[d.tipoSlug][d.zonaSlug] = d.zonaNombre; } }); // Lista de zonas con conteo de propiedades const zonasConConteo = zonas .map((z: ZonaItem) => ({ ...z, count: deptos.filter((d: Depto) => d.zonaSlug === z.slug).length, })) .filter((z) => z.count > 0); // Lista plana de zonas para el fallback del selector const zonasList = zonas.map((z: ZonaItem) => ({ slug: z.slug, nombre: z.nombre })); const SITE_URL = 'https://www.alojamientossanrafael.com.ar'; --- <Layout title="Alojamientos San Rafael | Inicio"> <slot slot="head"> <Seo title="Alojamientos en San Rafael, Mendoza | Cabañas y Departamentos" description="Encontrá cabañas, departamentos y casas de alquiler temporario en San Rafael, Mendoza. Trato directo con dueños, sin comisiones." canonical={SITE_URL} /> </slot>  <section class="hero-section"> <div class="hero" style={`background-image: url('${homeImageUrl}');`} role="img" aria-label="Vista panorámica de San Rafael, Mendoza" > <div class="hero-overlay"> <h1>Tu refugio ideal en <span class="accent">San Rafael</span></h1> <p>Cabañas y departamentos directo con sus dueños, sin comisiones.</p> <form class="search-bar" action="/alquileres" method="GET" aria-label="Buscar alojamiento"> <div class="search-field"> <label for="tipo-select">¿Qué buscás?</label> <select id="tipo-select" name="tipo" aria-label="Tipo de alojamiento"> <option value="">Todos los tipos</option> {tipos.map((t: TipoItem) => ( <option value={t.slug}>{t.nombre}</option> ))} </select> </div> <div class="search-field"> <label for="zona-select">¿En qué zona?</label> <select id="zona-select" name="zona" aria-label="Zona"> <option value="">Cualquier zona</option> </select> </div> <button class="search-btn" type="submit">🔎 Buscar</button> </form> </div> </div> </section>  {featured.length > 0 && ( <section class="section container" aria-labelledby="featured-title"> <div class="section-header"> <h2 id="featured-title">Alojamientos destacados</h2> <a href="/alquileres" class="view-all">Ver todos →</a> </div> <div class="cards-grid"> {featured.map((f: Depto) => ( <a class="card" href={`/alquileres/${encodeURIComponent(f.slug)}`}> <div class="card-img-wrapper"> <img src={f.portada || '/placeholder.jpg'} alt={f.nombre} loading="lazy" width="400" height="300" /> {f.tipoNombre && <span class="tag-tipo">{f.tipoNombre}</span>} </div> <div class="card-body"> <h3>{f.nombre}</h3> <p class="card-meta"> {f.zonaNombre && `📍 ${f.zonaNombre}`} {f.precio_num > 0 && ` · ${f.precio}/noche`} </p> </div> </a> ))} </div> </section> )}  <section class="section container" aria-labelledby="tipos-title"> <div class="section-header"> <h2 id="tipos-title">Explorá por tipo de alojamiento</h2> <p class="section-subtitle">Seleccioná una categoría para ver las opciones disponibles</p> </div> <div class="tipos-grid"> {tipos.map((t: TipoItem) => { const count = deptos.filter((d: Depto) => d.tipoSlug === t.slug).length; return ( <a class="tipo-card" href={`/alquileres?tipo=${encodeURIComponent(t.slug)}`} aria-label={`Ver ${t.nombre}: ${count} alojamiento${count !== 1 ? 's' : ''}`} > {/* Imagen de fondo */} <div class="tipo-bg" style={t.icon ? `background-image: url('${t.icon}');` : ''} /> <div class="tipo-overlay" /> {/* Icono en esquina superior derecha */} <div class="tipo-icon-badge" aria-hidden="true"> <img src="/hogar.svg" alt="" /> </div> {/* Texto en la parte inferior */} <div class="tipo-content"> <h3>{t.nombre}</h3> <p>{count} alojamiento{count !== 1 ? 's' : ''}</p> </div> </a> ); })} </div> </section>  {zonasConConteo.length > 0 && ( <section class="section container zonas-section" aria-labelledby="zonas-title"> <div class="section-header"> <h2 id="zonas-title">Explorá por zona</h2> <p class="section-subtitle">Descubrí los distintos rincones de San Rafael</p> </div> <div class="zonas-grid"> {zonasConConteo.map((z) => ( <a class="zona-card" href={`/alquileres?zona=${encodeURIComponent(z.slug)}`} aria-label={`Ver alojamientos en ${z.nombre}: ${z.count} disponibles`} > <div class="zona-img-wrapper"> {z.portada ? <img src={z.portada} alt={z.nombre} loading="lazy" /> : <div class="zona-img-placeholder" aria-hidden="true">📍</div> } <div class="zona-overlay"> <h3>{z.nombre}</h3> <p>{z.count} alojamiento{z.count !== 1 ? 's' : ''}</p> </div> {/* Icono marcador en esquina superior derecha */} <div class="zona-icon-badge" aria-hidden="true"> <img src="/marker.svg" alt="" /> </div> </div> </a> ))} </div> </section> )}  <script type="application/json" id="zonas-por-tipo-data" set:html={JSON.stringify(zonasPorTipo)} /> <script type="application/json" id="zonas-list-data" set:html={JSON.stringify(zonasList)} /> </Layout> <script is:inline>

Servicios incluidos

servicio a la habitacion

Garaje

Ubicación

Centro , Mendoza, Argentina.

Ver en Google Maps