Spaces:

SEVAQWERTY
/

wellnesswave

Running

App Files Files Community

SEVAQWERTY commited on Jan 14

Commit

831fdd1

verified ·

1 Parent(s): 6906373

добавь пайтон код

Browse files

Files changed (7) hide show

README.md +8 -5
components/footer.js +190 -0
components/header.js +148 -0
components/testimonials.js +240 -0
index.html +392 -19
script.js +42 -0
style.css +81 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Wellnesswave
-emoji: 🐢
-colorFrom: pink
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: WellnessWave 🌊
+colorFrom: green
+colorTo: green
+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,190 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        .footer {
+          background-color: #1f2937;
+          color: #d1d5db;
+          padding: 4rem 0 2rem;
+          border-top: 1px solid #374151;
+        }
+        .footer-container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+        .footer-grid {
+          display: grid;
+          grid-template-columns: repeat(1, 1fr);
+          gap: 2rem;
+          margin-bottom: 3rem;
+        }
+        @media (min-width: 768px) {
+          .footer-grid {
+            grid-template-columns: repeat(4, 1fr);
+          }
+        }
+        .footer-col h3 {
+          color: #0d9488;
+          margin-bottom: 1.5rem;
+          font-size: 1.25rem;
+          font-weight: 600;
+        }
+        .footer-links {
+          list-style: none;
+          padding: 0;
+        }
+        .footer-links li {
+          margin-bottom: 0.75rem;
+        }
+        .footer-links a {
+          color: #9ca3af;
+          text-decoration: none;
+          transition: color 0.3s ease;
+        }
+        .footer-links a:hover {
+          color: #0d9488;
+        }
+        .social-links {
+          display: flex;
+          gap: 1rem;
+          margin-top: 1rem;
+        }
+        .social-link {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 2.5rem;
+          height: 2.5rem;
+          border-radius: 50%;
+          background-color: #374151;
+          color: #d1d5db;
+          transition: all 0.3s ease;
+        }
+        .social-link:hover {
+          background-color: #0d9488;
+          transform: translateY(-3px);
+        }
+        .copyright {
+          text-align: center;
+          padding-top: 2rem;
+          border-top: 1px solid #374151;
+          color: #9ca3af;
+          font-size: 0.875rem;
+        }
+        .newsletter-form {
+          display: flex;
+          margin-top: 1rem;
+        }
+        .newsletter-form input {
+          flex: 1;
+          padding: 0.5rem 1rem;
+          border: 1px solid #4b5563;
+          border-radius: 4px 0 0 4px;
+          background-color: #111827;
+          color: #f3f4f6;
+        }
+        .newsletter-form button {
+          background-color: #0d9488;
+          color: white;
+          border: none;
+          padding: 0 1rem;
+          border-radius: 0 4px 4px 0;
+          cursor: pointer;
+          transition: background-color 0.3s ease;
+        }
+        .newsletter-form button:hover {
+          background-color: #0f766e;
+        }
+      </style>
+      <footer class="footer">
+        <div class="footer-container">
+          <div class="footer-grid">
+            <div class="footer-col">
+              <h3>WellnessWave</h3>
+              <p>Your journey to holistic health and wellness starts here. Personalized plans, expert guidance, and community support.</p>
+              <div class="social-links">
+                <a href="#" class="social-link">
+                  <i data-feather="facebook" class="w-4 h-4"></i>
+                </a>
+                <a href="#" class="social-link">
+                  <i data-feather="instagram" class="w-4 h-4"></i>
+                </a>
+                <a href="#" class="social-link">
+                  <i data-feather="twitter" class="w-4 h-4"></i>
+                </a>
+                <a href="#" class="social-link">
+                  <i data-feather="youtube" class="w-4 h-4"></i>
+                </a>
+              </div>
+            </div>
+            <div class="footer-col">
+              <h3>Services</h3>
+              <ul class="footer-links">
+                <li><a href="#">Nutrition Plans</a></li>
+                <li><a href="#">Fitness Programs</a></li>
+                <li><a href="#">Mental Wellness</a></li>
+                <li><a href="#">Health Coaching</a></li>
+                <li><a href="#">Corporate Wellness</a></li>
+              </ul>
+            </div>
+            <div class="footer-col">
+              <h3>Resources</h3>
+              <ul class="footer-links">
+                <li><a href="#">Blog</a></li>
+                <li><a href="#">Success Stories</a></li>
+                <li><a href="#">Wellness Tips</a></li>
+                <li><a href="#">Nutrition Guides</a></li>
+                <li><a href="#">Workout Plans</a></li>
+              </ul>
+            </div>
+            <div class="footer-col">
+              <h3>Newsletter</h3>
+              <p>Subscribe to get health tips and wellness inspiration</p>
+              <form class="newsletter-form">
+                <input type="email" placeholder="Your email" required>
+                <button type="submit">
+                  <i data-feather="send" class="w-4 h-4"></i>
+                </button>
+              </form>
+            </div>
+          </div>
+          <div class="copyright">
+            <p>&copy; 2023 WellnessWave. All rights reserved. Designed with <i data-feather="heart" class="w-4 h-4 text-red-500 inline"></i> for your health.</p>
+          </div>
+        </div>
+      </footer>
+    `;
+    // Initialize Feather icons
+    feather.replace();
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/header.js ADDED Viewed

	@@ -0,0 +1,148 @@

+class CustomHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        .header {
+          background-color: rgba(17, 24, 39, 0.9);
+          backdrop-filter: blur(10px);
+          position: fixed;
+          width: 100%;
+          z-index: 1000;
+          border-bottom: 1px solid rgba(55, 65, 81, 0.5);
+        }
+        .nav-container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+        .nav-content {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 1rem 0;
+        }
+        .logo {
+          font-family: 'Playfair Display', serif;
+          font-size: 1.5rem;
+          font-weight: 700;
+          color: #0d9488;
+          text-decoration: none;
+        }
+        .nav-links {
+          display: flex;
+          list-style: none;
+        }
+        .nav-links li {
+          margin-left: 2rem;
+        }
+        .nav-links a {
+          color: #d1d5db;
+          text-decoration: none;
+          font-weight: 500;
+          transition: color 0.3s ease;
+        }
+        .nav-links a:hover {
+          color: #0d9488;
+        }
+        .mobile-menu-btn {
+          display: none;
+          background: none;
+          border: none;
+          color: #d1d5db;
+          cursor: pointer;
+        }
+        .cta-button {
+          background-color: #0d9488;
+          color: white;
+          border: none;
+          padding: 0.5rem 1.5rem;
+          border-radius: 9999px;
+          font-weight: 500;
+          transition: background-color 0.3s ease;
+        }
+        .cta-button:hover {
+          background-color: #0f766e;
+        }
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background-color: rgba(17, 24, 39, 0.95);
+            flex-direction: column;
+            padding: 1rem;
+            border-top: 1px solid #374151;
+          }
+          .nav-links.active {
+            display: flex;
+          }
+          .nav-links li {
+            margin: 0.5rem 0;
+          }
+          .mobile-menu-btn {
+            display: block;
+          }
+        }
+      </style>
+      <header class="header">
+        <div class="nav-container">
+          <div class="nav-content">
+            <a href="#" class="logo">WellnessWave</a>
+            <button class="mobile-menu-btn" id="menu-toggle">
+              <i data-feather="menu" class="w-6 h-6"></i>
+            </button>
+            <ul class="nav-links" id="nav-links">
+              <li><a href="#">Home</a></li>
+              <li><a href="#services">Services</a></li>
+              <li><a href="#">About</a></li>
+              <li><a href="#">Blog</a></li>
+              <li><a href="#booking">Contact</a></li>
+              <li><button class="cta-button">Book Consultation</button></li>
+            </ul>
+          </div>
+        </div>
+      </header>
+    `;
+    // Mobile menu toggle
+    const menuToggle = this.shadowRoot.getElementById('menu-toggle');
+    const navLinks = this.shadowRoot.getElementById('nav-links');
+    menuToggle.addEventListener('click', () => {
+      navLinks.classList.toggle('active');
+      const menuIcon = menuToggle.querySelector('i');
+      if (navLinks.classList.contains('active')) {
+        menuIcon.setAttribute('data-feather', 'x');
+      } else {
+        menuIcon.setAttribute('data-feather', 'menu');
+      }
+      feather.replace();
+    });
+  }
+}
+customElements.define('custom-header', CustomHeader);

