Page not found

<div class="flex min-h-screen flex-col">
  <header class="border-b border-neutral-200 px-6 py-5 text-lg font-semibold dark:border-neutral-800">acme</header>
  <main class="mx-auto grid w-full max-w-5xl flex-1 items-center gap-10 px-6 py-16 md:grid-cols-2">
    <div>
      <p class="mb-4 text-sm font-semibold text-neutral-500">404 — Page not found</p>
      <h1 class="text-4xl font-semibold leading-tight tracking-tight sm:text-5xl">A small detour.</h1>
      <p class="mt-5 max-w-md text-base leading-7 text-neutral-500">We couldn't find the page you're looking for. It may have moved, or the link may be out of date.</p>
      <div class="mt-8 flex flex-wrap gap-3">
        <%# Replace root_path with your application's home or dashboard route. %>
        <%= link_to "Back to home", root_path, target: "_top", class: button_classes(:primary) %>
        <a href="#help" class="<%= button_classes(:default) %>">Find some help</a>
      </div>
    </div>
    <div aria-hidden="true" class="grid aspect-square place-items-center rounded-3xl border border-dashed border-neutral-300 bg-neutral-50 text-8xl font-semibold tracking-tighter text-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-700">404</div>
    <section id="help" class="md:col-span-2">
      <%= card title: "Let's get you back on track" do %>
        <details class="text-sm"><summary class="cursor-pointer font-medium">What can I try?</summary><p class="mt-3 leading-6 text-neutral-500">Check the address for a typo, return home, or ask the person who shared this link for an updated one.</p></details>
      <% end %>
    </section>
  </main>
</div>