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

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 &amp; 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 &amp; 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