← back to Jill Website
views/index.ejs
885 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nosara Beachfront Rentals - Luxury Vacation Properties</title>
<meta name="description" content="Discover luxury beachfront vacation rentals in Nosara, Costa Rica. Experience paradise with stunning ocean views and world-class amenities.">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Stylesheets -->
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/adaptive-loading.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<h2>Nosara Beachfront</h2>
</div>
<ul class="nav-menu">
<li><a href="#home" class="nav-link">Home</a></li>
<li class="nav-dropdown">
<a href="#properties" class="nav-link">Properties <i class="fas fa-chevron-down"></i></a>
<ul class="dropdown-menu">
<li><a href="/properties/luna">Luna</a></li>
<li><a href="/properties/sol">Sol</a></li>
<li><a href="/properties/casita">Casita</a></li>
<li><a href="/properties/main-house">Main House</a></li>
</ul>
</li>
<li><a href="/beaches" class="nav-link">Beaches</a></li>
<li><a href="#experiences" class="nav-link">Experiences</a></li>
<li><a href="#videos" class="nav-link">Videos</a></li>
<li><a href="#history" class="nav-link">History</a></li>
<li><a href="#dining" class="nav-link">Dining</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero" id="home" role="banner" aria-label="Luxury beachfront properties in Nosara, Costa Rica - stunning ocean views and pristine beaches">
<div class="hero-content">
<div class="hero-text">
<h1 class="hero-title">Your Paradise Awaits</h1>
<p class="hero-subtitle">Experience luxury beachfront living in Nosara, Costa Rica</p>
<div class="hero-buttons">
<a href="#properties" class="btn-primary">View Properties</a>
<a href="#contact" class="btn-secondary">Get in Touch</a>
</div>
</div>
</div>
<div class="hero-scroll">
<p>Scroll to explore</p>
<div class="scroll-arrow" aria-hidden="true"></div>
</div>
</section>
<!-- Stats Section -->
<section class="stats">
<div class="container">
<div class="stats-grid">
<div class="stat-item">
<h3><%= properties.length %></h3>
<p>Luxury Properties</p>
</div>
<div class="stat-item">
<h3>5★</h3>
<p>Guest Rating</p>
</div>
<div class="stat-item">
<h3>100%</h3>
<p>Beachfront Access</p>
</div>
<div class="stat-item">
<h3>24/7</h3>
<p>Concierge Service</p>
</div>
</div>
</div>
</section>
<!-- Properties Section -->
<section class="villas" id="properties">
<div class="container">
<div class="section-header">
<h2>Our Luxury Properties</h2>
<p>Choose from our carefully curated collection of beachfront villas and estates</p>
</div>
<div class="villas-grid">
<% if (properties && properties.length > 0) { %>
<% properties.forEach(function(property) { %>
<div class="villa-card">
<div class="villa-image">
<% if (property.images && property.images.length > 0) { %>
<img
src="<%= property.images[0] %>"
data-src-high="<%= property.images[0] %>"
data-adaptive="true"
alt="<%= property.name %> - Luxury <%= property.bedrooms %> bedroom beachfront vacation rental in Nosara, Costa Rica featuring <%= property.amenities && property.amenities.length > 0 ? property.amenities.slice(0, 2).join(' and ') : 'luxury amenities' %>"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
<% } else { %>
<div class="villa-placeholder" style="background: linear-gradient(135deg, #2c5f8d, #16a085);" role="img" aria-label="Placeholder image for <%= property.name %> property">
<i class="fas fa-home" aria-hidden="true"></i>
</div>
<% } %>
<% if (property.capacity) { %>
<div class="villa-badge">Up to <%= property.capacity %> Guests</div>
<% } %>
</div>
<div class="villa-content">
<h3><%= property.name %></h3>
<div class="villa-specs">
<% if (property.bedrooms) { %>
<span><i class="fas fa-bed"></i> <%= property.bedrooms %> Bedrooms</span>
<% } %>
<% if (property.bathrooms) { %>
<span><i class="fas fa-bath"></i> <%= property.bathrooms %> Baths</span>
<% } %>
<% if (property.size_sqm) { %>
<span><i class="fas fa-ruler-combined"></i> <%= Math.round(property.size_sqm) %> m²</span>
<% } %>
</div>
<p><%= property.description.length > 150 ? property.description.substring(0, 150) + '...' : property.description %></p>
<% if (property.amenities && property.amenities.length > 0) { %>
<div class="villa-amenities">
<% property.amenities.slice(0, 4).forEach(function(amenity) { %>
<span><%= amenity %></span>
<% }); %>
<% if (property.amenities.length > 4) { %>
<span>+<%= property.amenities.length - 4 %> more</span>
<% } %>
</div>
<% } %>
<% if (property.price_per_night) { %>
<div style="margin: 1.5rem 0; padding: 1rem; background: #ecf0f1; border-radius: 10px; text-align: center;">
<span style="font-size: 0.9rem; color: #2c3e50; opacity: 0.7;">From</span>
<span style="font-size: 2rem; font-weight: 700; color: #2c5f8d; display: block;">$<%= Math.round(property.price_per_night) %></span>
<span style="font-size: 0.9rem; color: #2c3e50; opacity: 0.7;">per night</span>
</div>
<% } %>
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<a href="/property/<%= property.id %>" class="btn-villa" style="flex: 1; min-width: 120px; text-align: center;">
View Details <i class="fas fa-arrow-right"></i>
</a>
<a href="<%= property.airbnb_url %>" target="_blank" rel="noopener noreferrer" class="btn-villa" style="flex: 1; min-width: 120px; text-align: center; background: #ff5a5f;">
Book on Airbnb <i class="fas fa-external-link-alt"></i>
</a>
</div>
</div>
</div>
<% }); %>
<% } else { %>
<div style="grid-column: 1 / -1; text-align: center; padding: 4rem 0;">
<h3 style="color: #2c3e50; margin-bottom: 1rem;">Coming Soon</h3>
<p style="color: #2c3e50; opacity: 0.7;">Our luxury properties will be available shortly.</p>
</div>
<% } %>
</div>
</div>
</section>
<!-- Experiences Section -->
<section class="experiences" id="experiences">
<div class="container">
<div class="section-header">
<h2>Unforgettable Experiences</h2>
<p>Discover the best that Nosara has to offer</p>
</div>
<div class="experiences-grid">
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-umbrella-beach"></i>
</div>
<h3>World-Class Beaches</h3>
<p>Pristine beaches with consistent surf breaks, perfect for surfers and beach lovers alike. Experience the natural beauty of Costa Rica's Pacific coast.</p>
</div>
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-water"></i>
</div>
<h3>Surfing Paradise</h3>
<p>From beginner-friendly breaks to challenging waves, Nosara offers year-round surf conditions. Professional lessons and board rentals available.</p>
</div>
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-om"></i>
</div>
<h3>Yoga & Wellness</h3>
<p>Renowned yoga studios and wellness retreats. Find your inner peace with daily classes, workshops, and holistic healing experiences.</p>
</div>
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-tree"></i>
</div>
<h3>Nature Adventures</h3>
<p>Explore lush rainforests, wildlife refuges, and protected reserves. Spot monkeys, sloths, exotic birds, and sea turtles in their natural habitat.</p>
</div>
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-utensils"></i>
</div>
<h3>Culinary Delights</h3>
<p>Farm-to-table restaurants featuring fresh local ingredients. Experience authentic Costa Rican cuisine and international flavors.</p>
</div>
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-horse"></i>
</div>
<h3>Adventure Activities</h3>
<p>Horseback riding on the beach, zip-lining through canopies, sport fishing, and ATV tours. Endless adventures await.</p>
</div>
</div>
</div>
</section>
<!-- Destination Videos Section -->
<section class="destination-videos" id="videos">
<div class="container">
<div class="section-header">
<h2>Experience Nosara</h2>
<p>Watch videos to get a feel for this beautiful destination before your visit</p>
</div>
<div class="videos-grid">
<div class="video-card">
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/OsLSwAusry0"
title="Nosara Costa Rica - Beach Paradise"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
loading="lazy">
</iframe>
</div>
<div class="video-info">
<h3>Nosara Beach Paradise</h3>
<p>Discover the pristine beaches and stunning natural beauty of Nosara, Costa Rica</p>
</div>
</div>
<div class="video-card">
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/LU_TAXWB7Js"
title="Surfing in Nosara - Playa Guiones"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
loading="lazy">
</iframe>
</div>
<div class="video-info">
<h3>World-Class Surfing</h3>
<p>Experience the incredible surf breaks at Playa Guiones and learn why Nosara is a surfer's paradise</p>
</div>
</div>
<div class="video-card">
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/CLjRzD7nRk0"
title="Wildlife and Nature in Nosara"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
loading="lazy">
</iframe>
</div>
<div class="video-info">
<h3>Wildlife & Nature</h3>
<p>Explore the incredible biodiversity with howler monkeys, sea turtles, and exotic birds</p>
</div>
</div>
</div>
</div>
</section>
<!-- Historical & Cultural Section -->
<section class="history" id="history">
<div class="container">
<div class="section-header">
<h2>Discover Nosara's Rich Heritage</h2>
<p>Explore the fascinating history and cultural significance of this coastal paradise</p>
</div>
<div class="history-content">
<!-- Main Historical Overview -->
<div class="history-main">
<div class="history-text">
<h3>A Journey Through Time</h3>
<p>Nosara's name derives from the indigenous Chorotega word "Noxal-ara," meaning "between the lagoons," reflecting the area's unique geographical position between the Nosara and Montaña rivers. For centuries before European contact in the 16th century, this region was home to the Chorotega people, one of Costa Rica's most advanced pre-Columbian civilizations.</p>
<p>The Chorotegas developed sophisticated agricultural techniques, created distinctive polychrome pottery, and established trade networks that extended throughout Central America. Archaeological evidence suggests they inhabited the Nicoya Peninsula, including the Nosara area, from approximately 800 CE until Spanish colonization in the 1520s.</p>
<h3>Colonial Era and Early Settlement</h3>
<p>Following Spanish conquest in the 16th century, the Guanacaste region, including Nosara, remained relatively isolated and sparsely populated. Unlike other parts of Costa Rica that developed large haciendas, Nosara's rugged terrain and distance from major colonial centers allowed it to maintain a more rural, independent character throughout the colonial period (1522-1821).</p>
<p>The area became known for small-scale ranching and subsistence agriculture. The isolation that once hindered economic development would later prove instrumental in preserving the region's pristine natural beauty and unique cultural identity.</p>
</div>
<div class="history-image-placeholder">
<i class="fas fa-landmark"></i>
<p>Indigenous Heritage</p>
</div>
</div>
<!-- Timeline -->
<div class="history-timeline">
<h3 style="text-align: center; color: #2c5f8d; margin-bottom: 2rem;">Historical Timeline</h3>
<div class="timeline-item">
<div class="timeline-date">800-1550 CE</div>
<div class="timeline-content">
<h4>Chorotega Civilization</h4>
<p>Indigenous Chorotega people establish thriving communities, developing advanced pottery, agriculture, and trade networks throughout the Nicoya Peninsula.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">1522</div>
<div class="timeline-content">
<h4>Spanish Arrival</h4>
<p>Spanish conquistador Gil González Dávila explores the Nicoya region, initiating contact between European and indigenous cultures.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">1824</div>
<div class="timeline-content">
<h4>Annexation to Costa Rica</h4>
<p>Following independence from Spain, Guanacaste province, including Nosara, votes to join Costa Rica rather than Nicaragua through the democratic Partido de Nicoya.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">1970s</div>
<div class="timeline-content">
<h4>Conservation Movement Begins</h4>
<p>Forward-thinking residents establish the Nosara Civic Association (NCA) and begin preserving 50-meter beach buffer zones, setting the foundation for sustainable development.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">1984</div>
<div class="timeline-content">
<h4>Ostional Wildlife Refuge</h4>
<p>The nearby Ostional Wildlife Refuge is established to protect the world's most important mass nesting site for Olive Ridley sea turtles (arribadas).</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">1990s-Present</div>
<div class="timeline-content">
<h4>Sustainable Tourism Era</h4>
<p>Nosara develops as an eco-conscious community, becoming internationally recognized for yoga, surfing, and environmental stewardship while maintaining its natural beauty.</p>
</div>
</div>
</div>
<!-- Cultural Highlights -->
<div class="cultural-grid">
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-mask"></i>
</div>
<h4>Chorotega Heritage</h4>
<p>The Chorotega people's influence remains visible in local pottery traditions, place names, and cultural practices. Many families in the region trace their ancestry to these original inhabitants, maintaining cultural continuity spanning over a millennium.</p>
<div class="cultural-fact">
<strong>Did you know?</strong> Chorotega pottery from this region, characterized by its distinctive red, black, and cream geometric designs, is displayed in museums worldwide.
</div>
</div>
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-flag"></i>
</div>
<h4>Annexation Day</h4>
<p>Every July 25th, Costa Rica celebrates the Annexation of Guanacaste (Anexión del Partido de Nicoya), commemorating the 1824 democratic decision of Guanacaste citizens to join Costa Rica. This unique celebration features traditional music, dance, bullfights, and folkloric festivities.</p>
<div class="cultural-fact">
<strong>Cultural Significance:</strong> This peaceful democratic decision is celebrated as a model of self-determination in Central American history.
</div>
</div>
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-leaf"></i>
</div>
<h4>Environmental Pioneers</h4>
<p>Since the 1970s, Nosara has been a leader in sustainable development and environmental conservation. The Nosara Civic Association established some of Costa Rica's first private conservation efforts, protecting critical wildlife corridors and establishing the 50-meter coastal buffer zone.</p>
<div class="cultural-fact">
<strong>Legacy:</strong> Nosara's conservation model has been adopted throughout Costa Rica, contributing to the country's reputation as a global environmental leader.
</div>
</div>
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-turtle"></i>
</div>
<h4>Sea Turtle Sanctuary</h4>
<p>The nearby Ostional Wildlife Refuge hosts one of only two Olive Ridley sea turtle arribadas (mass nestings) on Earth. During these events, thousands of turtles come ashore simultaneously to nest, a phenomenon that has occurred here for thousands of years.</p>
<div class="cultural-fact">
<strong>Conservation Success:</strong> Community-based management has made Ostional a model for sustainable sea turtle egg harvesting and ecotourism.
</div>
</div>
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-users"></i>
</div>
<h4>Community Spirit</h4>
<p>Nosara's development has been guided by community values emphasizing environmental protection, cultural preservation, and sustainable growth. This ethos attracts like-minded residents and visitors who appreciate the balance between development and conservation.</p>
<div class="cultural-fact">
<strong>Pura Vida:</strong> The Costa Rican philosophy of "pure life" is especially strong in Nosara, where residents prioritize well-being and environmental harmony.
</div>
</div>
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-horse"></i>
</div>
<h4>Sabanero Tradition</h4>
<p>Guanacaste's cowboy tradition, the sabanero culture, remains an important part of regional identity. These skilled horsemen developed unique techniques for cattle ranching in the tropical dry forest, creating a distinct cultural heritage celebrated in local festivals.</p>
<div class="cultural-fact">
<strong>Living Tradition:</strong> You can still see sabaneros working cattle in traditional style throughout the Nosara region.
</div>
</div>
</div>
<!-- Sources Section -->
<div class="history-sources">
<h4><i class="fas fa-book"></i> Historical Sources & Further Reading</h4>
<p>This historical content is based on credible sources including:</p>
<ul>
<li>National Museum of Costa Rica - Pre-Columbian Department</li>
<li>"The History of Costa Rica" by Iván Molina & Steven Palmer (2004)</li>
<li>Nosara Civic Association Historical Archives (1970-present)</li>
<li>Costa Rican Ministry of Culture and Youth - Historical Database</li>
<li>Ostional Wildlife Refuge Scientific Publications (1984-2024)</li>
<li>University of Costa Rica - Center for Central American Historical Research</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Dining & Restaurants Section -->
<section class="dining" id="dining">
<div class="container">
<div class="section-header">
<h2>Dining in Nosara</h2>
<p>Discover exceptional culinary experiences from fine dining to casual beachfront eateries</p>
</div>
<div class="restaurants-grid">
<!-- Fine Dining -->
<div class="restaurant-category">
<h3 class="category-title"><i class="fas fa-star"></i> Fine Dining</h3>
<div class="restaurant-card">
<div class="restaurant-icon">
<i class="fas fa-utensils"></i>
</div>
<h4>Huacas Restaurant</h4>
<p class="cuisine-type">Modern Costa Rican & Caribbean Fusion</p>
<p>Intimate candlelit terrace overlooking jungle at Tierra Magnifica Hotel. Chef Paulo Valerios creates exceptional dishes with fresh, organic, local ingredients. Outstanding wine and cocktail menu.</p>
<div class="restaurant-info">
<span><i class="fas fa-map-marker-alt"></i> Tierra Magnifica Hotel</span>
<span><i class="fas fa-info-circle"></i> Reservations recommended</span>
</div>
</div>
<div class="restaurant-card">
<div class="restaurant-icon">
<i class="fas fa-utensils"></i>
</div>
<h4>La Luna</h4>
<p class="cuisine-type">Fusion & Seafood</p>
<p>Beachfront dining at Playa Pelada with spectacular sunset views. Famous for fish tacos, fresh ceviche, and grilled seafood. Romantic candlelit atmosphere perfect for special occasions.</p>
<div class="restaurant-info">
<span><i class="fas fa-map-marker-alt"></i> Playa Pelada</span>
<span><i class="fas fa-clock"></i> Reservations essential in high season</span>
</div>
<div class="restaurant-contact">
<a href="tel:+50626820122" class="contact-link"><i class="fas fa-phone"></i> +506 2682-0122</a>
<a href="https://lalunanosara.com" target="_blank" rel="noopener noreferrer" class="contact-link"><i class="fas fa-globe"></i> Website</a>
</div>
</div>
<div class="restaurant-card">
<div class="restaurant-icon">
<i class="fas fa-utensils"></i>
</div>
<h4>Coyol</h4>
<p class="cuisine-type">Mediterranean & Barbecue</p>
<p>Jungle setting above Nosara town with creative Mediterranean-inspired dishes. Specializes in grilled oysters and smoked eggplant. Reservation-only, 4x4 or ATV required for access.</p>
<div class="restaurant-info">
<span><i class="fas fa-map-marker-alt"></i> Mar Azul Mountain</span>
<span><i class="fas fa-calendar-check"></i> By reservation only</span>
</div>
<div class="restaurant-contact">
<a href="tel:+50686329590" class="contact-link"><i class="fas fa-phone"></i> +506 8632-9590</a>
<a href="https://wa.me/50686329590" target="_blank" rel="noopener noreferrer" class="contact-link"><i class="fab fa-whatsapp"></i> WhatsApp</a>
</div>
</div>
</div>
<!-- Casual Dining -->
<div class="restaurant-category">
<h3 class="category-title"><i class="fas fa-hamburger"></i> Casual Dining</h3>
<div class="restaurant-card">
<div class="restaurant-icon">
<i class="fas fa-fish"></i>
</div>
<h4>Pacifico Azul</h4>
<p class="cuisine-type">Fresh Seafood & Local Costa Rican</p>
<p>Family-run restaurant with the freshest locally-sourced seafood in Nosara. Try the Caribbean ceviche and grilled mahi mahi. Authentic and affordable.</p>
<div class="restaurant-info">
<span><i class="fas fa-star"></i> Local favorite</span>
</div>
</div>
<div class="restaurant-card">
<div class="restaurant-icon">
<i class="fas fa-pizza-slice"></i>
</div>
<h4>Il Pepperoni</h4>
<p class="cuisine-type">Italian & Mediterranean Pizza</p>
<p>Authentic Italian cuisine at Playa Pelada with wood-fired pizzas, fresh pasta, and Mediterranean specialties. Casual atmosphere perfect for families.</p>
<div class="restaurant-info">
<span><i class="fas fa-map-marker-alt"></i> Playa Pelada</span>
</div>
</div>
<div class="restaurant-card">
<div class="restaurant-icon">
<i class="fas fa-glass-cheers"></i>
</div>
<h4>Howler's Beach Lounge</h4>
<p class="cuisine-type">Beach Bar & Grill</p>
<p>Beachfront lounge at North Playa Guiones with tuna carpaccio, fish tacos, and craft beer. Live music events and stunning ocean views.</p>
<div class="restaurant-info">
<span><i class="fas fa-map-marker-alt"></i> North Playa Guiones</span>
<span><i class="fas fa-music"></i> Live music</span>
</div>
</div>
<div class="restaurant-card">
<div class="restaurant-icon">
<i class="fas fa-beer"></i>
</div>
<h4>Guiones Brewing Company</h4>
<p class="cuisine-type">Craft Beer & Artisan Pizza</p>
<p>Local craft brewery with house-made beers and artisan pizzas. Relaxed atmosphere perfect for post-surf refreshments.</p>
<div class="restaurant-info">
<span><i class="fas fa-map-marker-alt"></i> North Guiones</span>
</div>
</div>
</div>
<!-- Health-Conscious -->
<div class="restaurant-category">
<h3 class="category-title"><i class="fas fa-leaf"></i> Health-Focused</h3>
<div class="restaurant-card">
<div class="restaurant-icon">
<i class="fas fa-seedling"></i>
</div>
<h4>Naked Foods</h4>
<p class="cuisine-type">Vegan & Plant-Based</p>
<p>100% vegan restaurant at Playa Guiones with macro bowls, fresh salads, and innovative plant-based burgers. Organic, locally-sourced ingredients.</p>
<div class="restaurant-info">
<span><i class="fas fa-map-marker-alt"></i> Playa Guiones</span>
</div>
<div class="restaurant-contact">
<a href="tel:+50687124463" class="contact-link"><i class="fas fa-phone"></i> +506 8712-4463</a>
<a href="https://nakedfoodscr.com" target="_blank" rel="noopener noreferrer" class="contact-link"><i class="fas fa-globe"></i> Website</a>
</div>
</div>
<div class="restaurant-card">
<div class="restaurant-icon">
<i class="fas fa-leaf"></i>
</div>
<h4>LuvBurger Nosara</h4>
<p class="cuisine-type">Vegan Burgers & Smoothies</p>
<p>Delicious vegan burgers, nourishing bowls, and fresh smoothies. Outdoor seating with organic, locally-sourced ingredients.</p>
</div>
<div class="restaurant-card">
<div class="restaurant-icon">
<i class="fas fa-coffee"></i>
</div>
<h4>Destiny Cafe</h4>
<p class="cuisine-type">Breakfast & Brunch</p>
<p>Popular breakfast spot with smoothies, breakfast bowls, fluffy pancakes, and shakshuka. Perfect way to start your day.</p>
</div>
</div>
<!-- Local Favorites -->
<div class="restaurant-category">
<h3 class="category-title"><i class="fas fa-home"></i> Authentic Costa Rican</h3>
<div class="restaurant-card">
<div class="restaurant-icon">
<i class="fas fa-flag"></i>
</div>
<h4>Rosi's Soda Tica</h4>
<p class="cuisine-type">Traditional Costa Rican Casado</p>
<p>The best authentic tico food in Nosara. Unbeatable combination of authenticity, affordability, and deliciousness. Try the traditional casado.</p>
<div class="restaurant-info">
<span><i class="fas fa-dollar-sign"></i> Budget-friendly</span>
<span><i class="fas fa-heart"></i> Most authentic</span>
</div>
</div>
<div class="restaurant-card">
<div class="restaurant-icon">
<i class="fas fa-utensils"></i>
</div>
<h4>Celajes Restaurante</h4>
<p class="cuisine-type">Local Costa Rican Classics</p>
<p>Near the airport with traditional casado, curried shrimp, and authentic tacos. Friendly service and genuine local flavors.</p>
<div class="restaurant-info">
<span><i class="fas fa-map-marker-alt"></i> Near airport</span>
</div>
</div>
<div class="restaurant-card">
<div class="restaurant-icon">
<i class="fas fa-home"></i>
</div>
<h4>Rancho Tico</h4>
<p class="cuisine-type">Traditional Costa Rican</p>
<p>Local favorite in Nosara town serving authentic Costa Rican fare at affordable prices. Great for experiencing genuine tico culture.</p>
<div class="restaurant-info">
<span><i class="fas fa-map-marker-alt"></i> Nosara town</span>
<span><i class="fas fa-dollar-sign"></i> Budget-friendly</span>
</div>
</div>
</div>
</div>
<div class="dining-note">
<p><i class="fas fa-info-circle"></i> <strong>Tip:</strong> During low season (September-October), call ahead to confirm hours as some restaurants may have limited schedules. Reservations recommended for fine dining establishments during high season (December-April).</p>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact" id="contact">
<div class="container">
<div class="section-header">
<h2>Get in Touch</h2>
<p>Ready to book your dream vacation? Contact us today</p>
</div>
<div class="contact-content">
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-envelope"></i>
<h4>Email Us</h4>
<p><a href="mailto:info@nosarabeachfront.com">info@nosarabeachfront.com</a></p>
</div>
<div class="contact-item">
<i class="fas fa-phone"></i>
<h4>Call Us</h4>
<% const contactPhone = '+15551234567'; %>
<p><a href="tel:<%= typeof formatPhoneForTel !== 'undefined' ? formatPhoneForTel(contactPhone) : contactPhone %>"><%= typeof formatPhoneNumber !== 'undefined' ? formatPhoneNumber(contactPhone) : contactPhone %></a></p>
</div>
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<h4>Visit Us</h4>
<p>Nosara, Guanacaste<br>Costa Rica</p>
</div>
</div>
<div class="contact-form">
<form action="/api/inquiries" method="POST" id="inquiryForm">
<div class="form-row">
<input type="text" name="name" placeholder="Full Name" required>
<input type="email" name="email" placeholder="Email Address" required>
</div>
<div class="form-row">
<input type="tel" name="phone" placeholder="Phone Number" required>
<input type="number" name="guest_count" placeholder="Number of Guests" min="1" required>
</div>
<div class="form-row">
<input type="date" name="check_in_date" placeholder="Check-in Date" required>
<input type="date" name="check_out_date" placeholder="Check-out Date" required>
</div>
<textarea name="message" rows="5" placeholder="Tell us about your dream vacation..." required></textarea>
<button type="submit">Send Inquiry</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>Nosara Beachfront</h3>
<p>Your gateway to luxury beachfront living in Costa Rica's most beautiful coastal paradise.</p>
<div class="social-links">
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
</div>
</div>
<div class="footer-section">
<h4>Quick Links</h4>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#properties">Properties</a></li>
<li><a href="#experiences">Experiences</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Resources</h4>
<ul>
<li><a href="#">Travel Guide</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© <%= new Date().getFullYear() %> Nosara Beachfront Rentals. All rights reserved.</p>
</div>
</div>
</footer>
<!-- JavaScript -->
<script>
// Mobile menu toggle
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
});
// Mobile dropdown toggle
document.querySelectorAll('.nav-dropdown > .nav-link').forEach(dropdownLink => {
dropdownLink.addEventListener('click', (e) => {
if (window.innerWidth <= 768) {
e.preventDefault();
const dropdown = dropdownLink.parentElement;
dropdown.classList.toggle('active');
}
});
});
// Close mobile menu when clicking on a link
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
if (!link.parentElement.classList.contains('nav-dropdown')) {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
}
});
});
// Close dropdown when clicking dropdown item
document.querySelectorAll('.dropdown-menu a').forEach(link => {
link.addEventListener('click', () => {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
document.querySelectorAll('.nav-dropdown').forEach(d => d.classList.remove('active'));
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Form submission handling
const form = document.getElementById('inquiryForm');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(form);
const data = Object.fromEntries(formData);
try {
const response = await fetch('/api/inquiries', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
});
const result = await response.json();
if (response.ok) {
alert('Thank you for your inquiry! We will contact you shortly.');
form.reset();
} else {
alert('Error: ' + (result.message || 'Failed to submit inquiry'));
}
} catch (error) {
alert('Error submitting inquiry. Please try again.');
console.error('Error:', error);
}
});
// Navbar scroll effect
let lastScroll = 0;
window.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
const currentScroll = window.pageYOffset;
if (currentScroll > 100) {
navbar.style.background = 'rgba(255, 255, 255, 0.98)';
navbar.style.boxShadow = '0 5px 20px rgba(0,0,0,0.15)';
} else {
navbar.style.background = 'rgba(255, 255, 255, 0.95)';
navbar.style.boxShadow = '0 5px 20px rgba(0,0,0,0.1)';
}
lastScroll = currentScroll;
});
</script>
<!-- Adaptive Loading Scripts -->
<script src="/js/connection-speed.js"></script>
<script src="/js/adaptive-loading.js"></script>
</body>
</html>