|
|
<!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> |
