Premium
1
12
Peaceful Meadow
Online Therapy
Download Codebase
Commercial License<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Peaceful Meadow - Online Therapy</title>
<meta name="description" content="Peaceful Meadow is a calming Tailwind CSS online therapy template for mental wellness services, therapist profiles, and appointment booking." />
<meta name="keywords" content="Peaceful Meadow, Tailwind CSS template, HTML website template, online therapy template, mental wellness landing page, therapist website, responsive healthcare design" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');
body { font-family: 'Inter', sans-serif; }
.font-serif { font-family: 'Playfair Display', serif; }
.bg-soft { background-color: #e5e1dc; }
.text-obsidian { color: #1a1a1a; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.glass {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
</style>
</head>
<body class="bg-white text-obsidian overflow-x-hidden">
<!-- block:start hero -->
<section id="hero" class="relative w-full min-h-screen flex flex-col md:flex-row overflow-hidden bg-soft">
<!-- Left Side: Content -->
<div class="w-full md:w-1/2 flex flex-col justify-between p-8 md:p-16 min-h-[600px]">
<!-- Logo -->
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-black rounded-xl flex items-center justify-center text-white">
<i class="fa-solid fa-leaf text-lg"></i>
</div>
<span class="font-semibold text-xl tracking-tight">Peaceful Meadow</span>
</div>
<!-- Main Copy -->
<div class="max-w-xl py-12 md:py-0">
<div class="relative inline-block mb-6">
<h1 class="text-4xl md:text-6xl font-medium leading-[1.1] text-slate-900">
Nurturing your mind in a space of <br/>
<span class="font-serif italic underline decoration-1 underline-offset-8">gentle healing</span>
</h1>
<!-- Small floating avatars -->
<div class="absolute -top-4 right-0 md:right-[-20px]">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg" class="w-12 h-12 rounded-2xl border-4 border-white shadow-lg" alt="therapist" />
</div>
<div class="absolute top-[60px] left-[140px]">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" class="w-10 h-10 rounded-full border-2 border-white shadow-md" alt="therapist" />
</div>
</div>
<p class="text-slate-600 text-sm md:text-base leading-relaxed mb-10 max-w-md">
At Peaceful Meadow, we believe mental wellness is a natural right. Our certified specialists provide a blooming environment for personal growth and emotional recovery.
</p>
<div class="flex items-center gap-8">
<button class="bg-black text-white px-8 py-3.5 rounded-full text-sm font-medium hover:bg-zinc-800 transition shadow-lg">
Start for $9.99/m
</button>
<a href="#" class="text-sm font-medium flex items-center gap-2 group">
Our Specialists
<span class="inline-block w-8 h-px bg-black group-hover:w-12 transition-all"></span>
<i class="fa-solid fa-arrow-right text-[10px]"></i>
</a>
</div>
</div>
<!-- Bottom: Partners -->
<div class="flex flex-col sm:flex-row items-end justify-between gap-8 pt-12 md:pt-0">
<div class="flex flex-col gap-6">
<div class="flex items-center gap-10 opacity-60">
<div class="flex items-center gap-2 font-bold text-sm">
<div class="w-4 h-4 border-2 border-black flex items-center justify-center text-[8px] font-black">M</div> CALM
</div>
<div class="flex items-center gap-2 font-bold text-sm">
<i class="fa-solid fa-seedling"></i> bloom
</div>
</div>
<p class="text-[10px] text-slate-500 leading-relaxed max-w-[280px]">
Whether you seek clarity, resilience, or simply a listening ear, we're here to cultivate the peace you deserve. Let's walk this path together.
</p>
</div>
<button class="flex items-center gap-4 text-xs font-bold uppercase tracking-widest group">
Health Partners
<div class="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-md group-hover:bg-slate-50 transition">
<i class="fa-solid fa-arrow-right text-[10px]"></i>
</div>
</button>
</div>
</div>
<!-- Right Side: Image & UI Floating -->
<div class="w-full md:w-1/2 relative min-h-[600px]">
<img class="absolute inset-0 w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_4e521f7431_ae5f23b7b64a67f6.png" alt="candid photography of a therapy session, two women talking in a bright airy modern room, warm natura" />
<!-- Top Nav for the right side -->
<div class="absolute top-0 left-0 w-full flex items-center justify-between p-8 z-20">
<!-- Socials -->
<div class="flex gap-4">
<a href="#" class="w-8 h-8 rounded-full glass flex items-center justify-center text-white hover:bg-white/30 transition">
<i class="fa-brands fa-twitter text-xs"></i>
</a>
<a href="#" class="w-8 h-8 rounded-full glass flex items-center justify-center text-white hover:bg-white/30 transition">
<i class="fa-brands fa-instagram text-xs"></i>
</a>
</div>
<!-- Menu Items -->
<div class="flex items-center gap-8 text-white text-sm font-medium">
<a href="#" class="hover:text-slate-200 transition relative">
Meadow
<span class="absolute -bottom-1 left-0 w-1/2 h-px bg-white"></span>
</a>
<a href="#" class="hover:text-slate-200 transition">About</a>
<a href="#" class="hover:text-slate-200 transition">Pricing</a>
<button class="w-10 h-10 rounded-full glass flex items-center justify-center text-white">
<i class="fa-solid fa-bars text-xs"></i>
</button>
</div>
</div>
<!-- Floating Interaction UI -->
<div class="absolute bottom-16 left-8 right-8 z-10">
<div class="max-w-md ml-auto glass p-6 rounded-3xl text-white">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-3">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-6.jpg" class="w-8 h-8 rounded-lg" alt="councillor" />
<span class="text-sm font-medium">Peace Check.</span>
</div>
<div class="flex items-center gap-3">
<span class="text-[10px] text-white/60">Session 1</span>
<div class="w-5 h-5 rounded-full border border-white/30 flex items-center justify-center">
<div class="w-2 h-2 rounded-full bg-white"></div>
</div>
</div>
</div>
<p class="text-sm leading-relaxed mb-6">
How has your breathing been during stressful moments this week?
</p>
<div class="flex justify-end">
<button class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition">
<i class="fa-solid fa-microphone text-xs"></i>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- block:end hero -->
<!-- block:start specialties -->
<section id="specialties" class="py-24 px-8 bg-white">
<div class="max-w-6xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-8">
<div class="max-w-2xl">
<span class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-6 block">Our expertise</span>
<h2 class="text-4xl md:text-5xl font-medium leading-tight">Focusing on what <span class="font-serif italic">matters</span> to you</h2>
</div>
<p class="text-slate-500 max-w-xs text-sm leading-relaxed">We provide specialized care for a wide range of emotional and psychological needs.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-8 bg-soft rounded-[2.5rem] hover:shadow-xl transition group">
<div class="w-12 h-12 rounded-2xl bg-white flex items-center justify-center mb-6 group-hover:bg-black group-hover:text-white transition">
<i class="fa-solid fa-wind"></i>
</div>
<h4 class="text-xl font-medium mb-3">Anxiety & Stress</h4>
<p class="text-xs text-slate-600 leading-relaxed">Finding calm amidst the chaos of everyday life through proven coping mechanisms.</p>
</div>
<div class="p-8 bg-soft rounded-[2.5rem] hover:shadow-xl transition group">
<div class="w-12 h-12 rounded-2xl bg-white flex items-center justify-center mb-6 group-hover:bg-black group-hover:text-white transition">
<i class="fa-solid fa-heart"></i>
</div>
<h4 class="text-xl font-medium mb-3">Relationships</h4>
<p class="text-xs text-slate-600 leading-relaxed">Navigating connections, communication, and emotional intimacy with loved ones.</p>
</div>
<div class="p-8 bg-soft rounded-[2.5rem] hover:shadow-xl transition group">
<div class="w-12 h-12 rounded-2xl bg-white flex items-center justify-center mb-6 group-hover:bg-black group-hover:text-white transition">
<i class="fa-solid fa-moon"></i>
</div>
<h4 class="text-xl font-medium mb-3">Depression</h4>
<p class="text-xs text-slate-600 leading-relaxed">Supportive guidance to help you find light and rediscovering your inner strength.</p>
</div>
<div class="p-8 bg-soft rounded-[2.5rem] hover:shadow-xl transition group">
<div class="w-12 h-12 rounded-2xl bg-white flex items-center justify-center mb-6 group-hover:bg-black group-hover:text-white transition">
<i class="fa-solid fa-brain"></i>
</div>
<h4 class="text-xl font-medium mb-3">Personal Growth</h4>
<p class="text-xs text-slate-600 leading-relaxed">Exploring self-identity and building a more resilient, purposeful version of yourself.</p>
</div>
</div>
</div>
</section>
<!-- block:end specialties -->
<!-- block:start info -->
<section id="info" class="py-24 px-8 bg-gray-50">
<div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-20 items-center">
<div class="relative order-2 md:order-1">
<img class="w-full h-[500px] object-cover rounded-[3rem] shadow-2xl" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_9aeacdaacd_692561fb83f3fca0.png" alt="serene meditation room with natural textures, wooden stools, large windows looking into a garden, so" />
<div class="absolute -bottom-8 -right-8 bg-soft p-12 rounded-[2rem] max-w-[240px] hidden lg:block">
<h4 class="font-serif text-2xl mb-4 italic">A Natural Flow</h4>
<p class="text-xs text-slate-600 leading-relaxed">Our methods align with natural emotional rhythms, fostering sustainable mental health.</p>
</div>
</div>
<div class="order-1 md:order-2">
<span class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-6 block">Our philosophy</span>
<h2 class="text-4xl md:text-5xl font-medium leading-tight mb-8">Nurturing your path with a <span class="font-serif italic">gentle touch</span></h2>
<p class="text-slate-600 mb-10 leading-relaxed">We believe healing shouldn't be forced. At Peaceful Meadow, we cultivate a rhythm that respects your pace, providing the nourishment your mind needs to bloom again.</p>
<div class="grid grid-cols-2 gap-8">
<div>
<div class="text-3xl font-medium mb-2">98%</div>
<div class="text-xs text-slate-400 uppercase font-bold tracking-widest">Peace of Mind Rate</div>
</div>
<div>
<div class="text-3xl font-medium mb-2">120+</div>
<div class="text-xs text-slate-400 uppercase font-bold tracking-widest">Specialists</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end info -->
<!-- block:start pricing -->
<section id="pricing" class="py-24 px-8 bg-soft">
<div class="max-w-6xl mx-auto text-center mb-16">
<h2 class="text-4xl md:text-5xl font-medium mb-4">Investment in your <span class="font-serif italic">peace</span></h2>
<p class="text-slate-500">Accessible care designed to fit your journey and your life.</p>
</div>
<div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Basic -->
<div class="bg-white p-10 rounded-[2.5rem] shadow-sm hover:shadow-xl transition flex flex-col">
<h3 class="text-xl font-medium mb-2">Sprout</h3>
<p class="text-xs text-slate-400 mb-8">Ideal for exploration</p>
<div class="text-4xl font-medium mb-10">$9.99<span class="text-sm text-slate-400 font-normal">/mo</span></div>
<ul class="space-y-4 mb-12 flex-1 text-sm text-slate-600">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-xs"></i> 2 Monthly Sessions</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-xs"></i> Message Access</li>
<li class="flex items-center gap-3 opacity-30"><i class="fa-solid fa-minus text-xs"></i> Group Circles</li>
</ul>
<button class="w-full py-4 rounded-full border border-black text-sm font-medium hover:bg-black hover:text-white transition">Choose Sprout</button>
</div>
<!-- Premium -->
<div class="bg-black p-10 rounded-[2.5rem] shadow-2xl text-white flex flex-col relative overflow-hidden transform md:-translate-y-4">
<div class="absolute top-6 right-6 bg-white/10 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest">Growing</div>
<h3 class="text-xl font-medium mb-2">Meadow</h3>
<p class="text-white/40 text-xs mb-8">Our most balanced plan</p>
<div class="text-4xl font-medium mb-10">$29.99<span class="text-sm text-white/40 font-normal">/mo</span></div>
<ul class="space-y-4 mb-12 flex-1 text-sm text-white/80">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-xs"></i> 4 Monthly Sessions</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-xs"></i> 24/7 Priority Chat</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-xs"></i> Weekly Group Circles</li>
</ul>
<button class="w-full py-4 rounded-full bg-white text-black text-sm font-medium hover:bg-slate-200 transition">Enter Meadow</button>
</div>
<!-- Pro -->
<div class="bg-white p-10 rounded-[2.5rem] shadow-sm hover:shadow-xl transition flex flex-col">
<h3 class="text-xl font-medium mb-2">Bloom</h3>
<p class="text-xs text-slate-400 mb-8">For deep transformation</p>
<div class="text-4xl font-medium mb-10">$59.99<span class="text-sm text-slate-400 font-normal">/mo</span></div>
<ul class="space-y-4 mb-12 flex-1 text-sm text-slate-600">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-xs"></i> Unlimited Support</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-xs"></i> Personal Wellness Guide</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-xs"></i> Resource Library</li>
</ul>
<button class="w-full py-4 rounded-full border border-black text-sm font-medium hover:bg-black hover:text-white transition">Total Bloom</button>
</div>
</div>
</section>
<!-- block:end pricing -->
<!-- block:start faq -->
<section id="faq" class="py-24 px-8 bg-white">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-16">
<span class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-6 block">Common Questions</span>
<h2 class="text-4xl md:text-5xl font-medium">Find your <span class="font-serif italic">answers</span></h2>
</div>
<div class="space-y-4">
<div class="p-8 bg-soft rounded-[2rem] cursor-pointer group">
<div class="flex justify-between items-center">
<h4 class="font-medium text-lg">How do I get matched with a therapist?</h4>
<i class="fa-solid fa-plus text-xs group-hover:rotate-45 transition"></i>
</div>
</div>
<div class="p-8 bg-soft rounded-[2rem] cursor-pointer group">
<div class="flex justify-between items-center">
<h4 class="font-medium text-lg">Is my data secure and private?</h4>
<i class="fa-solid fa-plus text-xs group-hover:rotate-45 transition"></i>
</div>
</div>
<div class="p-8 bg-soft rounded-[2rem] cursor-pointer group">
<div class="flex justify-between items-center">
<h4 class="font-medium text-lg">Can I switch specialists if it's not a fit?</h4>
<i class="fa-solid fa-plus text-xs group-hover:rotate-45 transition"></i>
</div>
</div>
<div class="p-8 bg-soft rounded-[2rem] cursor-pointer group">
<div class="flex justify-between items-center">
<h4 class="font-medium text-lg">What are Group Circles?</h4>
<i class="fa-solid fa-plus text-xs group-hover:rotate-45 transition"></i>
</div>
</div>
</div>
</div>
</section>
<!-- block:end faq -->
<!-- block:start reviews -->
<section id="reviews" class="py-24 px-8 bg-gray-50 overflow-hidden">
<div class="max-w-6xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-8">
<div class="max-w-xl">
<span class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-6 block">Our stories</span>
<h2 class="text-4xl md:text-5xl font-medium leading-tight">Finding light in the <span class="font-serif italic">Meadow</span></h2>
</div>
<div class="flex gap-4">
<button class="w-12 h-12 rounded-full border border-slate-200 flex items-center justify-center hover:bg-white transition"><i class="fa-solid fa-arrow-left text-xs"></i></button>
<button class="w-12 h-12 rounded-full border border-slate-200 flex items-center justify-center hover:bg-white transition"><i class="fa-solid fa-arrow-right text-xs"></i></button>
</div>
</div>
<div class="flex gap-8 overflow-x-auto no-scrollbar pb-12">
<div class="min-w-[320px] md:min-w-[400px] p-10 bg-white rounded-[3rem] shadow-sm">
<div class="flex gap-1 text-slate-900 mb-6">
<i class="fa-solid fa-star text-[10px]"></i><i class="fa-solid fa-star text-[10px]"></i><i class="fa-solid fa-star text-[10px]"></i><i class="fa-solid fa-star text-[10px]"></i><i class="fa-solid fa-star text-[10px]"></i>
</div>
<p class="text-lg text-slate-700 italic font-serif leading-relaxed mb-10">"Peaceful Meadow was exactly what the name implies. I finally found a rhythm that allowed me to heal without feeling rushed."</p>
<div class="flex items-center gap-4">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-7.jpg" class="w-12 h-12 rounded-2xl" alt="client" />
<div>
<div class="font-medium">Emily Watson</div>
<div class="text-xs text-slate-400">Meadow Member</div>
</div>
</div>
</div>
<div class="min-w-[320px] md:min-w-[400px] p-10 bg-white rounded-[3rem] shadow-sm">
<div class="flex gap-1 text-slate-900 mb-6">
<i class="fa-solid fa-star text-[10px]"></i><i class="fa-solid fa-star text-[10px]"></i><i class="fa-solid fa-star text-[10px]"></i><i class="fa-solid fa-star text-[10px]"></i><i class="fa-solid fa-star text-[10px]"></i>
</div>
<p class="text-lg text-slate-700 italic font-serif leading-relaxed mb-10">"The focus on gentle healing made a massive difference. My specialist was incredibly patient and supportive."</p>
<div class="flex items-center gap-4">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" class="w-12 h-12 rounded-2xl" alt="client" />
<div>
<div class="font-medium">James Peterson</div>
<div class="text-xs text-slate-400">Bloom Member</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end reviews -->
<!-- block:start contact -->
<section id="contact" class="py-24 px-8 bg-soft">
<div class="max-w-6xl mx-auto flex flex-col md:flex-row gap-20">
<div class="flex-1">
<h2 class="text-4xl md:text-5xl font-medium mb-8">Join the <span class="font-serif italic">Meadow</span> today</h2>
<p class="text-slate-600 mb-12">Whether you're ready to bloom or just starting as a sprout, we're here to welcome you with open arms.</p>
<div class="space-y-8">
<div class="flex items-center gap-6">
<div class="w-12 h-12 rounded-2xl bg-white flex items-center justify-center shadow-sm">
<i class="fa-solid fa-phone text-xs"></i>
</div>
<div>
<div class="text-xs font-bold text-slate-400 uppercase tracking-widest">Speak with us</div>
<div class="font-medium">+1 (800) MEADOWS</div>
</div>
</div>
<div class="flex items-center gap-6">
<div class="w-12 h-12 rounded-2xl bg-white flex items-center justify-center shadow-sm">
<i class="fa-solid fa-envelope text-xs"></i>
</div>
<div>
<div class="text-xs font-bold text-slate-400 uppercase tracking-widest">Write to us</div>
<div class="font-medium">care@peacefulmeadow.com</div>
</div>
</div>
</div>
</div>
<div class="flex-1 bg-white p-10 md:p-12 rounded-[3rem] shadow-xl">
<form class="space-y-6">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="text-xs font-bold text-slate-400 uppercase tracking-widest">First Name</label>
<input type="text" class="w-full bg-soft border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-black transition outline-none" placeholder="Jane" />
</div>
<div class="space-y-2">
<label class="text-xs font-bold text-slate-400 uppercase tracking-widest">Last Name</label>
<input type="text" class="w-full bg-soft border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-black transition outline-none" placeholder="Doe" />
</div>
</div>
<div class="space-y-2">
<label class="text-xs font-bold text-slate-400 uppercase tracking-widest">Email</label>
<input type="email" class="w-full bg-soft border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-black transition outline-none" placeholder="jane@example.com" />
</div>
<div class="space-y-2">
<label class="text-xs font-bold text-slate-400 uppercase tracking-widest">What's on your mind?</label>
<textarea rows="4" class="w-full bg-soft border-none rounded-2xl px-6 py-4 focus:ring-2 focus:ring-black transition outline-none" placeholder="I'd like to start therapy..."></textarea>
</div>
<button class="w-full bg-black text-white py-5 rounded-full font-medium hover:bg-zinc-800 transition">Send Message</button>
</form>
</div>
</div>
</section>
<!-- block:end contact -->
<!-- block:start footer -->
<footer id="footer" class="py-16 px-8 bg-white border-t border-slate-100">
<div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-12">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-black rounded-xl flex items-center justify-center text-white">
<i class="fa-solid fa-leaf text-lg"></i>
</div>
<span class="font-semibold text-xl tracking-tight">Peaceful Meadow</span>
</div>
<div class="flex flex-wrap justify-center gap-10 text-sm font-medium text-slate-500">
<a href="#" class="hover:text-black transition">Meadow Care</a>
<a href="#" class="hover:text-black transition">Methods</a>
<a href="#" class="hover:text-black transition">Pricing</a>
<a href="#" class="hover:text-black transition">Contact</a>
</div>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 rounded-full bg-soft flex items-center justify-center text-black hover:bg-slate-200 transition">
<i class="fa-brands fa-twitter text-xs"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-soft flex items-center justify-center text-black hover:bg-slate-200 transition">
<i class="fa-brands fa-instagram text-xs"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-soft flex items-center justify-center text-black hover:bg-slate-200 transition">
<i class="fa-brands fa-linkedin-in text-xs"></i>
</a>
</div>
</div>
<div class="max-w-6xl mx-auto mt-16 pt-8 border-t border-slate-50 flex flex-col md:flex-row justify-between items-center gap-6">
<p class="text-xs text-slate-400">© 2024 Peaceful Meadow Therapy. All rights reserved.</p>
<div class="flex gap-8 text-xs text-slate-400 font-medium tracking-wide uppercase">
<a href="#" class="hover:text-black transition">Privacy</a>
<a href="#" class="hover:text-black transition">Terms</a>
<a href="#" class="hover:text-black transition">Support</a>
</div>
</div>
</footer>
<!-- block:end footer -->
</body>
</html>
Unlimited access to all templates
Unlock our entire library of premium UI kits, dashboards, and landing pages with a single yearly payment.
€60
per year
Get Unlimited Access