components/testimonials.js ADDED Viewed

	@@ -0,0 +1,240 @@

+class CustomTestimonials extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        .testimonial-slider {
+          position: relative;
+          max-width: 800px;
+          margin: 0 auto;
+          overflow: hidden;
+        }
+        .testimonial-container {
+          display: flex;
+          transition: transform 0.5s ease-in-out;
+        }
+        .testimonial-slide {
+          min-width: 100%;
+          padding: 2rem;
+        }
+        .testimonial-card {
+          background-color: #374151;
+          border-radius: 1rem;
+          padding: 2rem;
+          box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
+        }
+        .testimonial-content {
+          font-style: italic;
+          margin-bottom: 1.5rem;
+          line-height: 1.6;
+        }
+        .testimonial-author {
+          display: flex;
+          align-items: center;
+        }
+        .author-avatar {
+          width: 3rem;
+          height: 3rem;
+          border-radius: 50%;
+          margin-right: 1rem;
+          background-color: #4b5563;
+          overflow: hidden;
+        }
+        .author-info h4 {
+          font-weight: 600;
+          margin-bottom: 0.25rem;
+        }
+        .author-info p {
+          color: #9ca3af;
+          font-size: 0.875rem;
+        }
+        .slider-controls {
+          display: flex;
+          justify-content: center;
+          margin-top: 2rem;
+        }
+        .slider-dot {
+          width: 0.75rem;
+          height: 0.75rem;
+          border-radius: 50%;
+          background-color: #4b5563;
+          margin: 0 0.5rem;
+          cursor: pointer;
+          transition: background-color 0.3s ease;
+        }
+        .slider-dot.active {
+          background-color: #0d9488;
+        }
+        .slider-nav {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          background: rgba(17, 24, 39, 0.7);
+          border: none;
+          width: 2.5rem;
+          height: 2.5rem;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          transition: background 0.3s ease;
+        }
+        .slider-nav:hover {
+          background: rgba(13, 148, 136, 0.8);
+        }
+        .prev {
+          left: 1rem;
+        }
+        .next {
+          right: 1rem;
+        }
+        @media (max-width: 768px) {
+          .testimonial-slide {
+            padding: 1rem;
+          }
+          .testimonial-card {
+            padding: 1.5rem;
+          }
+        }
+      </style>
+      <div class="testimonial-slider">
+        <div class="testimonial-container" id="testimonial-container">
+          <!-- Testimonial 1 -->
+          <div class="testimonial-slide">
+            <div class="testimonial-card">
+              <p class="testimonial-content">"The personalized nutrition plan transformed my relationship with food. I've lost 30 pounds and have more energy than I've had in years. The team at WellnessWave truly cares about your success."</p>
+              <div class="testimonial-author">
+                <div class="author-avatar">
+                  <img src="http://static.photos/people/320x240/7" alt="Jennifer K." class="w-full h-full object-cover">
+                </div>
+                <div class="author-info">
+                  <h4>Jennifer K.</h4>
+                  <p>Lost 30 lbs in 6 months</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Testimonial 2 -->
+          <div class="testimonial-slide">
+            <div class="testimonial-card">
+              <p class="testimonial-content">"As a busy professional, I struggled to maintain a healthy lifestyle. The fitness program designed for my schedule helped me build strength and reduce stress. I'm now in the best shape of my life!"</p>
+              <div class="testimonial-author">
+                <div class="author-avatar">
+                  <img src="http://static.photos/people/320x240/8" alt="Michael T." class="w-full h-full object-cover">
+                </div>
+                <div class="author-info">
+                  <h4>Michael T.</h4>
+                  <p>Corporate Executive</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Testimonial 3 -->
+          <div class="testimonial-slide">
+            <div class="testimonial-card">
+              <p class="testimonial-content">"The mental wellness coaching helped me develop tools to manage anxiety and improve my sleep. The mindfulness techniques are now part of my daily routine. I feel more balanced and in control."</p>
+              <div class="testimonial-author">
+                <div class="author-avatar">
+                  <img src="http://static.photos/people/320x240/9" alt="Sophia L." class="w-full h-full object-cover">
+                </div>
+                <div class="author-info">
+                  <h4>Sophia L.</h4>
+                  <p>Teacher</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <button class="slider-nav prev" id="prev-btn">
+          <i data-feather="chevron-left" class="text-white w-5 h-5"></i>
+        </button>
+        <button class="slider-nav next" id="next-btn">
+          <i data-feather="chevron-right" class="text-white w-5 h-5"></i>
+        </button>
+        <div class="slider-controls">
+          <div class="slider-dot active" data-index="0"></div>
+          <div class="slider-dot" data-index="1"></div>
+          <div class="slider-dot" data-index="2"></div>
+        </div>
+      </div>
+    `;
+    // Slider functionality
+    const container = this.shadowRoot.getElementById('testimonial-container');
+    const dots = this.shadowRoot.querySelectorAll('.slider-dot');
+    const prevBtn = this.shadowRoot.getElementById('prev-btn');
+    const nextBtn = this.shadowRoot.getElementById('next-btn');
+    let currentIndex = 0;
+    const totalSlides = dots.length;
+    const updateSlider = () => {
+      container.style.transform = `translateX(-${currentIndex * 100}%)`;
+      // Update dots
+      dots.forEach((dot, index) => {
+        if (index === currentIndex) {
+          dot.classList.add('active');
+        } else {
+          dot.classList.remove('active');
+        }
+      });
+    };
+    const nextSlide = () => {
+      currentIndex = (currentIndex + 1) % totalSlides;
+      updateSlider();
+    };
+    const prevSlide = () => {
+      currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
+      updateSlider();
+    };
+    // Event listeners
+    nextBtn.addEventListener('click', nextSlide);
+    prevBtn.addEventListener('click', prevSlide);
+    dots.forEach(dot => {
+      dot.addEventListener('click', () => {
+        currentIndex = parseInt(dot.getAttribute('data-index'));
+        updateSlider();
+      });
+    });
+    // Auto-advance slider
+    setInterval(nextSlide, 5000);
+    // Initialize Feather icons
+    feather.replace();
+  }
+}
+customElements.define('custom-testimonials', CustomTestimonials);

index.html CHANGED Viewed

@@ -1,19 +1,392 @@
-<!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>WellnessWave - Your Health Journey Starts Here</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body class="bg-gray-900 text-gray-100 font-sans">
+    <!-- Header Component -->
+    <custom-header></custom-header>
+    <!-- Hero Section -->
+    <section class="relative py-20 md:py-32 overflow-hidden">
+        <div class="absolute inset-0 bg-gradient-to-r from-teal-900/20 to-indigo-900/20 z-0"></div>
+        <div class="container mx-auto px-4 relative z-10">
+            <div class="max-w-3xl mx-auto text-center">
+                <h1 class="text-4xl md:text-6xl font-playfair font-bold mb-6">
+                    Transform Your <span class="text-teal-400">Wellness</span> Journey
+                </h1>
+                <p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
+                    Personalized health plans, expert guidance, and community support to help you achieve your wellness goals.
+                </p>
+                <div class="flex flex-col sm:flex-row justify-center gap-4">
+                    <a href="#services" class="bg-teal-500 hover:bg-teal-600 text-white font-medium py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
+                        Explore Services
+                    </a>
+                    <a href="#booking" class="bg-transparent border-2 border-teal-500 text-teal-400 hover:bg-teal-500 hover:text-white font-medium py-3 px-8 rounded-full transition duration-300">
+                        Book Free Consultation
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Services Section -->
+    <section id="services" class="py-20 bg-gray-800">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-playfair font-bold mb-4">Our Wellness Services</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">Comprehensive health solutions tailored to your unique needs</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
+                <div class="bg-gray-700 rounded-xl p-8 hover:bg-gray-600 transition duration-300 transform hover:-translate-y-2">
+                    <div class="w-16 h-16 rounded-full bg-teal-500/10 flex items-center justify-center mb-6">
+                        <i data-feather="heart" class="text-teal-400 w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold mb-3">Personalized Nutrition Plans</h3>
+                    <p class="text-gray-300 mb-4">Custom meal plans designed by certified nutritionists to fuel your body optimally.</p>
+                    <a href="#" class="text-teal-400 hover:text-teal-300 font-medium flex items-center">
+                        Learn more
+                        <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                    </a>
+                </div>
+                <div class="bg-gray-700 rounded-xl p-8 hover:bg-gray-600 transition duration-300 transform hover:-translate-y-2">
+                    <div class="w-16 h-16 rounded-full bg-indigo-500/10 flex items-center justify-center mb-6">
+                        <i data-feather="activity" class="text-indigo-400 w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold mb-3">Fitness Training Programs</h3>
+                    <p class="text-gray-300 mb-4">Personalized workout routines that adapt to your fitness level and goals.</p>
+                    <a href="#" class="text-teal-400 hover:text-teal-300 font-medium flex items-center">
+                        Learn more
+                        <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                    </a>
+                </div>
+                <div class="bg-gray-700 rounded-xl p-8 hover:bg-gray-600 transition duration-300 transform hover:-translate-y-2">
+                    <div class="w-16 h-16 rounded-full bg-purple-500/10 flex items-center justify-center mb-6">
+                        <i data-feather="moon" class="text-purple-400 w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-2xl font-semibold mb-3">Mental Wellness Support</h3>
+                    <p class="text-gray-300 mb-4">Mindfulness techniques and stress management strategies for holistic well-being.</p>
+                    <a href="#" class="text-teal-400 hover:text-teal-300 font-medium flex items-center">
+                        Learn more
+                        <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Team Section -->
+    <section class="py-20">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-playfair font-bold mb-4">Meet Our Wellness Experts</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">Certified professionals dedicated to your health journey</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <div class="bg-gray-800 rounded-xl overflow-hidden">
+                    <div class="h-64 bg-gray-700 relative">
+                        <img src="http://static.photos/people/320x240/1" alt="Dr. Sarah Johnson" class="w-full h-full object-cover">
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
+                            <h3 class="text-xl font-semibold">Dr. Sarah Johnson</h3>
+                            <p class="text-teal-400">Nutritionist</p>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <p class="text-gray-300 mb-4">10+ years experience in holistic nutrition and dietary planning.</p>
+                        <a href="#" class="text-teal-400 hover:text-teal-300 font-medium flex items-center">
+                            View Profile
+                            <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="bg-gray-800 rounded-xl overflow-hidden">
+                    <div class="h-64 bg-gray-700 relative">
+                        <img src="http://static.photos/people/320x240/2" alt="Mike Rodriguez" class="w-full h-full object-cover">
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
+                            <h3 class="text-xl font-semibold">Mike Rodriguez</h3>
+                            <p class="text-teal-400">Fitness Trainer</p>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <p class="text-gray-300 mb-4">Specialized in strength training and functional fitness programs.</p>
+                        <a href="#" class="text-teal-400 hover:text-teal-300 font-medium flex items-center">
+                            View Profile
+                            <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="bg-gray-800 rounded-xl overflow-hidden">
+                    <div class="h-64 bg-gray-700 relative">
+                        <img src="http://static.photos/people/320x240/3" alt="Emma Chen" class="w-full h-full object-cover">
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
+                            <h3 class="text-xl font-semibold">Emma Chen</h3>
+                            <p class="text-teal-400">Wellness Coach</p>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <p class="text-gray-300 mb-4">Mindfulness expert helping clients achieve mental balance.</p>
+                        <a href="#" class="text-teal-400 hover:text-teal-300 font-medium flex items-center">
+                            View Profile
+                            <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="bg-gray-800 rounded-xl overflow-hidden">
+                    <div class="h-64 bg-gray-700 relative">
+                        <img src="http://static.photos/people/320x240/4" alt="Dr. James Wilson" class="w-full h-full object-cover">
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
+                            <h3 class="text-xl font-semibold">Dr. James Wilson</h3>
+                            <p class="text-teal-400">Health Consultant</p>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <p class="text-gray-300 mb-4">Integrative health specialist with focus on preventive care.</p>
+                        <a href="#" class="text-teal-400 hover:text-teal-300 font-medium flex items-center">
+                            View Profile
+                            <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Success Stories -->
+    <section class="py-20 bg-gray-800">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-playfair font-bold mb-4">Success Stories</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">Real transformations from our wellness community</p>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                <div class="bg-gray-700 rounded-xl overflow-hidden">
+                    <div class="md:flex">
+                        <div class="md:w-1/2">
+                            <div class="h-64 md:h-full bg-gray-600">
+                                <img src="http://static.photos/people/320x240/5" alt="Before" class="w-full h-full object-cover">
+                            </div>
+                        </div>
+                        <div class="md:w-1/2 p-8">
+                            <div class="flex items-center mb-4">
+                                <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">BEFORE</span>
+                            </div>
+                            <h3 class="text-xl font-semibold mb-3">Sarah's Journey to Vitality</h3>
+                            <p class="text-gray-300 mb-4">Struggling with energy and weight issues for years.</p>
+                            <ul class="text-gray-400 space-y-2">
+                                <li class="flex items-center">
+                                    <i data-feather="minus" class="w-4 h-4 mr-2 text-red-400"></i>
+                                    45 lbs overweight
+                                </li>
+                                <li class="flex items-center">
+                                    <i data-feather="minus" class="w-4 h-4 mr-2 text-red-400"></i>
+                                    Chronic fatigue
+                                </li>
+                                <li class="flex items-center">
+                                    <i data-feather="minus" class="w-4 h-4 mr-2 text-red-400"></i>
+                                    Poor sleep quality
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-700 rounded-xl overflow-hidden">
+                    <div class="md:flex">
+                        <div class="md:w-1/2">
+                            <div class="h-64 md:h-full bg-gray-600">
+                                <img src="http://static.photos/people/320x240/6" alt="After" class="w-full h-full object-cover">
+                            </div>
+                        </div>
+                        <div class="md:w-1/2 p-8">
+                            <div class="flex items-center mb-4">
+                                <span class="bg-green-500 text-white text-xs font-bold px-2 py-1 rounded">AFTER</span>
+                            </div>
+                            <h3 class="text-xl font-semibold mb-3">Sarah's Transformation</h3>
+                            <p class="text-gray-300 mb-4">Now thriving with renewed energy and confidence.</p>
+                            <ul class="text-gray-400 space-y-2">
+                                <li class="flex items-center">
+                                    <i data-feather="plus" class="w-4 h-4 mr-2 text-green-400"></i>
+                                    Lost 45 lbs in 8 months
+                                </li>
+                                <li class="flex items-center">
+                                    <i data-feather="plus" class="w-4 h-4 mr-2 text-green-400"></i>
+                                    95% energy improvement
+                                </li>
+                                <li class="flex items-center">
+                                    <i data-feather="plus" class="w-4 h-4 mr-2 text-green-400"></i>
+                                    Sleeps 7-8 hours nightly
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Blog Section -->
+    <section class="py-20">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-playfair font-bold mb-4">Health & Wellness Blog</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">Latest insights and tips for your wellness journey</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div class="bg-gray-800 rounded-xl overflow-hidden">
+                    <div class="h-48 bg-gray-700">
+                        <img src="http://static.photos/food/320x240/1" alt="Healthy Eating" class="w-full h-full object-cover">
+                    </div>
+                    <div class="p-6">
+                        <span class="text-teal-400 text-sm font-medium">Nutrition</span>
+                        <h3 class="text-xl font-semibold my-3">10 Superfoods to Boost Your Immune System</h3>
+                        <p class="text-gray-400 mb-4">Discover powerful foods that naturally strengthen your body's defenses.</p>
+                        <a href="#" class="text-teal-400 hover:text-teal-300 font-medium flex items-center">
+                            Read Article
+                            <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="bg-gray-800 rounded-xl overflow-hidden">
+                    <div class="h-48 bg-gray-700">
+                        <img src="http://static.photos/fitness/320x240/2" alt="Exercise" class="w-full h-full object-cover">
+                    </div>
+                    <div class="p-6">
+                        <span class="text-indigo-400 text-sm font-medium">Fitness</span>
+                        <h3 class="text-xl font-semibold my-3">The Science Behind HIIT Training</h3>
+                        <p class="text-gray-400 mb-4">How high-intensity interval training maximizes fat burning and fitness gains.</p>
+                        <a href="#" class="text-teal-400 hover:text-teal-300 font-medium flex items-center">
+                            Read Article
+                            <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="bg-gray-800 rounded-xl overflow-hidden">
+                    <div class="h-48 bg-gray-700">
+                        <img src="http://static.photos/wellness/320x240/3" alt="Mental Health" class="w-full h-full object-cover">
+                    </div>
+                    <div class="p-6">
+                        <span class="text-purple-400 text-sm font-medium">Mental Health</span>
+                        <h3 class="text-xl font-semibold my-3">Mindfulness Practices for Daily Stress Relief</h3>
+                        <p class="text-gray-400 mb-4">Simple techniques to incorporate mindfulness into your busy schedule.</p>
+                        <a href="#" class="text-teal-400 hover:text-teal-300 font-medium flex items-center">
+                            Read Article
+                            <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <a href="#" class="inline-flex items-center text-teal-400 hover:text-teal-300 font-medium">
+                    View All Articles
+                    <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section class="py-20 bg-gray-800">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-playfair font-bold mb-4">What Our Clients Say</h2>
+                <p class="text-gray-400 max-w-2xl mx-auto">Hear from those who've transformed their lives with us</p>
+            </div>
+            <custom-testimonials></custom-testimonials>
+        </div>
+    </section>
+    <!-- Booking Section -->
+    <section id="booking" class="py-20">
+        <div class="container mx-auto px-4">
+            <div class="max-w-4xl mx-auto bg-gray-800 rounded-2xl overflow-hidden">
+                <div class="md:flex">
+                    <div class="md:w-2/5 bg-gradient-to-br from-teal-600 to-indigo-700 p-10 flex flex-col justify-center">
+                        <h2 class="text-3xl font-playfair font-bold mb-4">Free Consultation</h2>
+                        <p class="mb-6">Book your complimentary 30-minute session with our wellness experts.</p>
+                        <ul class="space-y-3">
+                            <li class="flex items-center">
+                                <i data-feather="check-circle" class="w-5 h-5 mr-3 text-teal-300"></i>
+                                Personalized health assessment
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="check-circle" class="w-5 h-5 mr-3 text-teal-300"></i>
+                                Goal setting session
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="check-circle" class="w-5 h-5 mr-3 text-teal-300"></i>
+                                Custom wellness roadmap
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="md:w-3/5 p-10">
+                        <form id="consultation-form" class="space-y-6">
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div>
+                                    <label class="block text-gray-300 mb-2">First Name</label>
+                                    <input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal-500" required>
+                                </div>
+                                <div>
+                                    <label class="block text-gray-300 mb-2">Last Name</label>
+                                    <input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal-500" required>
+                                </div>
+                            </div>
+                            <div>
+                                <label class="block text-gray-300 mb-2">Email</label>
+                                <input type="email" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal-500" required>
+                            </div>
+                            <div>
+                                <label class="block text-gray-300 mb-2">Phone</label>
+                                <input type="tel" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal-500" required>
+                            </div>
+                            <div>
+                                <label class="block text-gray-300 mb-2">Preferred Date & Time</label>
+                                <input type="datetime-local" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal-500" required>
+                            </div>
+                            <div>
+                                <label class="block text-gray-300 mb-2">What are your wellness goals?</label>
+                                <textarea class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal-500" rows="3"></textarea>
+                            </div>
+                            <button type="submit" class="w-full bg-teal-500 hover:bg-teal-600 text-white font-medium py-3 px-6 rounded-lg transition duration-300">
+                                Book Free Consultation
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer Component -->
+    <custom-footer></custom-footer>
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/header.js"></script>
+    <script src="components/testimonials.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,42 @@

+// Testimonial slider functionality
+document.addEventListener('DOMContentLoaded', function() {
+    // Form submission handling
+    const form = document.getElementById('consultation-form');
+    if (form) {
+        form.addEventListener('submit', function(e) {
+            e.preventDefault();
+            // In a real application, you would send this data to a server
+            alert('Thank you for booking your free consultation! We will contact you shortly to confirm your appointment.');
+            form.reset();
+        });
+    }
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+    // Animation on scroll
+    const observerOptions = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.1
+    };
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-fade-in');
+            }
+        });
+    }, observerOptions);
+    document.querySelectorAll('section > div').forEach(section => {
+        observer.observe(section);
+    });
+});

style.css CHANGED Viewed

@@ -1,28 +1,91 @@
 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;
 }

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+:root {
+  --primary-color: #0d9488; /* teal-500 */
+  --secondary-color: #6366f1; /* indigo-500 */
+}
 body {
+  font-family: 'Poppins', sans-serif;
+  background-color: #111827; /* gray-900 */
+  color: #f3f4f6; /* gray-100 */
+}
+.font-playfair {
+  font-family: 'Playfair Display', serif;
+}
+/* Custom animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-fade-in {
+  animation: fadeIn 0.8s ease-out;
+}
+/* Testimonial slider custom styles */
+.testimonial-slider {
+  position: relative;
+  overflow: hidden;
+}
+.testimonial-slide {
+  transition: transform 0.5s ease-in-out;
+}
+/* Form styling */
+#consultation-form input,
+#consultation-form textarea {
+  transition: all 0.3s ease;
 }
+#consultation-form input:focus,
+#consultation-form textarea:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.3);
 }
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .hero-content {
+    padding-top: 2rem;
+  }
+  .booking-section {
+    padding: 1.5rem;
+  }
 }
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
 }
+::-webkit-scrollbar-track {
+  background: #1f2937;
 }
+::-webkit-scrollbar-thumb {
+  background: var(--primary-color);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #0f766e;
+}
+/* Feather icons sizing */
+.feather {
+  width: 1em;
+  height: 1em;
+}