← back to Jill Website
views/surfing.ejs
517 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Surfing Paradise - Nosara Beachfront Rentals</title>
<meta name="description" content="Experience world-class surfing in Nosara, Costa Rica. Perfect waves for beginners and advanced surfers, professional surf schools, and year-round surf conditions.">
<!-- 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(0, 119, 182, 0.6) 0%, rgba(0, 180, 216, 0.6) 100%),
url('https://images.unsplash.com/photo-1502680390469-be75c86b636f?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">Surfing Paradise</h1>
<p class="hero-subtitle">Ride world-class waves in one of Costa Rica's premier surf destinations</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: 'surfing' }) %>
<!-- Surfing Introduction -->
<section class="experiences" style="padding: 5rem 0 3rem;">
<div class="container">
<div class="section-header">
<h2>Why Nosara is a Surfer's Dream</h2>
<p>Nosara is renowned worldwide as one of the best surf destinations in Central America, offering consistent waves, warm water, and a welcoming surf community year-round.</p>
</div>
<div style="max-width: 900px; margin: 2rem auto; padding: 2rem; background: linear-gradient(135deg, rgba(0, 119, 182, 0.05), rgba(0, 180, 216, 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);">
With over 7 kilometers of pristine coastline, Playa Guiones offers multiple surf breaks that cater to all skill levels. The consistent Pacific swells, offshore morning winds, and sandy bottom make it an ideal location for both learning to surf and advancing your skills. Whether you're catching your first wave or seeking the perfect barrel, Nosara's surf scene delivers an unforgettable experience.
</p>
</div>
</div>
</section>
<!-- Surfing Photos Gallery -->
<section class="villas" style="background: var(--light); padding: 4rem 0;">
<div class="container">
<div class="section-header">
<h2>Surf Photo Gallery</h2>
<p>Capture the thrill and beauty of surfing in Nosara</p>
</div>
<div class="villas-grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
<!-- Surf Photo 1 -->
<div class="villa-card" style="cursor: default;">
<div class="villa-image" style="height: 300px;">
<img
src="https://images.unsplash.com/photo-1502680390469-be75c86b636f?q=85&w=1200&auto=format&fit=crop"
alt="Surfer riding perfect wave at Playa Guiones"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Perfect Barrels</h3>
<p>Experience the thrill of riding clean, powerful waves with consistent offshore winds creating perfect conditions for advanced surfing.</p>
</div>
</div>
<!-- Surf 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="Beginner surfer learning with instructor at sunset"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Learn to Surf</h3>
<p>Professional surf instructors guide beginners through their first waves with patient instruction and expert ocean safety knowledge.</p>
</div>
</div>
<!-- Surf Photo 3 -->
<div class="villa-card" style="cursor: default;">
<div class="villa-image" style="height: 300px;">
<img
src="https://images.unsplash.com/photo-1527199372136-dff50c10ea34?q=85&w=1200&auto=format&fit=crop"
alt="Multiple surfers on lineup waiting for waves"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>The Lineup</h3>
<p>Join the friendly surf community at multiple breaks along the beach, with enough space for everyone to catch their share of waves.</p>
</div>
</div>
<!-- Surf Photo 4 -->
<div class="villa-card" style="cursor: default;">
<div class="villa-image" style="height: 300px;">
<img
src="https://images.unsplash.com/photo-1459314079206-9970f36c7784?q=85&w=1200&auto=format&fit=crop"
alt="Dawn patrol surfer carrying board at sunrise"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Dawn Patrol</h3>
<p>Start your day with glassy morning sessions as the sun rises over the Pacific, creating magical lighting and perfect surf conditions.</p>
</div>
</div>
<!-- Surf 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="Aerial view of surfers catching waves at multiple breaks"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Multiple Breaks</h3>
<p>With 7 kilometers of coastline, Playa Guiones offers numerous surf breaks ensuring you'll always find your perfect wave.</p>
</div>
</div>
<!-- Surf Photo 6 -->
<div class="villa-card" style="cursor: default;">
<div class="villa-image" style="height: 300px;">
<img
src="https://images.unsplash.com/photo-1502933691298-84fc14542831?q=85&w=1200&auto=format&fit=crop"
alt="Surfer performing cutback maneuver on wave face"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Performance Surfing</h3>
<p>Advanced surfers can hone their skills with powerful waves that allow for critical maneuvers and aerial moves.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Surf Breaks & Conditions -->
<section class="experiences" style="padding: 5rem 0;">
<div class="container">
<div class="section-header">
<h2>Surf Breaks & Conditions</h2>
<p>Understanding the waves and choosing the right break for your skill level</p>
</div>
<div class="experiences-grid">
<!-- Beginner Breaks -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-water"></i>
</div>
<h3>Beginner-Friendly Breaks</h3>
<p><strong>Location:</strong> Northern section of Playa Guiones near beach access points</p>
<p><strong>Wave Type:</strong> Gentle, rolling waves with soft white water perfect for learning</p>
<p><strong>Bottom:</strong> Sandy bottom provides safe learning environment</p>
<p><strong>Best Time:</strong> Mid to incoming tide, early morning for smaller crowds</p>
<p><strong>Ideal For:</strong> First-time surfers, surf school lessons, building confidence and fundamental skills</p>
</div>
<!-- Intermediate Breaks -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-wave-square"></i>
</div>
<h3>Intermediate Breaks</h3>
<p><strong>Location:</strong> Central section of Playa Guiones with multiple peaks</p>
<p><strong>Wave Type:</strong> Consistent 2-4 foot peaks with both lefts and rights</p>
<p><strong>Bottom:</strong> Sandy bottom with occasional sandbars creating defined peaks</p>
<p><strong>Best Time:</strong> Mid to high tide, offshore morning winds</p>
<p><strong>Ideal For:</strong> Progressing surfers working on turns, cutbacks, and wave selection</p>
</div>
<!-- Advanced Breaks -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-bolt"></i>
</div>
<h3>Advanced Breaks</h3>
<p><strong>Location:</strong> Southern sections and point breaks, Playa Pelada reef</p>
<p><strong>Wave Type:</strong> Powerful 4-8 foot waves with hollow sections and barrels</p>
<p><strong>Bottom:</strong> Sand and occasional reef breaks requiring experience</p>
<p><strong>Best Time:</strong> Big swell days, high tide at point breaks</p>
<p><strong>Ideal For:</strong> Experienced surfers seeking challenging conditions and performance waves</p>
</div>
<!-- Year-Round Conditions -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-calendar-alt"></i>
</div>
<h3>Year-Round Surf</h3>
<p><strong>Wet Season (May-November):</strong> Consistent south swells, offshore winds in morning, warm 82-85°F water, larger waves and powerful conditions</p>
<p><strong>Dry Season (December-April):</strong> North and northwest swells, less rainfall, slightly cooler 78-82°F water, consistent smaller waves</p>
<p><strong>Best Months:</strong> July-October for size, December-March for consistency and perfect conditions</p>
</div>
<!-- Tide Information -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-clock"></i>
</div>
<h3>Tide & Timing</h3>
<p><strong>Optimal Tides:</strong> Mid to high tide produces best wave shape and power</p>
<p><strong>Low Tide:</strong> Waves break further out, can be shallow near shore, better for experienced surfers</p>
<p><strong>Morning Sessions:</strong> Glass-off conditions with offshore winds (6-10 AM)</p>
<p><strong>Afternoon:</strong> Onshore winds can create choppier conditions (still surfable)</p>
<p><strong>Evening:</strong> Wind dies down for sunset sessions</p>
</div>
<!-- Safety Tips -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>Surf Safety</h3>
<p><strong>Rip Currents:</strong> Learn to identify and escape rip currents by swimming parallel to shore</p>
<p><strong>Leash Required:</strong> Always wear a surf leash to prevent losing your board</p>
<p><strong>Respect Locals:</strong> Share waves, take turns, follow proper lineup etiquette</p>
<p><strong>Sun Protection:</strong> Apply reef-safe SPF 50+ sunscreen, wear rash guard</p>
<p><strong>Stay Hydrated:</strong> Drink plenty of water before and after sessions</p>
</div>
</div>
</div>
</section>
<!-- Surf Lessons & Rentals -->
<section class="history" style="background: var(--light); padding: 5rem 0;">
<div class="container">
<div class="section-header">
<h2>Surf Lessons & Board Rentals</h2>
<p>Everything you need to experience Nosara's incredible surf</p>
</div>
<div class="cultural-grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem;">
<!-- Surf Schools -->
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-graduation-cap"></i>
</div>
<h4>Professional Surf Schools</h4>
<p>Certified ISA instructors with years of experience teaching all ages and skill levels. Small group sizes ensure personalized attention and rapid progression.</p>
<div class="cultural-fact">
<strong>Options:</strong> Private lessons, group lessons (max 4 students), multi-day packages, kids' surf camps
</div>
<div class="cultural-fact">
<strong>Includes:</strong> Surfboard, rash guard, instruction, ocean safety training
</div>
</div>
<!-- Beginner Packages -->
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-star"></i>
</div>
<h4>First-Timer Packages</h4>
<p>Comprehensive beginner programs include theory, beach practice, water safety, wave selection, and guaranteed to get you standing up on your first day.</p>
<div class="cultural-fact">
<strong>Duration:</strong> 2-hour sessions, 3-day or 5-day packages available
</div>
<div class="cultural-fact">
<strong>Price Range:</strong> $60-$90 per 2-hour session
</div>
</div>
<!-- Advanced Coaching -->
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-trophy"></i>
</div>
<h4>Advanced Coaching</h4>
<p>Performance coaching for intermediate and advanced surfers. Video analysis, technique refinement, aerial training, and competitive preparation.</p>
<div class="cultural-fact">
<strong>Focus Areas:</strong> Carving, barrel riding, aerials, competition strategy
</div>
<div class="cultural-fact">
<strong>Format:</strong> Private 1-on-1 coaching with video review
</div>
</div>
<!-- Board Rentals -->
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-water"></i>
</div>
<h4>Surfboard Rentals</h4>
<p>Wide selection of quality boards for all skill levels. Soft-top beginner boards, longboards, funboards, shortboards, and high-performance equipment.</p>
<div class="cultural-fact">
<strong>Rental Rates:</strong> Daily ($15-$30), weekly ($80-$150), monthly discounts available
</div>
<div class="cultural-fact">
<strong>Delivery:</strong> Free delivery to your rental property for weekly rentals
</div>
</div>
<!-- Equipment Sales -->
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-shopping-cart"></i>
</div>
<h4>Surf Shop & Gear</h4>
<p>Multiple surf shops offering new and used boards, wetsuits, leashes, wax, rash guards, fins, and all surf accessories. Expert staff provide recommendations.</p>
<div class="cultural-fact">
<strong>Services:</strong> Board repair, custom board orders, wetsuit fitting
</div>
<div class="cultural-fact">
<strong>Brands:</strong> Rip Curl, Billabong, Quiksilver, O'Neill, local shapers
</div>
</div>
<!-- Surf Photography -->
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-camera"></i>
</div>
<h4>Surf Photography</h4>
<p>Professional surf photographers capture your best waves. Perfect for commemorating your surf trip or building your portfolio.</p>
<div class="cultural-fact">
<strong>Packages:</strong> Single session or multi-day coverage
</div>
<div class="cultural-fact">
<strong>Deliverables:</strong> High-resolution digital photos, same-day turnaround available
</div>
</div>
</div>
<!-- Featured Surf Shop Section -->
<div style="max-width: 800px; margin: 4rem auto 0; padding: 2rem; background: white; border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
<div style="text-align: center; margin-bottom: 1.5rem;">
<h3 style="color: var(--primary-color); margin-bottom: 0.5rem;">Coconut Harry's Surf Shop</h3>
<p style="color: var(--dark); margin-bottom: 0.5rem;">Premier surf school and board rentals in Nosara since 2001</p>
<p style="color: #666; font-size: 0.9rem;"><i class="fas fa-map-marker-alt"></i> 20m Norte de Cafe de Paris, Nosara</p>
</div>
<!-- Real Contact Links -->
<div class="restaurant-contact" style="justify-content: center; flex-wrap: wrap; gap: 1rem;">
<a href="tel:+50626820574" class="contact-link"><i class="fas fa-phone"></i> +506 2682-0574</a>
<a href="https://wa.me/50626820574" target="_blank" rel="noopener noreferrer" class="contact-link" style="background: #25D366;"><i class="fab fa-whatsapp"></i> WhatsApp</a>
<a href="https://coconutharrys.com" target="_blank" rel="noopener noreferrer" class="contact-link"><i class="fas fa-globe"></i> Website</a>
<a href="mailto:surfschool@coconutharrys.com" class="contact-link" style="background: var(--accent-color);"><i class="fas fa-envelope"></i> Email</a>
<a href="https://www.instagram.com/coconutharrys" target="_blank" rel="noopener noreferrer" class="contact-link" style="background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);"><i class="fab fa-instagram"></i> Instagram</a>
</div>
<p style="text-align: center; margin-top: 1.5rem; color: #666; font-size: 0.9rem;">
<strong>170+ boards</strong> for all skill levels | Lessons, rentals & gear
</p>
</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 Catch Your Best Waves?</h2>
<p>Book your beachfront vacation rental and wake up steps from world-class surf</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="/surfing">Surfing</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>