← back to Jill Website
views/beaches.ejs
447 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>World-Class Beaches - Nosara Beachfront Rentals</title>
<meta name="description" content="Discover pristine Pacific coast beaches in Nosara, Costa Rica. Perfect surf breaks, stunning sunsets, and natural beauty await at our world-class beaches.">
<!-- 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">
<link rel="stylesheet" href="/css/activity-links.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<h2><a href="/" style="text-decoration: none; color: inherit;">Nosara Beachfront</a></h2>
</div>
<ul class="nav-menu">
<li><a href="/" class="nav-link">Home</a></li>
<li><a href="/#properties" class="nav-link">Properties</a></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" style="background: linear-gradient(135deg, rgba(44, 95, 141, 0.6) 0%, rgba(22, 160, 133, 0.6) 100%),
url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=85&w=2400&auto=format&fit=crop&ixlib=rb-4.0.3'); background-size: cover; background-position: center;">
<div class="hero-content">
<div class="hero-text">
<h1 class="hero-title">World-Class Beaches</h1>
<p class="hero-subtitle">Experience the pristine beauty of Nosara's Pacific coast beaches</p>
</div>
</div>
<div class="hero-scroll">
<p>Scroll to explore</p>
<div class="scroll-arrow" aria-hidden="true"></div>
</div>
</section>
<!-- Category Navigation -->
<%- include('partials/category-nav', { currentPage: 'beaches' }) %>
<!-- Beach Introduction -->
<section class="experiences" style="padding: 5rem 0 3rem;">
<div class="container">
<div class="section-header">
<h2>Discover Nosara's Pristine Beaches</h2>
<p>Nosara is blessed with some of Costa Rica's most beautiful and unspoiled beaches along the Pacific coast. With consistent surf breaks, stunning natural beauty, and a commitment to environmental preservation, our beaches offer the perfect blend of adventure and tranquility.</p>
</div>
<div style="max-width: 900px; margin: 2rem auto; padding: 2rem; background: linear-gradient(135deg, rgba(44, 95, 141, 0.05), rgba(22, 160, 133, 0.05)); border-radius: 15px; border-left: 4px solid var(--primary-color);">
<p style="font-size: 1.1rem; line-height: 1.8; color: var(--dark);">
The beaches of Nosara are protected by strict environmental regulations that preserve their natural state. With miles of pristine coastline, excellent surf conditions year-round, and abundant wildlife, these beaches represent the very best of Costa Rica's Pacific coast. Whether you're a seasoned surfer, a beach lover, or simply seeking a peaceful escape, Nosara's beaches offer unforgettable experiences.
</p>
</div>
</div>
</section>
<!-- Beach Photos Gallery -->
<section class="villas" style="background: var(--light); padding: 4rem 0;">
<div class="container">
<div class="section-header">
<h2>Beach Photo Gallery</h2>
<p>Immerse yourself in the stunning natural beauty of our beaches</p>
</div>
<div class="villas-grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
<!-- Beach Photo 1 -->
<div class="villa-card" style="cursor: default;">
<div class="villa-image" style="height: 300px;">
<img
src="https://images.unsplash.com/photo-1559827260-dc66d52bef19?q=85&w=1200&auto=format&fit=crop"
alt="Pristine Playa Guiones beach with golden sand and turquoise waters"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Playa Guiones</h3>
<p>The crown jewel of Nosara's beaches, featuring miles of golden sand and consistent surf breaks perfect for all skill levels.</p>
</div>
</div>
<!-- Beach Photo 2 -->
<div class="villa-card" style="cursor: default;">
<div class="villa-image" style="height: 300px;">
<img
src="https://images.unsplash.com/photo-1505142468610-359e7d316be0?q=85&w=1200&auto=format&fit=crop"
alt="Surfer riding wave at sunset in Nosara"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Perfect Surf Breaks</h3>
<p>World-class waves with consistent swells year-round, attracting surfers from around the globe seeking the ultimate ride.</p>
</div>
</div>
<!-- Beach Photo 3 -->
<div class="villa-card" style="cursor: default;">
<div class="villa-image" style="height: 300px;">
<img
src="https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?q=85&w=1200&auto=format&fit=crop"
alt="Stunning Pacific sunset over Nosara beach"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Spectacular Sunsets</h3>
<p>Witness breathtaking sunsets painting the Pacific sky with vibrant oranges, pinks, and purples every evening.</p>
</div>
</div>
<!-- Beach Photo 4 -->
<div class="villa-card" style="cursor: default;">
<div class="villa-image" style="height: 300px;">
<img
src="https://images.unsplash.com/photo-1559827260-dc66d52bef19?q=85&w=1200&auto=format&fit=crop"
alt="Natural beach landscape with lush vegetation and pristine sand"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Unspoiled Nature</h3>
<p>Protected beaches with minimal development, surrounded by lush tropical forests and teeming with wildlife.</p>
</div>
</div>
<!-- Beach Photo 5 -->
<div class="villa-card" style="cursor: default;">
<div class="villa-image" style="height: 300px;">
<img
src="https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=85&w=1200&auto=format&fit=crop"
alt="Sea turtle swimming in crystal clear waters near Nosara beach"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Marine Wildlife</h3>
<p>Encounter sea turtles, dolphins, and tropical fish in the warm Pacific waters surrounding Nosara's protected beaches.</p>
</div>
</div>
<!-- Beach Photo 6 -->
<div class="villa-card" style="cursor: default;">
<div class="villa-image" style="height: 300px;">
<img
src="https://images.unsplash.com/photo-1530870110042-98b2cb110834?q=85&w=1200&auto=format&fit=crop"
alt="Early morning beach scene with palm trees and calm waters"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Morning Serenity</h3>
<p>Start your day with peaceful morning walks along empty beaches, watching the sunrise over the Pacific horizon.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Beach Information & Surf Conditions -->
<section class="experiences" style="padding: 5rem 0;">
<div class="container">
<div class="section-header">
<h2>Beaches & Surf Breaks</h2>
<p>Explore the unique characteristics of each beach and find your perfect spot</p>
</div>
<div class="experiences-grid">
<!-- Playa Guiones -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-water"></i>
</div>
<h3>Playa Guiones</h3>
<p><strong>Length:</strong> 7 kilometers of pristine coastline</p>
<p><strong>Best For:</strong> All skill levels, from beginners to advanced surfers</p>
<p><strong>Surf Conditions:</strong> Consistent beach breaks with both left and right peaks. Best during incoming tide. Offshore winds in the morning create ideal conditions.</p>
<p><strong>Features:</strong> Sandy bottom, lifeguard patrol, multiple beach access points, surf schools, and board rentals available.</p>
</div>
<!-- Playa Pelada -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-umbrella-beach"></i>
</div>
<h3>Playa Pelada</h3>
<p><strong>Length:</strong> 1 kilometer of intimate cove beach</p>
<p><strong>Best For:</strong> Swimming, tide pooling, sunset viewing</p>
<p><strong>Surf Conditions:</strong> Calmer waters ideal for swimming. Occasional reef breaks for experienced surfers at south end.</p>
<p><strong>Features:</strong> Scenic rock formations, tide pools with marine life, beach restaurants including the famous La Luna, excellent sunset views.</p>
</div>
<!-- Playa Garza -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-ship"></i>
</div>
<h3>Playa Garza</h3>
<p><strong>Length:</strong> 1.5 kilometers of gentle crescent beach</p>
<p><strong>Best For:</strong> Families, swimming, fishing village charm</p>
<p><strong>Conditions:</strong> Protected bay with calmer waters, perfect for families with children. Traditional fishing boats depart daily at dawn.</p>
<p><strong>Features:</strong> Authentic fishing village, calm swimming conditions, beachfront restaurants, local culture and fresh seafood.</p>
</div>
<!-- Ostional Beach -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-turtle"></i>
</div>
<h3>Ostional Wildlife Refuge</h3>
<p><strong>Length:</strong> 15 kilometers of protected coastline</p>
<p><strong>Best For:</strong> Wildlife viewing, sea turtle nesting</p>
<p><strong>Special Feature:</strong> World-famous arribadas (mass sea turtle nestings) occur monthly during rainy season (July-December).</p>
<p><strong>Conservation:</strong> Protected refuge with guided tours available. Witness thousands of Olive Ridley sea turtles nesting simultaneously.</p>
</div>
<!-- Surf Conditions Info -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-info-circle"></i>
</div>
<h3>Year-Round Surf</h3>
<p><strong>Wet Season (May-November):</strong> Consistent south swells, offshore winds, excellent surfing conditions, warmer water temperature (82-85°F).</p>
<p><strong>Dry Season (December-April):</strong> North and northwest swells, less crowded, slightly cooler water (78-82°F), consistent morning glass-off conditions.</p>
<p><strong>Wave Size:</strong> Typically 2-6 feet, occasionally larger during big swells. Multiple peaks spread crowds along the beach.</p>
</div>
<!-- Beach Safety -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-life-ring"></i>
</div>
<h3>Beach Safety & Tips</h3>
<p><strong>Rip Currents:</strong> Always swim near lifeguard stations at Playa Guiones. If caught in a rip current, swim parallel to shore.</p>
<p><strong>Sun Protection:</strong> Strong tropical sun requires SPF 50+ sunscreen, reapplied frequently. Seek shade during midday hours.</p>
<p><strong>Wildlife:</strong> Respect sea turtles and their nesting sites. Maintain distance from wildlife. Never touch or disturb nesting turtles.</p>
<p><strong>Environmental Care:</strong> Take all trash with you. Participate in beach cleanups. Support conservation efforts.</p>
</div>
</div>
</div>
</section>
<!-- Beach Activities -->
<section class="history" style="background: var(--light); padding: 5rem 0;">
<div class="container">
<div class="section-header">
<h2>Beach Activities & Amenities</h2>
<p>Make the most of your beach experience with these activities and services</p>
</div>
<div class="cultural-grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem;">
<!-- Surf Lessons -->
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-graduation-cap"></i>
</div>
<h4>Surf Lessons & Schools</h4>
<p>Multiple surf schools offer lessons for all levels, from first-time beginners to advanced coaching. Professional instructors provide equipment and ocean safety training.</p>
<div class="cultural-fact">
<strong>Duration:</strong> 1.5-2 hour sessions, group or private lessons available
</div>
</div>
<!-- Board Rentals -->
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-water"></i>
</div>
<h4>Board & Equipment Rentals</h4>
<p>Surfboards, bodyboards, stand-up paddleboards, and snorkel gear available for daily or weekly rental. Delivery to your accommodation available.</p>
<div class="cultural-fact">
<strong>Options:</strong> Shortboards, longboards, funboards, SUPs
</div>
</div>
<!-- Beach Yoga -->
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-om"></i>
</div>
<h4>Beach Yoga Classes</h4>
<p>Morning and sunset yoga sessions on the beach. Connect with nature while practicing vinyasa, hatha, or restorative yoga with ocean views.</p>
<div class="cultural-fact">
<strong>Schedule:</strong> Daily classes at sunrise (6:30 AM) and sunset (5:00 PM)
</div>
</div>
<!-- Horseback Riding -->
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-horse"></i>
</div>
<h4>Beach Horseback Riding</h4>
<p>Guided horseback tours along the beach at sunrise or sunset. Experience the beauty of Nosara from horseback while riding through surf and sand.</p>
<div class="cultural-fact">
<strong>Tours:</strong> 1-2 hour rides, suitable for all experience levels
</div>
</div>
</div>
</div>
</section>
<!-- Booking Widget -->
<%- include('partials/booking-widget') %>
<!-- Call to Action -->
<section class="contact" style="padding: 5rem 0;">
<div class="container">
<div class="section-header">
<h2>Ready to Experience Paradise?</h2>
<p>Book your beachfront vacation rental today and wake up to these stunning views</p>
</div>
<div style="text-align: center; margin-top: 2rem;">
<a href="/#properties" class="btn-primary" style="padding: 1.2rem 2.5rem; font-size: 1.1rem; border-radius: 50px; text-decoration: none; display: inline-block; background: var(--primary-color); color: var(--white);">
View Available Properties <i class="fas fa-arrow-right"></i>
</a>
<a href="/#contact" class="btn-secondary" style="padding: 1.2rem 2.5rem; font-size: 1.1rem; border-radius: 50px; text-decoration: none; display: inline-block; margin-left: 1rem; background: var(--accent-color); color: var(--white);">
Contact Us <i class="fas fa-envelope"></i>
</a>
</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</a></li>
<li><a href="/#properties">Properties</a></li>
<li><a href="/beaches">Beaches</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>© <%= currentYear %> 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');
});
// Close mobile menu when clicking on a link
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
hamburger.classList.remove('active');
navMenu.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'
});
}
});
});
// 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>
<!-- Activity Links Component -->
<script src="/js/activity-links.js"></script>
</body>
</html>