Hugging Face's logo

Spaces:
aminrezai161
/
innerpeace
Running

App Files Community
innerpeace / index.html
aminrezai161's picture
aminrezai161
Add 3 files
98984dc verified
raw
history blame contribute delete
68.9 kB
 <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inner Peace Meditation</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn.css" rel="stylesheet">
<style>
:root {
--primary: #4a7c59;
--primary-light: #6b8f7e;
--secondary: #3a5a40;
--accent: #8fbc94;
--light: #f8f9fa;
--dark: #212529;
}
body {
font-family: 'Inter', sans-serif;
transition: all 0.3s ease;
overflow-x: hidden;
}
body[dir="rtl"] {
font-family: 'Vazirmatn', sans-serif;
}
.hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
opacity: 0.7;
}
.hero-overlay {
background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
}
.meditation-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.testimonial-card {
background: rgba(255,255,255,0.9);
backdrop-filter: blur(5px);
}
.language-selector:hover .language-dropdown {
display: block;
}
.fade-in {
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.floating {
animation: floating 6s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
/* RTL styles */
body[dir="rtl"] .rtl-mirror {
transform: scaleX(-1);
}
body[dir="rtl"] .text-right {
text-align: left !important;
}
body[dir="rtl"] .text-left {
text-align: right !important;
}
body[dir="rtl"] .mr-2 {
margin-right: 0 !important;
margin-left: 0.5rem !important;
}
body[dir="rtl"] .ml-2 {
margin-left: 0 !important;
margin-right: 0.5rem !important;
}
body[dir="rtl"] .ml-4 {
margin-left: 0 !important;
margin-right: 1rem !important;
}
body[dir="rtl"] .mr-4 {
margin-right: 0 !important;
margin-left: 1rem !important;
}
body[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) {
margin-right: 0.5rem !important;
margin-left: 0 !important;
}
body[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]) {
margin-right: 0.75rem !important;
margin-left: 0 !important;
}
body[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]) {
margin-right: 1rem !important;
margin-left: 0 !important;
}
body[dir="rtl"] .space-x-8 > :not([hidden]) ~ :not([hidden]) {
margin-right: 2rem !important;
margin-left: 0 !important;
}
body[dir="rtl"] .pl-4 {
padding-left: 0 !important;
padding-right: 1rem !important;
}
body[dir="rtl"] .pr-4 {
padding-right: 0 !important;
padding-left: 1rem !important;
}
body[dir="rtl"] .lg:pr-12 {
padding-right: 0 !important;
padding-left: 3rem !important;
}
body[dir="rtl"] .rounded-l-md {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-top-right-radius: 0.375rem !important;
border-bottom-right-radius: 0.375rem !important;
}
body[dir="rtl"] .rounded-r-md {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-top-left-radius: 0.375rem !important;
border-bottom-left-radius: 0.375rem !important;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- Language switcher (hidden by default, shown with JS) -->
<div id="language-switcher" class="fixed bottom-4 right-4 z-50 hidden">
<div class="bg-white p-2 rounded-full shadow-lg">
<button onclick="toggleLanguage('en')" class="px-3 py-1 rounded-full hover:bg-gray-100">🇬🇧</button>
<button onclick="toggleLanguage('de')" class="px-3 py-1 rounded-full hover:bg-gray-100">🇩🇪</button>
<button onclick="toggleLanguage('fa')" class="px-3 py-1 rounded-full hover:bg-gray-100">🇮🇷</button>
</div>
</div>
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-40">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2 rtl:space-x-reverse">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-400 to-blue-500 flex items-center justify-center">
<i class="fas fa-spa text-white"></i>
</div>
<span class="text-xl font-semibold text-gray-800">InnerPeace</span>
</div>
<div class="hidden md:flex items-center space-x-8 rtl:space-x-reverse">
<nav>
<ul class="flex space-x-8 rtl:space-x-reverse" id="main-nav">
<li><a href="#home" class="text-gray-700 hover:text-green-600 transition">Home</a></li>
<li><a href="#meditations" class="text-gray-700 hover:text-green-600 transition">Meditations</a></li>
<li><a href="#blog" class="text-gray-700 hover:text-green-600 transition">Articles</a></li>
<li><a href="#about" class="text-gray-700 hover:text-green-600 transition">About</a></li>
<li><a href="#contact" class="text-gray-700 hover:text-green-600 transition">Contact</a></li>
</ul>
</nav>
<div class="language-selector relative">
<button class="flex items-center space-x-1 text-gray-700 hover:text-green-600 rtl:space-x-reverse">
<span id="current-language">🇬🇧 English</span>
<i class="fas fa-chevron-down text-xs"></i>
</button>
<div class="language-dropdown absolute right-0 rtl:right-auto rtl:left-0 mt-2 w-40 bg-white rounded-md shadow-lg py-1 z-50 hidden">
<a href="#" onclick="changeLanguage('en')" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">🇬🇧 English</a>
<a href="#" onclick="changeLanguage('de')" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">🇩🇪 Deutsch</a>
<a href="#" onclick="changeLanguage('fa')" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">🇮🇷 فارسی</a>
</div>
</div>
<div class="flex space-x-3 rtl:space-x-reverse">
<a href="#" class="px-4 py-2 text-gray-700 hover:text-green-600">Login</a>
<a href="#" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition">Sign Up</a>
</div>
</div>
<button id="mobile-menu-button" class="md:hidden text-gray-700">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 border-t">
<nav>
<ul class="space-y-3" id="mobile-main-nav">
<li><a href="#home" class="block py-2 text-gray-700 hover:text-green-600">Home</a></li>
<li><a href="#meditations" class="block py-2 text-gray-700 hover:text-green-600">Meditations</a></li>
<li><a href="#blog" class="block py-2 text-gray-700 hover:text-green-600">Articles</a></li>
<li><a href="#about" class="block py-2 text-gray-700 hover:text-green-600">About</a></li>
<li><a href="#contact" class="block py-2 text-gray-700 hover:text-green-600">Contact</a></li>
</ul>
</nav>
<div class="mt-4 pt-4 border-t">
<div class="language-selector relative">
<button class="flex items-center space-x-1 text-gray-700 hover:text-green-600 rtl:space-x-reverse">
<span id="mobile-current-language">🇬🇧 English</span>
<i class="fas fa-chevron-down text-xs"></i>
</button>
<div class="language-dropdown absolute right-0 rtl:right-auto rtl:left-0 mt-2 w-40 bg-white rounded-md shadow-lg py-1 z-50 hidden">
<a href="#" onclick="changeLanguage('en')" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">🇬🇧 English</a>
<a href="#" onclick="changeLanguage('de')" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">🇩🇪 Deutsch</a>
<a href="#" onclick="changeLanguage('fa')" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">🇮🇷 فارسی</a>
</div>
</div>
<div class="mt-4 flex space-x-3 rtl:space-x-reverse">
<a href="#" class="flex-1 text-center px-4 py-2 text-gray-700 hover:text-green-600 border rounded-md">Login</a>
<a href="#" class="flex-1 text-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">Sign Up</a>
</div>
</div>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="relative h-screen flex items-center justify-center overflow-hidden">
<video autoplay muted loop class="hero-video">
<source src="https://assets.mixkit.co/videos/preview/mixkit-woman-meditating-under-a-waterfall-3971-large.mp4" type="video/mp4">
</video>
<div class="hero-overlay absolute inset-0"></div>
<div class="container mx-auto px-4 z-10 text-center text-white">
<h1 class="text-4xl md:text-6xl font-bold mb-6 fade-in" id="hero-title">Welcome to your world of inner peace</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto fade-in" id="hero-subtitle">Guided meditations for soul, body, and mind</p>
<a href="#meditations" class="inline-block px-8 py-3 bg-green-600 text-white rounded-full text-lg font-medium hover:bg-green-700 transition transform hover:scale-105 fade-in" id="hero-cta">Get Started</a>
</div>
<div class="absolute bottom-10 left-0 right-0 flex justify-center">
<a href="#meditations" class="text-white animate-bounce">
<i class="fas fa-chevron-down text-2xl"></i>
</a>
</div>
</section>
<!-- Meditation Categories -->
<section id="meditations" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4" id="meditation-title">Meditation Categories</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto" id="meditation-subtitle">Choose from our carefully curated meditation sessions</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Meditation Card 1 -->
<div class="meditation-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
<div class="h-48 bg-gradient-to-br from-blue-100 to-green-100 flex items-center justify-center">
<i class="fas fa-moon text-5xl text-blue-600"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2" id="meditation-1-title">Sleep Meditation</h3>
<p class="text-gray-600 mb-4" id="meditation-1-desc">Calm your mind for a restful night</p>
<button class="w-full py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center justify-center space-x-2 rtl:space-x-reverse">
<i class="fas fa-play"></i>
<span id="meditation-1-button">Listen</span>
</button>
</div>
</div>
<!-- Meditation Card 2 -->
<div class="meditation-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
<div class="h-48 bg-gradient-to-br from-purple-100 to-pink-100 flex items-center justify-center">
<i class="fas fa-chakra text-5xl text-purple-600"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2" id="meditation-2-title">Chakra Activation</h3>
<p class="text-gray-600 mb-4" id="meditation-2-desc">Balance your energy centers</p>
<button class="w-full py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center justify-center space-x-2 rtl:space-x-reverse">
<i class="fas fa-play"></i>
<span id="meditation-2-button">Listen</span>
</button>
</div>
</div>
<!-- Meditation Card 3 -->
<div class="meditation-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
<div class="h-48 bg-gradient-to-br from-yellow-100 to-orange-100 flex items-center justify-center">
<i class="fas fa-heart text-5xl text-red-600"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2" id="meditation-3-title">Self-Love</h3>
<p class="text-gray-600 mb-4" id="meditation-3-desc">Cultivate compassion for yourself</p>
<button class="w-full py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center justify-center space-x-2 rtl:space-x-reverse">
<i class="fas fa-play"></i>
<span id="meditation-3-button">Listen</span>
</button>
</div>
</div>
<!-- Meditation Card 4 -->
<div class="meditation-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
<div class="h-48 bg-gradient-to-br from-green-100 to-teal-100 flex items-center justify-center">
<i class="fas fa-sun text-5xl text-yellow-600"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2" id="meditation-4-title">Morning Boost</h3>
<p class="text-gray-600 mb-4" id="meditation-4-desc">Start your day with positive energy</p>
<button class="w-full py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center justify-center space-x-2 rtl:space-x-reverse">
<i class="fas fa-play"></i>
<span id="meditation-4-button">Listen</span>
</button>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="inline-block px-6 py-3 border-2 border-green-600 text-green-600 rounded-full hover:bg-green-600 hover:text-white transition" id="view-all-meditations">View All Meditations</a>
</div>
</div>
</section>
<!-- Daily Meditation -->
<section class="py-20 bg-gradient-to-br from-green-50 to-blue-50">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
<div class="md:flex">
<div class="md:w-1/2 bg-green-600 flex items-center justify-center p-8">
<div class="text-center text-white">
<i class="fas fa-calendar-day text-6xl mb-6 floating"></i>
<h3 class="text-2xl font-bold mb-2" id="daily-meditation-title">Daily Meditation</h3>
<p class="mb-6" id="daily-meditation-subtitle">A new guided session every day</p>
<button class="px-6 py-2 bg-white text-green-600 rounded-full flex items-center mx-auto space-x-2 rtl:space-x-reverse hover:bg-gray-100">
<i class="fas fa-bell"></i>
<span id="daily-meditation-reminder">Get Daily Reminders</span>
</button>
</div>
</div>
<div class="md:w-1/2 p-8">
<div class="flex items-center mb-4 rtl:flex-row-reverse">
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4 rtl:mr-0 rtl:ml-4">
<i class="fas fa-spa text-green-600"></i>
</div>
<div>
<h4 class="font-semibold" id="today-meditation-title">Today's Meditation</h4>
<p class="text-sm text-gray-500" id="today-meditation-date">June 15, 2023</p>
</div>
</div>
<div class="mb-6">
<p class="text-gray-700 mb-4" id="daily-meditation-text">
Today, we invite you to take a deep breath. Relax your body and allow your inner peace to flow freely.
This moment is just for you. You deserve calm and love.
</p>
<audio controls class="w-full mt-4">
<source src="#" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div class="flex justify-between items-center">
<div class="flex space-x-2 rtl:space-x-reverse">
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm" id="duration">10 min</span>
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm" id="category">Mindfulness</span>
</div>
<button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center space-x-2 rtl:space-x-reverse">
<i class="fas fa-share-alt"></i>
<span id="share-button">Share</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Articles/Blog -->
<section id="blog" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4" id="blog-title">Knowledge & Inspiration</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto" id="blog-subtitle">Learn more about meditation and mindfulness</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Article 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
<div class="h-48 bg-gradient-to-br from-purple-50 to-indigo-50 flex items-center justify-center">
<i class="fas fa-book-open text-5xl text-purple-600"></i>
</div>
<div class="p-6">
<div class="flex items-center mb-3">
<span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Article</span>
<span class="ml-3 text-sm text-gray-500" id="article-1-date">June 10, 2023</span>
</div>
<h3 class="text-xl font-semibold mb-3" id="article-1-title">How Meditation Helps You Sleep Better</h3>
<p class="text-gray-600 mb-4" id="article-1-excerpt">Discover the science behind meditation and how it can improve your sleep quality and duration.</p>
<a href="#" class="text-green-600 font-medium flex items-center" id="article-1-link">
<span>Read More</span>
<i class="fas fa-arrow-right ml-2 rtl:ml-0 rtl:mr-2 rtl:transform rtl:rotate-180"></i>
</a>
</div>
</div>
<!-- Article 2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
<div class="h-48 bg-gradient-to-br from-blue-50 to-cyan-50 flex items-center justify-center">
<i class="fas fa-chakra text-5xl text-blue-600"></i>
</div>
<div class="p-6">
<div class="flex items-center mb-3">
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Guide</span>
<span class="ml-3 text-sm text-gray-500" id="article-2-date">May 28, 2023</span>
</div>
<h3 class="text-xl font-semibold mb-3" id="article-2-title">The Power of Gratitude in Energy Alignment</h3>
<p class="text-gray-600 mb-4" id="article-2-excerpt">Learn how practicing gratitude can align your energy centers and attract more abundance.</p>
<a href="#" class="text-green-600 font-medium flex items-center" id="article-2-link">
<span>Read More</span>
<i class="fas fa-arrow-right ml-2 rtl:ml-0 rtl:mr-2 rtl:transform rtl:rotate-180"></i>
</a>
</div>
</div>
<!-- Article 3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
<div class="h-48 bg-gradient-to-br from-pink-50 to-red-50 flex items-center justify-center">
<i class="fas fa-child text-5xl text-pink-600"></i>
</div>
<div class="p-6">
<div class="flex items-center mb-3">
<span class="px-3 py-1 bg-pink-100 text-pink-800 rounded-full text-sm">Healing</span>
<span class="ml-3 text-sm text-gray-500" id="article-3-date">May 15, 2023</span>
</div>
<h3 class="text-xl font-semibold mb-3" id="article-3-title">Inner Child Healing: What It Is and How to Start</h3>
<p class="text-gray-600 mb-4" id="article-3-excerpt">Begin your journey of healing childhood wounds and reconnecting with your authentic self.</p>
<a href="#" class="text-green-600 font-medium flex items-center" id="article-3-link">
<span>Read More</span>
<i class="fas fa-arrow-right ml-2 rtl:ml-0 rtl:mr-2 rtl:transform rtl:rotate-180"></i>
</a>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="inline-block px-6 py-3 border-2 border-green-600 text-green-600 rounded-full hover:bg-green-600 hover:text-white transition" id="view-all-articles">View All Articles</a>
</div>
</div>
</section>
<!-- Meditation Videos -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4" id="videos-title">Meditation Videos</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto" id="videos-subtitle">Visual guided meditations for deeper relaxation</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Video 1 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
<div class="relative h-48 bg-gray-200">
<img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Meditation in nature" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
<button class="w-16 h-16 bg-white bg-opacity-80 rounded-full flex items-center justify-center text-green-600 hover:bg-opacity-100 transition">
<i class="fas fa-play text-xl"></i>
</button>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2" id="video-1-title">Morning Meditation in the Forest</h3>
<p class="text-gray-600 mb-4 flex items-center">
<i class="fas fa-clock mr-2 rtl:mr-0 rtl:ml-2"></i>
<span id="video-1-duration">15 minutes</span>
</p>
<div class="flex justify-between items-center">
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm" id="video-1-category">Morning</span>
<div class="flex space-x-3 rtl:space-x-reverse">
<button class="text-gray-500 hover:text-green-600">
<i class="fab fa-youtube"></i>
</button>
<button class="text-gray-500 hover:text-green-600">
<i class="fas fa-share-alt"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Video 2 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
<div class="relative h-48 bg-gray-200">
<img src="https://images.unsplash.com/photo-1530006260111-32b00df8168d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Meditation at sunset" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
<button class="w-16 h-16 bg-white bg-opacity-80 rounded-full flex items-center justify-center text-green-600 hover:bg-opacity-100 transition">
<i class="fas fa-play text-xl"></i>
</button>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2" id="video-2-title">Sunset Gratitude Meditation</h3>
<p class="text-gray-600 mb-4 flex items-center">
<i class="fas fa-clock mr-2 rtl:mr-0 rtl:ml-2"></i>
<span id="video-2-duration">10 minutes</span>
</p>
<div class="flex justify-between items-center">
<span class="px-3 py-1 bg-orange-100 text-orange-800 rounded-full text-sm" id="video-2-category">Gratitude</span>
<div class="flex space-x-3 rtl:space-x-reverse">
<button class="text-gray-500 hover:text-green-600">
<i class="fab fa-youtube"></i>
</button>
<button class="text-gray-500 hover:text-green-600">
<i class="fas fa-share-alt"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Video 3 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
<div class="relative h-48 bg-gray-200">
<img src="https://images.unsplash.com/photo-1518604666860-9ed391f76460?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Meditation by the ocean" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
<button class="w-16 h-16 bg-white bg-opacity-80 rounded-full flex items-center justify-center text-green-600 hover:bg-opacity-100 transition">
<i class="fas fa-play text-xl"></i>
</button>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold mb-2" id="video-3-title">Ocean Waves for Deep Sleep</h3>
<p class="text-gray-600 mb-4 flex items-center">
<i class="fas fa-clock mr-2 rtl:mr-0 rtl:ml-2"></i>
<span id="video-3-duration">30 minutes</span>
</p>
<div class="flex justify-between items-center">
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm" id="video-3-category">Sleep</span>
<div class="flex space-x-3 rtl:space-x-reverse">
<button class="text-gray-500 hover:text-green-600">
<i class="fab fa-youtube"></i>
</button>
<button class="text-gray-500 hover:text-green-600">
<i class="fas fa-share-alt"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="inline-block px-6 py-3 border-2 border-green-600 text-green-600 rounded-full hover:bg-green-600 hover:text-white transition" id="view-all-videos">View All Videos</a>
</div>
</div>
</section>
<!-- Premium Section -->
<section class="py-20 bg-gradient-to-r from-green-600 to-blue-600 text-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6" id="premium-title">Unlock Premium Content</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto" id="premium-subtitle">Access exclusive meditations, courses, and high-quality audio for your journey</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
<div class="bg-white bg-opacity-10 rounded-xl p-6 backdrop-filter backdrop-blur-sm">
<div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-headphones text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3" id="premium-feature-1">High Quality Audio</h3>
<p class="text-white text-opacity-80" id="premium-feature-1-desc">Studio-recorded meditations with crystal clear sound</p>
</div>
<div class="bg-white bg-opacity-10 rounded-xl p-6 backdrop-filter backdrop-blur-sm">
<div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-gem text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3" id="premium-feature-2">Exclusive Content</h3>
<p class="text-white text-opacity-80" id="premium-feature-2-desc">Access to premium-only meditations and courses</p>
</div>
<div class="bg-white bg-opacity-10 rounded-xl p-6 backdrop-filter backdrop-blur-sm">
<div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-infinity text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3" id="premium-feature-3">Unlimited Access</h3>
<p class="text-white text-opacity-80" id="premium-feature-3-desc">Download and listen offline anytime, anywhere</p>
</div>
</div>
<button class="px-8 py-4 bg-white text-green-600 rounded-full text-lg font-bold hover:bg-gray-100 transition transform hover:scale-105" id="go-premium-button">
Go Premium - $9.99/month
</button>
<p class="mt-4 text-white text-opacity-80" id="premium-note">7-day free trial. Cancel anytime.</p>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4" id="testimonials-title">What Our Community Says</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto" id="testimonials-subtitle">Join thousands of people finding peace through meditation</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="testimonial-card rounded-xl p-8 shadow-md">
<div class="flex items-center mb-6 rtl:flex-row-reverse">
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-pink-400 to-purple-500 flex items-center justify-center text-white font-bold text-xl">S</div>
<div class="ml-4 rtl:ml-0 rtl:mr-4">
<h4 class="font-semibold" id="testimonial-1-name">Sarah M.</h4>
<div class="flex mt-1">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
</div>
<p class="text-gray-700 italic" id="testimonial-1-text">
"The sleep meditations have completely transformed my nights. I fall asleep faster and wake up feeling refreshed. Thank you for this amazing resource!"
</p>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-card rounded-xl p-8 shadow-md">
<div class="flex items-center mb-6 rtl:flex-row-reverse">
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-blue-400 to-teal-500 flex items-center justify-center text-white font-bold text-xl">M</div>
<div class="ml-4 rtl:ml-0 rtl:mr-4">
<h4 class="font-semibold" id="testimonial-2-name">Michael T.</h4>
<div class="flex mt-1">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
</div>
<p class="text-gray-700 italic" id="testimonial-2-text">
"As someone new to meditation, the guided sessions made it so easy to start. The morning meditations help me begin each day with clarity and purpose."
</p>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-card rounded-xl p-8 shadow-md">
<div class="flex items-center mb-6 rtl:flex-row-reverse">
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-green-400 to-blue-500 flex items-center justify-center text-white font-bold text-xl">A</div>
<div class="ml-4 rtl:ml-0 rtl:mr-4">
<h4 class="font-semibold" id="testimonial-3-name">Amina K.</h4>
<div class="flex mt-1">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star-half-alt text-yellow-400"></i>
</div>
</div>
</div>
<p class="text-gray-700 italic" id="testimonial-3-text">
"The chakra meditations have helped me release so much blocked energy. I feel more balanced and at peace than ever before in my life."
</p>
</div>
</div>
</div>
</section>
<!-- About Us -->
<section id="about" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12 rtl:lg:pr-0 rtl:lg:pl-12">
<h2 class="text-3xl md:text-4xl font-bold mb-6" id="about-title">About InnerPeace</h2>
<p class="text-lg text-gray-700 mb-6" id="about-text-1">
Welcome to our meditation space. We are here to help you find your inner peace. Meditation is more than a practice — it's a journey toward awareness, self-love, and freedom from daily stress.
</p>
<p class="text-lg text-gray-700 mb-8" id="about-text-2">
Every day, we share positive-energy meditations to calm your mind and soothe your soul. You're not alone on this path. The universe has chosen you to awaken and walk this bright path. Stay with us, and let your inner voice be heard.
</p>
<div class="flex space-x-4 rtl:space-x-reverse">
<a href="#" class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center hover:bg-green-700">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center hover:bg-green-700">
<i class="fab fa-youtube"></i>
</a>
<a href="#" class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center hover:bg-green-700">
<i class="fab fa-spotify"></i>
</a>
<a href="#" class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center hover:bg-green-700">
<i class="fab fa-tiktok"></i>
</a>
</div>
</div>
<div class="lg:w-1/2">
<div class="bg-white p-2 rounded-xl shadow-lg">
<img src="https://images.unsplash.com/photo-1544376798-89aa2b74652a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Meditation space" class="w-full h-auto rounded-lg">
</div>
</div>
</div>
</div>
</section>
<!-- Contact Us -->
<section id="contact" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4" id="contact-title">Contact Us</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto" id="contact-subtitle">We'd love to hear from you</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div>
<h3 class="text-xl font-semibold mb-4" id="contact-info-title">Get in Touch</h3>
<div class="space-y-4">
<div class="flex items-start rtl:flex-row-reverse">
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-4 rtl:mr-0 rtl:ml-4">
<i class="fas fa-envelope"></i>
</div>
<div>
<h4 class="font-medium" id="email-title">Email</h4>
<p class="text-gray-600">hello@innerpeace.com</p>
</div>
</div>
<div class="flex items-start rtl:flex-row-reverse">
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-4 rtl:mr-0 rtl:ml-4">
<i class="fas fa-phone-alt"></i>
</div>
<div>
<h4 class="font-medium" id="phone-title">Phone</h4>
<p class="text-gray-600">+1 (555) 123-4567</p>
</div>
</div>
<div class="flex items-start rtl:flex-row-reverse">
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-4 rtl:mr-0 rtl:ml-4">
<i class="fas fa-map-marker-alt"></i>
</div>
<div>
<h4 class="font-medium" id="address-title">Address</h4>
<p class="text-gray-600">123 Peace Street, Serenity Valley, CA 90210</p>
</div>
</div>
</div>
<h3 class="text-xl font-semibold mt-8 mb-4" id="follow-us-title">Follow Us</h3>
<div class="flex space-x-4 rtl:space-x-reverse">
<a href="#" class="w-10 h-10 bg-gray-100 text-gray-700 rounded-full flex items-center justify-center hover:bg-green-600 hover:text-white">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-100 text-gray-700 rounded-full flex items-center justify-center hover:bg-green-600 hover:text-white">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-100 text-gray-700 rounded-full flex items-center justify-center hover:bg-green-600 hover:text-white">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="w-10 h-10 bg-gray-100 text-gray-700 rounded-full flex items-center justify-center hover:bg-green-600 hover:text-white">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
<div>
<form class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1" id="name-label">Name</label>
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1" id="email-label">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500">
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-1" id="message-label">Message</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"></textarea>
</div>
<button type="submit" class="w-full px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 transition" id="submit-button">Send Message</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-2 rtl:space-x-reverse mb-4">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-green-400 to-blue-500 flex items-center justify-center">
<i class="fas fa-spa text-white text-sm"></i>
</div>
<span class="text-xl font-semibold">InnerPeace</span>
</div>
<p class="text-gray-400 mb-4" id="footer-description">Guided meditations for soul, body, and mind.</p>
<div class="flex space-x-4 rtl:space-x-reverse">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-youtube"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-spotify"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-tiktok"></i>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4" id="footer-links-title">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-white transition" id="footer-link-1">Home</a></li>
<li><a href="#meditations" class="text-gray-400 hover:text-white transition" id="footer-link-2">Meditations</a></li>
<li><a href="#blog" class="text-gray-400 hover:text-white transition" id="footer-link-3">Articles</a></li>
<li><a href="#about" class="text-gray-400 hover:text-white transition" id="footer-link-4">About Us</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-white transition" id="footer-link-5">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4" id="footer-help-title">Help</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition" id="footer-help-1">FAQs</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition" id="footer-help-2">Privacy Policy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition" id="footer-help-3">Terms of Service</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition" id="footer-help-4">Refund Policy</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4" id="footer-newsletter-title">Newsletter</h3>
<p class="text-gray-400 mb-4" id="footer-newsletter-text">Subscribe to receive daily meditations and updates.</p>
<form class="flex">
<input type="email" placeholder="Your email" class="px-4 py-2 w-full rounded-l-md focus:outline-none text-gray-900">
<button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-r-md hover:bg-green-700 transition">
<i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0" id="copyright">© 2023 InnerPeace. All rights reserved.</p>
<div class="flex items-center space-x-4 rtl:space-x-reverse">
<div class="language-selector relative">
<button class="flex items-center space-x-1 text-gray-400 hover:text-white rtl:space-x-reverse">
<span id="footer-current-language">🇬🇧 English</span>
<i class="fas fa-chevron-down text-xs"></i>
</button>
<div class="language-dropdown absolute right-0 rtl:right-auto rtl:left-0 bottom-full mb-2 w-40 bg-gray-800 rounded-md shadow-lg py-1 z-50 hidden">
<a href="#" onclick="changeLanguage('en')" class="block px-4 py-2 text-gray-400 hover:bg-gray-700 hover:text-white">🇬🇧 English</a>
<a href="#" onclick="changeLanguage('de')" class="block px-4 py-2 text-gray-400 hover:bg-gray-700 hover:text-white">🇩🇪 Deutsch</a>
<a href="#" onclick="changeLanguage('fa')" class="block px-4 py-2 text-gray-400 hover:bg-gray-700 hover:text-white">🇮🇷 فارسی</a>
</div>
</div>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Language dropdown toggle
document.querySelectorAll('.language-selector button').forEach(button => {
button.addEventListener('click', function(e) {
e.stopPropagation();
const dropdown = this.nextElementSibling;
dropdown.classList.toggle('hidden');
});
});
// Close language dropdown when clicking outside
document.addEventListener('click', function() {
document.querySelectorAll('.language-dropdown').forEach(dropdown => {
dropdown.classList.add('hidden');
});
});
// Language data
const languages = {
en: {
// Header
'current-language': '🇬🇧 English',
'mobile-current-language': '🇬🇧 English',
'footer-current-language': '🇬🇧 English',
// Hero
'hero-title': 'Welcome to your world of inner peace',
'hero-subtitle': 'Guided meditations for soul, body, and mind',
'hero-cta': 'Get Started',
// Meditations
'meditation-title': 'Meditation Categories',
'meditation-subtitle': 'Choose from our carefully curated meditation sessions',
'meditation-1-title': 'Sleep Meditation',
'meditation-1-desc': 'Calm your mind for a restful night',
'meditation-1-button': 'Listen',
'meditation-2-title': 'Chakra Activation',
'meditation-2-desc': 'Balance your energy centers',
'meditation-2-button': 'Listen',
'meditation-3-title': 'Self-Love',
'meditation-3-desc': 'Cultivate compassion for yourself',
'meditation-3-button': 'Listen',
'meditation-4-title': 'Morning Boost',
'meditation-4-desc': 'Start your day with positive energy',
'meditation-4-button': 'Listen',
'view-all-meditations': 'View All Meditations',
// Daily Meditation
'daily-meditation-title': 'Daily Meditation',
'daily-meditation-subtitle': 'A new guided session every day',
'daily-meditation-reminder': 'Get Daily Reminders',
'today-meditation-title': "Today's Meditation",
'today-meditation-date': 'June 15, 2023',
'daily-meditation-text': 'Today, we invite you to take a deep breath. Relax your body and allow your inner peace to flow freely. This moment is just for you. You deserve calm and love.',
'duration': '10 min',
'category': 'Mindfulness',
'share-button': 'Share',
// Blog
'blog-title': 'Knowledge & Inspiration',
'blog-subtitle': 'Learn more about meditation and mindfulness',
'article-1-title': 'How Meditation Helps You Sleep Better',
'article-1-excerpt': 'Discover the science behind meditation and how it can improve your sleep quality and duration.',
'article-1-link': 'Read More',
'article-2-title': 'The Power of Gratitude in Energy Alignment',
'article-2-excerpt': 'Learn how practicing gratitude can align your energy centers and attract more abundance.',
'article-2-link': 'Read More',
'article-3-title': 'Inner Child Healing: What It Is and How to Start',
'article-3-excerpt': 'Begin your journey of healing childhood wounds and reconnecting with your authentic self.',
'article-3-link': 'Read More',
'view-all-articles': 'View All Articles',
// Videos
'videos-title': 'Meditation Videos',
'videos-subtitle': 'Visual guided meditations for deeper relaxation',
'video-1-title': 'Morning Meditation in the Forest',
'video-1-duration': '15 minutes',
'video-1-category': 'Morning',
'video-2-title': 'Sunset Gratitude Meditation',
'video-2-duration': '10 minutes',
'video-2-category': 'Gratitude',
'video-3-title': 'Ocean Waves for Deep Sleep',
'video-3-duration': '30 minutes',
'video-3-category': 'Sleep',
'view-all-videos': 'View All Videos',
// Premium
'premium-title': 'Unlock Premium Content',
'premium-subtitle': 'Access exclusive meditations, courses, and high-quality audio for your journey',
'premium-feature-1': 'High Quality Audio',
'premium-feature-1-desc': 'Studio-recorded meditations with crystal clear sound',
'premium-feature-2': 'Exclusive Content',
'premium-feature-2-desc': 'Access to premium-only meditations and courses',
'premium-feature-3': 'Unlimited Access',
'premium-feature-3-desc': 'Download and listen offline anytime, anywhere',
'go-premium-button': 'Go Premium - $9.99/month',
'premium-note': '7-day free trial. Cancel anytime.',
// Testimonials
'testimonials-title': 'What Our Community Says',
'testimonials-subtitle': 'Join thousands of people finding peace through meditation',
'testimonial-1-name': 'Sarah M.',
'testimonial-1-text': '"The sleep meditations have completely transformed my nights. I fall asleep faster and wake up feeling refreshed. Thank you for this amazing resource!"',
'testimonial-2-name': 'Michael T.',
'testimonial-2-text': '"As someone new to meditation, the guided sessions made it so easy to start. The morning meditations help me begin each day with clarity and purpose."',
'testimonial-3-name': 'Amina K.',
'testimonial-3-text': '"The chakra meditations have helped me release so much blocked energy. I feel more balanced and at peace than ever before in my life."',
// About
'about-title': 'About InnerPeace',
'about-text-1': 'Welcome to our meditation space. We are here to help you find your inner peace. Meditation is more than a practice — it\'s a journey toward awareness, self-love, and freedom from daily stress.',
'about-text-2': 'Every day, we share positive-energy meditations to calm your mind and soothe your soul. You\'re not alone on this path. The universe has chosen you to awaken and walk this bright path. Stay with us, and let your inner voice be heard.',
// Contact
'contact-title': 'Contact Us',
'contact-subtitle': 'We\'d love to hear from you',
'contact-info-title': 'Get in Touch',
'email-title': 'Email',
'phone-title': 'Phone',
'address-title': 'Address',
'follow-us-title': 'Follow Us',
'name-label': 'Name',
'email-label': 'Email',
'message-label': 'Message',
'submit-button': 'Send Message',
// Footer
'footer-description': 'Guided meditations for soul, body, and mind.',
'footer-links-title': 'Quick Links',
'footer-link-1': 'Home',
'footer-link-2': 'Meditations',
'footer-link-3': 'Articles',
'footer-link-4': 'About Us',
'footer-link-5': 'Contact',
'footer-help-title': 'Help',
'footer-help-1': 'FAQs',
'footer-help-2': 'Privacy Policy',
'footer-help-3': 'Terms of Service',
'footer-help-4': 'Refund Policy',
'footer-newsletter-title': 'Newsletter',
'footer-newsletter-text': 'Subscribe to receive daily meditations and updates.',
'copyright': '© 2023 InnerPeace. All rights reserved.'
},
de: {
// Header
'current-language': '🇩🇪 Deutsch',
'mobile-current-language': '🇩🇪 Deutsch',
'footer-current-language': '🇩🇪 Deutsch',
// Hero
'hero-title': 'Willkommen in deiner Welt der inneren Ruhe',
'hero-subtitle': 'Geführte Meditationen für Seele, Körper und Geist',
'hero-cta': 'Jetzt Beginnen',
// Meditations
'meditation-title': 'Meditationskategorien',
'meditation-subtitle': 'Wähle aus unseren sorgfältig ausgewählten Meditationssitzungen',
'meditation-1-title': 'Schlafmeditation',
'meditation-1-desc': 'Beruhige deinen Geist für eine erholsame Nacht',
'meditation-1-button': 'Anhören',
'meditation-2-title': 'Chakra-Aktivierung',
'meditation-2-desc': 'Balanciere deine Energiezentren',
'meditation-2-button': 'Anhören',
'meditation-3-title': 'Selbstliebe',
'meditation-3-desc': 'Entwickle Mitgefühl für dich selbst',
'meditation-3-button': 'Anhören',
'meditation-4-title': 'Morgengruss',
'meditation-4-desc': 'Starte deinen Tag mit positiver Energie',
'meditation-4-button': 'Anhören',
'view-all-meditations': 'Alle Meditationen',
// Daily Meditation
'daily-meditation-title': 'Tägliche Meditation',
'daily-meditation-subtitle': 'Eine neue geführte Sitzung jeden Tag',
'daily-meditation-reminder': 'Tägliche Erinnerungen',
'today-meditation-title': "Heutige Meditation",
'today-meditation-date': '15. Juni 2023',
'daily-meditation-text': 'Heute laden wir dich ein, tief durchzuatmen. Lass deinen Körper los und spüre die innere Ruhe. Dieser Moment gehört nur dir. Du verdienst Frieden und Liebe.',
'duration': '10 Min',
'category': 'Achtsamkeit',
'share-button': 'Teilen',
// Blog
'blog-title': 'Wissen & Inspiration',
'blog-subtitle': 'Erfahre mehr über Meditation und Achtsamkeit',
'article-1-title': 'Wie Meditation dir zu besserem Schlaf verhilft',
'article-1-excerpt': 'Entdecke die Wissenschaft hinter Meditation and wie sie deine Schlafqualität verbessern kann.',
'article-1-link': 'Mehr lesen',
'article-2-title': 'Die Kraft der Dankbarkeit für deine Chakren',
'article-2-excerpt': 'Lerne, wie Dankbarkeit deine Energiezentren ausrichten und mehr Fülle anziehen kann.',
'article-2-link': 'Mehr lesen',
'article-3-title': 'Das innere Kind heilen – so funktioniert\'s',
'article-3-excerpt': 'Beginne deine Reise, Kindheitswunden zu heilen und dich mit deinem authentischen Selbst zu verbinden.',
'article-3-link': 'Mehr lesen',
'view-all-articles': 'Alle Artikel',
// Videos
'videos-title': 'Meditationsvideos',
'videos-subtitle': 'Visuell geführte Meditationen für tiefere Entspannung',
'video-1-title': 'Morgenmeditation im Wald',
'video-1-duration': '15 Minuten',
'video-1-category': 'Morgen',
'video-2-title': 'Abendliche Dankbarkeitsmeditation',
'video-2-duration': '10 Minuten',
'video-2-category': 'Dankbarkeit',
'video-3-title': 'Meereswellen für tiefen Schlaf',
'video-3-duration': '30 Minuten',
'video-3-category': 'Schlaf',
'view-all-videos': 'Alle Videos',
// Premium
'premium-title': 'Premium-Inhalte freischalten',
'premium-subtitle': 'Erhalte Zugang zu exklusiven Meditationen, Kursen und hochwertigem Audio für deine Reise',
'premium-feature-1': 'Hochwertiges Audio',
'premium-feature-1-desc': 'Studioaufnahmen mit kristallklarem Klang',
'premium-feature-2': 'Exklusive Inhalte',
'premium-feature-2-desc': 'Zugang zu Premium-Meditationen und Kursen',
'premium-feature-3': 'Unbegrenzter Zugriff',
'premium-feature-3-desc': 'Lade herunter und höre offline, wann und wo du willst',
'go-premium-button': 'Premium werden - 9,99€/Monat',
'premium-note': '7-Tage kostenlose Testphase. Jederzeit kündbar.',
// Testimonials
'testimonials-title': 'Was unsere Community sagt',
'testimonials-subtitle': 'Schließe dich Tausenden an, die durch Meditation Frieden finden',
'testimonial-1-name': 'Sarah M.',
'testimonial-1-text': '"Die Schlafmeditationen haben meine Nächte völlig verändert. Ich schlafe schneller ein und wache erfrischt auf. Danke für diese wunderbare Ressource!"',
'testimonial-2-name': 'Michael T.',
'testimonial-2-text': '"Als Neuling in der Meditation haben mir die geführten Sitzungen den Einstieg sehr erleichtert. Die Morgenmeditationen helfen mir, jeden Tag mit Klarheit und Ziel zu beginnen."',
'testimonial-3-name': 'Amina K.',
'testimonial-3-text': '"Die Chakra-Meditationen haben mir geholfen, so viel blockierte Energie freizusetzen. Ich fühle mich ausgeglichener und friedlicher als je zuvor in meinem Leben."',
// About
'about-title': 'Über InnerPeace',
'about-text-1': 'Willkommen in unserem Meditationsraum. Wir sind hier, um dir zu helfen, deinen inneren Frieden zu finden. Meditation ist mehr als eine Übung – es ist eine Reise zu Bewusstsein, Selbstliebe und innerer Freiheit.',
'about-text-2': 'Jeden Tag teilen wir positive Meditationen, die deinen Geist beruhigen und deine Seele berühren. Du bist auf diesem Weg nicht allein. Das Universum hat dich ausgewählt, diesen lichtvollen Pfad zu gehen. Bleib bei uns und lass deine innere Stimme erwachen.',
// Contact
'contact-title': 'Kontakt',
'contact-subtitle': 'Wir freuen uns von dir zu
</html>