Kindhire UI Template - Let's templates
Kindhire preview 1
Free
0 9

Kindhire

By Priya Shah

Kindhire is a warm, accessible business template for inclusive hiring and job platforms, with arch-shaped portrait cut-outs, a story carousel, a job matcher, a scroll timeline, ring charts and a chat-style FAQ.

Live Demo
kindhire-tailwind.html
<%# letstemplates: access=premium category=business %>
<!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>Kindhire | Tailwind CSS Business Template</title>
  <meta name="description" content="Kindhire is a warm, accessible Tailwind CSS business template for inclusive hiring and job platforms, with arch-shaped portrait cut-outs, a story carousel, a job matcher, a scroll timeline, ring charts and a chat-style FAQ.">
  <meta name="keywords" content="Kindhire, Tailwind CSS template, HTML website template, business template, inclusive hiring, accessible job board, disability employment, recruitment platform, remote jobs website, employer page">
  <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="Kindhire | Tailwind CSS Business Template">
  <meta property="og:description" content="A warm, accessible Tailwind CSS business template for inclusive hiring platforms, with arch portraits, a story carousel and a live job matcher.">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="Kindhire template preview">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="">
  <meta name="twitter:title" content="Kindhire | Tailwind CSS Business Template">
  <meta name="twitter:description" content="A warm, accessible Tailwind CSS business template for inclusive hiring platforms, with arch portraits, a story carousel and a live job matcher.">
  <meta name="twitter:image" content="">
  <meta name="twitter:image:alt" content="Kindhire 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=Fraunces:opsz,wght@9..144,700;9..144,800&family=Urbanist:wght@400;500;600;700&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: { paper: '#f4f4f2', ink: '#141414', royal: { DEFAULT: '#0b4ea2', dark: '#083a7a', soft: '#dfe9f7' }, coral: { DEFAULT: '#f4846a', soft: '#fde3dc' }, leaf: { DEFAULT: '#3aa52a', soft: '#dff1db' }, sun: '#ffc928' },
          fontFamily: { sans: ['Urbanist', 'sans-serif'], serif: ['Fraunces', '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; }
    .wiggle { animation: wiggle 5s ease-in-out infinite; transform-origin: center; }
    @keyframes wiggle { 50% { rotate: 6deg; } }
    .logos { animation: logos 34s linear infinite; }
    .logos:hover { animation-play-state: paused; }
    @keyframes logos { to { transform: translateX(-50%); } }
    .ring-fill { transition: stroke-dashoffset .7s ease; }
    .timeline-fill { transform-origin: top; }
    .story { transition: opacity .4s 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; }
      .wiggle, .logos { animation: none; }
      .ring-fill, .story { transition: none; }
      ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    }
  </style>
</head>
<body class="bg-paper font-sans text-ink antialiased">
  <% active_page = "index" %>
  <% nav = { "platform" => "Platform", "jobs" => "Jobs", "employers" => "For employers", "stories" => "Stories", "about" => "About", "contact" => "Contact" } %>
  <!-- block:start navbar -->
  <header class="relative z-40">
    <nav class="mx-auto grid max-w-7xl grid-cols-[1fr_auto_1fr] items-center gap-4 px-5 py-6 md:px-10 md:py-8" aria-label="Main">
      <button type="button" data-menu-toggle aria-controls="site-menu" aria-expanded="false" class="flex w-fit items-center gap-3 rounded-full py-2 pr-3 text-lg font-medium transition hover:text-royal"><i class="fa-solid fa-bars text-xl" aria-hidden="true"></i><span class="hidden sm:inline">Menu</span><span class="sr-only sm:hidden">Open menu</span></button>
      <a href="index.html" class="flex items-center gap-1.5 text-xl font-bold tracking-tight md:text-2xl" aria-label="Kindhire home">
        <svg class="h-8 w-9" viewBox="0 0 36 32" aria-hidden="true"><path d="M2 30 16 6l14 24Z" fill="#0b4ea2"/><path d="M14 30l9-15 11 15Z" fill="#0b4ea2" opacity=".75"/><path d="M8 4l1 2.4L11.5 7 9 7.6 8 10 7 7.6 4.5 7 7 6.4Z" fill="#f4846a"/></svg>
        <span><span class="text-royal">KIND</span><span class="text-coral">HIRE</span></span>
      </a>
      <a href="platform.html" class="justify-self-end rounded-full border-2 border-royal px-5 py-2.5 font-semibold text-royal transition hover:bg-royal hover:text-white md:px-8 md:py-3">Platform</a>
    </nav>
    <div id="site-menu" hidden class="fixed inset-0 z-50 overflow-y-auto bg-royal text-white">
      <div class="mx-auto flex min-h-full max-w-7xl flex-col px-5 py-6 md:px-10 md:py-8">
        <button type="button" data-menu-close class="flex w-fit items-center gap-3 rounded-full py-2 pr-3 text-lg font-medium hover:text-sun"><i class="fa-solid fa-xmark text-xl" aria-hidden="true"></i>Close</button>
        <div class="my-auto grid gap-12 py-12 lg:grid-cols-[1.4fr_1fr] lg:items-center">
          <ul class="grid gap-2">
            <% { "index" => "Home" }.merge(nav).each do |slug, label| %>
              <% active = active_page == slug %>
              <li><a href="<%= slug %>.html" <%= 'aria-current="page"'.html_safe if active %> class="font-serif text-5xl font-bold transition md:text-7xl <%= active ? 'text-sun underline decoration-coral decoration-4 underline-offset-8' : 'hover:text-sun' %>"><%= label %></a></li>
            <% end %>
          </ul>
          <div class="hidden rounded-[2rem] bg-white/10 p-8 lg:block">
            <p class="font-serif text-3xl font-bold">Need help signing up?</p>
            <p class="mt-3 text-lg text-white/80">Call us, text us or book a video call with sign language. We're here weekdays 8–20.</p>
            <a href="contact.html" class="mt-6 inline-flex rounded-full bg-sun px-6 py-3 font-semibold text-ink">Get in touch</a>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- block:end navbar -->

  <% arches = [["1507003211169-0a1dd7228f2d", "Smiling man in a white T-shirt", "Marco", "QA tester", "bg-royal", "halo", "lg:mt-0"], ["1580489944761-15a19d654956", "Smiling woman with her hair tied up", "Lina", "web designer", "bg-coral", "burst", "lg:mt-36"], ["1599566150163-29194dcaad36", "Young man with glasses and a beard", "Sam", "content moderator", "bg-leaf", "zigzag", "lg:mt-0"]] %>
  <!-- block:start hero -->
  <section class="mx-auto grid max-w-7xl items-center gap-12 px-5 pb-20 pt-6 md:px-10 lg:grid-cols-[1fr_1.15fr] lg:pb-28 lg:pt-12">
    <div>
      <h1 class="font-serif text-5xl font-extrabold leading-[1.02] tracking-tight md:text-7xl">Work that fits the way you live</h1>
      <p class="mt-6 max-w-md text-xl leading-snug md:text-2xl">Remote and flexible roles for people with every kind of disability, wherever they are.</p>
      <a href="contact.html" class="mt-9 inline-flex rounded-full bg-royal px-9 py-4 text-lg font-semibold text-white shadow-lg shadow-royal/25 transition hover:bg-royal-dark">Join Kindhire</a>
    </div>
    <div class="relative">
      <svg class="absolute -bottom-8 -left-24 hidden h-40 w-28 lg:block" viewBox="0 0 110 160" aria-hidden="true"><path d="M100 4C60 12 40 50 70 70c22 14 30-30 4-30C40 40 14 90 8 150m0 0-6-12m6 12 8-10" fill="none" stroke="#141414" stroke-width="2" stroke-linecap="round"/></svg>
      <ul class="grid grid-cols-3 gap-3 sm:gap-5">
        <% arches.each_with_index do |(photo, alt, name, role, color, doodle, offset), index| %>
          <li class="<%= offset %>" data-reveal style="--reveal-delay: <%= index * 120 %>ms">
            <% if index == 1 %><p class="mb-4 hidden text-center text-lg leading-snug lg:block"><%= name %> —<br><%= role %></p><% end %>
            <div class="relative aspect-[2/3] overflow-hidden rounded-full <%= color %>">
              <img src="https://images.unsplash.com/photo-<%= photo %>?auto=format&fit=crop&w=500&h=620&q=80" alt="<%= alt %>" class="absolute inset-x-0 bottom-0 h-[80%] w-full rounded-t-full object-cover object-top">
              <svg class="wiggle absolute left-1/2 top-[6%] h-[16%] w-[45%] -translate-x-1/2" viewBox="0 0 80 40" aria-hidden="true">
                <% if doodle == "halo" %><ellipse cx="40" cy="20" rx="34" ry="11" fill="none" stroke="#fff" stroke-width="3"/><ellipse cx="42" cy="18" rx="28" ry="8" fill="none" stroke="#fff" stroke-width="2"/>
                <% elsif doodle == "burst" %><path d="M8 34 16 10l8 18 8-24 8 22 10-18 4 26" fill="none" stroke="#fff" stroke-width="3.5" stroke-linejoin="round" stroke-linecap="round"/>
                <% else %><path d="M6 10c6-6 10 6 16 0s10 6 16 0 10 6 16 0 10 6 16 0M10 22c6-6 10 6 16 0s10 6 16 0 10 6 16 0M14 34c6-6 10 6 16 0s10 6 16 0 10 6 16 0" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"/><% end %>
              </svg>
            </div>
            <% unless index == 1 %><p class="mt-4 text-center text-sm leading-snug sm:text-lg"><%= name %> —<br><%= role %></p><% else %><p class="mt-4 text-center text-sm leading-snug sm:text-lg lg:hidden"><%= name %> —<br><%= role %></p><% end %>
          </li>
        <% end %>
      </ul>
    </div>
  </section>
  <!-- block:end hero -->

  <% stories = [["Elena Ruiz", "38, works from Lisbon, uses a wheelchair", "Moderating content is calm, focused work, and I can split my hours however my body needs. Two hours in the morning, two in the evening. My team checks in, never checks up.", "1573497019940-1c28c88b4f3e", "bg-royal"], ["Daniel Okafor", "29, works from Leeds, hard of hearing", "Every meeting has live captions and everything important is written down. For the first time I'm judged on my work, not on how fast I catch what people say.", "1500648767791-00dcc994a43e", "bg-coral"], ["Mei Tanaka", "34, works from Osaka, chronic fatigue", "Flexible deadlines changed everything. I design on good days and rest on hard ones, and nobody makes me explain myself.", "1573497019236-17f8177b81e8", "bg-leaf"]] %>
  <!-- block:start reviews -->
  <section class="mx-auto max-w-7xl px-5 py-20 md:px-10" data-carousel>
    <div class="text-center">
      <h2 class="font-serif text-4xl font-bold tracking-tight md:text-6xl">Real careers, real people</h2>
      <p class="relative mx-auto mt-3 w-fit text-xl md:text-2xl">Yours could be next
        <svg class="absolute -bottom-3 left-0 h-3 w-full" viewBox="0 0 200 12" preserveAspectRatio="none" aria-hidden="true"><path d="M2 8c50-6 120-6 196-3M20 11c40-4 90-4 130-2" fill="none" stroke="#f4846a" stroke-width="2.5" stroke-linecap="round"/></svg>
      </p>
    </div>
    <div class="relative mt-16">
      <button type="button" data-carousel-prev class="absolute left-0 top-1/2 z-10 hidden h-12 w-12 -translate-y-1/2 place-items-center rounded-full bg-royal text-white transition hover:bg-royal-dark md:grid" aria-label="Previous story"><i class="fa-solid fa-arrow-left" aria-hidden="true"></i></button>
      <button type="button" data-carousel-next class="absolute right-0 top-1/2 z-10 hidden h-12 w-12 -translate-y-1/2 place-items-center rounded-full bg-royal text-white transition hover:bg-royal-dark md:grid" aria-label="Next story"><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></button>
      <div class="mx-auto max-w-5xl md:px-20">
        <% stories.each_with_index do |(name, meta, quote, photo, color), index| %>
          <article data-slide <%= 'hidden' unless index.zero? %> class="story grid items-end gap-8 rounded-[3rem] bg-white p-6 pt-10 shadow-sm md:grid-cols-[16rem_1fr] md:gap-12 md:p-12" aria-roledescription="slide" aria-label="<%= index + 1 %> of <%= stories.size %>">
            <div class="relative mx-auto w-56 md:-mt-24 md:w-full">
              <span class="absolute inset-x-6 bottom-12 top-10 rounded-[1.5rem] <%= color %>" aria-hidden="true"></span>
              <img src="https://images.unsplash.com/photo-<%= photo %>?auto=format&fit=crop&w=500&h=600&q=80" alt="Portrait of <%= name %>" class="relative aspect-[5/6] w-full rounded-b-full object-cover">
              <svg class="wiggle absolute -left-4 bottom-10 h-16 w-16" viewBox="0 0 60 60" aria-hidden="true"><path d="M30 4l6 18 18-4-14 12 12 14-18-6-6 18-6-18-18 6 12-14L6 18l18 4Z" fill="none" stroke="#f4846a" stroke-width="3" stroke-linejoin="round"/></svg>
              <p class="mt-4 text-center font-bold"><%= name %></p>
            </div>
            <div>
              <p class="text-lg text-ink/70"><%= meta %></p>
              <blockquote class="relative mt-5 text-xl leading-relaxed md:text-2xl"><span class="absolute -left-10 top-0 hidden font-serif text-5xl text-royal md:block" aria-hidden="true">&laquo;</span><%= quote %><span class="font-serif text-3xl text-royal" aria-hidden="true"> &raquo;</span></blockquote>
              <a href="stories.html" class="mt-6 inline-flex items-center gap-2 font-semibold text-royal hover:underline">Read more stories <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
            </div>
          </article>
        <% end %>
      </div>
      <div class="mt-8 flex items-center justify-center gap-4">
        <button type="button" data-carousel-prev class="grid h-12 w-12 place-items-center rounded-full bg-royal text-white md:hidden" aria-label="Previous story"><i class="fa-solid fa-arrow-left" aria-hidden="true"></i></button>
        <div class="flex gap-2">
          <% stories.each_with_index do |story, index| %><button type="button" data-carousel-dot aria-label="Show story <%= index + 1 %>" aria-current="<%= index.zero? %>" class="h-3 w-3 rounded-full bg-ink/20 transition aria-[current=true]:w-8 aria-[current=true]:bg-royal"></button><% end %>
        </div>
        <button type="button" data-carousel-next class="grid h-12 w-12 place-items-center rounded-full bg-royal text-white md:hidden" aria-label="Next story"><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></button>
      </div>
    </div>
  </section>
  <!-- block:end reviews -->

  <% skills = [["design", "Design"], ["writing", "Writing"], ["support", "Customer support"], ["testing", "Software testing"], ["data", "Data entry"], ["moderation", "Moderation"]] %>
  <% needs = [["remote", "Fully remote", "fa-house-laptop"], ["flexible", "Flexible hours", "fa-clock"], ["captions", "Captioned meetings", "fa-closed-captioning"], ["reader", "Screen-reader friendly", "fa-universal-access"]] %>
  <% jobs = [["Junior UI designer", "Brightfield Studio", "design", "remote flexible reader", "$38–44K", "bg-coral-soft"], ["Support specialist", "Parcelpoint", "support", "remote captions flexible", "$32–36K", "bg-royal-soft"], ["QA tester", "Northgate Apps", "testing", "remote reader captions flexible", "$40–48K", "bg-leaf-soft"], ["Content moderator", "Openstream", "moderation", "remote flexible", "$30–34K", "bg-royal-soft"], ["Copywriter", "Hearthline", "writing", "remote flexible captions", "$36–42K", "bg-coral-soft"], ["Data assistant", "Clearpath Health", "data", "flexible reader", "$29–33K", "bg-leaf-soft"]] %>
  <!-- block:start demo -->
  <section id="matcher" class="bg-royal py-24 text-white" data-matcher>
    <div class="mx-auto max-w-7xl px-5 md:px-10">
      <div class="grid gap-12 lg:grid-cols-[1fr_1.3fr]">
        <div>
          <p class="font-semibold text-sun">Job matcher</p>
          <h2 class="mt-2 font-serif text-4xl font-bold leading-tight tracking-tight md:text-6xl">Tell us what works for you</h2>
          <p class="mt-5 max-w-md text-lg text-white/80">Pick your skills and the conditions you need. We only show roles that fit both.</p>
          <fieldset class="mt-10">
            <legend class="font-semibold">I'm good at</legend>
            <div class="mt-3 flex flex-wrap gap-2">
              <% skills.each_with_index do |(id, label), index| %>
                <button type="button" data-skill="<%= id %>" aria-pressed="<%= index < 2 %>" class="rounded-full border-2 border-white/30 px-4 py-2 font-medium transition hover:border-white aria-pressed:border-sun aria-pressed:bg-sun aria-pressed:text-ink"><%= label %></button>
              <% end %>
            </div>
          </fieldset>
          <fieldset class="mt-8">
            <legend class="font-semibold">I need</legend>
            <div class="mt-3 grid gap-2 sm:grid-cols-2">
              <% needs.each_with_index do |(id, label, icon), index| %>
                <label class="flex cursor-pointer items-center gap-3 rounded-2xl bg-white/10 px-4 py-3 transition hover:bg-white/15 has-[:checked]:bg-white has-[:checked]:text-royal">
                  <input type="checkbox" data-need="<%= id %>" class="h-5 w-5 accent-coral" <%= 'checked' if index.zero? %>>
                  <i class="fa-solid <%= icon %>" aria-hidden="true"></i><span class="font-medium"><%= label %></span>
                </label>
              <% end %>
            </div>
          </fieldset>
        </div>
        <div aria-live="polite">
          <p class="text-lg"><span class="font-serif text-3xl font-bold text-sun" data-match-count><%= jobs.size %></span> roles match right now</p>
          <ul class="mt-6 grid gap-3">
            <% jobs.each do |title, company, skill, tags, salary, tone| %>
              <li data-job data-skill="<%= skill %>" data-needs="<%= tags %>" class="flex flex-wrap items-center gap-4 rounded-3xl bg-white p-5 text-ink">
                <span class="grid h-12 w-12 place-items-center rounded-2xl <%= tone %> text-lg font-bold text-royal"><%= company[0] %></span>
                <span class="min-w-0 flex-1"><span class="block text-lg font-bold"><%= title %></span><span class="text-ink/60"><%= company %> · <%= salary %></span></span>
                <span class="flex gap-1.5 text-royal">
                  <% needs.each do |id, label, icon| %><% if tags.include?(id) %><i class="fa-solid <%= icon %>" title="<%= label %>" aria-label="<%= label %>"></i><% end %><% end %>
                </span>
              </li>
            <% end %>
          </ul>
          <p data-match-empty hidden class="mt-6 rounded-3xl border-2 border-dashed border-white/40 p-6 text-center text-lg">No exact match yet. <a href="contact.html" class="font-semibold underline">Tell us what you need</a> and we'll find it.</p>
          <a href="jobs.html" class="mt-6 inline-flex items-center gap-2 rounded-full bg-sun px-7 py-3.5 font-semibold text-ink transition hover:bg-white">See all jobs <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
        </div>
      </div>
    </div>
  </section>
  <!-- block:end demo -->

  <% steps = [["Sign up in your own way", "Online, by phone, by text or over a sign language video call.", "fa-hand"], ["Free skills check", "A relaxed chat with a career coach about what you enjoy and what you need.", "fa-comments"], ["Paid training", "Six weeks of online training, paid from day one, at your own pace.", "fa-graduation-cap"], ["Your first role", "We introduce you to an employer who has already set up your accommodations.", "fa-briefcase"], ["Ongoing support", "A coach checks in every month for your first year, and more if you want.", "fa-heart"]] %>
  <!-- block:start process -->
  <section class="mx-auto grid max-w-7xl gap-12 px-5 py-24 md:px-10 lg:grid-cols-[1fr_1.2fr]" data-timeline>
    <div class="lg:sticky lg:top-12 lg:self-start">
      <p class="font-semibold text-coral">How it works</p>
      <h2 class="mt-2 font-serif text-4xl font-bold leading-tight tracking-tight md:text-6xl">From hello to hired in about two months</h2>
      <a href="platform.html" class="mt-8 inline-flex items-center gap-2 rounded-full border-2 border-royal px-6 py-3 font-semibold text-royal transition hover:bg-royal hover:text-white">More about the platform <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
    </div>
    <ol class="relative grid gap-10 pl-16">
      <span class="absolute bottom-6 left-6 top-6 w-1 rounded-full bg-ink/10" aria-hidden="true"></span>
      <span data-timeline-fill class="timeline-fill absolute bottom-6 left-6 top-6 w-1 rounded-full bg-coral" aria-hidden="true"></span>
      <% steps.each_with_index do |(title, text, icon), index| %>
        <li class="relative" data-reveal>
          <span class="absolute -left-16 top-0 grid h-12 w-12 place-items-center rounded-full <%= %w[bg-royal bg-coral bg-leaf bg-sun bg-royal][index] %> <%= index == 3 ? 'text-ink' : 'text-white' %>"><i class="fa-solid <%= icon %>" aria-hidden="true"></i></span>
          <p class="text-sm font-semibold uppercase tracking-wider text-ink/50">Step <%= index + 1 %></p>
          <h3 class="mt-1 text-2xl font-bold"><%= title %></h3>
          <p class="mt-2 max-w-md text-lg text-ink/70"><%= text %></p>
        </li>
      <% end %>
    </ol>
  </section>
  <!-- block:end process -->

  <% rings = [[92, "still in work after a year", "#0b4ea2"], [78, "work fully from home", "#f4846a"], [64, "promoted within two years", "#3aa52a"]] %>
  <!-- block:start stats -->
  <section class="bg-white py-24" data-rings>
    <div class="mx-auto max-w-7xl px-5 md:px-10">
      <div class="flex flex-wrap items-end justify-between gap-6">
        <h2 class="max-w-xl font-serif text-4xl font-bold leading-tight tracking-tight md:text-5xl">4,600 people placed since 2019</h2>
        <p class="max-w-sm text-lg text-ink/70">Numbers from our yearly survey of everyone we've placed.</p>
      </div>
      <ul class="mt-14 grid gap-10 sm:grid-cols-3">
        <% rings.each do |value, label, color| %>
          <li class="text-center" data-reveal>
            <div class="relative mx-auto h-44 w-44">
              <svg class="h-full w-full -rotate-90" viewBox="0 0 120 120" aria-hidden="true"><circle cx="60" cy="60" r="52" fill="none" stroke="#f4f4f2" stroke-width="12"/><circle class="ring-fill" data-ring="<%= value %>" cx="60" cy="60" r="52" fill="none" stroke="<%= color %>" stroke-width="12" stroke-linecap="round" stroke-dasharray="326.73" stroke-dashoffset="<%= (326.73 * (1 - value / 100.0)).round(2) %>"/></svg>
              <p class="absolute inset-0 grid place-items-center font-serif text-5xl font-bold"><%= value %>%</p>
            </div>
            <p class="mx-auto mt-5 max-w-[14rem] text-lg"><%= label %></p>
          </li>
        <% end %>
      </ul>
    </div>
  </section>
  <!-- block:end stats -->

  <!-- block:start features -->
  <section class="mx-auto max-w-7xl px-5 py-24 md:px-10">
    <h2 class="max-w-2xl font-serif text-4xl font-bold leading-tight tracking-tight md:text-6xl">Built around access, not as an afterthought</h2>
    <div class="mt-12 grid gap-5 md:grid-cols-4 md:grid-rows-2">
      <div class="relative overflow-hidden rounded-[2.5rem] bg-royal p-8 text-white md:col-span-2 md:row-span-2">
        <p class="font-serif text-3xl font-bold md:max-w-[65%] md:text-4xl">Every employer passes an accessibility check</p>
        <p class="mt-4 max-w-sm text-lg text-white/80 md:max-w-[42%]">Before they can post a single job, our team reviews their tools, office and hiring process.</p>
        <img src="https://images.unsplash.com/photo-1590650153855-d9e808231d41?auto=format&fit=crop&w=800&h=600&q=75" alt="Woman standing in a bright, open office" class="mt-8 aspect-[4/3] w-full rounded-t-full object-cover md:absolute md:bottom-0 md:right-0 md:mt-0 md:w-[48%]">
      </div>
      <div class="rounded-[2.5rem] bg-coral-soft p-8 md:col-span-2"><i class="fa-solid fa-closed-captioning text-3xl text-coral" aria-hidden="true"></i><p class="mt-4 text-2xl font-bold">Captions and sign language on every call</p></div>
      <div class="rounded-[2.5rem] bg-leaf-soft p-8"><p class="font-serif text-5xl font-bold text-leaf">0€</p><p class="mt-2 text-lg font-semibold">for job seekers, always</p></div>
      <div class="rounded-[2.5rem] bg-sun p-8"><i class="fa-solid fa-laptop text-3xl" aria-hidden="true"></i><p class="mt-4 text-lg font-semibold">Free adapted equipment on loan</p></div>
    </div>
  </section>
  <!-- block:end features -->

  <% partners = [["fa-leaf", "Brightfield"], ["fa-box", "Parcelpoint"], ["fa-compass", "Northgate"], ["fa-water", "Openstream"], ["fa-fire", "Hearthline"], ["fa-heart-pulse", "Clearpath"], ["fa-mountain", "Highbank"]] %>
  <!-- block:start clients -->
  <section class="overflow-hidden border-y border-ink/10 py-10" aria-label="Employers hiring with Kindhire">
    <p class="text-center font-semibold text-ink/60">300+ inclusive employers hire through us</p>
    <ul class="logos mt-8 flex w-max items-center gap-16 pr-16">
      <% (partners + partners).each_with_index do |(icon, name), index| %>
        <li class="flex items-center gap-2 whitespace-nowrap text-2xl font-bold text-ink/50" <%= 'aria-hidden="true"'.html_safe if index >= partners.size %>><i class="fa-solid <%= icon %>" aria-hidden="true"></i><%= name %></li>
      <% end %>
    </ul>
  </section>
  <!-- block:end clients -->

  <% faqs = [["Does it cost anything?", "No. Kindhire is free for job seekers, forever. Employers pay us when they hire."], ["What if I can only work a few hours?", "Plenty of our roles start at 10 hours a week. Tell us your limit and we'll respect it."], ["Will my benefits be affected?", "Our advisers help you check how earnings affect any support you receive before you accept an offer."], ["Can someone help me fill in the forms?", "Yes. A coach can do it with you over the phone, by video or by text."]] %>
  <!-- block:start faq -->
  <section class="mx-auto grid max-w-7xl gap-12 px-5 py-24 md:px-10 lg:grid-cols-[1fr_1.3fr]" data-chat>
    <div>
      <h2 class="font-serif text-4xl font-bold leading-tight tracking-tight md:text-6xl">Ask us anything</h2>
      <p class="mt-4 text-lg text-ink/70">Tap a question and our team will answer.</p>
      <div class="mt-8 flex flex-wrap gap-2">
        <% faqs.each do |question, answer| %>
          <button type="button" data-chat-question data-answer="<%= answer %>" class="rounded-full border-2 border-royal/20 bg-white px-4 py-2.5 text-left font-medium transition hover:border-royal"><%= question %></button>
        <% end %>
      </div>
    </div>
    <div class="flex h-[28rem] flex-col rounded-[2.5rem] bg-white p-6 shadow-sm">
      <div class="flex items-center gap-3 border-b border-ink/10 pb-4">
        <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&w=96&h=96&q=70" alt="" class="h-11 w-11 rounded-full object-cover">
        <p><span class="block font-bold">Lina from Kindhire</span><span class="flex items-center gap-1.5 text-sm text-leaf"><span class="h-2 w-2 rounded-full bg-leaf"></span>Online now</span></p>
      </div>
      <ol data-chat-log class="flex flex-1 flex-col justify-end gap-3 overflow-y-auto pt-4" aria-live="polite">
        <li class="max-w-[85%] rounded-3xl rounded-bl-md bg-paper px-5 py-3">Hi! What would you like to know?</li>
      </ol>
    </div>
  </section>
  <!-- block:end faq -->

  <!-- block:start cta -->
  <section class="mx-auto max-w-7xl px-5 pb-24 md:px-10">
    <div class="grid overflow-hidden rounded-[3rem] bg-coral lg:grid-cols-2">
      <div class="p-8 md:p-14">
        <h2 class="font-serif text-4xl font-bold leading-tight tracking-tight md:text-5xl">Start this week</h2>
        <p class="mt-4 max-w-sm text-lg">Leave your email and a coach will call or text you, whichever you prefer.</p>
        <form data-contact-form data-error="Please add a valid email." data-success="Thanks! A coach will be in touch within two working days." class="mt-8" novalidate>
          <label for="cta-email" class="font-semibold">Email</label>
          <div class="mt-2 flex flex-col gap-3 sm:flex-row">
            <input id="cta-email" type="email" name="email" required autocomplete="email" placeholder="you@example.com" class="min-w-0 flex-1 rounded-full border-0 bg-white px-5 py-4 focus:outline-none focus:ring-4 focus:ring-royal">
            <button type="submit" class="rounded-full bg-ink px-7 py-4 font-semibold text-white transition hover:bg-royal">Get started</button>
          </div>
          <p data-form-status class="mt-3 font-semibold" role="status" aria-live="polite"></p>
        </form>
      </div>
      <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=900&h=700&q=75" alt="Team of colleagues working together at a long table" class="h-full min-h-[18rem] w-full object-cover lg:rounded-l-full">
    </div>
  </section>
  <!-- block:end cta -->

  <!-- block:start footer -->
  <footer class="bg-ink text-white">
    <div class="mx-auto grid max-w-7xl gap-10 px-5 py-16 sm:grid-cols-2 md:px-10 lg:grid-cols-[1.5fr_1fr_1fr_1fr]">
      <div>
        <a href="index.html" class="flex items-center gap-1.5 text-2xl font-bold" aria-label="Kindhire home"><svg class="h-8 w-9" viewBox="0 0 36 32" aria-hidden="true"><path d="M2 30 16 6l14 24Z" fill="#fff"/><path d="M14 30l9-15 11 15Z" fill="#fff" opacity=".7"/><path d="M8 4l1 2.4L11.5 7 9 7.6 8 10 7 7.6 4.5 7 7 6.4Z" fill="#f4846a"/></svg>KINDHIRE</a>
        <p class="mt-4 max-w-xs text-white/70">An inclusive hiring platform. This site meets WCAG 2.2 AA.</p>
      </div>
      <% [["Job seekers", [["jobs", "Find a job"], ["platform", "How it works"], ["stories", "Stories"]]], ["Employers", [["employers", "Hire with us"], ["employers", "Pricing"], ["contact", "Book a demo"]]], ["Kindhire", [["about", "About us"], ["contact", "Contact"], ["contact", "Accessibility help"]]]].each do |title, links| %>
        <div>
          <p class="font-bold"><%= title %></p>
          <ul class="mt-4 grid gap-2 text-white/70"><% links.each do |slug, label| %><li><a href="<%= slug %>.html" class="hover:text-sun"><%= label %></a></li><% end %></ul>
        </div>
      <% end %>
    </div>
    <p class="border-t border-white/10 px-5 py-6 text-center text-sm text-white/50">&copy; <span data-current-year>2026</span> Kindhire. Made with disabled designers and testers.</p>
  </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'));
      const close = menu.querySelector('[data-menu-close]');
      const set = (open) => { menu.hidden = !open; button.setAttribute('aria-expanded', String(open)); document.body.style.overflow = open ? 'hidden' : ''; (open ? close : button).focus(); };
      button.addEventListener('click', () => set(menu.hidden));
      close.addEventListener('click', () => set(false));
      document.addEventListener('keydown', (event) => { if (event.key === 'Escape' && !menu.hidden) set(false); });
    });

    document.querySelectorAll('[data-carousel]').forEach((root) => {
      const slides = [...root.querySelectorAll('[data-slide]')];
      const dots = [...root.querySelectorAll('[data-carousel-dot]')];
      let current = 0;
      const show = (index) => {
        current = (index + slides.length) % slides.length;
        slides.forEach((slide, i) => { slide.hidden = i !== current; });
        dots.forEach((dot, i) => dot.setAttribute('aria-current', String(i === current)));
      };
      root.querySelectorAll('[data-carousel-prev]').forEach((button) => button.addEventListener('click', () => show(current - 1)));
      root.querySelectorAll('[data-carousel-next]').forEach((button) => button.addEventListener('click', () => show(current + 1)));
      dots.forEach((dot, i) => dot.addEventListener('click', () => show(i)));
      root.addEventListener('keydown', (event) => { if (event.key === 'ArrowLeft') show(current - 1); if (event.key === 'ArrowRight') show(current + 1); });
    });

    document.querySelectorAll('[data-matcher]').forEach((root) => {
      const jobs = [...root.querySelectorAll('[data-job]')];
      const isOn = (el) => el.getAttribute('aria-pressed') === 'true' || el.selected === true || el.checked === true;
      const paint = () => {
        const skills = [...root.querySelectorAll('[data-skill]:not([data-job])')].filter(isOn).map((el) => el.dataset.skill);
        const needs = [...root.querySelectorAll('[data-need]')].filter(isOn).map((el) => el.dataset.need);
        let shown = 0;
        jobs.forEach((job) => {
          const match = (!skills.length || skills.includes(job.dataset.skill)) && needs.every((need) => job.dataset.needs.split(' ').includes(need));
          job.hidden = !match;
          if (match) shown += 1;
        });
        root.querySelector('[data-match-count]').textContent = shown;
        root.querySelector('[data-match-empty]').hidden = shown > 0;
      };
      root.querySelectorAll('[data-skill]:not([data-job])').forEach((chip) => chip.addEventListener('click', () => { if (chip.hasAttribute('aria-pressed')) chip.setAttribute('aria-pressed', String(chip.getAttribute('aria-pressed') !== 'true')); requestAnimationFrame(paint); }));
      root.addEventListener('change', paint);
      if (window.customElements) customElements.whenDefined('md-filter-chip').then(() => requestAnimationFrame(paint));
      paint();
    });

    document.querySelectorAll('[data-timeline]').forEach((root) => {
      const fill = root.querySelector('[data-timeline-fill]');
      if (!watchMotion) return;
      const update = () => {
        const box = root.getBoundingClientRect();
        fill.style.transform = `scaleY(${Math.min(1, Math.max(0, (innerHeight * 0.6 - box.top) / box.height))})`;
      };
      update();
      addEventListener('scroll', update, { passive: true });
    });

    document.querySelectorAll('[data-rings]').forEach((root) => {
      const rings = root.querySelectorAll('[data-ring]');
      if (!watchMotion) return;
      rings.forEach((ring) => { ring.style.strokeDashoffset = 326.73; });
      const observer = new IntersectionObserver((entries) => {
        if (!entries.some((entry) => entry.isIntersecting)) return;
        rings.forEach((ring) => { ring.style.strokeDashoffset = 326.73 * (1 - Number(ring.dataset.ring) / 100); });
        observer.disconnect();
      }, { threshold: 0.3 });
      observer.observe(root);
    });

    document.querySelectorAll('[data-chat]').forEach((root) => {
      const log = root.querySelector('[data-chat-log]');
      const add = (text, mine) => {
        const item = document.createElement('li');
        item.className = mine ? 'ml-auto max-w-[85%] rounded-3xl rounded-br-md bg-royal px-5 py-3 text-white' : 'max-w-[85%] rounded-3xl rounded-bl-md bg-paper px-5 py-3';
        item.textContent = text;
        log.append(item);
        log.scrollTop = log.scrollHeight;
      };
      root.querySelectorAll('[data-chat-question]').forEach((button) => button.addEventListener('click', () => {
        add(button.dataset.label || button.textContent.trim(), true);
        setTimeout(() => add(button.dataset.answer, false), reducedMotion ? 0 : 450);
      }));
    });

    document.querySelectorAll('[data-hover-list]').forEach((root) => {
      const image = root.querySelector('[data-hover-image]');
      root.querySelectorAll('[data-hover-row]').forEach((row) => {
        const show = () => { image.src = row.dataset.image; image.alt = row.dataset.alt; root.querySelectorAll('[data-hover-row]').forEach((other) => other.setAttribute('aria-current', String(other === row))); };
        row.addEventListener('mouseenter', show);
        row.addEventListener('focus', show);
        row.addEventListener('click', show);
      });
    });

    document.querySelectorAll('[data-job-board]').forEach((root) => {
      const list = root.querySelector('[data-board-list]');
      const items = [...list.children];
      const search = root.querySelector('[data-board-search]');
      const sort = root.querySelector('[data-board-sort]');
      const apply = () => {
        const query = String(search.value || '').trim().toLowerCase();
        const sorted = [...items].sort((a, b) => sort.value === 'salary' ? b.dataset.salary - a.dataset.salary : sort.value === 'hours' ? a.dataset.hours - b.dataset.hours : b.dataset.date - a.dataset.date);
        let shown = 0;
        sorted.forEach((item) => { const match = !query || item.textContent.toLowerCase().includes(query); item.hidden = !match; if (match) shown += 1; list.append(item); });
        root.querySelector('[data-board-count]').textContent = shown;
        root.querySelector('[data-board-empty]').hidden = shown > 0;
      };
      search.addEventListener('input', apply);
      sort.addEventListener('change', apply);
      const initial = new URLSearchParams(location.search).get('q');
      if (initial) search.value = initial;
      apply();
    });

    document.querySelectorAll('[data-calculator]').forEach((root) => {
      const money = (value) => `$${Math.round(value).toLocaleString('en-US')}`;
      const paint = () => {
        const hires = Number(root.querySelector('[data-hires]').value);
        const salary = Number(root.querySelector('[data-salary]').value);
        const fee = hires * salary * 0.08;
        const credit = hires * Math.min(salary * 0.25, 9600);
        root.querySelector('[data-hires-label]').textContent = hires;
        root.querySelector('[data-salary-label]').textContent = money(salary);
        root.querySelector('[data-fee]').textContent = money(fee);
        root.querySelector('[data-credit]').textContent = `−${money(credit)}`;
        root.querySelector('[data-net]').textContent = money(Math.max(0, fee - credit));
      };
      root.addEventListener('input', paint);
      paint();
    });

    document.querySelectorAll('[data-chat-form]').forEach((form) => {
      const log = form.querySelector('[data-chat-log]');
      const steps = [...form.querySelectorAll('[data-chat-step]')];
      const status = form.querySelector('[data-form-status]');
      let current = 0;
      const say = (text, mine) => {
        const bubble = document.createElement('li');
        bubble.className = mine ? 'ml-auto max-w-[85%] rounded-3xl rounded-br-md bg-royal px-5 py-3 text-white' : 'max-w-[85%] rounded-3xl rounded-bl-md bg-paper px-5 py-3';
        bubble.textContent = text;
        log.append(bubble);
        log.scrollTop = log.scrollHeight;
      };
      const show = (index) => steps.forEach((step, i) => { step.hidden = i !== index; });
      const field = (step) => step.querySelector('input, select, textarea, md-outlined-text-field, md-outlined-select');
      form.addEventListener('submit', (event) => {
        event.preventDefault();
        const input = field(steps[current]);
        if (!input.checkValidity() || !String(input.value || '').trim()) { status.textContent = form.dataset.error; input.focus(); return; }
        status.textContent = '';
        say(String(input.value), true);
        current += 1;
        if (current < steps.length) { say(steps[current].dataset.question, false); show(current); field(steps[current]).focus(); }
        else { say(form.dataset.success, false); show(-1); }
      });
      show(0);
    });

    document.querySelectorAll('[data-contact-form]').forEach((form) => {
      form.addEventListener('submit', (event) => {
        event.preventDefault();
        const status = form.querySelector('[data-form-status]');
        if (!form.checkValidity()) {
          status.textContent = form.dataset.error;
          form.querySelector(':invalid')?.focus();
          return;
        }
        status.textContent = form.dataset.success;
        form.reset();
      });
    });

    document.querySelectorAll('[data-current-year]').forEach((el) => { el.textContent = new Date().getFullYear(); });

    (() => {
      const items = document.querySelectorAll('[data-reveal]');
      if (!items.length || !watchMotion) 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 Business Templates