Kinwell UI Template - Let's templates
Kinwell preview 1
Free
0 59

Kinwell

By Jonah Hale

Kinwell is a bold, editorial health template for telehealth apps and wellness brands with oversized type, app screen mockups, treatment programs, membership plans, and an online shop.

Live Demo
kinwell-tailwind.html
<%# letstemplates: access=premium category=health-fitness %>
<!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>Kinwell | Tailwind CSS Telehealth App Template</title>
  <meta name="description" content="Kinwell is a bold, editorial Tailwind CSS health template for telehealth apps and wellness brands with oversized type, app screen mockups, treatment programs, membership plans, and an online shop.">
  <meta name="keywords" content="Kinwell, Tailwind CSS template, HTML website template, health template, telehealth app, men's and women's health, online doctor, wellness app landing page, responsive health design">
  <meta name="author" content="Let's templates">
  <link rel="canonical" href="">

  <meta property="og:type" content="product">
  <meta property="og:site_name" content="Let's templates">
  <meta property="og:locale" content="en_US">
  <meta property="og:url" content="">
  <meta property="og:title" content="Kinwell | Tailwind CSS Telehealth App Template">
  <meta property="og:description" content="A bold, editorial Tailwind CSS health template for telehealth apps and wellness brands with oversized type, app screen mockups, treatment programs, membership plans, and an online shop.">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="Kinwell template preview">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="">
  <meta name="twitter:title" content="Kinwell | Tailwind CSS Telehealth App Template">
  <meta name="twitter:description" content="A bold, editorial Tailwind CSS health template for telehealth apps and wellness brands with oversized type, app screen mockups, treatment programs, membership plans, and an online shop.">
  <meta name="twitter:image" content="">
  <meta name="twitter:image:alt" content="Kinwell template preview">
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&amp;family=DM+Serif+Display&amp;family=Inter:wght@300;400;500;600&amp;display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            ink: '#221f1d',
            cobalt: '#000f96',
            magenta: '#c9006f',
            pine: '#03603e',
            teal: '#035066',
            sand: '#b3ad7a',
            mint: '#67b387',
            brick: '#c14b4b',
            lemon: '#e4f05d'
          },
          fontFamily: {
            sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
            wide: ['Archivo', 'ui-sans-serif', 'sans-serif'],
            serif: ['"DM Serif Display"', 'Georgia', 'serif']
          }
        }
      }
    };
  </script>
  <style>
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: 180ms ease-out both page-fade-out; }
    ::view-transition-new(root) { animation: 220ms ease-in both page-fade-in; }
    @keyframes page-fade-out { to { opacity: 0; } }
    @keyframes page-fade-in { from { opacity: 0; } }
    html { scroll-behavior: smooth; }
    [hidden] { display: none !important; }
    .font-wide { font-stretch: 125%; }
    .font-black-wide { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 125%; letter-spacing: -0.04em; line-height: .82; }
    .care-gradient { background: linear-gradient(90deg, #3b33e0, #7d3ad2 45%, #e1449c); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .health-gradient { background: linear-gradient(90deg, #03603e, #035066); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .phone { border-radius: 2.4rem; border: 9px solid #111; background: #f6f6f6; box-shadow: 0 40px 80px -30px rgba(0,0,0,.45); overflow: hidden; }
    .phone-notch { width: 34%; height: 1.1rem; border-radius: 999px; background: #111; }
    .glass-tile { background: rgba(255,255,255,.14); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); }
    .reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--reveal-delay, 0ms); }
    .reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    }
  </style>
