Corevia UI Template - Let's templates
Corevia preview 1
Free
0 2

Corevia

By Luca Moretti

Corevia is an energetic health and fitness template for gyms and coaches, with a photo hero, program carousel, services grid, progress tracker, training rail, monthly and annual pricing, newsletter, about, services, testimonials, pricing and contact pages.

Live Demo
corevia-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>Corevia | Tailwind CSS Health &amp; Fitness Template</title>
  <meta name="description" content="Corevia is an energetic Tailwind CSS health and fitness template for gyms and coaches, with a photo hero, program carousel, services grid, progress tracker, training rail, monthly and annual pricing, newsletter, about, services, testimonials, pricing and contact pages.">
  <meta name="keywords" content="Corevia, Tailwind CSS template, HTML website template, fitness template, gym website, personal trainer, coaching programs, membership pricing, workout tracker, health club">
  <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="Corevia | Tailwind CSS Health &amp; Fitness Template">
  <meta property="og:description" content="An energetic Tailwind CSS fitness template with a program carousel, progress tracker, pricing toggle and a chat-style sign-up.">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="Corevia template preview">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="">
  <meta name="twitter:title" content="Corevia | Tailwind CSS Health &amp; Fitness Template">
  <meta name="twitter:description" content="An energetic Tailwind CSS fitness template with a program carousel, progress tracker, pricing toggle and a chat-style sign-up.">
  <meta name="twitter:image" content="">
  <meta name="twitter:image:alt" content="Corevia template preview">
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: { flame: { DEFAULT: '#f26b38', deep: '#d9551f' }, coal: { DEFAULT: '#0e0e0e', soft: '#232323' }, mist: '#f3f3f3' },
          fontFamily: { sans: ['Inter', 'sans-serif'], serif: ['"Instrument Serif"', '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; }
    .no-scrollbar { scrollbar-width: none; }
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .swap { transition: opacity .35s ease; }
    .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; }
      .swap { transition: none; }
      ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    }
  </style>
