| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Serene Flow | Mindful Yoga for Men</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"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| bamboo: { |
| 50: '#f8f5f0', |
| 100: '#e8e0d1', |
| 200: '#d8cbb3', |
| 300: '#c0b28a', |
| 400: '#a8996a', |
| 500: '#8f8252', |
| 600: '#756a43', |
| 700: '#5c5335', |
| 800: '#433d27', |
| 900: '#2a271a', |
| }, |
| stone: { |
| 50: '#f5f5f4', |
| 100: '#e7e5e4', |
| 200: '#d6d3d1', |
| 300: '#a8a29e', |
| 400: '#78716c', |
| 500: '#57534e', |
| 600: '#44403c', |
| 700: '#292524', |
| 800: '#1c1917', |
| 900: '#0c0a09', |
| } |
| }, |
| fontFamily: { |
| sans: ['"Noto Sans"', 'sans-serif'], |
| serif: ['"Noto Serif"', 'serif'], |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600&family=Noto+Serif:wght@400;500;600&display=swap'); |
| |
| body { |
| font-family: 'Noto Sans', sans-serif; |
| background-color: #f8f5f0; |
| color: #292524; |
| } |
| |
| .nav-link { |
| position: relative; |
| } |
| |
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 1px; |
| bottom: -2px; |
| left: 0; |
| background-color: #8f8252; |
| transition: width 0.3s ease; |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| |
| .btn { |
| transition: all 0.3s ease; |
| letter-spacing: 0.5px; |
| } |
| |
| .btn:hover { |
| transform: translateY(-1px); |
| } |
| |
| .section-divider { |
| height: 1px; |
| background: linear-gradient(90deg, rgba(143,130,82,0) 0%, rgba(143,130,82,0.3) 50%, rgba(143,130,82,0) 100%); |
| } |
| |
| .testimonial-card { |
| transition: all 0.3s ease; |
| } |
| |
| .testimonial-card:hover { |
| transform: translateY(-3px); |
| } |
| |
| .course-card { |
| transition: all 0.3s ease; |
| } |
| |
| .course-card:hover { |
| transform: translateY(-3px); |
| } |
| |
| .breathing-animation { |
| animation: breathe 8s infinite ease-in-out; |
| } |
| |
| @keyframes breathe { |
| 0%, 100% { transform: scale(1); } |
| 50% { transform: scale(1.03); } |
| } |
| </style> |
| </head> |
| <body class="antialiased"> |
| |
| <nav class="bg-bamboo-50 fixed w-full z-10"> |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-20 items-center"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i class="fas fa-leaf text-bamboo-500 text-xl mr-2"></i> |
| <span class="text-xl font-serif font-medium text-stone-700">Serene Flow</span> |
| </div> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-6"> |
| <a href="#home" class="nav-link px-3 py-2 text-sm font-medium text-stone-700">Home</a> |
| <a href="#practice" class="nav-link px-3 py-2 text-sm font-medium text-stone-700">Practice</a> |
| <a href="#philosophy" class="nav-link px-3 py-2 text-sm font-medium text-stone-700">Philosophy</a> |
| <a href="#testimonials" class="nav-link px-3 py-2 text-sm font-medium text-stone-700">Experiences</a> |
| <a href="#contact" class="nav-link px-3 py-2 text-sm font-medium text-stone-700">Connect</a> |
| <button class="border border-bamboo-500 text-bamboo-600 hover:bg-bamboo-100 px-4 py-2 rounded-sm text-sm font-medium btn"> |
| Begin Journey |
| </button> |
| </div> |
| <div class="-mr-2 flex items-center md:hidden"> |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-sm text-stone-500 hover:text-stone-700 hover:bg-bamboo-100 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> |
| <span class="sr-only">Open menu</span> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section id="home" class="pt-24 pb-16 md:pt-28 md:pb-20 bg-bamboo-50"> |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="md:flex md:items-center md:justify-between"> |
| <div class="md:w-1/2 mb-12 md:mb-0"> |
| <h1 class="text-3xl md:text-4xl font-serif font-medium leading-tight mb-6 text-stone-800">Cultivate <span class="text-bamboo-600">Strength</span> Through Stillness</h1> |
| <p class="text-lg text-stone-600 mb-8">A mindful approach to yoga that honors masculine energy while fostering deep peace and resilience.</p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button class="bg-bamboo-500 hover:bg-bamboo-600 text-white px-6 py-3 rounded-sm text-sm font-medium btn"> |
| <i class="fas fa-seedling mr-2"></i> Start Your Practice |
| </button> |
| <button class="border border-bamboo-500 text-bamboo-600 hover:bg-bamboo-100 px-6 py-3 rounded-sm text-sm font-medium btn"> |
| <i class="fas fa-water mr-2"></i> Learn More |
| </button> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center breathing-animation"> |
| <img src="https://images.unsplash.com/photo-1545389336-cf090694435e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1364&q=80" alt="Man meditating in nature" class="rounded-sm shadow-sm w-full max-w-md object-cover h-96"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="section-divider my-12"></div> |
|
|
| |
| <section id="practice" class="py-16 bg-bamboo-50"> |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-2xl md:text-3xl font-serif font-medium mb-4 text-stone-800">The <span class="text-bamboo-600">Pathways</span> of Practice</h2> |
| <p class="text-stone-600 max-w-3xl mx-auto">Choose the approach that resonates with your current season of life</p> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-sm shadow-sm overflow-hidden course-card border border-bamboo-100"> |
| <div class="h-48 bg-bamboo-100 flex items-center justify-center"> |
| <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1520&q=80" alt="Morning practice" class="w-full h-full object-cover opacity-90"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-4"> |
| <h3 class="text-lg font-serif font-medium text-stone-800">Dawn Flow</h3> |
| <span class="bg-bamboo-50 text-bamboo-600 text-xs font-medium px-2 py-0.5 rounded-sm">Gentle</span> |
| </div> |
| <p class="text-stone-600 text-sm mb-4">Morning sequences to awaken the body with grace and set intention for the day.</p> |
| <div class="flex items-center text-stone-500 text-xs mb-4"> |
| <i class="fas fa-sun mr-2"></i> |
| <span>15-20 min • Rise with the sun</span> |
| </div> |
| <button class="w-full border border-bamboo-500 text-bamboo-600 hover:bg-bamboo-100 px-4 py-2 rounded-sm text-xs font-medium btn"> |
| Explore |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-sm shadow-sm overflow-hidden course-card border border-bamboo-100"> |
| <div class="h-48 bg-bamboo-100 flex items-center justify-center"> |
| <img src="https://images.unsplash.com/photo-1541577141970-eebc83ebe30c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Strength practice" class="w-full h-full object-cover opacity-90"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-4"> |
| <h3 class="text-lg font-serif font-medium text-stone-800">Mountain Form</h3> |
| <span class="bg-bamboo-50 text-bamboo-600 text-xs font-medium px-2 py-0.5 rounded-sm">Steady</span> |
| </div> |
| <p class="text-stone-600 text-sm mb-4">Build resilient strength through grounded postures and mindful movement.</p> |
| <div class="flex items-center text-stone-500 text-xs mb-4"> |
| <i class="fas fa-mountain mr-2"></i> |
| <span>25-30 min • Foundational</span> |
| </div> |
| <button class="w-full border border-bamboo-500 text-bamboo-600 hover:bg-bamboo-100 px-4 py-2 rounded-sm text-xs font-medium btn"> |
| Explore |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-sm shadow-sm overflow-hidden course-card border border-bamboo-100"> |
| <div class="h-48 bg-bamboo-100 flex items-center justify-center"> |
| <img src="https://images.unsplash.com/photo-1548602088-819d0b587552?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Evening practice" class="w-full h-full object-cover opacity-90"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-4"> |
| <h3 class="text-lg font-serif font-medium text-stone-800">Twilight Release</h3> |
| <span class="bg-bamboo-50 text-bamboo-600 text-xs font-medium px-2 py-0.5 rounded-sm">Restorative</span> |
| </div> |
| <p class="text-stone-600 text-sm mb-4">Evening rituals to unwind the nervous system and prepare for deep rest.</p> |
| <div class="flex items-center text-stone-500 text-xs mb-4"> |
| <i class="fas fa-moon mr-2"></i> |
| <span>20-25 min • Wind down</span> |
| </div> |
| <button class="w-full border border-bamboo-500 text-bamboo-600 hover:bg-bamboo-100 px-4 py-2 rounded-sm text-xs font-medium btn"> |
| Explore |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="section-divider my-12"></div> |
|
|
| |
| <section id="philosophy" class="py-16 bg-bamboo-50"> |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="md:flex md:items-center md:space-x-12"> |
| <div class="md:w-1/2 mb-12 md:mb-0"> |
| <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bamboo forest" class="rounded-sm shadow-sm w-full object-cover h-96"> |
| </div> |
| <div class="md:w-1/2"> |
| <h2 class="text-2xl md:text-3xl font-serif font-medium mb-6 text-stone-800">Rooted in <span class="text-bamboo-600">Stillness</span>, Growing in Strength</h2> |
| <p class="text-stone-600 mb-6">Like bamboo that bends but does not break, our practice cultivates resilience through mindful movement and conscious breath.</p> |
| <p class="text-stone-600 mb-6">We honor the masculine journey - not through force, but through presence; not through tension, but through balanced effort.</p> |
| <p class="text-stone-600 mb-8">This is yoga that respects your nature while guiding you toward greater harmony within yourself and with the world around you.</p> |
| <button class="border border-bamboo-500 text-bamboo-600 hover:bg-bamboo-100 px-6 py-3 rounded-sm text-sm font-medium btn"> |
| <i class="fas fa-book-open mr-2"></i> Read Our Philosophy |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="section-divider my-12"></div> |
|
|
| |
| <section id="testimonials" class="py-16 bg-bamboo-50"> |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-2xl md:text-3xl font-serif font-medium mb-4 text-stone-800">Voices of <span class="text-bamboo-600">Transformation</span></h2> |
| <p class="text-stone-600 max-w-3xl mx-auto">Hear from men who have found balance through this practice</p> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-sm shadow-sm p-6 testimonial-card border border-bamboo-100"> |
| <div class="flex items-center mb-4"> |
| <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Michael" class="w-12 h-12 rounded-sm object-cover mr-4"> |
| <div> |
| <h4 class="font-medium text-stone-800">Michael</h4> |
| <div class="flex text-bamboo-400 text-xs"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-stone-600 text-sm mb-4 italic">"After years of high-intensity training, Serene Flow taught me the power of moving with awareness. My chronic back pain has disappeared and I feel stronger than ever."</p> |
| <div class="text-xs text-stone-500"> |
| <i class="fas fa-leaf mr-2"></i> Practicing for 8 months |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-sm shadow-sm p-6 testimonial-card border border-bamboo-100"> |
| <div class="flex items-center mb-4"> |
| <img src="https://images.unsplash.com/photo-1530268729831-4b0b9e170218?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="James" class="w-12 h-12 rounded-sm object-cover mr-4"> |
| <div> |
| <h4 class="font-medium text-stone-800">James</h4> |
| <div class="flex text-bamboo-400 text-xs"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-stone-600 text-sm mb-4 italic">"As a CEO, I needed tools to manage stress without losing my edge. The breathing techniques alone have transformed how I show up in meetings and make decisions."</p> |
| <div class="text-xs text-stone-500"> |
| <i class="fas fa-leaf mr-2"></i> Practicing for 1 year |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-sm shadow-sm p-6 testimonial-card border border-bamboo-100"> |
| <div class="flex items-center mb-4"> |
| <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="David" class="w-12 h-12 rounded-sm object-cover mr-4"> |
| <div> |
| <h4 class="font-medium text-stone-800">David</h4> |
| <div class="flex text-bamboo-400 text-xs"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-stone-600 text-sm mb-4 italic">"I came to yoga skeptical it could be masculine. The Mountain Form practice showed me true strength comes from stability and presence, not just muscle."</p> |
| <div class="text-xs text-stone-500"> |
| <i class="fas fa-leaf mr-2"></i> Practicing for 5 months |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="section-divider my-12"></div> |
|
|
| |
| <section class="py-16 bg-bamboo-800 text-white"> |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h2 class="text-2xl md:text-3xl font-serif font-medium mb-6">Begin Your <span class="text-bamboo-200">Journey</span> Today</h2> |
| <p class="text-bamboo-100 mb-8 max-w-3xl mx-auto">Join our community of men discovering strength through mindful movement and conscious breath.</p> |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> |
| <button class="bg-white hover:bg-bamboo-50 text-bamboo-700 px-8 py-3 rounded-sm text-sm font-medium btn"> |
| <i class="fas fa-seedling mr-2"></i> Start 7-Day Practice |
| </button> |
| <button class="border border-white hover:bg-bamboo-700 text-white px-8 py-3 rounded-sm text-sm font-medium btn"> |
| <i class="fas fa-comment mr-2"></i> Speak With a Guide |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 bg-bamboo-50"> |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-2xl md:text-3xl font-serif font-medium mb-4 text-stone-800">Connect <span class="text-bamboo-600">With Us</span></h2> |
| <p class="text-stone-600 max-w-3xl mx-auto">We're here to support your practice and answer any questions</p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 gap-12"> |
| <div> |
| <form> |
| <div class="mb-6"> |
| <label for="name" class="block text-sm font-medium text-stone-700 mb-2">Name</label> |
| <input type="text" id="name" class="w-full px-4 py-2 border border-bamboo-200 rounded-sm focus:ring-bamboo-500 focus:border-bamboo-500 bg-white" placeholder="Your name"> |
| </div> |
| <div class="mb-6"> |
| <label for="email" class="block text-sm font-medium text-stone-700 mb-2">Email</label> |
| <input type="email" id="email" class="w-full px-4 py-2 border border-bamboo-200 rounded-sm focus:ring-bamboo-500 focus:border-bamboo-500 bg-white" placeholder="your@email.com"> |
| </div> |
| <div class="mb-6"> |
| <label for="message" class="block text-sm font-medium text-stone-700 mb-2">Message</label> |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-bamboo-200 rounded-sm focus:ring-bamboo-500 focus:border-bamboo-500 bg-white" placeholder="How can we help you?"></textarea> |
| </div> |
| <button type="submit" class="w-full bg-bamboo-500 hover:bg-bamboo-600 text-white px-6 py-3 rounded-sm text-sm font-medium btn"> |
| Send Message |
| </button> |
| </form> |
| </div> |
| <div> |
| <div class="bg-white p-8 rounded-sm shadow-sm h-full border border-bamboo-100"> |
| <h3 class="text-lg font-serif font-medium mb-6 text-stone-800">Contact Information</h3> |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-map-marker-alt text-bamboo-500 mt-1"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-sm font-medium text-stone-800">Location</h4> |
| <p class="text-stone-600 text-sm">123 Peaceful Path<br>Portland, OR 97201</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-envelope text-bamboo-500 mt-1"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-sm font-medium text-stone-800">Email</h4> |
| <p class="text-stone-600 text-sm">connect@sereneflow.com</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-phone-alt text-bamboo-500 mt-1"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-sm font-medium text-stone-800">Phone</h4> |
| <p class="text-stone-600 text-sm">(503) 555-0182</p> |
| </div> |
| </div> |
| </div> |
| <div class="mt-8"> |
| <h4 class="text-sm font-medium text-stone-800 mb-4">Follow Our Journey</h4> |
| <div class="flex space-x-3"> |
| <a href="#" class="w-8 h-8 rounded-sm bg-bamboo-50 flex items-center justify-center text-bamboo-500 hover:bg-bamboo-100 transition duration-300"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="w-8 h-8 rounded-sm bg-bamboo-50 flex items-center justify-center text-bamboo-500 hover:bg-bamboo-100 transition duration-300"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| <a href="#" class="w-8 h-8 rounded-sm bg-bamboo-50 flex items-center justify-center text-bamboo-500 hover:bg-bamboo-100 transition duration-300"> |
| <i class="fab fa-spotify"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-stone-800 text-bamboo-100 py-12"> |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center mb-4"> |
| <i class="fas fa-leaf text-bamboo-300 text-xl mr-2"></i> |
| <span class="text-xl font-serif font-medium">Serene Flow</span> |
| </div> |
| <p class="text-bamboo-200 text-sm">Mindful yoga practices designed for men seeking strength through stillness.</p> |
| </div> |
| <div> |
| <h4 class="text-sm font-medium mb-4">Practice</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Daily Flows</a></li> |
| <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Breathwork</a></li> |
| <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Meditations</a></li> |
| <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Workshops</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-sm font-medium mb-4">Resources</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Blog</a></li> |
| <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Research</a></li> |
| <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">FAQs</a></li> |
| <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Guides</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-sm font-medium mb-4">Legal</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Terms</a></li> |
| <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Privacy</a></li> |
| <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Cookies</a></li> |
| <li><a href="#" class="text-bamboo-200 hover:text-white text-sm transition duration-300">Accessibility</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-stone-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-bamboo-300 text-xs mb-4 md:mb-0">© 2023 Serene Flow. All rights reserved.</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-bamboo-300 hover:text-white text-xs transition duration-300">Privacy Policy</a> |
| <a href="#" class="text-bamboo-300 hover:text-white text-xs transition duration-300">Terms of Service</a> |
| <a href="#" class="text-bamboo-300 hover:text-white text-xs transition duration-300">Contact</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]'); |
| const mobileMenu = document.createElement('div'); |
| mobileMenu.id = 'mobile-menu'; |
| mobileMenu.className = 'hidden md:hidden bg-white shadow-lg border-t border-bamboo-100'; |
| mobileMenu.innerHTML = ` |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
| <a href="#home" class="block px-3 py-2 text-base font-medium text-stone-700 hover:bg-bamboo-50">Home</a> |
| <a href="#practice" class="block px-3 py-2 text-base font-medium text-stone-700 hover:bg-bamboo-50">Practice</a> |
| <a href="#philosophy" class="block px-3 py-2 text-base font-medium text-stone-700 hover:bg-bamboo-50">Philosophy</a> |
| <a href="#testimonials" class="block px-3 py-2 text-base font-medium text-stone-700 hover:bg-bamboo-50">Experiences</a> |
| <a href="#contact" class="block px-3 py-2 text-base font-medium text-stone-700 hover:bg-bamboo-50">Connect</a> |
| <button class="w-full text-left px-3 py-2 text-base font-medium text-bamboo-600 hover:bg-bamboo-50"> |
| Begin Journey |
| </button> |
| </div> |
| `; |
| document.querySelector('nav').appendChild(mobileMenu); |
| |
| mobileMenuButton.addEventListener('click', function() { |
| const expanded = this.getAttribute('aria-expanded') === 'true'; |
| this.setAttribute('aria-expanded', !expanded); |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| |
| |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenuButton.setAttribute('aria-expanded', 'false'); |
| mobileMenu.classList.add('hidden'); |
| } |
| } |
| }); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=TORZ/lava" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