</head>
<body class="bg-[#3f3f3f] font-sans text-ink antialiased overflow-x-hidden">
<%
  photo = ->(id, width = 900) { "https://images.unsplash.com/#{id}?auto=format&fit=crop&w=#{width}&q=80" }
  concerns = [["Mental health", "mental-health"], ["Hair loss", "hair-loss"], ["Intimate health", "intimate-health"], ["Heart health", "heart-health"], ["Metabolic health", "metabolic-health"], ["Weight care", "weight-care"]]
  tiles = [
    ["photo-1590417154498-ec4c5d293e0e", "Woman stretching her arms overhead against a cloudy sky", "", "treatments.html#mental-health"],
    ["photo-1645066928295-2506defde470", "Doctor in a white coat holding a tablet", "", "care.html"],
    ["photo-1666902752583-c2e9b6174927", "Two capsules resting on a reflective blue surface", "Introducing Clarity", "shop.html"],
    ["photo-1628595351029-c2bf17511435", "Glowing DNA double helix on a deep blue background", "", "treatments.html#heart-health"],
    ["photo-1722970651094-90f4d9b10089", "Sculpted porous white head in profile", "", "treatments.html#metabolic-health"],
    ["photo-1548733865-2ff7802d2b3f", "Woman with closed eyes and hands in her hair in black and white", "Your hair care guided start", "treatments.html#hair-loss"],
    ["photo-1715408050105-e6c1134b8064", "Man sitting against a wall striped with light and shadow", "", "plans.html"],
    ["photo-1594824476967-48c8b964273f", "Clinician in teal scrubs with arms crossed", "", "care.html"],
    ["photo-1659353888906-adb3e0041693", "Doctor in a white coat smiling in a bright clinic", "", "contact.html"]
  ]
  lessons = [
    ["Welcome to your healthy ageing start", "Overview · 2 mins", "photo-1645066928295-2506defde470", "bg-pine", true],
    ["Ageing and your skin", "Chapter 1 · 5 mins", "photo-1594824476967-48c8b964273f", "bg-brick", false],
    ["What sleep does for you", "Chapter 2 · 7 mins", "photo-1715408050105-e6c1134b8064", "bg-teal", false]
  ]
  care_team = [["Hair loss", "Dr. Owen Hale", "photo-1645066928295-2506defde470"], ["Skin clinic", "Dr. Amani Reyes", "photo-1594824476967-48c8b964273f"]]
  modes = [["chat", "Chat", "fa-comment", "Dr. Amani Reyes", "Most people notice some dryness in the first four weeks. It settles, so keep going."], ["call", "Call", "fa-phone", "Dr. Owen Hale", "Calling your care team now. Average wait today: under two minutes."], ["video", "Video", "fa-video", "Dr. Amani Reyes", "Your video visit starts at 4:30 pm. We'll send a reminder ten minutes before."]]
  socials = [["twitter", "Twitter", "https://twitter.com/"], ["instagram", "Instagram", "https://www.instagram.com/"], ["linkedin-in", "LinkedIn", "https://www.linkedin.com/"]]
