<html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Matcha Rituals — Adapted</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Instrument+Serif:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.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"><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"><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"><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"><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"><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"><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><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"><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"><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"><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"><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"><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><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"><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><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"><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-geist">.font-geist { font-family: 'Geist', sans-serif !important; }</style><style id="all-fonts-style-font-roboto">.font-roboto { font-family: 'Roboto', sans-serif !important; }</style><style id="all-fonts-style-font-montserrat">.font-montserrat { font-family: 'Montserrat', sans-serif !important; }</style><style id="all-fonts-style-font-poppins">.font-poppins { font-family: 'Poppins', sans-serif !important; }</style><style id="all-fonts-style-font-playfair">.font-playfair { font-family: 'Playfair Display', serif !important; }</style><style id="all-fonts-style-font-instrument-serif">.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }</style><style id="all-fonts-style-font-merriweather">.font-merriweather { font-family: 'Merriweather', serif !important; }</style><style id="all-fonts-style-font-bricolage">.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }</style><style id="all-fonts-style-font-jakarta">.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }</style><style id="all-fonts-style-font-manrope">.font-manrope { font-family: 'Manrope', sans-serif !important; }</style><style id="all-fonts-style-font-space-grotesk">.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }</style><style id="all-fonts-style-font-work-sans">.font-work-sans { font-family: 'Work Sans', sans-serif !important; }</style><style id="all-fonts-style-font-pt-serif">.font-pt-serif { font-family: 'PT Serif', serif !important; }</style><style id="all-fonts-style-font-geist-mono">.font-geist-mono { font-family: 'Geist Mono', monospace !important; }</style><style id="all-fonts-style-font-space-mono">.font-space-mono { font-family: 'Space Mono', monospace !important; }</style><style id="all-fonts-style-font-quicksand">.font-quicksand { font-family: 'Quicksand', sans-serif !important; }</style><style id="all-fonts-style-font-nunito">.font-nunito { font-family: 'Nunito', sans-serif !important; }</style></head>
<body class="min-h-full bg-zinc-950 text-white antialiased selection:bg-emerald-500/20 selection:text-emerald-200"><div class="fixed top-0 w-full h-screen bg-cover bg-center -z-10" style="background-image: url("https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e29626f0-78e5-4f5c-804a-7d6950dee264_3840w.jpg");"></div>
<main class="flex-1 w-full sm:px-6 pr-4 pb-12 pl-4 bg-cover bg-center bg-[url(default)]" style="">
<div class="mx-auto max-w-7xl">
<div class="flex pt-8 items-center justify-center">
<div class="text-center">
<h1 class="sm:text-4xl text-7xl tracking-tight font-playfair" style="font-family:'Instrument Serif',serif;font-weight:400;">Matcha Rituals</h1>
<p class="text-sm text-slate-200/80 mt-1" style="font-family: Inter, sans-serif; font-weight: 300;">Mindful tea guidance for your daily practice</p>
</div>
<div class="hidden sm:flex items-center gap-2 text-zinc-300" style="">
</div>
</div>
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 my-12">
<!-- Daily Ritual Card -->
<div data-reveal="" class="transition-all duration-700 ease-out will-change-transform opacity-100 translate-y-0 blur-0">
<div class="flex flex-col w-full aspect-[3/5] hover:scale-[1.03] transition-all duration-300 hover:shadow-3xl group sm:p-10 ring-1 ring-emerald-500/10 bg-center relative overflow-hidden text-white bg-[url(https://cdn.midjourney.com/ab015e70-3530-4b30-957c-7e88ecccfe00/0_1.png?w=800&q=80)] bg-cover rounded-3xl pt-8 pr-8 pb-8 pl-8 justify-between" style="box-shadow: rgba(0, 0, 0, 0.5) 0px 25px 50px -12px, rgba(16, 185, 129, 0.12) 0px 0px 0px 1px;" onmouseenter="(function(el){const v=el.querySelector('video'); if(v){v.currentTime=0; v.play().catch(()=>{});}})(this)" onmouseleave="(function(el){const v=el.querySelector('video'); if(v){v.pause(); v.currentTime=0;}})(this)"><div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<video src="https://cdn.midjourney.com/video/7624a6bf-c70d-4c63-861d-9f9b79b5e226/1.mp4" preload="metadata" muted="" playsinline="" webkit-playsinline="" loop="" class="w-full h-full object-cover opacity-0 group-hover:opacity-100 scale-105 group-hover:scale-100 transition-all duration-300"></video>
<div class="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div><div class="space-y-6 relative z-10">
<div class="flex items-center justify-between">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sunrise" stroke-line="round" class="lucide lucide-sunrise w-8 h-8 text-emerald-200 group-hover:scale-110 transition-transform" style=""><path d="M12 2v8"></path><path d="m4.93 10.93 1.41 1.41"></path><path d="M2 18h2"></path><path d="M20 18h2"></path><path d="m19.07 10.93-1.41 1.41"></path><path d="M22 22H2"></path><path d="m8 6 4-4 4 4"></path><path d="M16 18a4 4 0 0 0-8 0"></path></svg>
<span class="text-xs px-3 py-1.5 bg-emerald-400/20 text-emerald-200 rounded-full" style="font-family: Inter, sans-serif; font-weight: 500;">Fresh</span>
</div>
<div class="">
<p class="text-3xl sm:text-4xl tracking-tight" style="font-family:'Instrument Serif',serif;font-weight:400;">7 Day Ritual</p>
<p class="text-emerald-200 text-lg mt-2" style="font-family: Inter, sans-serif; font-weight: 400;">Morning Ceremony</p>
</div>
<div class="relative">
<div class="absolute top-0 right-0 text-right">
<p class="text-emerald-200 text-2xl" style="font-family: "Instrument Serif", serif; font-weight: 400;">12 min</p>
<p class="text-emerald-300 text-sm" style="font-family: Inter, sans-serif; font-weight: 300;">completed</p>
</div>
</div>
</div><div class="space-y-4 border-t border-emerald-700/50 pt-6 relative z-10" style="">
<p class="leading-relaxed text-sm text-slate-50" style="font-family: Inter, sans-serif; font-weight: 300;">
“Whisk, breathe, and be present. Today’s ritual celebrated calm, bright energy.”
</p>
<div class="flex justify-between items-center">
<div class="flex items-center gap-2">
<span class="text-xs tracking-wider" style="font-family:'Inter',sans-serif;font-weight:600;">MATCHA</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle" class="lucide lucide-check-circle w-4 h-4 text-emerald-200" style=""><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg>
</div>
<a href="#" class="text-emerald-200 text-sm hover:underline transition-colors" style="font-family: Inter, sans-serif; font-weight: 500;">Continue ritual</a>
</div>
</div></div>
</div>
<!-- Breath + Ritual Card -->
<div data-reveal="" class="transition-all duration-700 ease-out will-change-transform delay-100 opacity-100 translate-y-0 blur-0">
<div class="flex flex-col w-full aspect-[3/5] hover:scale-[1.03] transition-all duration-300 hover:shadow-3xl group sm:p-10 ring-1 ring-cyan-400/10 bg-center text-white bg-[url(https://cdn.midjourney.com/1d4fd59c-9023-4628-8ea1-4256408af86b/0_1.png?w=800&q=80)] bg-cover rounded-3xl pt-8 pr-8 pb-8 pl-8 justify-between relative overflow-hidden" style="box-shadow: rgba(0, 0, 0, 0.5) 0px 25px 50px -12px, rgba(34, 211, 238, 0.12) 0px 0px 0px 1px;" onmouseenter="(function(el){const v=el.querySelector('video'); if(v){v.currentTime=0; v.play().catch(()=>{});}})(this)" onmouseleave="(function(el){const v=el.querySelector('video'); if(v){v.pause(); v.currentTime=0;}})(this)">
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<video src="https://cdn.midjourney.com/video/157de36c-d492-4080-87f3-0dcebd3b268f/1.mp4" preload="metadata" muted="" playsinline="" webkit-playsinline="" loop="" class="w-full h-full object-cover opacity-0 group-hover:opacity-100 scale-105 group-hover:scale-100 transition-all duration-300"></video>
<div class="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div class="space-y-6 relative z-10">
<div class="flex items-center justify-between">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="wind" class="lucide lucide-wind w-8 h-8 text-cyan-200 group-hover:scale-110 transition-transform" style=""><path d="M12.8 19.6A2 2 0 1 0 14 16H2"></path><path d="M17.5 8a2.5 2.5 0 1 1 2 4H2"></path><path d="M9.8 4.4A2 2 0 1 1 11 8H2"></path></svg>
<span class="text-xs px-3 py-1.5 bg-cyan-400/20 text-cyan-200 rounded-full" style="font-family: Inter, sans-serif; font-weight: 500;">Whisking</span>
</div>
<div class="">
<p class="text-2xl sm:text-3xl tracking-tight" style="font-family:'Instrument Serif',serif;font-weight:400;">Whisk & Breathe</p>
<p class="text-cyan-200 text-base mt-2" style="font-family: Inter, sans-serif; font-weight: 400;">Calming Ritual</p>
</div>
<div class="relative">
<div class="absolute top-0 right-0 text-right">
<p class="text-cyan-200 text-2xl" style="font-family: "Instrument Serif", serif; font-weight: 400;">5 min</p>
<p class="text-cyan-300 text-sm" style="font-family:'Inter',sans-serif;font-weight:300;">session</p>
</div>
</div>
</div>
<div class="space-y-4 border-t border-cyan-600/50 pt-6 relative z-10">
<p class="leading-relaxed text-sm text-slate-50" style="font-family:'Inter',sans-serif;font-weight:300;">
Pair mindful breathing with gentle whisking to settle the mind and invite steady energy.
</p>
<div class="flex justify-between items-center">
<div class="flex items-center gap-2">
<span class="text-xs tracking-wider" style="font-family:'Inter',sans-serif;font-weight:600;">MATCHA</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle" class="lucide lucide-check-circle w-4 h-4 text-cyan-200" style=""><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg>
</div>
<a href="#" class="text-cyan-200 text-sm hover:underline transition-colors" style="font-family: Inter, sans-serif; font-weight: 500;">Start ritual</a>
</div>
</div>
</div>
</div>
<!-- Ritual Library Card -->
<div data-reveal="" class="transition-all duration-700 ease-out will-change-transform delay-200 opacity-100 translate-y-0 blur-0">
<div class="flex flex-col w-full aspect-[3/5] hover:scale-[1.03] transition-all duration-300 hover:shadow-3xl group sm:p-10 ring-1 ring-violet-400/10 bg-center text-white bg-[url(https://cdn.midjourney.com/a2ccbf1b-ad14-4f40-9667-0ac8bfdb7d70/0_2.png?w=800&q=80)] bg-cover rounded-3xl pt-8 pr-8 pb-8 pl-8 justify-between relative overflow-hidden" style="box-shadow: rgba(0, 0, 0, 0.5) 0px 25px 50px -12px, rgba(139, 92, 246, 0.12) 0px 0px 0px 1px;" onmouseenter="(function(el){const v=el.querySelector('video'); if(v){v.currentTime=0; v.play().catch(()=>{});}})(this)" onmouseleave="(function(el){const v=el.querySelector('video'); if(v){v.pause(); v.currentTime=0;}})(this)">
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<video src="https://cdn.midjourney.com/video/2624865a-07f4-4dc8-a9f3-12f620b1ff50/2.mp4" preload="metadata" muted="" playsinline="" webkit-playsinline="" loop="" class="w-full h-full object-cover opacity-0 group-hover:opacity-100 scale-105 group-hover:scale-100 transition-all duration-300"></video>
<div class="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div class="space-y-6 relative z-10">
<div class="flex items-center justify-between">
<span class="text-xs px-3 py-1.5 bg-violet-400/20 text-violet-200 rounded-full" style="font-family: Inter, sans-serif; font-weight: 500;">Tea House</span>
</div>
<h2 class="text-4xl sm:text-5xl tracking-tighter" style="font-family:'Instrument Serif',serif;font-weight:400;">Rituals</h2>
<div class="space-y-3 text-sm">
<div class="flex justify-between items-center hover:bg-violet-700/50 p-2 rounded-xl transition-colors" style="">
<div class="flex items-center gap-2">
<div class="w-2 h-2 bg-slate-50 rounded-full" style=""></div>
<span style="font-family:'Inter',sans-serif;font-weight:400;" class="">Clarity</span>
</div>
<span class="text-[#ffffff]" style="font-family: Inter, sans-serif; font-weight: 500;">12 sessions <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play inline w-3 h-3 ml-1 align-[-2px]"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg></span>
</div>
<div class="flex justify-between items-center hover:bg-violet-700/50 p-2 rounded-xl transition-colors" style="">
<div class="flex items-center gap-2">
<div class="w-2 h-2 bg-slate-50 rounded-full"></div>
<span style="font-family:'Inter',sans-serif;font-weight:400;" class="">Calm Energy</span>
</div>
<span class="text-slate-50" style="font-family:'Inter',sans-serif;font-weight:500;">8 sessions <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play inline w-3 h-3 ml-1 align-[-2px]"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg></span>
</div>
<div class="flex justify-between items-center hover:bg-violet-700/50 p-2 rounded-xl transition-colors" style="">
<div class="flex items-center gap-2">
<div class="w-2 h-2 bg-slate-50 rounded-full" style=""></div>
<span style="font-family:'Inter',sans-serif;font-weight:400;" class="">Gentle Kindness</span>
</div>
<span class="text-slate-50" style="font-family: Inter, sans-serif; font-weight: 500;">15 sessions <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play inline w-3 h-3 ml-1 align-[-2px]"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg></span>
</div>
<div class="flex justify-between items-center hover:bg-violet-700/50 p-2 rounded-xl transition-colors" style="">
<div class="flex items-center gap-2">
<div class="w-2 h-2 bg-slate-50 rounded-full" style=""></div>
<span style="font-family:'Inter',sans-serif;font-weight:400;" class="">Body Grounding</span>
</div>
<span class="text-slate-50" style="font-family: Inter, sans-serif; font-weight: 500;">6 sessions <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play inline w-3 h-3 ml-1 align-[-2px]"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg></span>
</div>
</div>
</div>
<div class="space-y-4 border-t border-violet-700/50 pt-6 relative z-10" style="">
<p class="leading-relaxed text-sm text-slate-50" style="font-family: Inter, sans-serif; font-weight: 300;">
A curated tea-ritual library with guided ceremonies for every mood and moment.
</p>
<div class="flex justify-between items-center">
<div class="flex items-center gap-2">
<span class="text-xs tracking-wider" style="font-family:'Inter',sans-serif;font-weight:600;">MATCHA</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle" class="lucide lucide-check-circle w-4 h-4 text-violet-200" style=""><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg>
</div>
<a href="#" class="text-violet-200 text-sm hover:underline transition-colors" style="font-family: Inter, sans-serif; font-weight: 500;">Explore rituals</a>
</div>
</div>
</div>
</div>
</div>
<div class="border-t border-white/10 pt-6 mt-2 flex items-center justify-between">
<p class="text-xs text-zinc-400" style="font-family: Inter, sans-serif; font-weight: 300;">© 2025 Matcha</p>
<div class="hidden sm:flex items-center gap-4 text-xs text-slate-900/80" style="font-family: Inter, sans-serif; font-weight: 400;">
<a href="#" class="hover:text-white transition-colors">Privacy</a>
<span class="text-zinc-700" style="">|</span>
<a href="#" class="hover:text-white transition-colors">Terms</a>
</div>
</div>
</div>
</main>
<script>
lucide.createIcons({ attrs: { 'stroke-width': 1.5 } });
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
el.classList.remove('opacity-0','translate-y-8','blur-sm');
el.classList.add('opacity-100','translate-y-0','blur-0');
obs.unobserve(el);
}
});
}, { threshold: 0.2, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('[data-reveal]').forEach(el => observer.observe(el));
</script>
</body></html>
Aura Logo
Made in Aura
Aksonvady Phomhome
Remix
Preview
Code
–