HTML
338 lines
23.9 KB
Ayurvedic Sleep Health & Insomnia Relief — Nidra Practices & Herbal Teas
Ayurvedic sleep health guide — sleep routines, herbal teas, oil massage, and Nidra practices for natural insomnia relief and restful sleep.
Live Preview
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ayurvedic sleep health guide — sleep routines, herbal teas, oil massage, and Nidra practices for natural insomnia relief and restful sleep.">
<title>Ayurvedic Sleep Health & Insomnia Relief — Nidra Practices & Herbal Teas</title>
<!-- 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=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&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">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--primary-color: #2d5f4f;
--secondary-color: #8b7355;
--accent-color: #c9a96e;
--text-dark: #2c3e50;
--text-light: #6c757d;
--bg-light: #f8f9fa;
--bg-white: #ffffff;
--border-color: #e9ecef;
}
body { font-family: 'Inter', sans-serif; color: var(--text-dark); line-height: 1.6; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; font-weight: 600; line-height: 1.3; }
.navbar { position: sticky; top: 0; background: var(--bg-white); box-shadow: 0 2px 10px rgba(0,0,0,0.05); z-index: 1000; padding: 1rem 0; }
.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--primary-color); text-decoration: none; }
.nav-menu { display: flex; list-style: none; gap: 2rem; }
.nav-menu a { color: var(--text-dark); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.3s ease; }
.nav-menu a:hover { color: var(--primary-color); }
.mobile-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--text-dark); cursor: pointer; }
.hero { background: linear-gradient(135deg, rgba(45, 95, 79, 0.9), rgba(44, 62, 80, 0.85)), url('https://images.unsplash.com/photo-1518609878373-06d7a4321574?w=1600') center/cover; color: white; padding: 8rem 2rem 6rem; text-align: center; }
.hero-content { max-width: 800px; margin: 0 auto; }
.hero h1 { font-size: 3rem; margin-bottom: 1.5rem; font-weight: 700; }
.hero p { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.95; font-weight: 300; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
section { padding: 5rem 0; }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-header h2 { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 1rem; }
.section-header p { font-size: 1.1rem; color: var(--text-light); max-width: 700px; margin: 0 auto; }
.about { background: var(--bg-white); }
.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-image { border-radius: 8px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.1); }
.about-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-text h3 { font-size: 2rem; color: var(--primary-color); margin-bottom: 1.5rem; }
.about-text p { color: var(--text-light); margin-bottom: 1rem; line-height: 1.8; }
.services { background: var(--bg-light); }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.service-card { background: var(--bg-white); padding: 2.5rem 2rem; border-radius: 8px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--border-color); }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.service-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 1.5rem; }
.service-card h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-dark); }
.service-card p { color: var(--text-light); line-height: 1.7; }
.trust { background: var(--bg-white); }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin-top: 3rem; }
.trust-item { text-align: center; }
.trust-number { font-size: 3rem; font-weight: 700; color: var(--primary-color); font-family: 'Playfair Display', serif; margin-bottom: 0.5rem; }
.trust-label { font-size: 1.1rem; color: var(--text-light); font-weight: 500; }
.content-section { background: var(--bg-light); }
.content-grid { display: grid; gap: 3rem; }
.content-article { background: var(--bg-white); border-radius: 8px; overflow: hidden; display: grid; grid-template-columns: 300px 1fr; gap: 2rem; border: 1px solid var(--border-color); }
.article-image { height: 100%; min-height: 250px; }
.article-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-content { padding: 2rem 2rem 2rem 0; }
.article-content h3 { font-size: 1.75rem; color: var(--primary-color); margin-bottom: 1rem; }
.article-content p { color: var(--text-light); line-height: 1.8; margin-bottom: 1rem; }
.article-meta { display: flex; gap: 1.5rem; font-size: 0.9rem; color: var(--text-light); margin-top: 1.5rem; }
.article-meta i { margin-right: 0.5rem; color: var(--accent-color); }
.contact { background: var(--bg-white); }
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; max-width: 1000px; margin: 0 auto; }
.contact-info h3 { font-size: 1.75rem; color: var(--primary-color); margin-bottom: 1.5rem; }
.contact-info p { color: var(--text-light); margin-bottom: 2rem; line-height: 1.8; }
.contact-details { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-item { display: flex; align-items: start; gap: 1rem; }
.contact-item i { font-size: 1.25rem; color: var(--primary-color); margin-top: 0.25rem; }
.contact-item-content h4 { font-size: 1rem; margin-bottom: 0.25rem; color: var(--text-dark); }
.contact-item-content p { margin: 0; color: var(--text-light); }
.contact-form { background: var(--bg-light); padding: 2.5rem; border-radius: 8px; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; color: var(--text-dark); font-weight: 500; }
.form-group input, .form-group textarea { width: 100%; padding: 0.875rem 1rem; border: 1px solid var(--border-color); border-radius: 4px; font-family: 'Inter', sans-serif; font-size: 1rem; transition: border-color 0.3s ease; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); }
.form-group textarea { resize: vertical; min-height: 120px; }
.submit-btn { background: var(--primary-color); color: white; padding: 1rem 2.5rem; border: none; border-radius: 4px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: background 0.3s ease; width: 100%; }
.submit-btn:hover { background: #234a3d; }
footer { background: var(--text-dark); color: white; padding: 3rem 0 1.5rem; }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin-bottom: 2rem; }
.footer-section h3 { font-size: 1.25rem; margin-bottom: 1.5rem; color: var(--accent-color); }
.footer-section p { color: rgba(255,255,255,0.7); line-height: 1.8; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0.75rem; }
.footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.3s ease; }
.footer-links a:hover { color: var(--accent-color); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; text-align: center; color: rgba(255,255,255,0.6); font-size: 0.9rem; }
@media (max-width: 768px) {
.mobile-toggle { display: block; }
.nav-menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-white); flex-direction: column; padding: 1rem 2rem; box-shadow: 0 5px 10px rgba(0,0,0,0.1); display: none; }
.nav-menu.active { display: flex; }
.hero h1 { font-size: 2rem; }
.hero p { font-size: 1rem; }
.section-header h2 { font-size: 2rem; }
.about-content, .contact-wrapper { grid-template-columns: 1fr; gap: 2rem; }
.content-article { grid-template-columns: 1fr; }
.article-image { height: 250px; }
.article-content { padding: 2rem; }
section { padding: 3rem 0; }
}
</style>
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<a href="#" class="logo">Sleep Health</a>
<button class="mobile-toggle" aria-label="Toggle menu"><i class="fas fa-bars"></i></button>
<ul class="nav-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Sleep Solutions</a></li>
<li><a href="#knowledge">Knowledge</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<section id="home" class="hero">
<div class="hero-content">
<h1>Ayurvedic Sleep Health & Insomnia Relief</h1>
<p>Discover Ayurvedic sleep routines, herbal teas, oil massage, and Nidra practices for natural insomnia relief and deep, restorative, restful sleep.</p>
</div>
</section>
<section id="about" class="about">
<div class="container">
<div class="about-content">
<div class="about-image">
<img src="https://images.unsplash.com/photo-1518609878373-06d7a4321574?w=800" alt="Peaceful sleep and Ayurvedic practices">
</div>
<div class="about-text">
<h3>Nidra: The Ayurvedic Science of Sleep</h3>
<p>In Ayurveda, sleep (Nidra) is one of the three pillars of health, alongside diet (Ahara) and lifestyle (Vihara). Quality sleep is essential for tissue repair, immune function, mental clarity, and emotional balance. Poor sleep is considered a root cause of many diseases.</p>
<p>Insomnia is primarily a Vata disorder — characterized by an overactive mind, inability to fall asleep, and waking frequently. Pitta-type insomnia involves waking between 12-2 AM with active thoughts. Kapha sleep issues involve oversleeping and grogginess upon waking.</p>
<p>Ayurveda treats sleep issues holistically — addressing the root cause through evening routines, herbal teas, oil massage, and lifestyle adjustments that calm the nervous system and prepare the body for natural, restorative sleep.</p>
</div>
</div>
</div>
</section>
<section id="services" class="services">
<div class="container">
<div class="section-header">
<h2>Sleep Solutions by Dosha</h2>
<p>Ayurvedic approaches to sleep issues tailored to your constitution</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-icon"><i class="fas fa-wind"></i></div>
<h3>Vata Sleep Issues</h3>
<p>Difficulty falling asleep, racing thoughts, light and easily disturbed sleep. Needs grounding: warm oil massage, heavy warm foods, ashwagandha tea, and early bedtime by 9:30 PM.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-fire"></i></div>
<h3>Pitta Sleep Issues</h3>
<p>Falling asleep fine but waking 12-2 AM with intense mental activity. Needs cooling: coconut oil massage, brahmi tea, cool bedroom, and avoiding intense work in the evening.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-mountain"></i></div>
<h3>Kapha Sleep Issues</h3>
<p>Oversleeping, grogginess, difficulty waking. Needs stimulation: lighter dinner, earlier bedtime, dry brushing, and invigorating morning routine. Avoid daytime naps.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-mug-hot"></i></div>
<h3>Herbal Sleep Teas</h3>
<p>Ashwagandha, brahmi, jatamansi, chamomile, and valerian root teas calm the nervous system. Drink 1 cup 30 minutes before bed with a teaspoon of ghee for deeper sleep.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-spa"></i></div>
<h3>Abhyanga Before Bed</h3>
<p>Warm sesame oil (Vata) or brahmi-infused oil (Pitta) foot massage before bed grounds the nervous system. Focus on the soles of the feet and scalp for maximum calming effect.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-moon"></i></div>
<h3>Evening Routine</h3>
<p>Digital detox by 8 PM, warm shower, light reading, herbal tea, and meditation. Keep the bedroom cool, dark, and free of electronics. Sleep by 10 PM for optimal rest.</p>
</div>
</div>
</div>
</section>
<section class="trust">
<div class="container">
<div class="section-header">
<h2>Our Experience</h2>
<p>Helping individuals achieve restful sleep through Ayurvedic practices</p>
</div>
<div class="trust-grid">
<div class="trust-item"><div class="trust-number">14+</div><div class="trust-label">Years of Practice</div></div>
<div class="trust-item"><div class="trust-number">8000+</div><div class="trust-label">Clients Helped</div></div>
<div class="trust-item"><div class="trust-number">3</div><div class="trust-label">Dosha Sleep Types</div></div>
<div class="trust-item"><div class="trust-number">100%</div><div class="trust-label">Natural Approach</div></div>
</div>
</div>
</section>
<section id="knowledge" class="content-section">
<div class="container">
<div class="section-header">
<h2>Sleep Knowledge</h2>
<p>Explore Ayurvedic wisdom for achieving deep, restorative sleep</p>
</div>
<div class="content-grid">
<article class="content-article">
<div class="article-image">
<img src="https://images.unsplash.com/photo-1518609878373-06d7a4321574?w=600" alt="Evening sleep routine">
</div>
<div class="article-content">
<h3>The Perfect Ayurvedic Evening Routine for Deep Sleep</h3>
<p>Begin your wind-down at 8 PM. Turn off all screens — the blue light disrupts melatonin production. Take a warm shower or bath with a few drops of lavender essential oil. This drops core body temperature, signaling sleep time.</p>
<p>Perform abhyanga (warm oil massage) on your feet and scalp. Drink a cup of herbal tea — ashwagandha with warm milk and a pinch of nutmeg is ideal for Vata. Practice 10 minutes of Nadi Shodhana (alternate nostril breathing) or meditation. Be in bed by 10 PM, as the Pitta time after 10 PM brings a "second wind" of energy that makes falling asleep harder.</p>
<div class="article-meta">
<span><i class="far fa-clock"></i>7 min read</span>
<span><i class="far fa-folder"></i>Routines</span>
</div>
</div>
</article>
<article class="content-article">
<div class="article-image">
<img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=600" alt="Sleep herbs">
</div>
<div class="article-content">
<h3>Ayurvedic Herbs and Teas for Insomnia Relief</h3>
<p>Ashwagandha is the most effective herb for Vata-type insomnia — it calms the nervous system and reduces cortisol. Take 1 tsp with warm milk before bed. Jatamansi (spikenard) is a powerful sedative herb that promotes deep sleep without grogginess.</p>
<p>Brahmi calms the mind and is excellent for Pitta-type sleep issues. Tagara (Indian valerian) helps with both falling and staying asleep. Chamomile and lavender are gentle, safe options for all types. Always take herbs with warm milk or water, never cold, and avoid caffeine after 2 PM entirely.</p>
<div class="article-meta">
<span><i class="far fa-clock"></i>8 min read</span>
<span><i class="far fa-folder"></i>Herbs</span>
</div>
</div>
</article>
<article class="content-article">
<div class="article-image">
<img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=600" alt="Yoga nidra">
</div>
<div class="article-content">
<h3>Yoga Nidra: The Practice of Yogic Sleep</h3>
<p>Yoga Nidra, or "yogic sleep," is a guided meditation practice that induces a state of deep relaxation while maintaining awareness. Just 20-30 minutes of Yoga Nidra is said to provide the restorative benefits of 2-3 hours of regular sleep.</p>
<p>Lie in Savasana (corpse pose) and follow a guided practice that rotates awareness through the body, incorporates breath awareness, and uses visualization. It activates the parasympathetic nervous system, releases tension, and prepares the mind for natural sleep. Practice at bedtime or during afternoon rest periods for profound relaxation.</p>
<div class="article-meta">
<span><i class="far fa-clock"></i>6 min read</span>
<span><i class="far fa-folder"></i>Practices</span>
</div>
</div>
</article>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<div class="section-header">
<h2>Get Sleep Health Guidance</h2>
<p>Connect with our Ayurvedic specialists for personalized sleep support</p>
</div>
<div class="contact-wrapper">
<div class="contact-info">
<h3>Contact Information</h3>
<p>Our Ayurvedic sleep specialists can help identify your sleep imbalance type and create a personalized plan for deep, restorative sleep.</p>
<div class="contact-details">
<div class="contact-item"><i class="fas fa-map-marker-alt"></i><div class="contact-item-content"><h4>Location</h4><p>123 Wellness Street<br>Health District, City 12345</p></div></div>
<div class="contact-item"><i class="fas fa-phone"></i><div class="contact-item-content"><h4>Phone</h4><p>+1 (555) 123-4567</p></div></div>
<div class="contact-item"><i class="fas fa-envelope"></i><div class="contact-item-content"><h4>Email</h4><p>info@sleephealth.com</p></div></div>
<div class="contact-item"><i class="fas fa-clock"></i><div class="contact-item-content"><h4>Hours</h4><p>Monday - Friday: 9:00 AM - 6:00 PM<br>Saturday: 10:00 AM - 4:00 PM</p></div></div>
</div>
</div>
<div class="contact-form">
<form id="enquiryForm">
<div class="form-group"><label for="name">Full Name</label><input type="text" id="name" name="name" required></div>
<div class="form-group"><label for="email">Email Address</label><input type="email" id="email" name="email" required></div>
<div class="form-group"><label for="phone">Phone Number</label><input type="tel" id="phone" name="phone"></div>
<div class="form-group"><label for="message">Your Message</label><textarea id="message" name="message" required></textarea></div>
<button type="submit" class="submit-btn">Send Enquiry</button>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section"><h3>Sleep Health</h3><p>Helping individuals achieve deep, restorative sleep through Ayurvedic routines, herbs, and mind-body practices for natural insomnia relief.</p></div>
<div class="footer-section"><h3>Quick Links</h3><ul class="footer-links"><li><a href="#about">About</a></li><li><a href="#services">Sleep Solutions</a></li><li><a href="#knowledge">Knowledge Base</a></li><li><a href="#contact">Contact</a></li></ul></div>
<div class="footer-section"><h3>Resources</h3><ul class="footer-links"><li><a href="#">Evening Routine</a></li><li><a href="#">Sleep Herbs</a></li><li><a href="#">Yoga Nidra</a></li><li><a href="#">FAQ</a></li></ul></div>
<div class="footer-section"><h3>Legal</h3><ul class="footer-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Disclaimer</a></li><li><a href="#">Professional Standards</a></li></ul></div>
</div>
<div class="footer-bottom"><p>© 2026 Sleep Health Center. All rights reserved. This website is for informational purposes only and does not constitute medical advice.</p></div>
</div>
</footer>
<script>
const mobileToggle = document.querySelector('.mobile-toggle');
const navMenu = document.querySelector('.nav-menu');
mobileToggle.addEventListener('click', () => { navMenu.classList.toggle('active'); });
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' }); navMenu.classList.remove('active'); }
});
});
const form = document.getElementById('enquiryForm');
form.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(form);
const data = Object.fromEntries(formData);
console.log('Form submitted:', data);
alert('Thank you for your enquiry. We will get back to you within 24 hours.');
form.reset();
});
let lastScroll = 0;
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;
if (currentScroll > 100) { navbar.style.boxShadow = '0 2px 20px rgba(0,0,0,0.1)'; }
else { navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.05)'; }
lastScroll = currentScroll;
});
</script>
</body>
</html>