%>
  <div class="mx-auto max-w-[1428px] overflow-hidden bg-white sm:my-6 lg:my-[120px]">
    <!-- block:start navbar -->
    <header id="top" class="absolute inset-x-0 z-40 mx-auto max-w-[1428px]">
      <nav class="flex items-center justify-between px-5 py-6 md:px-12 md:py-10" aria-label="Main">
        <a href="index.html" aria-current="page" class="font-serif text-2xl tracking-tight">Kin<span class="text-magenta">&amp;</span>well</a>
        <ul class="hidden items-center gap-8 text-sm lg:flex">
          <% [["Treatments", "treatments.html"], ["Plans", "plans.html"], ["Care", "care.html"], ["Shop", "shop.html"], ["Contact", "contact.html"]].each do |label, href| %>
            <li><a href="<%= href %>" class="text-ink/70 transition hover:text-ink"><%= label %></a></li>
          <% end %>
        </ul>
        <div class="flex items-center gap-2">
          <a href="plans.html" class="inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 text-sm font-medium shadow-[0_10px_30px_-10px_rgba(0,0,0,.25)] transition hover:bg-ink hover:text-white"><i class="fa-brands fa-apple"></i> Get the app</a>
          <button type="button" data-menu-toggle aria-controls="mobile-menu" aria-expanded="false" class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-ink text-white lg:hidden" aria-label="Open menu"><i class="fa-solid fa-bars"></i></button>
        </div>
      </nav>
      <div id="mobile-menu" class="hidden mx-5 rounded-3xl bg-ink p-6 text-white shadow-xl lg:hidden">
        <ul class="space-y-1 font-black-wide text-4xl uppercase">
          <% [["Home", "index.html"], ["Treatments", "treatments.html"], ["Plans", "plans.html"], ["Care", "care.html"], ["Shop", "shop.html"], ["Contact", "contact.html"]].each_with_index do |(label, href), index| %>
            <li><a href="<%= href %>" aria-current="<%= index.zero? ? 'page' : 'false' %>" class="block py-1 <%= index.zero? ? 'text-lemon' : 'hover:text-lemon' %>"><%= label %></a></li>
          <% end %>
        </ul>
      </div>
    </header>
    <!-- block:end navbar -->

    <main>
      <!-- block:start hero -->
      <section id="hero" class="relative overflow-hidden bg-gradient-to-b from-white via-[#f6effa] to-[#efe6f3] pb-16 pt-32 md:pt-44">
        <p class="text-center text-sm font-medium uppercase tracking-[1.6em]"><span class="text-[#3b33e0]">Whole</span></p>
        <div class="relative mt-6 md:mt-4">
          <h1 class="care-gradient select-none text-center font-wide text-[34vw] font-medium leading-[0.78] tracking-[-0.06em] md:text-[31vw] lg:text-[440px]" aria-label="Whole care">care</h1>
          <div class="absolute left-1/2 top-[-6%] w-[62%] max-w-[290px] -translate-x-1/2 md:top-[-12%]">
            <div class="phone bg-[#2a2522] p-4 text-white" data-reveal>
              <div class="flex items-center justify-between text-[11px] text-white/70"><span>9:41</span><span class="phone-notch"></span><span><i class="fa-solid fa-signal"></i> <i class="fa-solid fa-battery-full"></i></span></div>
              <div class="mt-5 flex items-center justify-between text-xs"><span>What can we help with?</span><img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" alt="" class="h-6 w-6 rounded-md object-cover"></div>
              <div class="mt-4 grid grid-cols-2 gap-2">
                <% concerns.each do |label, anchor| %>
                  <a href="treatments.html#<%= anchor %>" class="glass-tile flex aspect-square items-center justify-center rounded-2xl p-2 text-center font-black-wide text-[11px] uppercase leading-none transition hover:bg-white/25"><%= label %></a>
                <% end %>
              </div>
            </div>
          </div>
        </div>
        <p class="relative mx-auto mt-32 max-w-[19rem] px-5 text-center text-sm leading-snug md:mt-40">Personal, easy healthcare for men and women, built to support your body, confidence and wellbeing at every age.</p>
      </section>
      <!-- block:end hero -->

      <!-- block:start about -->
      <section id="health" class="relative bg-white pb-20 pt-16 md:pb-28">
        <p class="health-gradient text-center font-black-wide text-[20vw] uppercase lg:text-[270px]" aria-hidden="true">Health</p>
        <div class="relative mx-auto -mt-[14vw] grid max-w-[1428px] items-start gap-8 px-5 md:grid-cols-[1fr_1.3fr_1fr] md:px-5 lg:-mt-[190px]">
          <h2 class="order-2 pt-4 text-[11px] font-semibold uppercase leading-tight tracking-tight md:order-1 md:pt-[320px]">Great treatment is just the start. Get live support day and night, plus guided start videos and hours of original content.</h2>
          <div class="relative order-1 md:order-2">
            <img src="<%= photo.call("photo-1524330685423-3e1966445abe", 1200) %>" alt="Woman in wide trousers striking a dance pose in black and white" class="relative z-10 mx-auto aspect-[552/640] w-full object-cover grayscale md:mt-[140px]">
            <a href="plans.html" class="absolute left-1/2 top-[55%] z-20 inline-flex -translate-x-1/2 items-center gap-2 whitespace-nowrap rounded-full bg-ink/80 px-12 py-8 text-xs uppercase text-white backdrop-blur transition hover:bg-ink md:py-12"><i class="fa-brands fa-apple text-base"></i> Download app</a>
          </div>
          <p class="order-3 pt-4 text-[11px] font-semibold uppercase leading-tight tracking-tight md:pt-[320px]">Free, unlimited messaging with licensed providers. Proven products that really work. Healthcare the way it should feel.</p>
        </div>
      </section>
      <!-- block:end about -->

      <!-- block:start features -->
      <section id="for-you" class="grid md:grid-cols-2" data-split>
        <% [["men", "Men", "bg-cobalt", "text-sand", "Get your energy back with testosterone care", "photo-1643904524951-2a3a58856745", "Man in black and white looking down", "Energy"], ["women", "Women", "bg-magenta", "text-mint", "Balance your hormones with guided care", "photo-1532617157703-6767b6415b14", "Woman in a sports bra in black and white", "Balance"]].each_with_index do |(key, label, bg, color, text, image, alt, word), index| %>
          <a href="treatments.html#<%= key %>" class="group relative flex flex-col items-center overflow-hidden <%= bg %> px-6 pt-16 md:pt-20">
            <span class="font-serif text-[26vw] leading-[0.8] <%= color %> md:text-[16vw] lg:text-[230px]"><%= label.downcase %></span>
            <div class="phone relative -mt-[8vw] w-[70%] max-w-[340px] transition duration-500 group-hover:-translate-y-3 lg:-mt-[70px]">
              <div class="flex items-center justify-between px-5 pt-3 text-[11px]"><span>9:41</span><span class="phone-notch"></span><span><i class="fa-solid fa-battery-full"></i></span></div>
              <p class="flex items-center justify-between px-5 pt-4 text-[11px]"><%= text %> <i class="fa-solid fa-bars-staggered text-ink/50"></i></p>
              <div class="relative mt-2 aspect-[3/4] overflow-hidden">
                <p class="absolute left-3 top-0 font-black-wide text-6xl uppercase text-ink/10" aria-hidden="true"><%= word %></p>
                <img src="<%= photo.call(image, 700) %>" alt="<%= alt %>" loading="lazy" class="h-full w-full object-cover grayscale">
                <div class="absolute inset-x-3 bottom-3 flex justify-around rounded-full bg-white/80 py-2 text-[10px] backdrop-blur">
                  <span class="font-semibold"><i class="fa-solid fa-house block text-center"></i>Home</span><span class="text-ink/50"><i class="fa-solid fa-heart-pulse block text-center"></i>Care</span><span class="text-ink/50"><i class="fa-solid fa-list block text-center"></i>Plans</span><span class="text-ink/50"><i class="fa-solid fa-cart-shopping block text-center"></i>Shop</span>
                </div>
              </div>
            </div>
            <span class="sr-only">Explore care for <%= label.downcase %></span>
            <div class="h-16"></div>
          </a>
        <% end %>
      </section>
      <!-- block:end features -->

      <!-- block:start stats -->
      <section id="doses" class="relative bg-white px-5 pb-24 pt-32 md:pt-48">
        <p class="text-center font-black-wide text-[24vw] uppercase text-ink lg:text-[260px]" aria-hidden="true">Doses</p>
        <div class="mx-auto -mt-[22vw] w-[80%] max-w-[410px] rounded-[3rem] bg-gradient-to-b from-[#c55050] via-[#9b1b1b] to-[#c55050] px-8 pb-24 pt-10 text-center text-white shadow-2xl lg:-mt-[250px]" data-reveal>
          <div class="relative mx-auto h-44 w-44">
            <svg viewBox="0 0 100 100" class="h-full w-full -rotate-90" aria-hidden="true"><circle cx="50" cy="50" r="44" fill="none" stroke="rgba(255,255,255,.18)" stroke-width="3"/><circle data-ring cx="50" cy="50" r="44" fill="none" stroke="#ff8f8f" stroke-width="3" stroke-linecap="round" stroke-dasharray="276.5" stroke-dashoffset="138"/></svg>
            <p class="absolute inset-0 flex items-center justify-center text-5xl font-light"><span data-count-to="50" data-count-suffix="%">50%</span></p>
          </div>
          <h2 class="mt-10 text-2xl leading-tight">About half of all prescriptions aren't taken the right way. <span class="font-semibold text-lemon">We're changing that.</span></h2>
          <a href="plans.html" class="mt-8 inline-flex items-center gap-2 rounded-full bg-white/15 px-5 py-2.5 text-sm backdrop-blur transition hover:bg-white hover:text-brick">See how plans help <i class="fa-solid fa-arrow-right text-xs"></i></a>
        </div>
      </section>
      <!-- block:end stats -->

      <!-- block:start gallery -->
      <section id="stories" class="bg-white px-5 pb-24 md:px-[70px]">
        <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-5 md:gap-[14px]">
          <% tiles.each_with_index do |(image, alt, caption, href), index| %>
            <a href="<%= href %>" class="group relative block aspect-[246/460] overflow-hidden rounded-[2rem] <%= index == 7 ? 'md:col-start-4' : '' %>" data-reveal style="--reveal-delay: <%= (index % 5) * 80 %>ms">
              <img src="<%= photo.call(image, 600) %>" alt="<%= alt %>" loading="lazy" class="h-full w-full object-cover transition duration-700 group-hover:scale-105 <%= index == 5 || index == 6 ? 'grayscale' : '' %>">
              <% if caption.present? %>
                <span class="absolute inset-x-3 top-1/2 -translate-y-1/2 text-center font-black-wide text-lg uppercase leading-none text-white drop-shadow"><%= caption %></span>
              <% end %>
            </a>
          <% end %>
        </div>
      </section>
      <!-- block:end gallery -->

      <!-- block:start process -->
      <section id="plans" class="relative bg-white pt-16" data-lessons>
        <p class="text-center font-black-wide text-[24vw] uppercase text-ink lg:text-[330px]" aria-hidden="true">Plans</p>
        <div class="relative mx-auto -mt-[9vw] grid max-w-[1428px] items-start gap-10 px-5 pb-20 md:grid-cols-[1fr_300px_1fr] md:px-[110px] lg:-mt-[110px]">
          <div class="order-2 md:order-1 md:pt-[230px]">
            <h2 class="font-medium">Plans built to get you better results.</h2>
            <p class="mt-3 text-ink/80">A step-by-step curriculum made with leading advisors, so you get more from every treatment.</p>
          </div>
          <div class="phone order-1 mx-auto w-full max-w-[300px] md:order-2">
            <div class="flex items-center justify-between px-5 pt-3 text-[11px]"><span>9:41</span><span class="phone-notch"></span><span><i class="fa-solid fa-battery-full"></i></span></div>
            <div class="flex gap-1 px-3 pt-4 text-[11px]" role="tablist" aria-label="Plan views">
              <% ["Schedule", "Awards", "Community"].each_with_index do |tab, index| %>
                <button type="button" role="tab" data-lesson-tab="<%= index %>" aria-selected="<%= index.zero? %>" class="rounded-full px-3 py-1.5 text-ink/50 aria-selected:bg-ink/10 aria-selected:font-semibold aria-selected:text-ink"><%= tab %></button>
              <% end %>
            </div>
            <div data-lesson-panel class="space-y-2 p-3">
              <p class="flex items-center justify-between px-1 text-sm">Week 1: How ageing works <i class="fa-solid fa-chevron-down text-[10px]"></i></p>
              <% lessons.each do |title, meta, image, bg, done| %>
                <button type="button" data-lesson class="flex w-full gap-3 rounded-2xl bg-white p-2 text-left shadow-sm transition hover:shadow-md" aria-pressed="<%= done %>">
                  <span class="relative h-20 w-16 shrink-0 overflow-hidden rounded-xl <%= bg %>"><img src="<%= photo.call(image, 200) %>" alt="" class="h-full w-full object-cover mix-blend-luminosity opacity-80"><i class="fa-solid fa-play absolute inset-0 m-auto h-4 w-4 text-white"></i></span>
                  <span class="flex flex-1 flex-col justify-between py-1 text-[11px]"><span class="font-medium"><%= title %></span><span class="flex items-center justify-between text-ink/40"><%= meta %> <i data-lesson-icon class="fa-solid <%= done ? 'fa-circle-check text-green-600' : 'fa-rotate-right' %>"></i></span></span>
                </button>
              <% end %>
            </div>
            <div data-lesson-panel hidden class="p-5 text-center text-sm"><i class="fa-solid fa-medal text-4xl text-sand"></i><p class="mt-3 font-medium">3-day streak</p><p class="text-xs text-ink/50">Finish two more lessons to earn your first badge.</p></div>
            <div data-lesson-panel hidden class="space-y-2 p-4 text-xs"><p class="rounded-2xl bg-white p-3 shadow-sm"><strong>Maya:</strong> Week three and my sleep is so much better.</p><p class="rounded-2xl bg-white p-3 shadow-sm"><strong>Theo:</strong> The morning routine video changed everything for me.</p></div>
          </div>
          <div class="order-3 md:pt-[230px]">
            <h2 class="font-medium">Time for honest talk.</h2>
            <p class="mt-3 text-ink/80">Join the community for member-only sessions and expert answers from people just like you.</p>
          </div>
        </div>
      </section>
      <!-- block:end process -->

      <!-- block:start team -->
      <section id="care" class="relative bg-white pt-12" data-modes>
        <p class="text-center font-black-wide text-[26vw] uppercase text-ink lg:text-[340px]" aria-hidden="true">Care</p>
        <p class="relative -mt-[16vw] text-center text-sm text-white mix-blend-difference lg:-mt-[180px]">Reach your care team from anywhere, in one tap.</p>
        <div class="relative mx-auto mt-10 grid max-w-[1428px] items-end gap-10 px-5 pb-24 md:grid-cols-[1fr_300px_1fr] md:px-[110px]">
          <p class="order-2 text-ink/80 md:order-1 md:text-right">A doctor is ready now. Get a call back, chat live, or book a visit, whichever suits you.</p>
          <div class="phone order-1 mx-auto w-full max-w-[300px] md:order-2">
            <div class="flex items-center justify-between px-5 pt-3 text-[11px]"><span>9:41</span><span class="phone-notch"></span><span><i class="fa-solid fa-battery-full"></i></span></div>
            <div class="p-5">
              <h2 class="text-2xl">Care</h2>
              <p class="mt-1 text-xs text-green-700">Support when you need it. Meet your care team.</p>
              <% care_team.each do |topic, doctor, image| %>
                <a href="care.html" class="mt-3 flex items-center justify-between rounded-2xl bg-white p-4 shadow-sm">
                  <span><span class="block text-sm font-medium"><%= topic %></span><span class="text-[11px] text-ink/50"><%= doctor %> · MD</span></span>
                  <span class="relative"><img src="<%= photo.call(image, 120) %>" alt="" class="h-10 w-10 rounded-xl object-cover"><span class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-white"></span></span>
                </a>
              <% end %>
              <div class="mt-4 rounded-2xl bg-white p-4 text-xs shadow-sm" aria-live="polite">
                <% modes.each_with_index do |(key, _, _, doctor, message), index| %>
                  <div data-mode-panel="<%= key %>" <%= 'hidden' unless index.zero? %>><p class="text-ink/40"><%= doctor %></p><p class="mt-2 rounded-xl bg-ink/5 p-3"><%= message %></p></div>
                <% end %>
              </div>
            </div>
          </div>
          <div class="order-3 flex gap-3 md:self-start md:pt-10" role="tablist" aria-label="Contact method">
            <% modes.each_with_index do |(key, label, icon), index| %>
              <button type="button" role="tab" data-mode="<%= key %>" aria-selected="<%= index.zero? %>" class="flex h-20 w-20 flex-col items-center justify-center gap-1 rounded-full bg-white text-xs shadow-[0_15px_30px_-12px_rgba(0,0,0,.3)] transition aria-selected:bg-ink aria-selected:text-white"><i class="fa-solid <%= icon %> text-base"></i><%= label %></button>
            <% end %>
          </div>
        </div>
      </section>
      <!-- block:end team -->

      <section id="glow" class="bg-[#7a706c] px-5 py-12 md:px-[110px] md:py-20">
        <div class="bg-[#e4b53e] p-6 md:p-[110px]">
          <img src="<%= photo.call("photo-1758523671894-b5891a2ef3b6", 1400) %>" alt="Smiling man with clear skin against a pale blue background" loading="lazy" class="aspect-[892/636] w-full object-cover">
        </div>
      </section>

      <!-- block:start products -->
      <section id="shop" class="relative bg-white pt-24" data-product>
        <p class="text-center font-black-wide text-[24vw] uppercase text-ink lg:text-[300px]" aria-hidden="true">Shop</p>
        <div class="relative mx-auto -mt-[12vw] w-[86%] max-w-[794px] bg-[#e9955f] lg:-mt-[150px]">
          <img src="<%= photo.call("photo-1608571423539-e951b9b3871e", 1400) %>" alt="Amber glass dropper bottle of hair serum on a wooden stand" loading="lazy" class="aspect-[794/610] w-full object-cover mix-blend-multiply">
        </div>
        <div class="mx-auto grid max-w-[1428px] items-start gap-10 px-5 pb-24 pt-16 md:grid-cols-[1fr_310px_1fr] md:px-[125px]">
          <p class="order-2 text-ink/80 md:order-1 md:pt-10">Check out in seconds with one-tap ordering and saved payment.</p>
          <div class="phone order-1 mx-auto w-full max-w-[310px] md:order-2">
            <div class="flex items-center justify-between px-5 pt-3 text-[11px]"><span>9:41</span><span class="phone-notch"></span><span><i class="fa-solid fa-battery-full"></i></span></div>
            <p class="flex items-center justify-between px-4 pt-4 text-sm"><i class="fa-solid fa-arrow-left"></i> Root Revive Drops <a href="cart.html" class="relative" aria-label="Cart"><i class="fa-solid fa-cart-shopping"></i><span data-cart-count class="absolute -right-2 -top-2 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-brick px-1 text-[9px] text-white">1</span></a></p>
            <div class="p-4">
              <img src="<%= photo.call("photo-1608571423539-e951b9b3871e", 500) %>" alt="" class="aspect-[4/3.3] w-full rounded-2xl bg-[#e9955f] object-cover">
              <h2 class="mt-3 text-lg font-semibold">Root Revive Drops</h2>
              <p class="text-sm text-ink/60"><span data-price>$21.00</span> <span data-save class="ml-1 rounded bg-green-100 px-1.5 py-0.5 text-[10px] text-green-800">15% off</span></p>
              <p class="mt-2 text-[11px] leading-relaxed text-ink/60">A rich five-minute scalp treatment that nourishes and hydrates every hair type.</p>
              <div class="mt-4 grid grid-cols-2 gap-2 text-xs">
                <button type="button" data-subscribe aria-pressed="false" class="rounded-full bg-ink py-3 text-white transition aria-pressed:bg-green-700">Subscribe</button>
                <button type="button" data-add-cart class="rounded-full bg-ink py-3 text-white transition hover:bg-black">Add to cart</button>
              </div>
            </div>
          </div>
          <p class="order-3 text-ink/80 md:pt-10 md:text-right">Manage orders, delivery, tracking and subscriptions all in one place.</p>
        </div>
      </section>
      <!-- block:end products -->

      <!-- block:start cta -->
      <section id="providers" class="bg-white">
        <div class="relative grid grid-cols-2">
          <div class="h-[46vw] bg-black md:h-[380px]"></div>
          <div class="h-[46vw] md:h-[380px]"></div>
          <h2 class="pointer-events-none absolute inset-x-0 bottom-0 translate-y-[30%] px-5 text-[11vw] font-light leading-none tracking-tight text-white mix-blend-difference md:px-[120px] lg:whitespace-nowrap lg:text-[112px]">Access to great care</h2>
        </div>
        <div class="px-5 pb-10 pt-16 text-center md:pt-24">
          <a href="care.html" class="inline-flex items-center gap-2 rounded-full bg-ink px-6 py-3 text-sm text-white transition hover:bg-black">Meet our providers <i class="fa-solid fa-arrow-right text-xs"></i></a>
        </div>
      </section>
      <!-- block:end cta -->

      <section id="best" class="relative bg-white pb-20 pt-16 text-center">
        <p class="text-xs font-medium uppercase tracking-[1em] text-ink/60">Only the</p>
        <div class="relative mx-auto mt-4 max-w-[1100px]">
          <p class="font-wide text-[30vw] font-medium leading-[0.78] tracking-[-0.06em] text-ink/15 lg:text-[340px]" aria-hidden="true">Best</p>
          <p class="font-wide text-[30vw] font-medium leading-[0.78] tracking-[-0.06em] text-ink/10 lg:text-[340px]" aria-hidden="true">Best</p>
          <a href="shop.html" class="absolute left-1/2 top-[22%] w-[46%] max-w-[260px] -translate-x-1/2">
            <img src="<%= photo.call("photo-1764184661156-e8803cef9b67", 700) %>" alt="Black supplement jar with a white label on a turquoise background" class="aspect-[3/4] w-full rounded-[2rem] object-cover shadow-2xl">
            <span class="mt-3 block rounded-full bg-white/90 px-3 py-1 text-sm font-medium">Deep Rest Gummies · $29</span>
          </a>
        </div>
      </section>
    </main>

    <!-- block:start footer -->
    <footer id="footer" class="relative overflow-hidden text-white">
      <img src="<%= photo.call("photo-1758520705424-e31fc2a77239", 2000) %>" alt="Couple walking outdoors with gym bags and water bottles" loading="lazy" class="absolute inset-0 h-full w-full object-cover">
      <div class="absolute inset-0 bg-black/60"></div>
      <div class="relative flex min-h-[640px] flex-col items-center justify-center px-5 py-20 text-center md:min-h-[790px]">
        <p class="font-serif text-6xl md:text-7xl">Kin<span class="text-magenta">&amp;</span>well</p>
        <a href="plans.html" class="mt-12 inline-flex items-center gap-2 rounded-full bg-white/15 px-10 py-6 text-xs uppercase backdrop-blur transition hover:bg-white hover:text-ink"><i class="fa-brands fa-apple text-base"></i> Download app</a>
        <ul class="mt-10 flex gap-6 text-sm">
          <% socials.each do |icon, label, href| %>
            <li><a href="<%= href %>" class="hover:text-lemon" aria-label="<%= label %>"><i class="fa-brands fa-<%= icon %>"></i></a></li>
          <% end %>
        </ul>
        <nav class="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-2 text-xs text-white/70" aria-label="Footer">
          <a href="treatments.html" class="hover:text-white">Treatments</a>
          <a href="plans.html" class="hover:text-white">Plans</a>
          <a href="care.html" class="hover:text-white">Care</a>
          <a href="shop.html" class="hover:text-white">Shop</a>
          <a href="contact.html#terms" class="hover:text-white">Terms of use</a>
          <a href="contact.html#privacy" class="hover:text-white">Privacy policy</a>
        </nav>
        <p class="mt-6 text-xs text-white/50">&copy; 2026 Kinwell Health. Not a replacement for emergency care.</p>
      </div>
    </footer>
    <!-- block:end footer -->
  </div>

  <script>
    document.querySelectorAll("[data-menu-toggle]").forEach((button) => {
      const menu = document.getElementById(button.getAttribute("aria-controls"));
      if (!menu) return;
      button.addEventListener("click", () => {
        const open = button.getAttribute("aria-expanded") === "true";
        button.setAttribute("aria-expanded", String(!open));
        menu.classList.toggle("hidden", open);
      });
    });

    (() => {
      const read = () => { try { return Number(localStorage.getItem("kinwell-cart") ?? 1); } catch (e) { return 1; } };
      const write = (value) => { try { localStorage.setItem("kinwell-cart", String(value)); } catch (e) {} };
      const paint = () => document.querySelectorAll("[data-cart-count]").forEach((el) => { el.textContent = read(); });
      window.kinwellCart = { read, write, paint };
      paint();
      document.addEventListener("click", (event) => {
        const add = event.target.closest("[data-add-cart]");
        if (!add) return;
        write(read() + 1);
        paint();
        const label = add.textContent;
        add.textContent = "Added";
        setTimeout(() => { add.textContent = label; }, 1200);
      });
    })();

    document.querySelectorAll("[data-lessons]").forEach((section) => {
      const tabs = [...section.querySelectorAll("[data-lesson-tab]")];
      const panels = [...section.querySelectorAll("[data-lesson-panel]")];
      tabs.forEach((tab, index) => tab.addEventListener("click", () => {
        tabs.forEach((other) => other.setAttribute("aria-selected", String(other === tab)));
        panels.forEach((panel, i) => { panel.hidden = i !== index; });
      }));
      section.querySelectorAll("[data-lesson]").forEach((lesson) => lesson.addEventListener("click", () => {
        const done = lesson.getAttribute("aria-pressed") !== "true";
        lesson.setAttribute("aria-pressed", String(done));
        const icon = lesson.querySelector("[data-lesson-icon]");
        if (!icon) return;
        icon.classList.toggle("fa-circle-check", done);
        icon.classList.toggle("text-green-600", done);
        icon.classList.toggle("fa-rotate-right", !done);
      }));
    });

    document.querySelectorAll("[data-modes]").forEach((section) => {
      const buttons = [...section.querySelectorAll("[data-mode]")];
      buttons.forEach((button) => button.addEventListener("click", () => {
        buttons.forEach((other) => other.setAttribute("aria-selected", String(other === button)));
        section.querySelectorAll("[data-mode-panel]").forEach((panel) => { panel.hidden = panel.dataset.modePanel !== button.dataset.mode; });
      }));
    });

    document.querySelectorAll("[data-product]").forEach((product) => {
      const toggle = product.querySelector("[data-subscribe]");
      const price = product.querySelector("[data-price]");
      const save = product.querySelector("[data-save]");
      toggle?.addEventListener("click", () => {
        const on = toggle.getAttribute("aria-pressed") !== "true";
        toggle.setAttribute("aria-pressed", String(on));
        toggle.textContent = on ? "Subscribed" : "Subscribe";
        if (price) price.textContent = on ? "$17.85" : "$21.00";
        if (save) save.textContent = on ? "15% off applied" : "15% off";
      });
    });

    document.querySelectorAll("[data-contact-form]").forEach((form) => {
      form.addEventListener("submit", (event) => {
        event.preventDefault();
        const note = form.querySelector("[data-form-note]");
        if (note) note.hidden = false;
        form.reset();
      });
    });

    (() => {
      const counters = document.querySelectorAll("[data-count-to]");
      if (!counters.length || navigator.webdriver || matchMedia("(prefers-reduced-motion: reduce)").matches || !("IntersectionObserver" in window)) return;
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(({ isIntersecting, target }) => {
          if (!isIntersecting) return;
          observer.unobserve(target);
          const end = Number(target.dataset.countTo);
          const suffix = target.dataset.countSuffix || "";
          const ring = target.closest("section")?.querySelector("[data-ring]");
          const start = performance.now();
          const tick = (now) => {
            const progress = Math.min((now - start) / 1200, 1);
            const value = Math.round(end * progress);
            target.textContent = value + suffix;
            if (ring) ring.setAttribute("stroke-dashoffset", String(276.5 * (1 - value / 100)));
            if (progress < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        });
      });
      counters.forEach((counter) => observer.observe(counter));
    })();

    (() => {
      const items = document.querySelectorAll("[data-reveal]");
      const skip = navigator.webdriver || !("IntersectionObserver" in window) || matchMedia("(prefers-reduced-motion: reduce)").matches;
      if (!items.length || skip) return;
      document.documentElement.classList.add("reveal-ready");
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          entry.target.classList.add("is-visible");
          observer.unobserve(entry.target);
        });
      }, { rootMargin: "0px 0px -10% 0px" });
      items.forEach((item) => observer.observe(item));
    })();
  </script>
</body>
</html>

Unlimited access to all templates

Unlock our entire library of premium UI kits, dashboards, and landing pages. Renews automatically, cancel anytime.

$20 / 3 months or $60 / year
Get Unlimited Access

More Health & Fitness Templates