All Prompts
All Prompts
Aetheria Wellness Health Landing Page Template
Шаблон лендинга Aetheria Wellness для сайта о здоровье. Отличный выбор для йога-студий, клиник, SPA-салонов. Чистый дизайн, адаптивный.
Prompt
<html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aetheria Wellness — Landing</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
<link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">.font-geist { font-family: 'Geist', sans-serif !important; }</style><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-roboto">.font-roboto { font-family: 'Roboto', sans-serif !important; }</style><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-montserrat">.font-montserrat { font-family: 'Montserrat', sans-serif !important; }</style><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-poppins">.font-poppins { font-family: 'Poppins', sans-serif !important; }</style><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><style id="all-fonts-style-font-playfair">.font-playfair { font-family: 'Playfair Display', serif !important; }</style><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-instrument-serif">.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }</style><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><style id="all-fonts-style-font-merriweather">.font-merriweather { font-family: 'Merriweather', serif !important; }</style><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }</style><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-jakarta">.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }</style><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">.font-manrope { font-family: 'Manrope', sans-serif !important; }</style><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-space-grotesk">.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }</style><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-work-sans">.font-work-sans { font-family: 'Work Sans', sans-serif !important; }</style><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><style id="all-fonts-style-font-pt-serif">.font-pt-serif { font-family: 'PT Serif', serif !important; }</style><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist-mono">.font-geist-mono { font-family: 'Geist Mono', monospace !important; }</style><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><style id="all-fonts-style-font-space-mono">.font-space-mono { font-family: 'Space Mono', monospace !important; }</style><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-quicksand">.font-quicksand { font-family: 'Quicksand', sans-serif !important; }</style><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-nunito">.font-nunito { font-family: 'Nunito', sans-serif !important; }</style><link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap"><style id="all-fonts-style-font-newsreader">.font-newsreader { font-family: 'Newsreader', serif !important; }</style><link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-google-sans-flex">.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }</style><link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-oswald">.font-oswald { font-family: 'Oswald', sans-serif !important; }</style><link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-dm-sans">.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }</style></head>
<body class="min-h-screen bg-[#F7F5F0] text-[#2F3E35] antialiased" style="font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';">
<!-- Ambient background -->
<div class="pointer-events-none fixed -z-10 top-0 right-0 bottom-0 left-0">
<div class="-top-24 -translate-x-1/2 bg-[#8A9A8B]/15 w-[28rem] h-[28rem] rounded-full absolute left-1/2 blur-3xl"></div>
<div class="absolute bottom-[-10rem] left-[-6rem] h-[26rem] w-[26rem] rounded-full bg-[#2F3E35]/10 blur-3xl"></div>
<div class="absolute top-[35%] right-[-8rem] h-[24rem] w-[24rem] rounded-full bg-[#8A9A8B]/10 blur-3xl"></div>
</div>
<!-- Header -->
<header id="siteHeader" class="fixed inset-x-0 top-0 z-50 transition-all duration-300">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div id="navShell" class="mt-3 rounded-2xl border border-[#2F3E35]/10 bg-white/70 shadow-sm shadow-[#2F3E35]/10 backdrop-blur-xl">
<div class="flex items-center justify-between px-3 py-3 sm:px-4">
<!-- Logo -->
<a href="#" class="group flex items-center gap-2.5">
<!-- Mark -->
<svg class="w-[36px] h-[36px]" viewBox="0 0 48 48" fill="none" aria-hidden="true" stroke-width="2" data-icon-replaced="true" style="color: rgb(47, 62, 53); width: 36px; height: 36px">
<path id="lotusStroke" d="M24 7.5c2.2 4.8 2.2 9.6 0 14.4C21.8 17.1 21.8 12.3 24 7.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path id="lotusStroke2" d="M14.4 12.6c5.2 1.3 8.9 4.3 11.1 9-4.9-.8-8.6-3.8-11.1-9Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path id="lotusStroke3" d="M33.6 12.6c-2.5 5.2-6.2 8.2-11.1 9 2.2-4.7 5.9-7.7 11.1-9Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path id="lotusStroke4" d="M10.2 23.2c6.2-.6 11.1 1.4 14.7 6.1-5.6 1-10.5-1.1-14.7-6.1Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class=""></path>
<path id="lotusStroke5" d="M37.8 23.2c-4.2 5-9.1 7.1-14.7 6.1 3.6-4.7 8.5-6.7 14.7-6.1Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class=""></path>
<path id="lotusStroke6" d="M24 29.4c3.5 1.6 6.1 4.6 7.7 9.1-3.8-1.1-6.4-4.1-7.7-9.1Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path id="lotusStroke7" d="M24 29.4c-1.3 5-3.9 8-7.7 9.1 1.6-4.5 4.2-7.5 7.7-9.1Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<!-- Wordmark variants -->
<div class="leading-none">
<div class="flex gap-2 items-baseline">
<span class="cursor-pointer text-lg font-medium text-[#F7F5F0] tracking-tight" style="font-family: 'Playfair Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif" onclick="window.location.href='/home'" role="button" id="logoLight">Aetheria</span>
<span id="logoLightSub" class="sm:inline cursor-pointer text-xs font-medium text-[#F7F5F0]/80 tracking-wide" onclick="window.location.href='/home'" role="button">Wellness</span>
<span id="logoDark" class="text-lg font-medium text-[#2F3E35] tracking-tight" style="font-family: "Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; display: none;">Aetheria</span>
<span class="sm:inline cursor-pointer text-xs font-medium text-[#2F3E35]/70 tracking-wide" onclick="window.location.href='/design-system';window.location.href='/design-system'" role="button" id="logoDarkSub">Wellness</span>
</div>
</div>
</a>
<!-- Nav -->
<nav class="hidden md:flex items-center gap-7 text-sm font-medium">
<a href="/home" class="navLink transition-colors">The Studio</a>
<a href="/class" class="navLink transition-colors">Classes</a>
<a href="/instructors" class="navLink transition-colors">Instructors</a>
<a href="/retreats" class="navLink transition-colors">Retreats</a>
</nav>
<!-- Actions -->
<div class="flex items-center gap-2 sm:gap-3">
<a href="#login" class="hidden sm:inline text-sm font-medium navLink transition-colors">Login</a>
<a href="/class" class="inline-flex items-center justify-center shadow-[#2F3E35]/10 hover:bg-[#7f8f80] focus:outline-none focus:ring-2 focus:ring-[#8A9A8B]/50 focus:ring-offset-2 focus:ring-offset-transparent transition text-sm font-medium text-[#F7F5F0] bg-[#8A9A8B] rounded-full pt-2 pr-4 pb-2 pl-4 shadow-sm">
Book a Class
</a>
<!-- Mobile menu button -->
<button id="menuBtn" class="md:hidden inline-flex items-center justify-center rounded-full border border-[#2F3E35]/15 bg-white/60 px-3 py-2 text-[#2F3E35] backdrop-blur-sm transition hover:bg-white/80 focus:outline-none focus:ring-2 focus:ring-[#2F3E35]/15" aria-expanded="false" aria-controls="mobileNav">
<span class="sr-only">Open menu</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:menu" data-width="18" data-height="18" class="iconify iconify--lucide"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5h16M4 12h16M4 19h16"></path></svg>
</button>
</div>
</div>
<!-- Mobile nav -->
<div id="mobileNav" class="hidden md:hidden border-t px-4 pb-4 pt-3" style="visibility: hidden; display: none;">
<div class="grid gap-2 text-sm font-medium">
<a href="#studio" class="mobileLink rounded-xl px-3 py-2 transition">The Studio</a>
<a href="#classes" class="mobileLink rounded-xl px-3 py-2 transition">Classes</a>
<a href="#instructors" class="mobileLink rounded-xl px-3 py-2 transition">Instructors</a>
<a href="#retreats" class="mobileLink rounded-xl px-3 py-2 transition">Retreats</a>
<a href="#login" class="mobileLink rounded-xl px-3 py-2 transition">Login</a>
</div>
</div>
</div>
</div>
</header>
<!-- Hero -->
<section class="relative min-h-[100svh] overflow-hidden">
<!-- Video background -->
<div class="absolute top-0 right-0 bottom-0 left-0">
<video class="w-full h-full object-cover" autoplay="" muted="" loop="" playsinline="" poster="https://images.unsplash.com/photo-1554311884-415bfda6a5f2?auto=format&fit=crop&w=2400&q=70">
<source src="https://cdn.coverr.co/videos/coverr-woman-meditating-by-the-window-4135/1080p.mp4" type="video/mp4" class="">
</video>
<!-- Overlay -->
<div class="absolute inset-0 bg-gradient-to-b from-[#2F3E35]/45 via-[#2F3E35]/20 to-[#F7F5F0]/90"></div>
<div class="bg-[#2F3E35]/10 absolute top-0 right-0 bottom-0 left-0"></div>
</div>
<div class="flex min-h-[100svh] sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pt-28 pr-4 pb-14 pl-4 relative items-end">
<!-- Added Background Image -->
<div class="overflow-hidden rounded-3xl absolute top-0 right-0 bottom-0 left-0">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/352469cb-8a32-4217-9a65-5c1aeb559715_3840w.webp" alt="Sanctuary ambiance" class="transition-transform duration-700 hover:scale-105 opacity-100 mix-blend-multiply w-full h-full object-cover">
<div class="mix-blend-multiply absolute top-0 right-0 bottom-0 left-0 pointer-events-auto -z-20"></div>
</div>
<div class="relative z-10 w-full">
<div class="max-w-2xl">
<div class="inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/10 px-4 py-2 text-xs font-medium tracking-wide text-[#F7F5F0]/90 backdrop-blur-sm">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="lucide:leaf" data-width="16" data-height="16" class="iconify iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8c0 5.5-4.78 10-10 10"></path><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"></path></g></svg>
Holistic movement • meditation • sound
</div>
<h1 class="mt-6 text-4xl font-medium tracking-tight text-[#F7F5F0] sm:text-5xl lg:text-6xl" style="font-family: 'Playfair Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">
Align Body. Clarity Mind. Soothe Spirit.
</h1>
<p class="mt-5 max-w-xl text-sm font-normal leading-relaxed text-[#F7F5F0]/85 sm:text-base">
Your holistic sanctuary in the heart of the city.
</p>
<div class="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center">
<a href="#journey" class="inline-flex items-center justify-center gap-2 rounded-full bg-[#8A9A8B] px-6 py-3 text-sm font-medium text-[#F7F5F0] shadow-sm shadow-[#2F3E35]/20 hover:bg-[#7f8f80] focus:outline-none focus:ring-2 focus:ring-[#8A9A8B]/50 focus:ring-offset-2 focus:ring-offset-[#2F3E35]/0 transition">
Start Your Journey
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:arrow-right" data-width="18" data-height="18" class="iconify iconify--lucide"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7l7 7l-7 7"></path></svg>
</a>
<a href="/class" class="inline-flex items-center justify-center gap-2 hover:bg-white/15 focus:outline-none focus:ring-2 focus:ring-white/30 transition text-sm font-medium text-[#F7F5F0] bg-white/10 border-white/35 border rounded-full pt-3 pr-6 pb-3 pl-6 backdrop-blur-sm">
View Class Schedule
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:calendar" data-width="18" data-height="18" class="iconify iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M8 2v4m8-4v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></g></svg>
</a>
</div>
<div class="mt-10 flex items-center gap-5 text-xs font-medium text-[#F7F5F0]/80">
<div class="flex items-center gap-2">
<span class="inline-flex h-2 w-2 rounded-full bg-[#F7F5F0]/70"></span>
Low-saturation, calming space
</div>
<div class="hidden sm:flex items-center gap-2">
<span class="inline-flex h-2 w-2 rounded-full bg-[#F7F5F0]/70"></span>
Small group classes
</div>
</div>
</div>
</div>
</div>
<!-- Scroll hint -->
<div class="pointer-events-none -translate-x-1/2 absolute bottom-6 left-1/2">
<div class="flex gap-2 text-xs font-medium text-[#F7F5F0]/85 bg-white/10 border-white/20 border rounded-full pt-2 pr-4 pb-2 pl-4 backdrop-blur-sm items-center">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="lucide:mouse" data-width="16" data-height="16" class="iconify iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="14" height="20" x="5" y="2" rx="7"></rect><path d="M12 6v4"></path></g></svg>
Scroll
</div>
</div>
</section>
<!-- Introduction -->
<section id="studio" class="relative scroll-mt-28">
<div class="sm:px-6 lg:px-8 lg:py-20 max-w-7xl mr-auto ml-auto pt-16 pr-4 pb-16 pl-4">
<div class="grid items-center gap-10 lg:grid-cols-12 lg:gap-12">
<div class="lg:col-span-6">
<div class="inline-flex items-center gap-2 rounded-full border border-[#2F3E35]/10 bg-white/40 px-4 py-2 text-xs font-medium tracking-wide text-[#2F3E35]/80 shadow-sm shadow-[#2F3E35]/5">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="lucide:wind" data-width="16" data-height="16" class="iconify iconify--lucide"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.8 19.6A2 2 0 1 0 14 16H2m15.5-8a2.5 2.5 0 1 1 2 4H2m7.8-7.6A2 2 0 1 1 11 8H2"></path></svg>
A pause, designed with intention
</div>
<h2 class="mt-6 text-3xl font-medium tracking-tight text-[#2F3E35] sm:text-4xl" style="font-family: 'Playfair Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">
Not just a studio. A space to breathe.
</h2>
<p class="mt-5 text-sm leading-relaxed text-[#2F3E35]/80 sm:text-base">
In a world that never stops, Aetheria offers a pause. We combine ancient yogic traditions with modern somatic therapy to help you find your rhythm.
</p>
<div class="mt-8 grid gap-3 sm:grid-cols-2">
<div class="rounded-2xl border border-[#2F3E35]/10 bg-white/55 p-5 shadow-sm shadow-[#2F3E35]/5">
<div class="flex items-start gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[#8A9A8B]/20 text-[#2F3E35]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:heart" data-width="18" data-height="18" class="iconify iconify--lucide"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676a.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path></svg>
</div>
<div class="">
<div class="text-sm font-medium text-[#2F3E35]">Somatic-informed</div>
<div class="mt-1 text-xs leading-relaxed text-[#2F3E35]/70">Build awareness, safety, and ease—one breath at a time.</div>
</div>
</div>
</div>
<div class="rounded-2xl border border-[#2F3E35]/10 bg-white/55 p-5 shadow-sm shadow-[#2F3E35]/5">
<div class="flex items-start gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[#8A9A8B]/20 text-[#2F3E35]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:sparkles" data-width="18" data-height="18" class="iconify iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594zM20 2v4m2-2h-4"></path><circle cx="4" cy="20" r="2"></circle></g></svg>
</div>
<div class="">
<div class="text-sm font-medium text-[#2F3E35]">Calm ritual</div>
<div class="mt-1 text-xs leading-relaxed text-[#2F3E35]/70">Soft light, organic textures, and thoughtful pacing.</div>
</div>
</div>
</div>
</div>
</div>
<div class="lg:col-span-6">
<div class="relative overflow-hidden rounded-3xl border border-[#2F3E35]/10 bg-white/40 shadow-lg shadow-[#2F3E35]/10">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/58e8b929-46f7-4ac2-afcc-365ff8c16826_1600w.jpg?w=800&q=80" alt="A calm studio corner with earthy textures" class="sm:h-[30rem] w-full h-[26rem] object-cover" style="">
<div class="bg-gradient-to-t from-[#2F3E35]/30 via-transparent to-transparent absolute top-0 right-0 bottom-0 left-0"></div>
<div class="absolute bottom-4 left-4 right-4">
<div class="flex flex-col gap-2 rounded-2xl border border-white/20 bg-white/35 p-4 backdrop-blur-md">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-2 text-xs font-medium text-[#2F3E35]/80">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="lucide:flame" data-width="16" data-height="16" class="iconify iconify--lucide"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0a5 5 0 0 1 1-3a1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4"></path></svg>
Studio ritual
</div>
<div class="text-xs font-medium text-[#2F3E35]/70">Clay • jute • gentle smoke</div>
</div>
<div class="text-sm font-medium text-[#2F3E35]" style="font-family: 'Playfair Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">
Warm, quiet, and intentionally minimal.
</div>
</div>
</div>
</div>
<div class="mt-4 text-xs text-[#2F3E35]/60">
Images are illustrative placeholders to match the intended mood: low saturation, soft shadow, breathable composition.
</div>
</div>
</div>
</div>
</section>
<!-- The Experience -->
<section id="journey" class="relative scroll-mt-28">
<div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
<div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
<div class="max-w-2xl">
<h2 class="text-3xl font-medium tracking-tight text-[#2F3E35] sm:text-4xl" style="font-family: 'Playfair Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">
The experience, curated into pathways.
</h2>
<p class="mt-4 text-sm leading-relaxed text-[#2F3E35]/75 sm:text-base">
Choose what your nervous system needs today—then let your practice guide you back to center.
</p>
</div>
<a href="#classes" class="inline-flex items-center gap-2 text-sm font-medium text-[#2F3E35]/80 hover:text-[#2F3E35] transition">
Explore classes
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:arrow-right" data-width="18" data-height="18" class="iconify iconify--lucide"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7l7 7l-7 7"></path></svg>
</a>
</div>
<div class="mt-10 grid gap-6 lg:grid-cols-3">
<!-- Movement -->
<article class="group rounded-3xl border border-[#2F3E35]/10 bg-white/50 p-6 shadow-sm shadow-[#2F3E35]/5 transition hover:shadow-md hover:shadow-[#2F3E35]/10">
<div class="flex items-center justify-between gap-4">
<div class="text-sm font-medium text-[#2F3E35]" style="font-family: 'Playfair Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">Movement</div>
<div class="flex h-10 w-10 items-center justify-center rounded-2xl bg-[#8A9A8B]/20 text-[#2F3E35]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:activity" data-width="18" data-height="18" class="iconify iconify--lucide"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg>
</div>
</div>
<div class="mt-5 overflow-hidden rounded-full border border-[#2F3E35]/10 bg-[#F7F5F0] shadow-sm shadow-[#2F3E35]/5">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/dbd2be38-6163-4516-a322-516a7a82d667_1600w.webp" alt="Abstract yoga movement" class="aspect-square w-full object-cover saturate-75" style="">
</div>
<p class="mt-5 text-sm leading-relaxed text-[#2F3E35]/75">
Dynamic flows to build strength.
</p>
<div class="mt-5 flex items-center justify-between text-xs text-[#2F3E35]/65">
<span>Vinyasa • Mobility</span>
<span class="inline-flex items-center gap-1.5">
45–60 min
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="lucide:clock" data-width="16" data-height="16" class="iconify iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></g></svg>
</span>
</div>
</article>
<!-- Stillness -->
<article class="group rounded-3xl border border-[#2F3E35]/10 bg-white/50 p-6 shadow-sm shadow-[#2F3E35]/5 transition hover:shadow-md hover:shadow-[#2F3E35]/10">
<div class="flex items-center justify-between gap-4">
<div class="text-sm font-medium text-[#2F3E35]" style="font-family: 'Playfair Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">Stillness</div>
<div class="flex h-10 w-10 items-center justify-center rounded-2xl bg-[#8A9A8B]/20 text-[#2F3E35]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:moon" data-width="18" data-height="18" class="iconify iconify--lucide"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path></svg>
</div>
</div>
<div class="mt-5 overflow-hidden rounded-full border border-[#2F3E35]/10 bg-[#F7F5F0] shadow-sm shadow-[#2F3E35]/5">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/5e710d7d-e9d7-4d30-ac98-d85eb5c19e67_1600w.webp" alt="Hands resting in a gentle meditation mudra" class="aspect-square w-full object-cover saturate-75" style="">
</div>
<p class="mt-5 text-sm leading-relaxed text-[#2F3E35]/75">
Guided Meditation to release tension.
</p>
<div class="mt-5 flex items-center justify-between text-xs text-[#2F3E35]/65">
<span>Breath • Nidra</span>
<span class="inline-flex items-center gap-1.5">
20–45 min
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="lucide:clock" data-width="16" data-height="16" class="iconify iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></g></svg>
</span>
</div>
</article>
<!-- Resonance -->
<article class="group rounded-3xl border border-[#2F3E35]/10 bg-white/50 p-6 shadow-sm shadow-[#2F3E35]/5 transition hover:shadow-md hover:shadow-[#2F3E35]/10">
<div class="flex items-center justify-between gap-4">
<div class="text-sm font-medium text-[#2F3E35]" style="font-family: 'Playfair Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">Resonance</div>
<div class="flex h-10 w-10 items-center justify-center rounded-2xl bg-[#8A9A8B]/20 text-[#2F3E35]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:waves" data-width="18" data-height="18" class="iconify iconify--lucide"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2c2.5 0 2.5-2 5-2c1.3 0 1.9.5 2.5 1M2 12c.6.5 1.2 1 2.5 1c2.5 0 2.5-2 5-2c2.6 0 2.4 2 5 2c2.5 0 2.5-2 5-2c1.3 0 1.9.5 2.5 1M2 18c.6.5 1.2 1 2.5 1c2.5 0 2.5-2 5-2c2.6 0 2.4 2 5 2c2.5 0 2.5-2 5-2c1.3 0 1.9.5 2.5 1"></path></svg>
</div>
</div>
<div class="mt-5 overflow-hidden rounded-full border border-[#2F3E35]/10 bg-[#F7F5F0] shadow-sm shadow-[#2F3E35]/5">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c87b2534-a3c0-4f40-8666-7e8328cb3917_1600w.webp" alt="A minimal sound bowl detail" class="aspect-square w-full object-cover saturate-75" style="">
</div>
<p class="mt-5 text-sm leading-relaxed text-[#2F3E35]/75">
Sound Baths to recalibrate.
</p>
<div class="mt-5 flex items-center justify-between text-xs text-[#2F3E35]/65">
<span class="">Bowls • Tuning</span>
<span class="inline-flex items-center gap-1.5">
45–60 min
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="lucide:clock" data-width="16" data-height="16" class="iconify iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></g></svg>
</span>
</div>
</article>
</div>
</div>
</section>
<!-- Upcoming classes widget -->
<section id="classes" class="relative scroll-mt-28">
<div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
<div class="grid items-start gap-8 lg:grid-cols-12 lg:gap-10">
<div class="lg:col-span-5">
<h2 class="text-3xl font-medium tracking-tight text-[#2F3E35] sm:text-4xl" style="font-family: 'Playfair Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">
Upcoming class
</h2>
<p class="mt-4 text-sm leading-relaxed text-[#2F3E35]/75 sm:text-base">
A gentle nudge to move from “maybe” to “I’m going.”
</p>
<div class="mt-6 rounded-2xl border border-[#2F3E35]/10 bg-white/50 p-5 shadow-sm shadow-[#2F3E35]/5">
<div class="flex items-start gap-3">
<div class="mt-0.5 flex h-10 w-10 items-center justify-center rounded-xl bg-[#8A9A8B]/20 text-[#2F3E35]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:timer" data-width="18" data-height="18" class="iconify iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M10 2h4m-2 12l3-3"></path><circle cx="12" cy="14" r="8"></circle></g></svg>
</div>
<div class="">
<div class="text-sm font-medium text-[#2F3E35]">Starting soon</div>
<div class="mt-1 text-xs leading-relaxed text-[#2F3E35]/70">
Spots update in real time. Reserve early for the best schedule.
</div>
</div>
</div>
</div>
</div>
<div class="lg:col-span-7">
<div class="overflow-hidden rounded-3xl border border-[#2F3E35]/10 bg-white/55 shadow-lg shadow-[#2F3E35]/10">
<div class="grid gap-0 md:grid-cols-12">
<div class="relative md:col-span-5">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/36f4f4f5-c0f6-4192-b331-30772fc9902e_800w.webp" alt="A rolled yoga mat with a water bottle and towel" class="h-full w-full object-cover md:min-h-[18rem] saturate-75" style="">
<div class="absolute inset-0 bg-gradient-to-t from-[#2F3E35]/20 via-transparent to-transparent"></div>
</div>
<div class="md:col-span-7">
<div class="p-6 sm:p-7">
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="inline-flex items-center gap-2 rounded-full border border-[#2F3E35]/10 bg-[#F7F5F0]/70 px-3 py-1.5 text-xs font-medium text-[#2F3E35]/80">
<span class="relative flex h-2.5 w-2.5">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500/60"></span>
<span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-red-500"></span>
</span>
Starting Soon
</div>
<div class="text-xs font-medium text-[#2F3E35]/65">
Next Session: <span class="text-[#2F3E35]/90">18:30</span>
<span class="ml-2 text-[#2F3E35]/70">(Starts in <span id="countdown">01h 45m</span>)</span>
</div>
</div>
<div class="mt-5">
<div class="text-2xl font-medium tracking-tight text-[#2F3E35] sm:text-3xl" style="font-family: 'Playfair Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">
Sunset Hatha Flow
</div>
<div class="mt-2 flex items-center gap-2 text-sm text-[#2F3E35]/75">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:user" data-width="18" data-height="18" class="iconify iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></g></svg>
w/ Elena R.
</div>
</div>
<div class="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div class="text-xs text-[#2F3E35]/65">
Intensity: <span class="font-medium text-[#2F3E35]/85">Gentle–Moderate</span><span class="mx-2 text-[#2F3E35]/40">•</span>
Focus: <span class="font-medium text-[#2F3E35]/85">Hips + breath</span>
</div>
<a href="#reserve" class="inline-flex items-center justify-center gap-2 rounded-full bg-[#8A9A8B] px-5 py-2.5 text-sm font-medium text-[#F7F5F0] shadow-sm shadow-[#2F3E35]/15 hover:bg-[#7f8f80] focus:outline-none focus:ring-2 focus:ring-[#8A9A8B]/50 focus:ring-offset-2 focus:ring-offset-white transition">
Reserve Last 2 Spots
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:arrow-right" data-width="18" data-height="18" class="iconify iconify--lucide"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7l7 7l-7 7"></path></svg>
</a>
</div>
<div class="mt-6 rounded-2xl border border-[#2F3E35]/10 bg-[#F7F5F0]/60 p-4">
<div class="flex items-start gap-3">
<div class="flex h-9 w-9 items-center justify-center rounded-xl bg-white/70 text-[#2F3E35]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:info" data-width="18" data-height="18" class="iconify iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4m0-4h.01"></path></g></svg>
</div>
<div class="text-xs leading-relaxed text-[#2F3E35]/70">
Arrive 10 minutes early for grounding breathwork and a quiet start. Mats available, but feel free to bring your own.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-4 text-xs text-[#2F3E35]/60">
Widget is a static simulation (countdown animates) to create urgency and reduce decision time.
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials (interactive snapshot simulation) -->
<section id="instructors" class="relative scroll-mt-28">
<div class="sm:px-6 lg:px-8 lg:py-20 max-w-7xl mr-auto ml-auto pt-16 pr-4 pb-16 pl-4">
<div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
<div class="max-w-2xl">
<h2 class="text-3xl font-medium tracking-tight text-[#2F3E35] sm:text-4xl" style="font-family: 'Playfair Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">
A community that feels like exhale.
</h2>
<p class="mt-4 text-sm leading-relaxed text-[#2F3E35]/75 sm:text-base">
A snapshot of member stories—centered on the moment your cursor would naturally pause.
</p>
</div>
<div class="text-xs font-medium text-[#2F3E35]/60">
Hover snapshot: card 3 is focused
</div>
</div>
<div class="mt-10 overflow-hidden rounded-3xl border border-[#2F3E35]/10 bg-white/35 shadow-sm shadow-[#2F3E35]/5">
<div class="sm:p-7 pt-6 pr-6 pb-6 pl-6">
<div class="flex overflow-x-auto snap-x w-full pt-8 pr-4 pb-12 pl-4 gap-x-6 gap-y-6" style="scrollbar-width: none; -ms-overflow-style: none">
<!-- Style to hide scrollbar -->
<style class="">
[data-element-id="aura-emjx5p4sznd9ov8b"]::-webkit-scrollbar {
display: none;
}
</style>
<!-- Card 1 -->
<div class="group relative w-[18rem] shrink-0 snap-center flex flex-col justify-between rounded-3xl border border-[#2F3E35]/10 bg-white/60 p-6 shadow-sm shadow-[#2F3E35]/5 backdrop-blur-sm transition-all duration-500 ease-out hover:scale-[1.08] hover:bg-white hover:shadow-2xl hover:shadow-[#2F3E35]/10 hover:border-[#2F3E35]/20 hover:z-10 cursor-default">
<div class="">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
<div class="h-12 w-12 overflow-hidden rounded-2xl bg-[#8A9A8B]/15">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/464d7e64-b970-44dc-baa4-96932b0e45c5_800w.webp" alt="Mina" class="h-full w-full object-cover saturate-75 transition-all duration-500 group-hover:saturate-100" style="">
</div>
<div>
<div class="text-sm font-medium text-[#2F3E35]">Mina</div>
<div class="text-xs text-[#2F3E35]/60">Member</div>
</div>
</div>
<div class="flex gap-0.5 text-[#caa24c] opacity-50 transition-opacity duration-300 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</div>
</div>
<blockquote class="mt-5 text-sm leading-relaxed text-[#2F3E35]/80 transition-colors duration-300 group-hover:text-[#2F3E35]">
<span class="font-serif text-[#2F3E35]/40 text-lg">“</span>
Finding balance in chaos. The morning flow classes have become my non-negotiable daily ritual.
<span class="font-serif text-[#2F3E35]/40 text-lg">”</span>
</blockquote>
</div>
<div class="mt-6 flex items-center justify-between border-t border-[#2F3E35]/5 pt-4 opacity-60 transition-all duration-300 group-hover:opacity-100">
<span class="text-xs font-medium text-[#2F3E35]/60">Morning Flow</span>
<span class="flex items-center gap-1.5 text-xs font-medium text-[#2F3E35]/80">
Verified
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check text-[#8A9A8B]"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path><path d="m9 12 2 2 4-4" class=""></path></svg>
</span>
</div>
</div>
<!-- Card 2 -->
<div class="group relative w-[18rem] shrink-0 snap-center flex flex-col justify-between rounded-3xl border border-[#2F3E35]/10 bg-white/60 p-6 shadow-sm shadow-[#2F3E35]/5 backdrop-blur-sm transition-all duration-500 ease-out hover:scale-[1.08] hover:bg-white hover:shadow-2xl hover:shadow-[#2F3E35]/10 hover:border-[#2F3E35]/20 hover:z-10 cursor-default">
<div class="">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
<div class="h-12 w-12 overflow-hidden rounded-2xl bg-[#8A9A8B]/15">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f01af40e-b094-48e4-9d71-c761cda69ebc_320w.webp" alt="Alyssa" class="h-full w-full object-cover saturate-75 transition-all duration-500 group-hover:saturate-100" style="">
</div>
<div>
<div class="text-sm font-medium text-[#2F3E35]">Alyssa</div>
<div class="text-xs text-[#2F3E35]/60">Member</div>
</div>
</div>
<div class="flex gap-0.5 text-[#caa24c] opacity-50 transition-opacity duration-300 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</div>
</div>
<blockquote class="mt-5 text-sm leading-relaxed text-[#2F3E35]/80 transition-colors duration-300 group-hover:text-[#2F3E35]">
<span class="font-serif text-[#2F3E35]/40 text-lg">“</span>
I've never felt more connected to my body. The instructors are truly world-class listeners.
<span class="font-serif text-[#2F3E35]/40 text-lg">”</span>
</blockquote>
</div>
<div class="mt-6 flex items-center justify-between border-t border-[#2F3E35]/5 pt-4 opacity-60 transition-all duration-300 group-hover:opacity-100">
<span class="text-xs font-medium text-[#2F3E35]/60">Somatic Healing</span>
<span class="flex items-center gap-1.5 text-xs font-medium text-[#2F3E35]/80">
Verified
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check text-[#8A9A8B]"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path><path d="m9 12 2 2 4-4"></path></svg>
</span>
</div>
</div>
<!-- Card 3 (Featured) -->
<div class="group relative w-[18rem] shrink-0 snap-center flex flex-col justify-between rounded-3xl border border-[#2F3E35]/10 bg-white/60 p-6 shadow-sm shadow-[#2F3E35]/5 backdrop-blur-sm transition-all duration-500 ease-out hover:scale-[1.08] hover:bg-white hover:shadow-2xl hover:shadow-[#2F3E35]/10 hover:border-[#2F3E35]/20 hover:z-10 cursor-default">
<div class="">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
<div class="h-12 w-12 overflow-hidden rounded-2xl bg-[#8A9A8B]/15">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/08cc531c-e3ab-4460-8da8-379e1cc76b9a_320w.webp" alt="Sarah" class="h-full w-full object-cover saturate-75 transition-all duration-500 group-hover:saturate-100" style="">
</div>
<div class="">
<div class="text-sm font-medium text-[#2F3E35]">Sarah</div>
<div class="text-xs text-[#2F3E35]/60">Member since '22</div>
</div>
</div>
<div class="flex gap-0.5 text-[#caa24c] opacity-50 transition-opacity duration-300 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</div>
</div>
<blockquote class="mt-5 text-sm leading-relaxed text-[#2F3E35]/80 transition-colors duration-300 group-hover:text-[#2F3E35]">
<span class="font-serif text-[#2F3E35]/40 text-lg">“</span>
The sound healing sessions completely cured my insomnia. It's my safe haven.
<span class="font-serif text-[#2F3E35]/40 text-lg">”</span>
</blockquote>
</div>
<div class="mt-6 flex items-center justify-between border-t border-[#2F3E35]/5 pt-4 opacity-60 transition-all duration-300 group-hover:opacity-100">
<span class="text-xs font-medium text-[#2F3E35]/60">Sound Baths</span>
<span class="flex items-center gap-1.5 text-xs font-medium text-[#2F3E35]/80">
Verified
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check text-[#8A9A8B]"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path><path d="m9 12 2 2 4-4"></path></svg>
</span>
</div>
</div>
<!-- Card 4 -->
<div class="group relative w-[18rem] shrink-0 snap-center flex flex-col justify-between rounded-3xl border border-[#2F3E35]/10 bg-white/60 p-6 shadow-sm shadow-[#2F3E35]/5 backdrop-blur-sm transition-all duration-500 ease-out hover:scale-[1.08] hover:bg-white hover:shadow-2xl hover:shadow-[#2F3E35]/10 hover:border-[#2F3E35]/20 hover:z-10 cursor-default">
<div class="">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
<div class="h-12 w-12 overflow-hidden rounded-2xl bg-[#8A9A8B]/15">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/5bab247f-35d9-400d-a82b-fd87cfe913d2_1600w.webp" alt="Noah" class="h-full w-full object-cover saturate-75 transition-all duration-500 group-hover:saturate-100" style="">
</div>
<div>
<div class="text-sm font-medium text-[#2F3E35]">Noah</div>
<div class="text-xs text-[#2F3E35]/60">Member</div>
</div>
</div>
<div class="flex gap-0.5 text-[#caa24c] opacity-50 transition-opacity duration-300 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</div>
</div>
<blockquote class="mt-5 text-sm leading-relaxed text-[#2F3E35]/80 transition-colors duration-300 group-hover:text-[#2F3E35]">
<span class="font-serif text-[#2F3E35]/40 text-lg">“</span>
A community that feels like family. No judgment, just pure support and genuine connection.
<span class="font-serif text-[#2F3E35]/40 text-lg">”</span>
</blockquote>
</div>
<div class="mt-6 flex items-center justify-between border-t border-[#2F3E35]/5 pt-4 opacity-60 transition-all duration-300 group-hover:opacity-100">
<span class="text-xs font-medium text-[#2F3E35]/60">Studio Member</span>
<span class="flex items-center gap-1.5 text-xs font-medium text-[#2F3E35]/80">
Verified
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check text-[#8A9A8B]"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path><path d="m9 12 2 2 4-4"></path></svg>
</span>
</div>
</div>
<!-- Card 5 -->
<div class="group relative w-[18rem] shrink-0 snap-center flex flex-col justify-between rounded-3xl border border-[#2F3E35]/10 bg-white/60 p-6 shadow-sm shadow-[#2F3E35]/5 backdrop-blur-sm transition-all duration-500 ease-out hover:scale-[1.08] hover:bg-white hover:shadow-2xl hover:shadow-[#2F3E35]/10 hover:border-[#2F3E35]/20 hover:z-10 cursor-default">
<div>
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
<div class="h-12 w-12 overflow-hidden rounded-2xl bg-[#8A9A8B]/15">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="Jules" class="h-full w-full object-cover saturate-75 transition-all duration-500 group-hover:saturate-100">
</div>
<div>
<div class="text-sm font-medium text-[#2F3E35]">Jules</div>
<div class="text-xs text-[#2F3E35]/60">Member</div>
</div>
</div>
<div class="flex gap-0.5 text-[#caa24c] opacity-50 transition-opacity duration-300 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</div>
</div>
<blockquote class="mt-5 text-sm leading-relaxed text-[#2F3E35]/80 transition-colors duration-300 group-hover:text-[#2F3E35]">
<span class="font-serif text-[#2F3E35]/40 text-lg">“</span>
The perfect escape from the city noise. I leave feeling lighter and more grounded every single time.
<span class="font-serif text-[#2F3E35]/40 text-lg">”</span>
</blockquote>
</div>
<div class="mt-6 flex items-center justify-between border-t border-[#2F3E35]/5 pt-4 opacity-60 transition-all duration-300 group-hover:opacity-100">
<span class="text-xs font-medium text-[#2F3E35]/60">Restorative</span>
<span class="flex items-center gap-1.5 text-xs font-medium text-[#2F3E35]/80">
Verified
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check text-[#8A9A8B]"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path><path d="m9 12 2 2 4-4"></path></svg>
</span>
</div>
</div>
<!-- Card 6 (New) -->
<div class="group relative w-[18rem] shrink-0 snap-center flex flex-col justify-between rounded-3xl border border-[#2F3E35]/10 bg-white/60 p-6 shadow-sm shadow-[#2F3E35]/5 backdrop-blur-sm transition-all duration-500 ease-out hover:scale-[1.08] hover:bg-white hover:shadow-2xl hover:shadow-[#2F3E35]/10 hover:border-[#2F3E35]/20 hover:z-10 cursor-default">
<div class="">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
<div class="h-12 w-12 overflow-hidden rounded-2xl bg-[#8A9A8B]/15">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="Leo" class="h-full w-full object-cover saturate-75 transition-all duration-500 group-hover:saturate-100">
</div>
<div>
<div class="text-sm font-medium text-[#2F3E35]">Leo</div>
<div class="text-xs text-[#2F3E35]/60">Member</div>
</div>
</div>
<div class="flex gap-0.5 text-[#caa24c] opacity-50 transition-opacity duration-300 group-hover:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</div>
</div>
<blockquote class="mt-5 text-sm leading-relaxed text-[#2F3E35]/80 transition-colors duration-300 group-hover:text-[#2F3E35]">
<span class="font-serif text-[#2F3E35]/40 text-lg">“</span>
Meditation used to feel impossible. The guidance here made it accessible and deeply restful.
<span class="font-serif text-[#2F3E35]/40 text-lg">”</span>
</blockquote>
</div>
<div class="mt-6 flex items-center justify-between border-t border-[#2F3E35]/5 pt-4 opacity-60 transition-all duration-300 group-hover:opacity-100">
<span class="text-xs font-medium text-[#2F3E35]/60">Meditation Circle</span>
<span class="flex items-center gap-1.5 text-xs font-medium text-[#2F3E35]/80">
Verified
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check text-[#8A9A8B]"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path><path d="m9 12 2 2 4-4"></path></svg>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flex mt-6 items-center justify-center">
<a href="/retreats" class="inline-flex items-center gap-2 shadow-[#2F3E35]/5 hover:bg-white/60 hover:text-[#2F3E35] transition text-sm font-medium text-[#2F3E35]/80 bg-white/40 border-[#2F3E35]/15 border rounded-full pt-3 pr-6 pb-3 pl-6 shadow-sm">
Discover retreats
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:arrow-right" data-width="18" data-height="18" class="iconify iconify--lucide"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7l7 7l-7 7"></path></svg>
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-[#F7F5F0] bg-[#2F3E35]" id="retreats">
<div class="mx-auto max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
<div class="grid gap-10 md:grid-cols-2 lg:grid-cols-12">
<!-- Brand -->
<div class="lg:col-span-4">
<div class="flex items-center gap-2.5">
<svg class="h-9 w-9 text-[#F7F5F0]" viewBox="0 0 48 48" fill="none" aria-hidden="true">
<path d="M24 7.5c2.2 4.8 2.2 9.6 0 14.4C21.8 17.1 21.8 12.3 24 7.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.4 12.6c5.2 1.3 8.9 4.3 11.1 9-4.9-.8-8.6-3.8-11.1-9Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M33.6 12.6c-2.5 5.2-6.2 8.2-11.1 9 2.2-4.7 5.9-7.7 11.1-9Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.2 23.2c6.2-.6 11.1 1.4 14.7 6.1-5.6 1-10.5-1.1-14.7-6.1Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M37.8 23.2c-4.2 5-9.1 7.1-14.7 6.1 3.6-4.7 8.5-6.7 14.7-6.1Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M24 29.4c3.5 1.6 6.1 4.6 7.7 9.1-3.8-1.1-6.4-4.1-7.7-9.1Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M24 29.4c-1.3 5-3.9 8-7.7 9.1 1.6-4.5 4.2-7.5 7.7-9.1Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<div class="">
<div class="text-lg font-medium tracking-tight" style="font-family: 'Playfair Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">Aetheria</div>
<div class="text-xs font-medium tracking-wide text-[#F7F5F0]/70">Wellness</div>
</div>
</div>
<p class="mt-5 max-w-sm text-sm leading-relaxed text-[#F7F5F0]/80">
A sanctuary for the soul.
</p>
<div class="mt-6 flex items-center gap-3">
<a href="#" class="inline-flex items-center justify-center hover:bg-white/10 transition text-[#F7F5F0]/90 bg-white/5 w-10 h-10 border-white/15 border rounded-full" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:instagram" data-width="18" data-height="18" class="iconify iconify--lucide w-[18px] h-[18px]" stroke-width="2" data-icon-replaced="true" style="color: rgb(247, 245, 240); width: 18px; height: 18px;"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class=""><rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect><path d="M16 11.37A4 4 0 1 1 12.63 8A4 4 0 0 1 16 11.37m1.5-4.87h.01" class=""></path></g></svg>
</a>
<a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/15 bg-white/5 text-[#F7F5F0]/90 hover:bg-white/10 transition" aria-label="TikTok">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:music-2" data-width="18" data-height="18" class="iconify iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class=""><circle cx="8" cy="18" r="4" class=""></circle><path d="M12 18V2l7 4" class=""></path></g></svg>
</a>
<a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/15 bg-white/5 text-[#F7F5F0]/90 hover:bg-white/10 transition" aria-label="YouTube">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:youtube" data-width="18" data-height="18" class="iconify iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M2.5 17a24.1 24.1 0 0 1 0-10a2 2 0 0 1 1.4-1.4a49.6 49.6 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.1 24.1 0 0 1 0 10a2 2 0 0 1-1.4 1.4a49.6 49.6 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path><path d="m10 15l5-3l-5-3z"></path></g></svg>
</a>
<a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/15 bg-white/5 text-[#F7F5F0]/90 hover:bg-white/10 transition" aria-label="Spotify">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:audio-lines" data-width="18" data-height="18" class="iconify iconify--lucide"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 10v3m4-7v11m4-14v18m4-13v7m4-10v13m4-8v3"></path></svg>
</a>
</div>
</div>
<!-- Explore -->
<div class="lg:col-span-2">
<div class="text-sm font-medium text-[#F7F5F0]" style="font-family: 'Playfair Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">Explore</div>
<div class="mt-4 grid gap-3 text-sm text-[#F7F5F0]/80">
<a class="hover:text-[#F7F5F0] transition" href="#studio">Our Story</a>
<a class="hover:text-[#F7F5F0] transition" href="#instructors">Instructors</a>
<a class="hover:text-[#F7F5F0] transition" href="#classes">Class Schedule</a>
<a class="hover:text-[#F7F5F0] transition" href="#retreats">Retreats</a>
</div>
</div>
<!-- Visit -->
<div class="lg:col-span-3">
<div class="text-sm font-medium text-[#F7F5F0]" style="font-family: 'Playfair Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">Visit Us</div>
<div class="mt-4 grid gap-3 text-sm text-[#F7F5F0]/80">
<div class="flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:map-pin" data-width="18" data-height="18" class="iconify mt-0.5 iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></g></svg>
<span class="">128 Serenity Lane, Arts District, NY.</span>
</div>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:mail" data-width="18" data-height="18" class="iconify iconify--lucide"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect width="20" height="16" x="2" y="4" rx="2"></rect></g></svg>
<a class="hover:text-[#F7F5F0] transition" href="mailto:hello@aetheria.com">hello@aetheria.com</a>
</div>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:phone" data-width="18" data-height="18" class="iconify iconify--lucide"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233a14 14 0 0 0 6.392 6.384"></path></svg>
<a class="hover:text-[#F7F5F0] transition" href="tel:+15550123456">+1 (555) 012-3456</a>
</div>
</div>
</div>
<!-- Newsletter -->
<div class="lg:col-span-3">
<div class="text-sm font-medium text-[#F7F5F0]" style="font-family: 'Playfair Display', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">Join the Circle</div>
<form id="newsletterForm" class="mt-4">
<label class="sr-only" for="email">Email Address</label>
<div class="flex items-center gap-3">
<div class="flex-1">
<input id="email" type="email" placeholder="Email Address" required="" class="w-full bg-transparent py-2 text-sm text-[#F7F5F0] placeholder:text-[#F7F5F0]/55 focus:outline-none" style="border-bottom: 1px solid rgba(247,245,240,0.35);">
</div>
<button type="submit" class="inline-flex items-center justify-center gap-2 rounded-full bg-[#8A9A8B] px-4 py-2 text-sm font-medium text-[#F7F5F0] shadow-sm shadow-black/20 hover:bg-[#7f8f80] focus:outline-none focus:ring-2 focus:ring-white/25 transition">
Subscribe
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:arrow-right" data-width="18" data-height="18" class="iconify iconify--lucide"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7l7 7l-7 7"></path></svg>
</button>
</div>
<div id="newsletterNote" class="mt-3 text-xs text-[#F7F5F0]/70">
Monthly rituals, new class drops, and retreat openings.
</div>
</form>
</div>
</div>
<div class="mt-12 border-t border-white/10 pt-6">
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div class="text-xs text-[#F7F5F0]/70">
Copyright © 2024 Aetheria Wellness.
</div>
<div class="flex items-center gap-5 text-xs text-[#F7F5F0]/70">
<a href="#" class="hover:text-[#F7F5F0] transition">Privacy</a>
<a href="#" class="hover:text-[#F7F5F0] transition">Terms</a>
</div>
</div>
</div>
</div>
</footer>
<script>
// Header scroll state
const header = document.getElementById('siteHeader');
const navShell = document.getElementById('navShell');
const logoLight = document.getElementById('logoLight');
const logoLightSub = document.getElementById('logoLightSub');
const logoDark = document.getElementById('logoDark');
const logoDarkSub = document.getElementById('logoDarkSub');
const navLinks = Array.from(document.querySelectorAll('.navLink'));
const menuBtn = document.getElementById('menuBtn');
const mobileNav = document.getElementById('mobileNav');
const mobileLinks = Array.from(document.querySelectorAll('.mobileLink'));
function setScrolled(scrolled) {
if (scrolled) {
navShell.className = "mt-3 rounded-2xl border border-[#2F3E35]/10 bg-white/70 shadow-sm shadow-[#2F3E35]/10 backdrop-blur-xl";
logoLight.classList.add('hidden');
logoLightSub.classList.add('hidden');
logoDark.classList.remove('hidden');
logoDarkSub.classList.remove('hidden');
// Make the lotus icon dark
header.querySelectorAll('svg').forEach(svg => svg.classList.add('text-[#2F3E35]'));
navLinks.forEach(a => {
a.classList.remove('text-[#F7F5F0]/90', 'hover:text-[#F7F5F0]');
a.classList.add('text-[#2F3E35]/75', 'hover:text-[#2F3E35]');
});
menuBtn.className = "md:hidden inline-flex items-center justify-center rounded-full border border-[#2F3E35]/15 bg-white/60 px-3 py-2 text-[#2F3E35] backdrop-blur-sm transition hover:bg-white/80 focus:outline-none focus:ring-2 focus:ring-[#2F3E35]/15";
mobileNav.classList.add('border-[#2F3E35]/10');
mobileNav.classList.remove('border-white/10');
mobileLinks.forEach(a => {
a.classList.remove('text-[#F7F5F0]/90', 'hover:bg-white/10', 'hover:text-[#F7F5F0]');
a.classList.add('text-[#2F3E35]/80', 'hover:bg-[#2F3E35]/5', 'hover:text-[#2F3E35]');
});
} else {
navShell.className = "mt-3 rounded-2xl border border-transparent bg-transparent";
logoLight.classList.remove('hidden');
logoLightSub.classList.remove('hidden');
logoDark.classList.add('hidden');
logoDarkSub.classList.add('hidden');
header.querySelectorAll('svg').forEach(svg => svg.classList.remove('text-[#2F3E35]'));
navLinks.forEach(a => {
a.classList.remove('text-[#2F3E35]/75', 'hover:text-[#2F3E35]');
a.classList.add('text-[#F7F5F0]/90', 'hover:text-[#F7F5F0]');
});
menuBtn.className = "md:hidden inline-flex items-center justify-center rounded-full border border-white/25 bg-white/10 px-3 py-2 text-[#F7F5F0] backdrop-blur-sm transition hover:bg-white/15 focus:outline-none focus:ring-2 focus:ring-white/30";
mobileNav.classList.add('border-white/10');
mobileNav.classList.remove('border-[#2F3E35]/10');
mobileLinks.forEach(a => {
a.classList.remove('text-[#2F3E35]/80', 'hover:bg-[#2F3E35]/5', 'hover:text-[#2F3E35]');
a.classList.add('text-[#F7F5F0]/90', 'hover:bg-white/10', 'hover:text-[#F7F5F0]');
});
}
}
function onScroll() {
setScrolled(window.scrollY > 20);
}
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
// Mobile menu
menuBtn.addEventListener('click', () => {
const isOpen = !mobileNav.classList.contains('hidden');
if (isOpen) {
mobileNav.classList.add('hidden');
menuBtn.setAttribute('aria-expanded', 'false');
menuBtn.innerHTML = '<span class="sr-only">Open menu</span><span class="iconify" data-icon="lucide:menu" data-width="18" data-height="18"></span>';
} else {
mobileNav.classList.remove('hidden');
menuBtn.setAttribute('aria-expanded', 'true');
menuBtn.innerHTML = '<span class="sr-only">Close menu</span><span class="iconify" data-icon="lucide:x" data-width="18" data-height="18"></span>';
}
});
// Countdown (static simulation, gently updates)
const countdownEl = document.getElementById('countdown');
let remainingMin = 105; // 01h 45m
function renderCountdown() {
const h = Math.floor(remainingMin / 60);
const m = remainingMin % 60;
countdownEl.textContent = String(h).padStart(2, '0') + 'h ' + String(m).padStart(2, '0') + 'm';
}
renderCountdown();
setInterval(() => {
remainingMin = Math.max(0, remainingMin - 1);
renderCountdown();
}, 60000);
// Newsletter submit (client-side)
const form = document.getElementById('newsletterForm');
const note = document.getElementById('newsletterNote');
form.addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('email').value.trim();
if (!email) return;
note.textContent = "You're in. Welcome to the circle.";
note.className = "mt-3 text-xs text-[#F7F5F0]/90";
form.reset();
});
// Ensure icon stroke width 1.5 visually by using outlined icons; Iconify uses the set defaults.
// (No additional styling required.)
</script>
</body></html>