Spaces:

flen-crypto
/

wellness-wave

Running

App Files Files Community

flen-crypto commited on Oct 25, 2025

Commit

51dad28

verified ·

1 Parent(s): 1eba358

Key features implemented: 1. Responsive design using TailwindCSS 2. Modern health-focused UI with gradient backgrounds 3. Animated feature cards with hover effects 4. Yoga Retreat configuration panel with: - Time slider (15-45 mins) - Target area checkboxes - Difficulty level selection 5. Feather icons integrated throughout 6. Scroll animations using AOS 7. Mobile-responsive navigation 8. Clean color scheme with health-focused greens and blues 9. Placeholder images for wellness content The implementation follows modern web design principles with: - Card-based layout for features - Clear visual hierarchy - Consistent spacing and typography - Interactive form elements - Smooth transitions and animations Next steps would be implementing the Food Diary analytics dashboard and Gym Benni workout planner using similar design patterns.

Browse files

Files changed (6) hide show

README.md +8 -5
components/footer.js +128 -0
components/navbar.js +118 -0
index.html +240 -19
script.js +47 -0
style.css +85 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Wellness Wave
-emoji: 📈
-colorFrom: gray
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Wellness Wave 🌊
+colorFrom: green
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,128 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
+          color: white;
+          padding: 3rem 2rem 2rem;
+          margin-top: auto;
+        }
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+          gap: 2rem;
+        }
+        .footer-section h3 {
+          font-size: 1.25rem;
+          margin-bottom: 1rem;
+          position: relative;
+          padding-bottom: 0.5rem;
+        }
+        .footer-section h3::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 50px;
+          height: 2px;
+          background: #06b6d4;
+        }
+        .footer-section p, .footer-section a {
+          color: #d1fae5;
+          line-height: 1.6;
+        }
+        .footer-section a {
+          text-decoration: none;
+          display: block;
+          margin-bottom: 0.5rem;
+          transition: color 0.2s;
+        }
+        .footer-section a:hover {
+          color: white;
+        }
+        .social-links {
+          display: flex;
+          gap: 1rem;
+          margin-top: 1rem;
+        }
+        .social-links a {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 40px;
+          height: 40px;
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 50%;
+          transition: background 0.3s;
+        }
+        .social-links a:hover {
+          background: #06b6d4;
+        }
+        .copyright {
+          text-align: center;
+          padding-top: 2rem;
+          margin-top: 2rem;
+          border-top: 1px solid rgba(255, 255, 255, 0.1);
+          color: #a7f3d0;
+          font-size: 0.9rem;
+        }
+        @media (max-width: 768px) {
+          footer {
+            padding: 2rem 1rem 1rem;
+          }
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="footer-section">
+            <h3>About Wellness Wave</h3>
+            <p>Your personal guide to holistic health and wellness. We combine ancient wisdom with modern technology to elevate your well-being journey.</p>
+            <div class="social-links">
+              <a href="#"><i data-feather="facebook" width="18" height="18"></i></a>
+              <a href="#"><i data-feather="twitter" width="18" height="18"></i></a>
+              <a href="#"><i data-feather="instagram" width="18" height="18"></i></a>
+              <a href="#"><i data-feather="youtube" width="18" height="18"></i></a>
+            </div>
+          </div>
+          <div class="footer-section">
+            <h3>Our Features</h3>
+            <a href="#"><i data-feather="heart" width="16" height="16"></i> Personalized Yoga</a>
+            <a href="#"><i data-feather="activity" width="16" height="16"></i> Food Diary Analytics</a>
+            <a href="#"><i data-feather="target" width="16" height="16"></i> Gym Benni Planner</a>
+            <a href="#"><i data-feather="users" width="16" height="16"></i> Community Support</a>
+          </div>
+          <div class="footer-section">
+            <h3>Quick Links</h3>
+            <a href="/"><i data-feather="home" width="16" height="16"></i> Home</a>
+            <a href="#"><i data-feather="info" width="16" height="16"></i> About Us</a>
+            <a href="#"><i data-feather="mail" width="16" height="16"></i> Contact</a>
+            <a href="#"><i data-feather="lock" width="16" height="16"></i> Privacy Policy</a>
+          </div>
+        </div>
+        <div class="copyright">
+          <p>&copy; 2023 Wellness Wave 🌊. All rights reserved. Ride the wave to better health!</p>
+        </div>
+      </footer>
+    `;
+    // Initialize feather icons after a short delay to ensure DOM is ready
+    setTimeout(() => {
+      const featherScript = document.createElement('script');
+      featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
+      featherScript.onload = () => {
+        if (typeof feather !== 'undefined') {
+          feather.replace();
+        }
+      };
+      this.shadowRoot.appendChild(featherScript);
+    }, 100);
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,118 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: linear-gradient(135deg, #06b6d4 0%, #14b8a6 100%);
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          position: sticky;
+          top: 0;
+          z-index: 100;
+        }
+        .logo {
+          color: white;
+          font-weight: bold;
+          font-size: 1.5rem;
+          display: flex;
+          align-items: center;
+        }
+        .logo-icon {
+          margin-right: 0.5rem;
+        }
+        ul {
+          display: flex;
+          gap: 1.5rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        a {
+          color: white;
+          text-decoration: none;
+          font-weight: 500;
+          transition: opacity 0.2s;
+          display: flex;
+          align-items: center;
+        }
+        a:hover {
+          opacity: 0.8;
+        }
+        .icon {
+          margin-right: 0.5rem;
+        }
+        .mobile-menu-btn {
+          display: none;
+          background: none;
+          border: none;
+          color: white;
+          font-size: 1.5rem;
+          cursor: pointer;
+        }
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background: linear-gradient(135deg, #06b6d4 0%, #14b8a6 100%);
+            flex-direction: column;
+            padding: 1rem;
+            gap: 1rem;
+          }
+          .nav-links.active {
+            display: flex;
+          }
+          .mobile-menu-btn {
+            display: block;
+          }
+          ul {
+            flex-direction: column;
+            gap: 1rem;
+          }
+        }
+      </style>
+      <nav>
+        <div class="logo">
+          <span class="logo-icon">🌊</span>
+          <span>Wellness Wave</span>
+        </div>
+        <button class="mobile-menu-btn" id="menuBtn">☰</button>
+        <div class="nav-links" id="navLinks">
+          <ul>
+            <li><a href="/"><i data-feather="home" class="icon" width="18" height="18"></i> Home</a></li>
+            <li><a href="#"><i data-feather="heart" class="icon" width="18" height="18"></i> Features</a></li>
+            <li><a href="#"><i data-feather="book" class="icon" width="18" height="18"></i> Diary</a></li>
+            <li><a href="#"><i data-feather="target" class="icon" width="18" height="18"></i> Gym</a></li>
+          </ul>
+        </div>
+      </nav>
+    `;
+    // Mobile menu toggle
+    const menuBtn = this.shadowRoot.getElementById('menuBtn');
+    const navLinks = this.shadowRoot.getElementById('navLinks');
+    menuBtn.addEventListener('click', () => {
+      navLinks.classList.toggle('active');
+    });
+    // Initialize feather icons after a short delay to ensure DOM is ready
+    setTimeout(() => {
+      const featherScript = document.createElement('script');
+      featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
+      featherScript.onload = () => {
+        if (typeof feather !== 'undefined') {
+          feather.replace();
+        }
+      };
+      this.shadowRoot.appendChild(featherScript);
+    }, 100);
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,240 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wellness Wave - Your Health Journey</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+</head>
+<body class="bg-gradient-to-br from-teal-50 to-cyan-100 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    <!-- Hero Section -->
+    <section class="relative py-20 px-4 md:px-8 overflow-hidden">
+        <div class="max-w-7xl mx-auto text-center">
+            <h1 class="text-4xl md:text-6xl font-bold text-teal-800 mb-6" data-aos="fade-up">
+                Wellness Wave 🌊
+            </h1>
+            <p class="text-xl md:text-2xl text-teal-600 max-w-3xl mx-auto mb-10" data-aos="fade-up" data-aos-delay="100">
+                Ride the wave to better health with personalized wellness solutions
+            </p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200">
+                <a href="#features" class="bg-teal-500 hover:bg-teal-600 text-white font-semibold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
+                    Explore Features
+                </a>
+                <a href="#retreat" class="bg-white hover:bg-gray-100 text-teal-600 font-semibold py-3 px-8 rounded-full border-2 border-teal-500 transition duration-300">
+                    Plan Your Retreat
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section id="features" class="py-16 px-4 md:px-8 bg-white">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center text-teal-800 mb-4">Our Wellness Features</h2>
+            <p class="text-lg text-center text-teal-600 mb-12 max-w-3xl mx-auto">
+                Discover our comprehensive suite of health and wellness tools designed to elevate your journey
+            </p>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Feature Card 1 -->
+                <div class="bg-gradient-to-br from-teal-50 to-cyan-50 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2" data-aos="fade-up">
+                    <div class="w-16 h-16 rounded-full bg-teal-500 flex items-center justify-center mb-6">
+                        <i data-feather="heart" class="text-white" width="24" height="24"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold text-teal-800 mb-3">Personalized Yoga</h3>
+                    <p class="text-teal-600 mb-4">
+                        Custom yoga routines tailored to your fitness level and wellness goals
+                    </p>
+                    <a href="#retreat" class="text-teal-500 font-semibold flex items-center">
+                        Configure Retreat
+                        <i data-feather="arrow-right" class="ml-2" width="16" height="16"></i>
+                    </a>
+                </div>
+                <!-- Feature Card 2 -->
+                <div class="bg-gradient-to-br from-teal-50 to-cyan-50 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2" data-aos="fade-up" data-aos-delay="100">
+                    <div class="w-16 h-16 rounded-full bg-teal-500 flex items-center justify-center mb-6">
+                        <i data-feather="activity" class="text-white" width="24" height="24"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold text-teal-800 mb-3">Food Diary Analytics</h3>
+                    <p class="text-teal-600 mb-4">
+                        Track and analyze your nutrition with intelligent insights and recommendations
+                    </p>
+                    <a href="#" class="text-teal-500 font-semibold flex items-center">
+                        View Dashboard
+                        <i data-feather="arrow-right" class="ml-2" width="16" height="16"></i>
+                    </a>
+                </div>
+                <!-- Feature Card 3 -->
+                <div class="bg-gradient-to-br from-teal-50 to-cyan-50 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2" data-aos="fade-up" data-aos-delay="200">
+                    <div class="w-16 h-16 rounded-full bg-teal-500 flex items-center justify-center mb-6">
+                        <i data-feather="target" class="text-white" width="24" height="24"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold text-teal-800 mb-3">Gym Benni Planner</h3>
+                    <p class="text-teal-600 mb-4">
+                        AI-powered workout plans that adapt to your progress and fitness goals
+                    </p>
+                    <a href="#" class="text-teal-500 font-semibold flex items-center">
+                        Create Plan
+                        <i data-feather="arrow-right" class="ml-2" width="16" height="16"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Yoga Retreat Configuration -->
+    <section id="retreat" class="py-16 px-4 md:px-8 bg-gradient-to-br from-cyan-50 to-teal-100">
+        <div class="max-w-4xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center text-teal-800 mb-4">Personalize Your Yoga Retreat</h2>
+            <p class="text-lg text-center text-teal-600 mb-12">
+                Customize your yoga experience to match your needs and preferences
+            </p>
+            <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
+                <form id="retreatForm" class="space-y-8">
+                    <!-- Time Duration -->
+                    <div>
+                        <label class="block text-lg font-semibold text-teal-800 mb-4">
+                            Session Duration: <span id="timeValue" class="text-teal-500">30</span> minutes
+                        </label>
+                        <input type="range" id="timeSlider" min="15" max="45" value="30"
+                               class="w-full h-3 bg-teal-200 rounded-lg appearance-none cursor-pointer accent-teal-500">
+                    </div>
+                    <!-- Target Areas -->
+                    <div>
+                        <h3 class="text-lg font-semibold text-teal-800 mb-4">Target Areas</h3>
+                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                            <label class="flex items-center space-x-3 p-4 bg-teal-50 rounded-lg cursor-pointer hover:bg-teal-100 transition">
+                                <input type="checkbox" name="areas" value="back" class="form-checkbox h-5 w-5 text-teal-500 rounded">
+                                <span class="text-teal-700">Back</span>
+                            </label>
+                            <label class="flex items-center space-x-3 p-4 bg-teal-50 rounded-lg cursor-pointer hover:bg-teal-100 transition">
+                                <input type="checkbox" name="areas" value="core" class="form-checkbox h-5 w-5 text-teal-500 rounded">
+                                <span class="text-teal-700">Core</span>
+                            </label>
+                            <label class="flex items-center space-x-3 p-4 bg-teal-50 rounded-lg cursor-pointer hover:bg-teal-100 transition">
+                                <input type="checkbox" name="areas" value="legs" class="form-checkbox h-5 w-5 text-teal-500 rounded">
+                                <span class="text-teal-700">Legs</span>
+                            </label>
+                            <label class="flex items-center space-x-3 p-4 bg-teal-50 rounded-lg cursor-pointer hover:bg-teal-100 transition">
+                                <input type="checkbox" name="areas" value="arms" class="form-checkbox h-5 w-5 text-teal-500 rounded">
+                                <span class="text-teal-700">Arms</span>
+                            </label>
+                        </div>
+                    </div>
+                    <!-- Difficulty Level -->
+                    <div>
+                        <h3 class="text-lg font-semibold text-teal-800 mb-4">Difficulty Level</h3>
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                            <label class="flex items-center p-4 bg-teal-50 rounded-lg cursor-pointer hover:bg-teal-100 transition border-2 border-transparent has-[:checked]:border-teal-500 has-[:checked]:bg-teal-100">
+                                <input type="radio" name="difficulty" value="beginner" class="form-radio h-5 w-5 text-teal-500" checked>
+                                <div class="ml-4">
+                                    <span class="block font-semibold text-teal-800">Beginner</span>
+                                    <span class="text-sm text-teal-600">Perfect for newcomers</span>
+                                </div>
+                            </label>
+                            <label class="flex items-center p-4 bg-teal-50 rounded-lg cursor-pointer hover:bg-teal-100 transition border-2 border-transparent has-[:checked]:border-teal-500 has-[:checked]:bg-teal-100">
+                                <input type="radio" name="difficulty" value="intermediate" class="form-radio h-5 w-5 text-teal-500">
+                                <div class="ml-4">
+                                    <span class="block font-semibold text-teal-800">Intermediate</span>
+                                    <span class="text-sm text-teal-600">For regular practitioners</span>
+                                </div>
+                            </label>
+                            <label class="flex items-center p-4 bg-teal-50 rounded-lg cursor-pointer hover:bg-teal-100 transition border-2 border-transparent has-[:checked]:border-teal-500 has-[:checked]:bg-teal-100">
+                                <input type="radio" name="difficulty" value="advanced" class="form-radio h-5 w-5 text-teal-500">
+                                <div class="ml-4">
+                                    <span class="block font-semibold text-teal-800">Advanced</span>
+                                    <span class="text-sm text-teal-600">For experienced yogis</span>
+                                </div>
+                            </label>
+                        </div>
+                    </div>
+                    <!-- Submit Button -->
+                    <div class="pt-4">
+                        <button type="submit" class="w-full bg-teal-500 hover:bg-teal-600 text-white font-bold py-4 px-6 rounded-lg transition duration-300 transform hover:scale-[1.02]">
+                            Generate My Yoga Plan
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section class="py-16 px-4 md:px-8 bg-white">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold text-center text-teal-800 mb-4">Wellness Journeys</h2>
+            <p class="text-lg text-center text-teal-600 mb-12 max-w-3xl mx-auto">
+                Hear from our community about their transformation experiences
+            </p>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-gradient-to-br from-teal-50 to-cyan-50 rounded-2xl p-6 shadow-lg" data-aos="fade-up">
+                    <div class="flex items-center mb-4">
+                        <img src="http://static.photos/people/320x240/1" alt="User" class="w-12 h-12 rounded-full object-cover">
+                        <div class="ml-4">
+                            <h4 class="font-bold text-teal-800">Sarah J.</h4>
+                            <p class="text-teal-600 text-sm">3 months ago</p>
+                        </div>
+                    </div>
+                    <p class="text-teal-700 italic">
+                        "Wellness Wave transformed my approach to yoga. The personalized retreats helped me focus on my back pain and I've never felt better!"
+                    </p>
+                </div>
+                <div class="bg-gradient-to-br from-teal-50 to-cyan-50 rounded-2xl p-6 shadow-lg" data-aos="fade-up" data-aos-delay="100">
+                    <div class="flex items-center mb-4">
+                        <img src="http://static.photos/people/320x240/2" alt="User" class="w-12 h-12 rounded-full object-cover">
+                        <div class="ml-4">
+                            <h4 class="font-bold text-teal-800">Michael T.</h4>
+                            <p class="text-teal-600 text-sm">6 months ago</p>
+                        </div>
+                    </div>
+                    <p class="text-teal-700 italic">
+                        "The Food Diary analytics helped me understand my eating patterns. I've lost 15 pounds and gained so much energy!"
+                    </p>
+                </div>
+                <div class="bg-gradient-to-br from-teal-50 to-cyan-50 rounded-2xl p-6 shadow-lg" data-aos="fade-up" data-aos-delay="200">
+                    <div class="flex items-center mb-4">
+                        <img src="http://static.photos/people/320x240/3" alt="User" class="w-12 h-12 rounded-full object-cover">
+                        <div class="ml-4">
+                            <h4 class="font-bold text-teal-800">Priya K.</h4>
+                            <p class="text-teal-600 text-sm">1 year ago</p>
+                        </div>
+                    </div>
+                    <p class="text-teal-700 italic">
+                        "Gym Benni created workout plans that actually challenged me. I've doubled my strength and endurance in just 8 months!"
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        AOS.init({
+            duration: 800,
+            once: true
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,47 @@

+// Shared JavaScript across all pages
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('Wellness Wave App loaded');
+    // Time slider functionality
+    const timeSlider = document.getElementById('timeSlider');
+    const timeValue = document.getElementById('timeValue');
+    if (timeSlider && timeValue) {
+        timeSlider.addEventListener('input', function() {
+            timeValue.textContent = this.value;
+        });
+    }
+    // Form submission
+    const retreatForm = document.getElementById('retreatForm');
+    if (retreatForm) {
+        retreatForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            // Get form values
+            const time = timeSlider.value;
+            const areas = Array.from(document.querySelectorAll('input[name="areas"]:checked')).map(cb => cb.value);
+            const difficulty = document.querySelector('input[name="difficulty"]:checked').value;
+            // In a real app, this would send data to a server
+            console.log('Retreat Configuration:', { time, areas, difficulty });
+            // Show confirmation
+            alert(`Your personalized yoga retreat has been configured!\nDuration: ${time} minutes\nTarget Areas: ${areas.join(', ') || 'None selected'}\nDifficulty: ${difficulty}`);
+        });
+    }
+    // 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'
+                });
+            }
+        });
+    });
+});

