← back to Jill Website
views/yoga-wellness.ejs
505 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yoga & Wellness - Nosara Beachfront Rentals</title>
<meta name="description" content="Experience world-class yoga and wellness retreats in Nosara, Costa Rica. Daily classes, workshops, healing practices, and transformative experiences in paradise.">
<!-- 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(138, 43, 226, 0.5) 0%, rgba(75, 0, 130, 0.5) 100%),
url('https://images.unsplash.com/photo-1506126613408-eca07ce68773?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">Yoga & Wellness</h1>
<p class="hero-subtitle">Transform your mind, body, and spirit in Nosara's sacred wellness sanctuary</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: 'yoga-wellness' }) %>
<!-- Yoga Introduction -->
<section class="experiences" style="padding: 5rem 0 3rem;">
<div class="container">
<div class="section-header">
<h2>Why Nosara is a Global Wellness Destination</h2>
<p>Nosara is recognized worldwide as one of the premier yoga and wellness destinations, attracting practitioners, teachers, and healing artists from around the globe.</p>
</div>
<div style="max-width: 900px; margin: 2rem auto; padding: 2rem; background: linear-gradient(135deg, rgba(138, 43, 226, 0.05), rgba(75, 0, 130, 0.05)); border-radius: 15px; border-left: 4px solid #8a2be2;">
<p style="font-size: 1.1rem; line-height: 1.8; color: var(--dark);">
Nestled between pristine beaches and lush jungle, Nosara offers a unique combination of natural beauty, spiritual energy, and world-class yoga facilities. Whether you're a seasoned practitioner or beginning your wellness journey, you'll find authentic teachings, transformative workshops, and a supportive community dedicated to holistic health and conscious living.
</p>
</div>
</div>
</section>
<!-- Yoga Photos Gallery -->
<section class="villas" style="background: var(--light); padding: 4rem 0;">
<div class="container">
<div class="section-header">
<h2>Wellness Gallery</h2>
<p>Experience the beauty and tranquility of yoga and wellness in Nosara</p>
</div>
<div class="villas-grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
<!-- Yoga Photo 1 -->
<div class="villa-card" style="cursor: default;">
<div class="villa-image" style="height: 300px;">
<img
src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?q=85&w=1200&auto=format&fit=crop"
alt="Sunrise yoga session on the beach with ocean views"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Beach Yoga at Sunrise</h3>
<p>Start your day with peaceful morning practice on the sand as the sun rises over the Pacific, connecting breath with the rhythm of the waves.</p>
</div>
</div>
<!-- Yoga Photo 2 -->
<div class="villa-card" style="cursor: default;">
<div class="villa-image" style="height: 300px;">
<img
src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?q=85&w=1200&auto=format&fit=crop"
alt="Group meditation session in jungle yoga studio"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Jungle Studio Practice</h3>
<p>Practice in stunning open-air studios surrounded by tropical nature, where the sounds of howler monkeys and exotic birds enhance your experience.</p>
</div>
</div>
<!-- Yoga Photo 3 -->
<div class="villa-card" style="cursor: default;">
<div class="villa-image" style="height: 300px;">
<img
src="https://images.unsplash.com/photo-1545389336-cf090694435e?q=85&w=1200&auto=format&fit=crop"
alt="Healing spa treatment with natural ingredients"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Holistic Spa Treatments</h3>
<p>Indulge in healing therapies using organic Costa Rican ingredients, from traditional massage to energy healing and ayurvedic treatments.</p>
</div>
</div>
<!-- Yoga Photo 4 -->
<div class="villa-card" style="cursor: default;">
<div class="villa-image" style="height: 300px;">
<img
src="https://images.unsplash.com/photo-1599901860904-17e6ed7083a0?q=85&w=1200&auto=format&fit=crop"
alt="Peaceful meditation with ocean sunset backdrop"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Sunset Meditation</h3>
<p>End your day with guided meditation as the sun sets over the ocean, finding deep peace and connection with the natural beauty around you.</p>
</div>
</div>
<!-- Yoga Photo 5 -->
<div class="villa-card" style="cursor: default;">
<div class="villa-image" style="height: 300px;">
<img
src="https://images.unsplash.com/photo-1588286840104-8957b019727f?q=85&w=1200&auto=format&fit=crop"
alt="Advanced yoga practitioner in challenging pose"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Advanced Practice</h3>
<p>Deepen your practice with experienced teachers offering advanced asana workshops, inversions, arm balances, and philosophy studies.</p>
</div>
</div>
<!-- Yoga Photo 6 -->
<div class="villa-card" style="cursor: default;">
<div class="villa-image" style="height: 300px;">
<img
src="https://images.unsplash.com/photo-1542362567-b07e54358753?q=85&w=1200&auto=format&fit=crop"
alt="Wellness community gathering for healthy meal"
loading="lazy"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="villa-content">
<h3>Wellness Community</h3>
<p>Connect with like-minded souls through wellness workshops, healthy cooking classes, sound healing circles, and community gatherings.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Yoga Studios & Classes -->
<section class="experiences" style="padding: 5rem 0;">
<div class="container">
<div class="section-header">
<h2>Yoga Studios & Daily Classes</h2>
<p>World-renowned yoga centers offering diverse styles and expert instruction</p>
</div>
<div class="experiences-grid">
<!-- The Bodhi Tree -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-spa"></i>
</div>
<h3>The Bodhi Tree Yoga Resort</h3>
<p><strong>Style:</strong> Vinyasa Flow, Hatha, Yin Yoga, Restorative</p>
<p><strong>Classes:</strong> Daily morning (7 AM) and evening (5 PM) sessions</p>
<p><strong>Features:</strong> Open-air studio, ocean views, juice bar, boutique</p>
<p><strong>Teacher Training:</strong> 200-hour and 500-hour RYT certification programs</p>
<p><strong>Perfect For:</strong> All levels, retreat groups, serious practitioners seeking immersive experience</p>
<div class="restaurant-contact" style="margin-top: 1rem;">
<a href="https://bodhitreeyogaresort.com" target="_blank" rel="noopener noreferrer" class="contact-link"><i class="fas fa-globe"></i> Book Classes</a>
</div>
</div>
<!-- Nosara Yoga Institute -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-om"></i>
</div>
<h3>Nosara Yoga Institute</h3>
<p><strong>Style:</strong> Ashtanga, Power Yoga, Kundalini, Meditation</p>
<p><strong>Classes:</strong> Multiple daily classes from 6 AM - 7 PM</p>
<p><strong>Features:</strong> Three studios, wellness center, vegetarian café</p>
<p><strong>Workshops:</strong> Weekly philosophy lectures, pranayama intensives</p>
<p><strong>Perfect For:</strong> Traditional yogis, philosophy students, long-term practitioners</p>
</div>
<!-- Harmony Hotel -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-heart"></i>
</div>
<h3>Harmony Hotel Healing Center</h3>
<p><strong>Style:</strong> Gentle Flow, Yin Yoga, Meditation, Breathwork</p>
<p><strong>Classes:</strong> Daily beach yoga at 8 AM, studio classes at 4 PM</p>
<p><strong>Features:</strong> Beachfront platform, full spa, organic restaurant</p>
<p><strong>Specialty:</strong> Wellness retreats combining yoga, spa, and healthy cuisine</p>
<p><strong>Perfect For:</strong> Beginners, couples, luxury wellness seekers</p>
<div class="restaurant-contact" style="margin-top: 1rem;">
<a href="https://harmonynosara.com" target="_blank" rel="noopener noreferrer" class="contact-link"><i class="fas fa-globe"></i> Visit Hotel</a>
<a href="https://healingcentrenosara.com" target="_blank" rel="noopener noreferrer" class="contact-link"><i class="fas fa-om"></i> Healing Centre</a>
</div>
</div>
<!-- Tico Surf School Yoga -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-water"></i>
</div>
<h3>Surf & Yoga Fusion</h3>
<p><strong>Style:</strong> Power Yoga, Core Strength, Dynamic Flow</p>
<p><strong>Classes:</strong> Morning yoga (7 AM) + surf session packages</p>
<p><strong>Features:</strong> Outdoor yoga platform, surf-focused asana</p>
<p><strong>Specialty:</strong> Classes designed for surfers to build strength and flexibility</p>
<p><strong>Perfect For:</strong> Surfers, active yogis, those wanting combined surf/yoga experience</p>
</div>
<!-- Private & Beach Yoga -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-sun"></i>
</div>
<h3>Private & Beach Sessions</h3>
<p><strong>Style:</strong> Customized to your needs and experience level</p>
<p><strong>Options:</strong> One-on-one instruction, small groups, family yoga</p>
<p><strong>Location:</strong> Your rental property, beach, or private jungle setting</p>
<p><strong>Duration:</strong> 60, 75, or 90-minute sessions available</p>
<p><strong>Perfect For:</strong> Personalized attention, families, special occasions, flexibility in scheduling</p>
</div>
<!-- Drop-in Class Info -->
<div class="experience-card">
<div class="experience-icon">
<i class="fas fa-calendar-check"></i>
</div>
<h3>Drop-In Class Information</h3>
<p><strong>Single Class:</strong> $15-$25 depending on studio and class length</p>
<p><strong>Class Packages:</strong> 5-class pass ($65-$100), 10-class pass ($120-$180)</p>
<p><strong>Monthly Unlimited:</strong> $150-$220 for unlimited classes</p>
<p><strong>Booking:</strong> Walk-ins welcome, or reserve online/by phone</p>
<p><strong>What to Bring:</strong> Mat rentals available ($3), bring water and towel</p>
</div>
</div>
</div>
</section>
<!-- Workshops & Retreats -->
<section class="history" style="background: var(--light); padding: 5rem 0;">
<div class="container">
<div class="section-header">
<h2>Workshops & Wellness Retreats</h2>
<p>Transformative experiences for deepening your practice and healing</p>
</div>
<div class="cultural-grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem;">
<!-- Weekend Workshops -->
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-clock"></i>
</div>
<h4>Weekend Intensives</h4>
<p>Deep-dive workshops covering specific topics like inversions, backbends, arm balances, pranayama, or meditation techniques.</p>
<div class="cultural-fact">
<strong>Duration:</strong> 2-3 days, 4-6 hours daily
</div>
<div class="cultural-fact">
<strong>Topics:</strong> Anatomy, alignment, philosophy, teaching methodology
</div>
</div>
<!-- Week-Long Retreats -->
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-leaf"></i>
</div>
<h4>Transformational Retreats</h4>
<p>7-day immersive experiences combining daily yoga, meditation, workshops, healthy meals, excursions, and spa treatments for complete renewal.</p>
<div class="cultural-fact">
<strong>Includes:</strong> Accommodation, all meals, 2 yoga classes daily, workshops
</div>
<div class="cultural-fact">
<strong>Price Range:</strong> $1,500-$3,500 depending on accommodations
</div>
</div>
<!-- Sound Healing -->
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-music"></i>
</div>
<h4>Sound Healing Ceremonies</h4>
<p>Experience deep relaxation through crystal bowls, gongs, chimes, and voice. Weekly community circles and private sessions available.</p>
<div class="cultural-fact">
<strong>Sessions:</strong> Group ceremonies ($25), private sessions ($80-$120)
</div>
<div class="cultural-fact">
<strong>Schedule:</strong> Weekly full moon ceremonies, sunset sessions
</div>
</div>
<!-- Breathwork -->
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-wind"></i>
</div>
<h4>Breathwork & Pranayama</h4>
<p>Learn powerful breathing techniques including Wim Hof method, holotropic breathwork, and traditional pranayama for stress relief and vitality.</p>
<div class="cultural-fact">
<strong>Classes:</strong> Weekly workshops, private instruction available
</div>
<div class="cultural-fact">
<strong>Benefits:</strong> Stress reduction, increased energy, emotional release
</div>
</div>
<!-- Ayurveda -->
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-mortar-pestle"></i>
</div>
<h4>Ayurvedic Wellness</h4>
<p>Discover your dosha and receive personalized dietary, lifestyle, and herbal recommendations. Includes massage, treatments, and consultations.</p>
<div class="cultural-fact">
<strong>Services:</strong> Consultations, Abhyanga massage, Shirodhara, Panchakarma
</div>
<div class="cultural-fact">
<strong>Practitioners:</strong> Certified Ayurvedic doctors and therapists
</div>
</div>
<!-- Meditation Retreats -->
<div class="cultural-card">
<div class="cultural-icon">
<i class="fas fa-brain"></i>
</div>
<h4>Meditation & Mindfulness</h4>
<p>Silent meditation retreats, Vipassana courses, and guided mindfulness practices. Learn techniques for daily life integration and mental clarity.</p>
<div class="cultural-fact">
<strong>Options:</strong> 3-day, 7-day, or 10-day silent retreats
</div>
<div class="cultural-fact">
<strong>Traditions:</strong> Vipassana, Zen, Tibetan Buddhist, secular mindfulness
</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 Begin Your Wellness Journey?</h2>
<p>Book your beachfront sanctuary and awaken to daily yoga and healing practices</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="/yoga-wellness">Yoga & Wellness</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>