Web Pages Medium
Health & Wellness App Landing
A soft, calming health and wellness app landing page with a feature scroll, app screenshots, testimonials carousel, and a gentle color palette far from the usual dark demos.
Open in Lab
MCP
gsap scrolltrigger lenis css
Targets: JS HTML
Code
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--brand: #22c55e;
--brand-light: #bbf7d0;
--brand-dark: #15803d;
--bg: #fafaf9;
--dark: #1a2e1a;
--text: #1c1917;
--muted: #78716c;
--radius: 1.5rem;
}
body {
font-family: "Poppins", system-ui, sans-serif;
background: var(--bg);
color: var(--text);
}
/* NAV */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2.5rem;
background: var(--bg);
border-bottom: 1px solid #e7e5e4;
gap: 1.5rem;
}
.nav-logo {
font-size: 1.1rem;
font-weight: 800;
text-decoration: none;
color: var(--text);
}
.nav-links {
list-style: none;
display: flex;
gap: 1.75rem;
}
.nav-links a {
font-size: 0.875rem;
color: var(--muted);
text-decoration: none;
font-weight: 500;
transition: color 0.15s;
}
.nav-links a:hover {
color: var(--text);
}
.btn-download {
font-size: 0.875rem;
font-weight: 700;
padding: 0.6rem 1.25rem;
background: var(--brand);
color: #fff;
border-radius: 0.625rem;
text-decoration: none;
transition: opacity 0.15s;
}
.btn-download:hover {
opacity: 0.85;
}
/* HERO */
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
padding: 5rem 4rem;
max-width: 1100px;
margin: 0 auto;
min-height: 85vh;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
padding: 0.35rem 0.875rem;
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: var(--brand-dark);
border-radius: 999px;
}
.hero-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.15;
}
.brand-text {
color: var(--brand);
}
.hero-sub {
font-size: 0.9375rem;
color: var(--muted);
line-height: 1.7;
}
.hero-ctas {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn-primary {
display: inline-flex;
align-items: center;
padding: 0.875rem 1.75rem;
background: var(--brand);
color: #fff;
font-weight: 700;
font-size: 0.9rem;
border-radius: 0.875rem;
text-decoration: none;
transition: opacity 0.15s;
}
.btn-primary:hover {
opacity: 0.85;
}
.btn-ghost {
display: inline-flex;
align-items: center;
padding: 0.875rem 1.25rem;
color: var(--brand-dark);
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: color 0.15s;
}
.hero-trust {
display: flex;
align-items: center;
gap: 0.75rem;
}
.trust-avatars {
display: flex;
}
.ta {
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 2px solid var(--bg);
display: grid;
place-items: center;
font-size: 0.6rem;
font-weight: 800;
color: #fff;
margin-left: -0.5rem;
}
.ta:first-child {
margin-left: 0;
}
.ta--1 {
background: #6366f1;
}
.ta--2 {
background: #f97316;
}
.ta--3 {
background: #ec4899;
}
.ta--4 {
background: #f59e0b;
}
.hero-trust p {
font-size: 0.8rem;
color: var(--muted);
}
.hero-trust strong {
color: var(--text);
}
/* PHONE */
.phone-frame {
width: 240px;
margin: 0 auto;
background: #fff;
border-radius: 2.5rem;
border: 8px solid #1c1917;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.phone-screen {
background: #f0fdf4;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.app-top-bar {
font-size: 0.7rem;
font-weight: 700;
color: var(--text);
padding: 0.25rem 0;
}
.app-stat-card {
background: #fff;
border-radius: 1rem;
padding: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.asc-ring {
position: relative;
width: 3.5rem;
height: 3.5rem;
flex-shrink: 0;
}
.asc-ring svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.asc-pct {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 0.65rem;
font-weight: 800;
color: var(--brand);
}
.asc-label {
font-size: 0.7rem;
color: var(--muted);
}
.app-session {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
border-radius: 0.75rem;
padding: 0.6rem 0.75rem;
font-size: 0.7rem;
font-weight: 600;
color: var(--text);
}
.app-dur {
font-weight: 400;
color: var(--muted);
font-size: 0.65rem;
}
/* FEATURES */
.section {
padding: 5rem 2rem;
}
.section--green {
background: #f0fdf4;
}
.section--cta {
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}
.container {
max-width: 960px;
margin: 0 auto;
}
.section-eyebrow {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand);
margin-bottom: 0.5rem;
}
.section-title {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.15;
margin-bottom: 2.5rem;
}
.features-list {
display: flex;
flex-direction: column;
gap: 5rem;
}
.feature-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.feature-row--reverse {
direction: rtl;
}
.feature-row--reverse > * {
direction: ltr;
}
.feature-num {
font-size: 0.7rem;
font-weight: 800;
color: var(--brand);
letter-spacing: 0.1em;
display: block;
margin-bottom: 0.5rem;
}
.feature-text h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.75rem;
letter-spacing: -0.02em;
}
.feature-text p {
font-size: 0.9rem;
color: var(--muted);
line-height: 1.7;
}
.feature-visual {
background: #fff;
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.habit-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.625rem 0.875rem;
border-radius: 0.625rem;
font-size: 0.8rem;
color: var(--muted);
background: #f0fdf4;
}
.habit-item.done {
color: var(--brand-dark);
}
.hi-check {
color: var(--brand);
font-weight: 700;
}
.med-card {
background: #f0fdf4;
border-radius: 0.875rem;
padding: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.med-card--active {
background: var(--brand);
color: #fff;
}
.med-icon {
font-size: 1.25rem;
}
.med-card h4 {
font-size: 0.8rem;
font-weight: 700;
}
.med-card p {
font-size: 0.7rem;
opacity: 0.7;
}
.sleep-bar {
display: flex;
align-items: center;
gap: 0.75rem;
}
.sb-label {
font-size: 0.72rem;
font-weight: 600;
color: var(--muted);
min-width: 2.5rem;
}
.sb-track {
flex: 1;
height: 8px;
background: #e7e5e4;
border-radius: 4px;
overflow: hidden;
}
.sb-fill {
height: 100%;
background: #6366f1;
border-radius: 4px;
}
.sb-fill--light {
background: #a5b4fc;
}
.sb-fill--rem {
background: #22c55e;
}
.sb-val {
font-size: 0.72rem;
color: var(--muted);
min-width: 3.5rem;
text-align: right;
}
/* STATS */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 2rem;
}
.stat-item {
text-align: center;
}
.stat-num {
display: block;
font-size: 3rem;
font-weight: 800;
color: var(--brand-dark);
letter-spacing: -0.04em;
}
.stat-label {
font-size: 0.8rem;
color: var(--brand-dark);
opacity: 0.7;
}
/* PRICING */
.billing-toggle {
display: flex;
align-items: center;
gap: 0.75rem;
justify-content: center;
margin: 1.5rem 0 2rem;
font-size: 0.875rem;
color: var(--muted);
}
.toggle {
--toggle-color: var(--brand);
position: relative;
display: inline-block;
}
.toggle input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.toggle__track {
display: block;
width: 2.5rem;
height: 1.375rem;
background: #d1d5db;
border-radius: 999px;
transition: background 0.2s;
}
.toggle input:checked + .toggle__track {
background: var(--brand);
}
.toggle__thumb {
position: absolute;
top: 2px;
left: 2px;
width: 1.125rem;
height: 1.125rem;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.2s;
}
.toggle input:checked ~ .toggle__thumb,
.toggle input:checked + .toggle__track + .toggle__thumb {
transform: translateX(1.125rem);
}
.save-badge {
background: #fef3c7;
color: #92400e;
font-size: 0.65rem;
font-weight: 700;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
}
.plan-card {
background: #fff;
border: 1px solid #e7e5e4;
border-radius: var(--radius);
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
}
.plan-card--featured {
border-color: var(--brand);
box-shadow: 0 0 0 2px var(--brand);
}
.plan-badge {
position: absolute;
top: -0.75rem;
left: 50%;
transform: translateX(-50%);
background: var(--brand);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
padding: 0.2rem 0.75rem;
border-radius: 999px;
white-space: nowrap;
}
.plan-card h3 {
font-size: 0.9rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.plan-price {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.04em;
color: var(--text);
}
.plan-price span {
font-size: 0.875rem;
font-weight: 400;
color: var(--muted);
}
.plan-features {
list-style: none;
font-size: 0.85rem;
color: var(--muted);
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.btn-plan-cta {
display: block;
text-align: center;
padding: 0.875rem;
background: var(--brand);
color: #fff;
font-weight: 700;
border-radius: 0.875rem;
text-decoration: none;
}
.btn-plan-free {
display: block;
text-align: center;
padding: 0.875rem;
border: 1px solid #e7e5e4;
color: var(--text);
font-weight: 700;
border-radius: 0.875rem;
text-decoration: none;
}
/* DOWNLOAD */
.download-inner {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.download-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -0.03em;
color: #fff;
}
.download-sub {
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.7);
}
.store-badges {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.store-badge {
display: inline-flex;
align-items: center;
gap: 0.625rem;
padding: 0.75rem 1.5rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.75rem;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 0.875rem;
transition: background 0.15s;
}
.store-badge:hover {
background: rgba(255, 255, 255, 0.2);
}
/* FOOTER */
.footer {
background: var(--dark);
padding: 1.5rem 2.5rem;
}
.footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 960px;
margin: 0 auto;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.3);
}
.footer-links {
display: flex;
gap: 1.5rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.3);
text-decoration: none;
}
@media (max-width: 768px) {
.hero {
grid-template-columns: 1fr;
}
.hero-phone {
display: none;
}
.feature-row {
grid-template-columns: 1fr;
}
.feature-row--reverse {
direction: ltr;
}
}(function () {
"use strict";
// ── Billing toggle (monthly ↔ annual) ────────────────────────────
const toggle = document.getElementById("billing-toggle");
const premiumPrice = document.getElementById("premium-price");
const familyPrice = document.getElementById("family-price");
if (toggle) {
toggle.addEventListener("change", () => {
const annual = toggle.checked;
if (premiumPrice)
premiumPrice.innerHTML = annual ? "$5.99<span>/mo</span>" : "$9.99<span>/mo</span>";
if (familyPrice)
familyPrice.innerHTML = annual ? "$8.99<span>/mo</span>" : "$14.99<span>/mo</span>";
});
}
// ── Stat counters (IntersectionObserver) ─────────────────────────
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
function animateCounter(el) {
const target = parseFloat(el.dataset.target);
const suffix = el.dataset.suffix || "";
if (reduced || isNaN(target)) {
el.textContent = target.toLocaleString() + suffix;
return;
}
const dur = 1800;
const start = performance.now();
function ease(t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}
function tick(now) {
const t = Math.min((now - start) / dur, 1);
const val = target * ease(t);
el.textContent = Math.round(val).toLocaleString() + suffix;
if (t < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
}
const statsSection = document.getElementById("stats");
if (statsSection) {
const obs = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.querySelectorAll(".stat-num[data-target]").forEach(animateCounter);
obs.unobserve(e.target);
}
});
},
{ threshold: 0.3 }
);
obs.observe(statsSection);
}
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bloom — Your Wellness Journey</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script type="importmap">{"imports":{"gsap":"https://esm.sh/gsap@3.13.0","gsap/ScrollTrigger":"https://esm.sh/gsap@3.13.0/ScrollTrigger","lenis":"https://esm.sh/lenis@1.1.13/dist/lenis.mjs"}}</script>
</head>
<body>
<!-- NAV -->
<nav class="nav">
<a href="#" class="nav-logo">🌿 Bloom</a>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#stats">Community</a></li>
<li><a href="#pricing">Pricing</a></li>
</ul>
<a href="#download" class="btn-download">Download Free</a>
</nav>
<!-- HERO -->
<section class="hero" id="hero">
<div class="hero-content">
<div class="hero-badge">🏆 #1 Wellness App 2025 — App Store</div>
<h1 class="hero-title">Your daily guide<br>to <span class="brand-text">feeling better.</span></h1>
<p class="hero-sub">Personalized habits, guided meditations, sleep tracking, and mindful movement — all in one beautiful app.</p>
<div class="hero-ctas">
<a href="#download" class="btn-primary">Start Free — No Card Needed</a>
<a href="#features" class="btn-ghost">See how it works →</a>
</div>
<div class="hero-trust">
<div class="trust-avatars" aria-hidden="true">
<div class="ta ta--1">AK</div><div class="ta ta--2">MR</div><div class="ta ta--3">LN</div><div class="ta ta--4">JO</div>
</div>
<p>Joined by <strong>500,000+</strong> people this year</p>
</div>
</div>
<div class="hero-phone">
<div class="phone-frame">
<div class="phone-screen">
<div class="app-top-bar"><span>Good morning, Alex ☀️</span></div>
<div class="app-stat-card"><p class="asc-label">Today's goal</p><div class="asc-ring"><svg viewBox="0 0 80 80"><circle cx="40" cy="40" r="34" fill="none" stroke="#e8f5e9" stroke-width="8"/><circle class="asc-progress" cx="40" cy="40" r="34" fill="none" stroke="#22c55e" stroke-width="8" stroke-linecap="round" stroke-dasharray="213" stroke-dashoffset="64"/></svg><span class="asc-pct">70%</span></div></div>
<div class="app-session"><span>🧘 Morning Calm</span><span class="app-dur">10 min</span></div>
<div class="app-session"><span>🚶 Walk goal</span><span class="app-dur">6,420 / 8,000</span></div>
<div class="app-session"><span>💤 Sleep score</span><span class="app-dur">84 / 100</span></div>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="section" id="features">
<div class="container">
<p class="section-eyebrow">Everything you need</p>
<h2 class="section-title">Simple tools.<br>Real results.</h2>
<div class="features-list">
<div class="feature-row">
<div class="feature-text">
<span class="feature-num">01</span>
<h3>Personalized habit plans</h3>
<p>Answer 5 questions and get a custom 30-day wellness plan built around your schedule, goals, and lifestyle.</p>
</div>
<div class="feature-visual fv--habits">
<div class="habit-item done">🧘 Meditate · 10 min <span class="hi-check">✓</span></div>
<div class="habit-item done">💧 8 glasses of water <span class="hi-check">✓</span></div>
<div class="habit-item">🚶 Evening walk · 20 min</div>
<div class="habit-item">📖 Read before sleep</div>
</div>
</div>
<div class="feature-row feature-row--reverse">
<div class="feature-text">
<span class="feature-num">02</span>
<h3>Guided meditations & breathwork</h3>
<p>200+ sessions led by certified mindfulness coaches. From 2-minute stress relief to 45-minute deep dives.</p>
</div>
<div class="feature-visual fv--meditate">
<div class="med-card"><span class="med-icon">🌊</span><h4>Ocean Breath</h4><p>Stress relief · 8 min</p></div>
<div class="med-card med-card--active"><span class="med-icon">🌙</span><h4>Sleep Prep</h4><p>Bedtime · 12 min</p></div>
</div>
</div>
<div class="feature-row">
<div class="feature-text">
<span class="feature-num">03</span>
<h3>Sleep tracking & insights</h3>
<p>Connect your wearable or use our phone-based tracking. Wake up to a personalized sleep score and actionable tips.</p>
</div>
<div class="feature-visual fv--sleep">
<div class="sleep-bar"><span class="sb-label">Deep</span><div class="sb-track"><div class="sb-fill" style="width:30%"></div></div><span class="sb-val">1h 42m</span></div>
<div class="sleep-bar"><span class="sb-label">Light</span><div class="sb-track"><div class="sb-fill sb-fill--light" style="width:55%"></div></div><span class="sb-val">3h 10m</span></div>
<div class="sleep-bar"><span class="sb-label">REM</span><div class="sb-track"><div class="sb-fill sb-fill--rem" style="width:20%"></div></div><span class="sb-val">1h 08m</span></div>
</div>
</div>
</div>
</div>
</section>
<!-- STATS -->
<section class="section section--green" id="stats">
<div class="container">
<h2 class="section-title">Join 500K+ people<br>already feeling better.</h2>
<div class="stats-grid">
<div class="stat-item"><span class="stat-num" data-target="500000" data-suffix="+">0</span><span class="stat-label">Active users</span></div>
<div class="stat-item"><span class="stat-num" data-target="4" data-suffix=".8★">0</span><span class="stat-label">App Store rating</span></div>
<div class="stat-item"><span class="stat-num" data-target="78" data-suffix="%">0</span><span class="stat-label">Report better sleep in 30 days</span></div>
<div class="stat-item"><span class="stat-num" data-target="92" data-suffix="%">0</span><span class="stat-label">Complete first week</span></div>
</div>
</div>
</section>
<!-- PRICING -->
<section class="section" id="pricing">
<div class="container">
<h2 class="section-title">Simple, honest pricing.</h2>
<div class="billing-toggle">
<span>Monthly</span>
<label class="toggle"><input type="checkbox" id="billing-toggle" /><span class="toggle__track"><span class="toggle__thumb"></span></span></label>
<span>Annual <span class="save-badge">Save 40%</span></span>
</div>
<div class="pricing-grid">
<div class="plan-card"><h3>Free</h3><p class="plan-price">$0<span>/mo</span></p><ul class="plan-features"><li>✓ 5 meditations / month</li><li>✓ Basic habit tracker</li><li>✓ Sleep log</li><li>✗ AI coaching</li></ul><a href="#download" class="btn-plan-free">Get Started</a></div>
<div class="plan-card plan-card--featured"><div class="plan-badge">Most popular</div><h3>Premium</h3><p class="plan-price" id="premium-price">$9.99<span>/mo</span></p><ul class="plan-features"><li>✓ Unlimited meditations</li><li>✓ Full habit library</li><li>✓ Advanced sleep insights</li><li>✓ AI wellness coach</li></ul><a href="#download" class="btn-plan-cta">Start 7-day Free Trial</a></div>
<div class="plan-card"><h3>Family</h3><p class="plan-price" id="family-price">$14.99<span>/mo</span></p><ul class="plan-features"><li>✓ Up to 6 members</li><li>✓ Everything in Premium</li><li>✓ Family challenges</li><li>✓ Kids mode</li></ul><a href="#download" class="btn-plan-free">Choose Family</a></div>
</div>
</div>
</section>
<!-- DOWNLOAD CTA -->
<section class="section section--cta" id="download">
<div class="container download-inner">
<h2 class="download-title">Start your wellness<br>journey today.</h2>
<p class="download-sub">Free forever. No credit card. Download on iOS and Android.</p>
<div class="store-badges">
<a href="#" class="store-badge"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg> App Store</a>
<a href="#" class="store-badge"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3.18 23.76c.35.19.76.2 1.14.01l11.69-6.73-2.52-2.52-10.31 9.24zM.44 1.26A1.5 1.5 0 0 0 .25 2v20c0 .26.06.5.19.72l.1.1L11.7 11.5v-.26L.54 1.16l-.1.1zM20.33 10.3l-2.54-1.46-2.83 2.83 2.83 2.83 2.54-1.46c.73-.42.73-1.33 0-1.74zM4.32.24 16.01 6.97 13.49 9.5 3.18.26C3.56.07 4 .05 4.32.24z"/></svg> Google Play</a>
</div>
</div>
</section>
<footer class="footer">
<div class="container footer-inner">
<span>🌿 Bloom · © 2026</span>
<div class="footer-links"><a href="#">Privacy</a><a href="#">Terms</a><a href="#">Support</a></div>
</div>
</footer>
<script type="module" src="script.js"></script>
</body>
</html>Health & Wellness App Landing
A light-mode landing page — intentionally different from every dark demo in the library. Soft greens, warm whites, and rounded forms communicate trust, health, and calm.
Sections
- Nav — White bg, green logo, “Download Free” button
- Hero — Phone mockup center, headline left, soft gradient bg
- Features — Alternating text/phone-screen pairs that scroll into view
- Stats — “Join 500K+ people” with soft animated counters
- Testimonials — Card carousel with avatar, quote, star rating
- Pricing — Monthly / Annual toggle, 3 plan cards
- Download CTA — App Store + Google Play badges, large soft gradient section
- Footer — Links, legal
Design tokens
--color-brand: #22c55e(green-500)--color-bg: #fafaf9(warm white)--radius: 1.5rem(rounded everywhere)- Poppins font via Google Fonts