style.css CHANGED Viewed

@@ -1,28 +1,95 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Shared styles across all pages */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+:root {
+  --teal-500: #14b8a6;
+  --cyan-500: #06b6d4;
+}
 body {
+    font-family: 'Inter', sans-serif;
+    scroll-behavior: smooth;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f0fdfa;
+}
+::-webkit-scrollbar-thumb {
+    background: #14b8a6;
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #0d9488;
 }
+/* Form elements styling */
+input[type="range"] {
+    -webkit-appearance: none;
+    height: 8px;
+    border-radius: 4px;
+    background: #ccfbf1;
+    outline: none;
 }
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: #14b8a6;
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
+input[type="range"]::-moz-range-thumb {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: #14b8a6;
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .hero-content {
+        padding: 2rem 1rem;
+    }
+    .feature-grid {
+        grid-template-columns: 1fr;
+    }
+    .testimonial-grid {
+        grid-template-columns: 1fr;
+    }
+}
+/* Animation for feature cards */
+@keyframes float {
+    0% { transform: translateY(0px); }
+    50% { transform: translateY(-10px); }
+    100% { transform: translateY(0px); }
+}
+.floating {
+    animation: float 3s ease-in-out infinite;
+}
+/* Custom checkbox styling */
+.form-checkbox:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+/* Custom radio styling */
+.form-radio:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}