</head>
<body class="bg-white font-sans text-coal antialiased">
  <% active_page = "index" %>
  <% nav = { "index" => "Home", "about" => "About Us", "services" => "Services", "testimonials" => "Testimonials" } %>
  <!-- block:start navbar -->
  <header class="<%= active_page == 'index' ? 'absolute inset-x-0 top-0' : 'relative bg-coal' %> z-40 text-white">
    <nav class="mx-auto flex max-w-7xl items-center justify-between gap-6 px-5 py-6 md:px-10" aria-label="Main">
      <a href="index.html" class="flex items-center gap-2 text-2xl font-semibold"><span class="grid h-9 w-9 place-items-center rounded-lg bg-flame"><i class="fa-solid fa-dumbbell text-sm" aria-hidden="true"></i></span>Corevia</a>
      <ul class="hidden items-center gap-7 text-sm lg:flex">
        <% nav.each do |slug, label| %>
          <% active = active_page == slug %>
          <li><a href="<%= slug %>.html" <%= 'aria-current="page"'.html_safe if active %> class="transition <%= active ? 'font-semibold text-white' : 'text-white/80 hover:text-white' %>"><%= label %></a></li>
        <% end %>
      </ul>
      <div class="flex items-center gap-3">
        <a href="contact.html" class="hidden rounded-full bg-flame px-5 py-3 text-xs font-semibold uppercase tracking-wide transition hover:bg-flame-deep sm:inline-block">Start your journey</a>
        <button type="button" data-menu-toggle aria-controls="mobile-menu" aria-expanded="false" class="grid h-11 w-11 place-items-center rounded-full bg-white/15 backdrop-blur lg:hidden" aria-label="Open menu"><i class="fa-solid fa-bars" aria-hidden="true"></i></button>
      </div>
    </nav>
    <div id="mobile-menu" class="mx-5 hidden rounded-2xl bg-coal p-5 lg:hidden">
      <ul class="grid gap-1 text-lg">
        <% nav.merge("pricing" => "Pricing", "contact" => "Contact").each do |slug, label| %>
          <% active = active_page == slug %>
          <li><a href="<%= slug %>.html" <%= 'aria-current="page"'.html_safe if active %> class="block rounded-xl px-4 py-3 <%= active ? 'bg-flame' : 'hover:bg-white/10' %>"><%= label %></a></li>
        <% end %>
      </ul>
    </div>
  </header>
  <!-- block:end navbar -->

  <!-- block:start hero -->
  <section class="relative isolate overflow-hidden bg-coal text-white">
    <img src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=1800&q=80" alt="Gym floor with racks of dumbbells and an athlete training" class="absolute inset-0 -z-10 h-full w-full object-cover opacity-70">
    <div class="absolute inset-0 -z-10 bg-gradient-to-t from-coal/90 via-coal/30 to-coal/40"></div>
    <div class="mx-auto grid min-h-[44rem] max-w-7xl gap-10 px-5 pb-14 pt-32 md:px-10 lg:grid-cols-[1fr_auto] lg:items-end">
      <div class="flex flex-col">
        <div class="mb-auto w-fit rounded-2xl bg-white p-3 text-coal shadow-xl" data-reveal>
          <p class="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide"><span class="h-3 w-3 rounded-full border-[3px] border-flame"></span>18K+ members training with us</p>
          <p class="mt-2 flex -space-x-2"><% %w[avatar-1 avatar-2 avatar-5 avatar-3 avatar-6].each do |avatar| %><img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/<%= avatar %>.jpg" alt="" class="h-8 w-8 rounded-full border-2 border-white object-cover"><% end %></p>
        </div>
        <h1 class="mt-24 max-w-3xl text-5xl font-semibold leading-[1.05] tracking-tight md:text-7xl" data-reveal style="--reveal-delay: 80ms">Build your <span class="font-serif font-normal italic">strength,</span> <span class="font-serif font-normal italic">free</span> your mind</h1>
        <p class="mt-6 max-w-xl text-lg text-white/85">Train with a plan made for you — coaching, nutrition and support that fit around real life.</p>
        <a href="contact.html" class="mt-8 w-fit rounded-full bg-flame px-6 py-3.5 text-xs font-semibold uppercase tracking-wide transition hover:bg-flame-deep">Start your journey</a>
      </div>
      <div class="hidden flex-col items-end gap-10 lg:flex">
        <div class="relative h-64 w-80" aria-hidden="true">
          <img src="https://images.unsplash.com/photo-1607962837359-5e7e89f86776?auto=format&fit=crop&w=400&h=400&q=80" alt="" class="absolute right-0 top-6 h-44 w-44 rounded-full border-4 border-white/30 object-cover">
          <% [["Better health", "left-0 top-0"], ["Expert coaching", "left-0 top-[42%]"], ["Real community", "left-10 bottom-0"]].each do |(label, position)| %>
            <span class="absolute <%= position %> flex items-center gap-2 rounded-full border border-white/50 bg-coal/30 px-3 py-1.5 text-xs backdrop-blur"><span class="h-2 w-2 rounded-full bg-white"></span><%= label %></span>
          <% end %>
        </div>
        <button type="button" data-video-open class="flex items-center gap-5 rounded-full bg-white py-2 pl-6 pr-2 text-xl font-medium text-coal transition hover:bg-mist">Watch video<span class="relative h-14 w-14 overflow-hidden rounded-full"><img src="https://images.unsplash.com/photo-1552674605-db6ffd4facb5?auto=format&fit=crop&w=160&h=160&q=70" alt="" class="h-full w-full object-cover"><span class="absolute inset-0 grid place-items-center bg-coal/30 text-white"><i class="fa-solid fa-play text-sm" aria-hidden="true"></i></span></span></button>
      </div>
    </div>
    <dialog data-video class="w-[min(52rem,92vw)] overflow-hidden rounded-3xl bg-coal p-0 text-white backdrop:bg-coal/80" aria-labelledby="video-title">
      <div class="relative">
        <img src="https://images.unsplash.com/photo-1552674605-db6ffd4facb5?auto=format&fit=crop&w=1200&h=675&q=80" alt="Runners in silhouette against a bright blue sky" class="aspect-video w-full object-cover">
        <button type="button" data-video-close class="absolute right-4 top-4 grid h-10 w-10 place-items-center rounded-full bg-white text-coal" aria-label="Close"><i class="fa-solid fa-xmark" aria-hidden="true"></i></button>
      </div>
      <div class="p-6"><h2 id="video-title" class="text-2xl font-semibold">A morning at Corevia</h2><p class="mt-2 text-white/70">Two minutes inside our coached sessions, from warm-up to the last rep.</p></div>
    </dialog>
  </section>
  <!-- block:end hero -->

  <% programs = [["Battle Rope Training", "1599058917212-d750089bc07e", "Woman training with battle ropes outdoors"], ["Bodyweight Workout", "1518611012118-696072aa579a", "Two women doing a bodyweight class"], ["Mobility & Stretch", "1599901860904-17e6ed7083a0", "Person stretching in a downward dog pose"], ["Strength Basics", "1541534741688-6078c6bfb5c5", "Woman lifting a barbell in a squat rack"], ["Run Club", "1607962837359-5e7e89f86776", "Group running together outdoors"]] %>
  <!-- block:start about -->
  <section class="mx-auto max-w-7xl px-5 py-20 md:px-10 md:py-28" data-carousel>
    <div class="grid gap-8 lg:grid-cols-[1.4fr_1fr]">
      <h2 class="text-4xl font-semibold leading-tight tracking-tight md:text-5xl">At Corevia, <span class="font-serif font-normal italic">we think</span> <span class="font-serif font-normal italic">fitness</span> goes far beyond the workout</h2>
      <div>
        <p class="text-lg text-coal/70">We help you move well, get stronger and feel better day to day — with coaches who know your name.</p>
        <a href="about.html" class="mt-6 inline-block rounded-full bg-flame px-6 py-3.5 text-xs font-semibold uppercase tracking-wide text-white transition hover:bg-flame-deep">Start your journey</a>
      </div>
    </div>
    <div class="mt-12 flex justify-end gap-3">
      <button type="button" data-carousel-prev class="grid h-14 w-14 place-items-center rounded-full border border-coal/15 transition hover:bg-mist" aria-label="Previous programs"><i class="fa-solid fa-chevron-left" aria-hidden="true"></i></button>
      <button type="button" data-carousel-next class="grid h-14 w-14 place-items-center rounded-full bg-coal text-white transition hover:bg-flame" aria-label="Next programs"><i class="fa-solid fa-chevron-right" aria-hidden="true"></i></button>
    </div>
    <ul class="no-scrollbar mt-8 flex snap-x snap-mandatory items-start gap-6 overflow-x-auto pb-2" data-carousel-track>
      <% programs.each_with_index do |(title, photo, alt), index| %>
        <li class="relative shrink-0 snap-start <%= index.zero? ? 'w-[85%] md:w-[30rem]' : 'w-[70%] md:w-[19rem]' %>">
          <img src="https://images.unsplash.com/photo-<%= photo %>?auto=format&fit=crop&w=800&h=<%= index.zero? ? 640 : 500 %>&q=75" alt="<%= alt %>" class="<%= index.zero? ? 'aspect-[5/4]' : 'aspect-[8/5]' %> w-full rounded-3xl object-cover">
          <div class="absolute inset-x-3 bottom-3 flex items-center justify-between gap-3 rounded-2xl bg-white px-5 py-3 shadow-lg"><h3 class="<%= index.zero? ? 'text-lg' : 'text-sm' %> font-medium"><%= title %></h3><a href="services.html" class="rounded-full bg-flame px-4 py-2 text-xs font-medium text-white transition hover:bg-flame-deep">View now</a></div>
        </li>
      <% end %>
    </ul>
  </section>
  <!-- block:end about -->

  <% services = [["Personal Training", "fa-hand-holding-heart", "One coach, one plan, built around your goals and schedule."], ["Nutrition Plans", "fa-heart-pulse", "Simple meals and portions that support how you train."], ["Yoga & Mindfulness", "fa-spa", "Breath, balance and recovery for body and mind."], ["Cardio & Endurance", "fa-person-running", "Run, row and ride further without burning out."], ["Wellness Coaching", "fa-seedling", "Sleep, stress and habits — the stuff that makes it stick."], ["Online Coaching", "fa-laptop", "Expert programming and check-ins wherever you train."]] %>
  <!-- block:start features -->
  <section class="bg-mist" data-services>
    <div class="mx-auto max-w-7xl px-5 py-20 text-center md:px-10 md:py-28">
      <h2 class="text-4xl font-semibold tracking-tight md:text-5xl">Programs that <span class="font-serif font-normal italic">shape a healthier</span> you</h2>
      <p class="mx-auto mt-4 max-w-md text-coal/70">Every program combines training, food and recovery so progress shows up — and lasts.</p>
      <a href="services.html" class="mt-6 inline-block rounded-full bg-flame px-6 py-3.5 text-xs font-semibold uppercase tracking-wide text-white transition hover:bg-flame-deep">Explore programs</a>
      <ul class="mx-auto mt-14 grid max-w-5xl gap-5 text-left sm:grid-cols-2 lg:grid-cols-3">
        <% services.each_with_index do |(title, icon, text), index| %>
          <li><a href="services.html" data-service aria-current="<%= index == 2 ? 'true' : 'false' %>" class="group block h-full rounded-2xl bg-white p-7 transition hover:bg-flame hover:text-white focus-visible:bg-flame focus-visible:text-white aria-[current=true]:bg-flame aria-[current=true]:text-white" data-reveal style="--reveal-delay: <%= (index % 3) * 80 %>ms"><i class="fa-solid <%= icon %> text-xl text-flame transition group-hover:text-white group-aria-[current=true]:text-white" aria-hidden="true"></i><h3 class="mt-6 text-lg font-medium"><%= title %></h3><p class="mt-2 text-sm text-coal/60 transition group-hover:text-white/85 group-aria-[current=true]:text-white/85"><%= text %></p></a></li>
        <% end %>
      </ul>
    </div>
  </section>
  <!-- block:end features -->

  <% routines = { "exercise" => ["Exercise", "3 km run today", 62, "96%", "+0.9%"], "food" => ["Healthy food", "1,850 kcal logged", 78, "88%", "+1.4%"], "gym" => ["Gym", "4 of 5 sessions", 80, "92%", "+2.1%"] } %>
  <!-- block:start demo -->
  <section class="mx-auto grid max-w-7xl gap-5 px-5 py-20 md:px-10 md:py-28 lg:grid-cols-[1.5fr_1fr]" data-tracker>
    <div class="relative isolate min-h-[30rem] overflow-hidden rounded-3xl p-5">
      <img src="https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?auto=format&fit=crop&w=1100&h=800&q=80" alt="Man curling a barbell in a gym" class="absolute inset-0 -z-10 h-full w-full object-cover">
      <div class="mt-40 w-full max-w-xs" aria-live="polite">
        <div class="rounded-2xl bg-flame p-5 text-white">
          <p class="text-sm">Health &amp; fitness score</p>
          <p class="mt-1 flex items-end justify-between"><span class="text-6xl font-semibold" data-track-score>96%</span><span class="text-2xl font-semibold" data-track-delta>+0.9%</span></p>
        </div>
        <div class="mt-3 rounded-2xl bg-white p-5">
          <p class="text-sm">Routine</p>
          <div class="mt-3 flex flex-wrap gap-2" role="tablist" aria-label="Routine">
            <% routines.each_with_index do |(key, (label)), index| %>
              <button type="button" role="tab" data-routine="<%= key %>" aria-selected="<%= index.zero? %>" class="rounded-full border border-coal/15 px-3 py-1.5 text-sm transition hover:border-coal aria-selected:border-coal aria-selected:bg-coal aria-selected:text-white"><%= label %></button>
            <% end %>
          </div>
          <p class="mt-5 text-sm" data-track-label>3 km run today</p>
          <div class="mt-2 h-4 overflow-hidden rounded-full border border-coal/20" role="progressbar" aria-label="Today's progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="62"><div class="h-full rounded-full bg-coal transition-all duration-500" style="width: 62%" data-track-bar></div></div>
        </div>
      </div>
      <script type="application/json" data-routine-data><%= raw routines.transform_values { |(label, text, percent, score, delta)| { text: text, percent: percent, score: score, delta: delta } }.to_json %></script>
    </div>
    <div class="flex flex-col rounded-3xl bg-flame p-8 text-center text-white">
      <span class="h-px w-full bg-white/70"></span>
      <h2 class="mt-16 text-4xl font-medium tracking-tight">Track every step of your progress</h2>
      <div class="relative mt-10 flex items-center gap-4" aria-hidden="true"><span class="h-px flex-1 bg-white/60"></span><i class="fa-solid fa-caret-up text-xl" data-track-marker></i><span class="h-px flex-1 bg-white/60"></span></div>
      <p class="mx-auto mt-10 max-w-xs text-white/90">Our tracker brings workouts, meals and body changes together so you can see how far you've come.</p>
      <a href="pricing.html" class="mx-auto mt-auto w-full max-w-xs rounded-full bg-white px-6 py-3.5 text-xs font-semibold uppercase tracking-wide text-coal transition hover:bg-mist">Discover more</a>
    </div>
  </section>
  <!-- block:end demo -->

  <% rail = [["Stronger every week", "1517836357463-d25dfeac3438", "Athlete deadlifting a heavy barbell"], ["Train side by side", "1534258936925-c58bed479fcb", "Two people training with battle ropes"], ["Lift with intent", "1605296867304-46d5465a13f1", "Man setting up a deadlift in a dark gym"], ["Move as a team", "1554284126-aa88f22d8b74", "Group doing barbell squats together"]] %>
  <!-- block:start gallery -->
  <section class="bg-coal text-white" data-rail>
    <div class="mx-auto grid max-w-7xl gap-10 py-20 pl-5 md:py-24 md:pl-10 lg:grid-cols-[22rem_1fr] lg:items-end">
      <div class="pr-5 lg:pb-10">
        <h2 class="text-4xl font-semibold tracking-tight md:text-5xl">Move for a <span class="font-serif font-normal italic">stronger</span> body</h2>
        <p class="mt-5 text-white/75">Coached sessions built to help you train well, eat well and feel your best.</p>
        <a href="contact.html" class="mt-6 inline-block rounded-full bg-flame px-6 py-3.5 text-xs font-semibold uppercase tracking-wide transition hover:bg-flame-deep">Start your journey</a>
        <div class="mt-8 flex gap-3">
          <button type="button" data-rail-prev class="grid h-12 w-12 place-items-center rounded-full border border-white/20 transition hover:bg-white hover:text-coal" aria-label="Scroll left"><i class="fa-solid fa-chevron-left" aria-hidden="true"></i></button>
          <button type="button" data-rail-next class="grid h-12 w-12 place-items-center rounded-full bg-white text-coal transition hover:bg-flame hover:text-white" aria-label="Scroll right"><i class="fa-solid fa-chevron-right" aria-hidden="true"></i></button>
        </div>
      </div>
      <ul class="no-scrollbar flex snap-x snap-mandatory gap-4 overflow-x-auto pr-5" data-rail-track>
        <li class="flex w-64 shrink-0 snap-start items-end rounded-3xl bg-flame p-6"><p class="text-3xl font-medium leading-tight">Made for an active life</p></li>
        <% rail.each do |(title, photo, alt)| %>
          <li class="relative w-72 shrink-0 snap-start md:w-96">
            <img src="https://images.unsplash.com/photo-<%= photo %>?auto=format&fit=crop&w=800&h=900&q=75" alt="<%= alt %>" class="aspect-[8/9] w-full rounded-3xl object-cover">
            <span class="absolute right-4 top-4 grid h-11 w-11 place-items-center rounded-full bg-white text-coal" aria-hidden="true"><i class="fa-solid fa-arrow-up rotate-45 inline-block" aria-hidden="true"></i></span>
            <p class="absolute inset-x-5 bottom-5 text-2xl font-medium leading-tight drop-shadow"><%= title %></p>
          </li>
        <% end %>
      </ul>
    </div>
  </section>
  <!-- block:end gallery -->

  <% plans = [["Kickstart", 89, 71, ["Weekly personal workout plan", "Monthly nutrition guide", "Check-ins every two weeks", "Full gym access"], false], ["Transform", 149, 119, ["Custom weekly workout plans", "Monthly meal plans with recipes", "Weekly 30-minute video coaching", "Access to member workshops"], true], ["Elite", 229, 183, ["Custom training and nutrition", "Two 1:1 sessions every week", "Unlimited plan changes", "Recovery and mobility sessions"], false]] %>
  <!-- block:start pricing -->
  <section class="mx-auto max-w-7xl px-5 py-20 text-center md:px-10 md:py-28" data-pricing>
    <h2 class="text-4xl font-semibold tracking-tight md:text-5xl">Choose <span class="font-serif font-normal italic">the plan</span> that fits</h2>
    <p class="mx-auto mt-4 max-w-md text-coal/70">Every plan includes the app, the community and a coach in your corner.</p>
    <label class="mt-8 inline-flex cursor-pointer items-center gap-3 text-sm font-medium uppercase">Monthly<span class="relative inline-flex"><input type="checkbox" data-annual class="peer sr-only"><span class="h-7 w-12 rounded-full bg-coal"></span><span class="absolute left-1 top-1 h-5 w-5 rounded-full bg-flame transition peer-checked:translate-x-5 peer-focus-visible:ring-2 peer-focus-visible:ring-flame peer-focus-visible:ring-offset-2"></span></span>Annual <span class="rounded-full bg-flame/10 px-2 py-0.5 text-xs text-flame-deep">−20%</span></label>
    <ul class="mx-auto mt-12 grid max-w-5xl gap-4 text-left md:grid-cols-3">
      <% plans.each do |(name, monthly, annual, perks, featured)| %>
        <li class="flex flex-col rounded-3xl p-3 <%= featured ? 'bg-coal text-white' : 'bg-mist' %>">
          <div class="flex items-center justify-between px-3 pt-4"><p><span class="text-3xl font-semibold">$<span data-price data-monthly="<%= monthly %>" data-annual="<%= annual %>"><%= monthly %></span></span> <span class="text-xs uppercase <%= featured ? 'text-white/50' : 'text-coal/50' %>">/month</span></p><span class="grid h-7 w-7 place-items-center rounded-full <%= featured ? 'bg-white text-coal' : 'bg-coal text-white' %>" aria-hidden="true"><i class="fa-solid fa-plus text-xs" aria-hidden="true"></i></span></div>
          <p class="mt-3 flex items-center gap-3 px-3 text-sm font-medium uppercase"><%= name %> plan<% if featured %><span class="rounded-full bg-white px-2 py-0.5 text-[10px] text-coal">Popular</span><% end %></p>
          <div class="mt-5 flex-1 rounded-2xl p-5 <%= featured ? 'bg-coal-soft' : 'bg-white' %>">
            <p class="text-sm font-medium">What's included</p>
            <ul class="mt-5 grid gap-2.5 text-sm <%= featured ? 'text-white/80' : 'text-coal/75' %>">
              <% perks.each do |perk| %><li class="flex gap-2"><i class="fa-solid fa-check mt-1 text-xs" aria-hidden="true"></i><%= perk %></li><% end %>
            </ul>
          </div>
          <a href="contact.html" class="mt-4 rounded-full py-3.5 text-center text-xs font-semibold uppercase tracking-wide transition <%= featured ? 'bg-flame text-white hover:bg-flame-deep' : 'bg-coal-soft text-white hover:bg-coal' %>">Get started</a>
        </li>
      <% end %>
    </ul>
    <p class="mt-6 text-sm text-coal/60" data-billing-note aria-live="polite">Billed monthly. Cancel anytime.</p>
  </section>
  <!-- block:end pricing -->

  <!-- block:start newsletter -->
  <section class="mx-auto max-w-7xl px-5 md:px-10">
    <div class="grid items-center gap-8 rounded-3xl bg-coal p-4 text-white md:grid-cols-[17rem_1fr] md:gap-10">
      <img src="https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?auto=format&fit=crop&w=600&h=640&q=75" alt="Hand gripping a dumbbell in a gym" class="aspect-[15/16] w-full rounded-2xl object-cover">
      <div class="pb-6 md:pb-0 md:pr-10">
        <p class="flex gap-2 text-sm"><span class="rounded-full border border-white/40 px-3 py-1">Subscribe</span><span class="rounded-full bg-white px-3 py-1 text-coal">Newsletter</span></p>
        <h2 class="mt-5 text-3xl font-semibold leading-tight tracking-tight md:text-5xl">Get fresh <span class="font-serif font-normal italic">workouts,</span> member <span class="font-serif font-normal italic">perks</span> and event invites</h2>
        <form class="mt-6 flex max-w-md items-center rounded-full bg-coal-soft p-1.5" data-newsletter novalidate>
          <label for="newsletter-email" class="sr-only">Email address</label>
          <input id="newsletter-email" name="email" type="email" required autocomplete="email" placeholder="Enter your email address" class="min-w-0 flex-1 bg-transparent px-4 text-sm placeholder:text-white/40 focus:outline-none">
          <button type="submit" class="grid h-10 w-10 place-items-center rounded-full bg-flame transition hover:bg-flame-deep" aria-label="Subscribe"><i class="fa-solid fa-paper-plane text-sm" aria-hidden="true"></i></button>
        </form>
        <p class="mt-3 text-sm text-flame" data-form-status role="status"></p>
      </div>
    </div>
  </section>
  <!-- block:end newsletter -->

  <!-- block:start cta -->
  <section class="mx-auto max-w-7xl px-5 md:px-10">
    <div class="mt-20 border-t border-coal/10 py-20 text-center md:py-24">
      <h2 class="mx-auto max-w-2xl text-4xl font-semibold tracking-tight md:text-5xl">Start whenever you're <span class="font-serif font-normal italic">ready,</span> from wherever you are <span aria-hidden="true">💪</span></h2>
      <p class="mx-auto mt-5 max-w-md text-coal/70">Two free weeks of unlimited strength, yoga and mobility classes. Cancel any time.</p>
      <a href="contact.html" class="mt-8 inline-block rounded-full bg-flame px-6 py-3.5 text-xs font-semibold uppercase tracking-wide text-white transition hover:bg-flame-deep">Claim two free weeks</a>
    </div>
  </section>
  <!-- block:end cta -->

  <!-- block:start footer -->
  <footer class="bg-mist">
    <div class="mx-auto max-w-7xl px-5 py-16 md:px-10">
      <div class="grid gap-10 border-b border-coal/10 pb-12 lg:grid-cols-[1.3fr_1fr]">
        <div>
          <p class="w-fit rounded-full bg-white px-3 py-1 text-xs"><i class="fa-solid fa-circle text-[6px] text-flame" aria-hidden="true"></i> Stay in touch</p>
          <p class="mt-5 text-3xl font-semibold leading-tight tracking-tight md:text-4xl">Your path to a stronger, healthier you <span class="font-serif font-normal italic">begins here.</span></p>
        </div>
        <div>
          <p class="font-medium">News, tips and class updates</p>
          <form class="mt-4 flex items-center gap-2" data-newsletter novalidate>
            <label for="footer-email" class="sr-only">Email</label>
            <input id="footer-email" name="email" type="email" required autocomplete="email" placeholder="Enter your email" class="min-w-0 flex-1 rounded-full border border-coal/15 bg-white px-5 py-3 text-sm focus:border-flame focus:outline-none">
            <button type="submit" class="rounded-full bg-flame px-5 py-3 text-xs font-semibold uppercase tracking-wide text-white transition hover:bg-flame-deep">Subscribe</button>
          </form>
          <p class="mt-2 text-xs text-coal/50">By subscribing you agree to our privacy policy.</p>
          <p class="mt-2 text-sm text-flame-deep" data-form-status role="status"></p>
        </div>
      </div>
      <div class="grid gap-10 py-12 sm:grid-cols-2 lg:grid-cols-[1.5fr_1fr_1fr_1fr]">
        <div>
          <a href="index.html" class="flex items-center gap-2 text-xl font-semibold"><span class="grid h-8 w-8 place-items-center rounded-lg bg-flame text-white"><i class="fa-solid fa-dumbbell text-xs" aria-hidden="true"></i></span>Corevia</a>
          <p class="mt-4 max-w-xs text-sm text-coal/60">Coaching, community and a plan that actually fits your week.</p>
          <p class="mt-5 flex gap-3"><% [["fa-facebook-f", "Facebook"], ["fa-instagram", "Instagram"], ["fa-youtube", "YouTube"], ["fa-twitter", "Twitter"]].each do |(icon, label)| %><a href="about.html" class="grid h-9 w-9 place-items-center rounded-full bg-flame text-sm text-white transition hover:bg-flame-deep" aria-label="<%= label %>"><i class="fa-brands <%= icon %>" aria-hidden="true"></i></a><% end %></p>
        </div>
        <div><h2 class="font-medium">Explore</h2><ul class="mt-4 grid gap-2 text-sm text-coal/60"><li><a href="index.html" class="hover:text-flame">Home</a></li><li><a href="pricing.html" class="hover:text-flame">Pricing</a></li><li><a href="services.html" class="hover:text-flame">Programs</a></li><li><a href="testimonials.html" class="hover:text-flame">Stories</a></li></ul></div>
        <div><h2 class="font-medium">About</h2><ul class="mt-4 grid gap-2 text-sm text-coal/60"><li><a href="about.html" class="hover:text-flame">Our story</a></li><li><a href="about.html" class="hover:text-flame">Coaches</a></li><li><a href="contact.html" class="hover:text-flame">Careers</a></li></ul></div>
        <div><h2 class="font-medium">Contact</h2><ul class="mt-4 grid gap-2 text-sm text-coal/60"><li>2150 Market St, Denver, CO</li><li><a href="mailto:hello@corevia.fit" class="hover:text-flame">hello@corevia.fit</a></li><li><a href="tel:+13035550148" class="hover:text-flame">(303) 555-0148</a></li></ul></div>
      </div>
      <p class="flex flex-wrap justify-between gap-4 border-t border-coal/10 pt-6 text-xs text-coal/50"><span>&copy; 2026 Corevia. All rights reserved.</span><a href="contact.html" class="hover:text-flame">Privacy policy</a><a href="contact.html" class="hover:text-flame">Terms of service</a></p>
    </div>
  </footer>
  <!-- block:end footer -->

  <script>
    const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
    const watchMotion = !reducedMotion && !navigator.webdriver && 'IntersectionObserver' in window;

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

    document.querySelectorAll('[data-video]').forEach((dialog) => {
      document.querySelectorAll('[data-video-open]').forEach((button) => button.addEventListener('click', () => dialog.showModal()));
      dialog.querySelector('[data-video-close]').addEventListener('click', () => dialog.close());
      dialog.addEventListener('click', (event) => { if (event.target === dialog) dialog.close(); });
    });

    document.querySelectorAll('[data-carousel], [data-rail]').forEach((root) => {
      const track = root.querySelector('[data-carousel-track], [data-rail-track]');
      const step = () => track.children[1].getBoundingClientRect().width + 20;
      const go = (dir) => {
        const max = track.scrollWidth - track.clientWidth - 4;
        if (dir > 0 && track.scrollLeft >= max) track.scrollTo({ left: 0, behavior: reducedMotion ? 'auto' : 'smooth' });
        else if (dir < 0 && track.scrollLeft <= 4) track.scrollTo({ left: track.scrollWidth, behavior: reducedMotion ? 'auto' : 'smooth' });
        else track.scrollBy({ left: dir * step(), behavior: reducedMotion ? 'auto' : 'smooth' });
      };
      root.querySelector('[data-carousel-prev], [data-rail-prev]').addEventListener('click', () => go(-1));
      root.querySelector('[data-carousel-next], [data-rail-next]').addEventListener('click', () => go(1));
    });

    document.querySelectorAll('[data-services]').forEach((root) => {
      const cards = [...root.querySelectorAll('[data-service]')];
      const set = (card) => cards.forEach((other) => other.setAttribute('aria-current', String(other === card)));
      cards.forEach((card) => { card.addEventListener('mouseenter', () => set(card)); card.addEventListener('focus', () => set(card)); });
    });

    document.querySelectorAll('[data-tracker]').forEach((root) => {
      const data = JSON.parse(root.querySelector('[data-routine-data]').textContent);
      const tabs = [...root.querySelectorAll('[data-routine]')];
      tabs.forEach((tab) => tab.addEventListener('click', () => {
        tabs.forEach((other) => other.setAttribute('aria-selected', String(other === tab)));
        const item = data[tab.dataset.routine];
        root.querySelector('[data-track-label]').textContent = item.text;
        root.querySelector('[data-track-score]').textContent = item.score;
        root.querySelector('[data-track-delta]').textContent = item.delta;
        const bar = root.querySelector('[data-track-bar]');
        bar.style.width = `${item.percent}%`;
        bar.parentElement.setAttribute('aria-valuenow', String(item.percent));
      }));
    });

    document.querySelectorAll('[data-pricing]').forEach((root) => {
      const toggle = root.querySelector('[data-annual]');
      toggle.addEventListener('change', () => {
        root.querySelectorAll('[data-price]').forEach((price) => { price.textContent = toggle.checked ? price.dataset.annual : price.dataset.monthly; });
        root.querySelector('[data-billing-note]').textContent = toggle.checked ? 'Billed yearly — you save 20%. Cancel anytime.' : 'Billed monthly. Cancel anytime.';
      });
    });

    document.querySelectorAll('[data-newsletter]').forEach((form) => {
      const status = form.parentElement.querySelector('[data-form-status]');
      form.addEventListener('submit', (event) => {
        event.preventDefault();
        const email = form.querySelector('[name="email"]');
        if (!email.value.trim() || !email.checkValidity()) { status.textContent = 'Please enter a valid email address.'; email.focus(); return; }
        status.textContent = "You're in! Look out for your first workout this week.";
        form.reset();
      });
    });

    if (watchMotion) {
      document.documentElement.classList.add('reveal-ready');
      const observer = new IntersectionObserver((entries) => entries.forEach((entry) => {
        if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); }
      }), { threshold: 0.15 });
      document.querySelectorAll('[data-reveal]').forEach((el) => observer.observe(el));
    }
  </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