/* Villas.jsx — Luxury scrolling experience showcasing the 5 Novus villas * * Sections: * 1. Cinematic hero with parallax + scroll indicator * 2. Intro statement that fades in on scroll * 3. Each villa: full-bleed alternating layout with scroll-pinned imagery * 4. Feature grid (chef-grade kitchens, private pools, etc.) * 5. Map / neighborhoods strip * 6. Closing CTA */ function VillasPage() { React.useEffect(() => { // Smooth scroll for anchor links document.documentElement.style.scrollBehavior = 'smooth'; // Re-run scroll reveal after this page mounts if (window.setupScrollReveal) { setTimeout(window.setupScrollReveal, 100); } return () => { document.documentElement.style.scrollBehavior = ''; }; }, []); const villas = (window.NOVUS_PROPERTIES || []).filter(p => p.kind === 'villa').slice(0, 5); const [activeVilla, setActiveVilla] = React.useState(villas[0] && villas[0].id); // Scroll-spy: highlight the villa currently in view within the quick-nav React.useEffect(() => { if (!villas.length) return; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const id = entry.target.getAttribute('data-villa-id'); if (id) setActiveVilla(id); } }); }, { rootMargin: '-45% 0px -45% 0px', threshold: 0 }); villas.forEach(v => { const el = document.getElementById(`villa-${v.id}`); if (el) observer.observe(el); }); return () => observer.disconnect(); }, [villas.length]); return ( <>
{/* ===== HERO ===== */}
NOVUS RESIDENTIALS · THE VILLA COLLECTION

Waterfront villas. One standard of hospitality.

From bayfront estates to sunset terraces, each Novus villa is a hand-selected residence — held to a single standard of service, design, and care.

Miami & Bimini
Waterfront Villas
4.9★ Guest rated
Direct Best rate
SCROLL
{/* ===== QUICK-NAV ===== */} {/* ===== INTRO ===== */}
THE COLLECTION

Waterfront villas across Miami,
refined hospitality in every detail.

We don't manage homes — we host stays. Every Novus villa is selected for its location, design, and the quiet luxury it offers. Our concierge knows each property like it's their own; our housekeeping standards never drop, regardless of season or guest. This is what we mean by nos vemos pronto.

{/* ===== VILLA SECTIONS ===== */} {villas.map((v, i) => ( ))} {/* ===== COMPARISON TABLE ===== */}
AT A GLANCE

Compare the collection.

))} {villas.map(v => )} {villas.map(v => )} {villas.map(v => )} {villas.map(v => ( ))} {villas.map(v => ( ))} ))}
{villas.map(v => (
{v.name}
{v.neighborhood}
Bedrooms{v.bedrooms}
Bathrooms{v.bathrooms}
Sleeps{v.maxGuests} guests
Rating ★ {v.rating} ({v.reviews})
From / night ${v.rate.toLocaleString()}
{villas.map(v => ( View →
{/* ===== NEIGHBORHOODS ===== */}
WHERE YOU'LL STAY

Miami, neighborhood by neighborhood.

Our villas sit across the city's most coveted waterfronts and arts districts — each one chosen for what's just outside the door.

{NOVUS_HOODS.map(h => (
{h.count}
{h.name}
 ))}
{/* ===== FEATURES STRIP ===== */}
WHAT EVERY VILLA OFFERS

Five-star residences — held to one standard.

{[ { icon: 'home', title: 'Designer interiors', body: 'Each villa is styled in collaboration with Miami\'s leading interior designers — bay views framed, art curated, light considered.' }, { icon: 'pool', title: 'Private pools', body: 'Heated year-round, lit at night, with sunset-facing loungers and full towel service on arrival.' }, { icon: 'chef', title: 'Chef-grade kitchens', body: 'Full Wolf or Bosch appliance suites, restaurant-quality knives, and a private chef on call when you want it.' }, { icon: 'concierge', title: '24/7 concierge', body: 'Reservations, transport, experiences, and the quiet things you didn\'t think to ask for. Miguel responds within minutes.' }, { icon: 'clean', title: 'Hotel-grade housekeeping', body: 'Mid-stay refreshes, turn-down service for longer bookings, all linens hotel-laundered. Nothing skipped.' }, { icon: 'secure', title: 'Smart-home secure', body: 'Keyless entry with personal codes, full smart-home automation, monitored security, and discretion across every stay.' }, ].map(f => (

{f.title}

{f.body}

))}
{/* ===== REVIEWS ===== */}
FROM OUR GUESTS

Five-star rated. Every stay, one standard.

{(window.MORE_REVIEWS || []).slice(0, 9).map((r, i) => (
{'★'.repeat(r.stars || 5)}

{r.text}

{r.name.charAt(0)}
{r.name}
{r.country} · {r.date}
))}
{/* ===== FAQ ===== */}
GOOD TO KNOW

Before you book.

{VILLA_FAQS.map((f, i) => ( ))}
{/* ===== CLOSING CTA ===== */}
BOOK YOUR STAY

Which villa feels like yours?

Tell us your dates and we'll match you to the right villa. Pricing is real-time across all 5 residences — book directly with us for the best rate.

); } function VillaSection({ villa, index, reverse }) { return (
{String(index).padStart(2, '0')}
{villa.name}
{villa.badge}
No. {String(index).padStart(2, '0')}

{villa.name.split(' ').slice(0, -1).join(' ')}{' '} {villa.name.split(' ').slice(-1)}

{villa.neighborhood}
{villa.address && (
{villa.address}
)} {/* Specs — at-a-glance per property */}
{villa.bedrooms} Bedrooms {villa.bathrooms} Baths Sleeps {villa.maxGuests}

{villa.tagline}

{villa.facts.slice(0, 4).map((f, i) => (
{f}
))}
${villa.rate.toLocaleString()} per night
★ {villa.rating} ({villa.reviews} stays)
View villa →
); } /* Inline icons matched to villa features */ function FeatureIcon({ name }) { const paths = { home: 'M3 12 12 3l9 9M5 10v11h14V10', pool: 'M2 18s2-1 4-1 3 1 6 1 4-1 6-1 4 1 4 1M2 22s2-1 4-1 3 1 6 1 4-1 6-1 4 1 4 1M6 14V5a2 2 0 0 1 2-2h3v11M18 14V5a2 2 0 0 0-2-2h-3v11', chef: 'M6 13a4 4 0 1 1 6.7-4.3M18 13a4 4 0 1 0-6.7-4.3M9 13h6v9H9z', concierge: 'M21 11.5a8.4 8.4 0 0 1-8.4 8.4 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.6a8.4 8.4 0 0 1-.9-3.8 8.4 8.4 0 0 1 8.4-8.5 8.4 8.4 0 0 1 8.5 8.4z', clean: 'M3 6h18l-2 14H5L3 6zM10 11v5M14 11v5M9 6V3h6v3', secure: 'M12 2 4 6v6c0 5 3.4 8.9 8 10 4.6-1.1 8-5 8-10V6l-8-4zM9 12l2 2 4-4', bed: 'M3 18v-7h18v7M3 11V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4M6 11V8h5v3M13 11V8h5v3', bath: 'M9 6V3h6v3M4 12h16v3a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-3zM4 12V8a2 2 0 0 1 2-2', view: 'M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z', boat: 'M2 20s4-3 10-3 10 3 10 3M5 17l7-12 7 12M12 5v12', sun: 'M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4', sleeps: 'M16 19a4 4 0 0 0-8 0M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM20 19a4 4 0 0 0-3-3.9M16 3.1A4 4 0 0 1 16 11', workspace: 'M4 4h16v12H4zM2 20h20M9 16v4M15 16v4', }; return ( ); } function iconForFact(fact) { const f = fact.toLowerCase(); if (/bedroom/.test(f)) return 'bed'; if (/bath/.test(f)) return 'bath'; if (/pool/.test(f)) return 'pool'; if (/view|skyline|bay/.test(f)) return 'view'; if (/sleep/.test(f)) return 'sleeps'; if (/dock|boat|canal/.test(f)) return 'boat'; if (/sunset/.test(f)) return 'sun'; if (/workspace/.test(f)) return 'workspace'; return 'home'; } /* FAQ accordion item */ function FaqItem({ q, a }) { const [open, setOpen] = React.useState(false); return (
{a}
); } /* Neighborhoods — derived from the villa collection's locations */ const NOVUS_HOODS = [ { name: 'Treasure Island', count: '3 villas', anchor: '#villa-villa-gaia', photo: 'https://images.unsplash.com/photo-1613977257363-707ba9348227?auto=format&fit=crop&w=900&q=80' }, { name: 'North Bay Village', count: '1 villa', anchor: '#villa-villa-eros', photo: 'https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=1500&q=80' }, { name: 'Biscayne Bay', count: '1 villa', anchor: '#villa-villa-artemis', photo: 'https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=900&q=80' }, ]; /* Booking FAQs — calm, transactional brand voice */ const VILLA_FAQS = [ { q: 'How do I book directly with Novus?', a: 'Use the Check availability button on any villa — you\'ll book directly with us, not through an OTA. Direct guests get the best rate, our full concierge, and a real person on the other end of every message.' }, { q: 'What\'s included in every stay?', a: 'Hotel-grade housekeeping, fresh hotel-laundered linens, a stocked welcome, fast Wi-Fi, and 24/7 concierge access. Pools are heated year-round and lit at night. Anything beyond that — private chef, transfers, experiences — we arrange on request.' }, { q: 'Is there a minimum stay?', a: 'Most villas have a two-night minimum, with longer minimums over holidays and high-season weekends. Extended stays of a month or more are welcome and priced accordingly — just ask.' }, { q: 'Can you arrange a private chef or yacht day?', a: 'Yes. Our concierge books private chefs, the Galeon 500 yacht charter, transfers, and in-villa spa — often within minutes. Tell us what you have in mind and we\'ll handle the details.' }, { q: 'How does check-in work?', a: 'Keyless entry with a personal code, sent before arrival. For late flights, a host can meet you in person with the keys. Our digital check-in app walks you through everything — identity, agreement, and your concierge — before you arrive.' }, ]; window.VillasPage = VillasPage;