One platform.
Every site you run.

:root {
  --accent: oklch(0.68 0.22 295);
  --font-display: "Space Grotesk", sans-serif;
}

.btn-accent {
  background: var(--accent);
  color: white;
}

<!-- 404 -->
<div class="grid min-h-[60vh] place-items-center text-center">
  <p class="text-[46px] font-bold">404</p>
  <h1 class="text-xl">Not here</h1>
</div>

<!-- 500 -->
<div class="grid min-h-[60vh] place-items-center text-center">
  <p class="text-[46px] font-bold">500</p>
  <h1 class="text-xl">Something broke</h1>
</div>

<.component component_name="site-hero" />

<section class="mx-auto max-w-[1100px] px-6 py-12">
  <h2 class="text-2xl font-semibold">{@page.title}</h2>
  <p class="mt-2 text-zinc-500">Pages, layouts and components live in the database.</p>
</section>

<article class="mx-auto max-w-[760px] px-6 py-12">
  <h1 class="text-3xl font-semibold">{@page.title}</h1>
  <p class="mt-4 text-zinc-600">We build open-source tools for Elixir and Phoenix.</p>
</article>

<div class="flex flex-col gap-1.5">
  <label for={@id} class="text-sm font-medium">{@label}</label>
  <textarea id={@id} name={@name} rows="5" class="rounded-lg border px-3 py-2">{@value}</textarea>
  <p :if={@hint} class="flex items-center gap-1 text-xs text-zinc-500">
    <.component component_name="chelekom-icon" name="hero-information-circle" />
    {@hint}
  </p>
</div>

<div class="flex min-h-dvh flex-col">
  <.component component_name="site-header" site="mishka-tools" />
  <main class="mx-auto w-full max-w-[1100px] flex-1 px-6 py-10">{@inner_content}</main>
  <.component component_name="site-footer" site="mishka-tools" />
</div>

<div class="grid min-h-dvh place-items-center bg-zinc-50 p-6">
  <main class="w-full max-w-sm">{@inner_content}</main>
</div>

<section id="site-hero" class="px-6 py-20 text-center">
  <h1 class="text-5xl font-bold tracking-tight">{@title}</h1>
  <p class="mx-auto mt-4 max-w-xl text-lg text-zinc-500">{@subtitle}</p>
  <.link navigate="/blog" class="mt-8 inline-flex items-center gap-2 rounded-full bg-indigo-600 px-6 py-3 text-white">
    Read the blog
    <.component component_name="chelekom-icon" name="hero-arrow-right" />
  </.link>
</section>

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.rise {
  animation: rise 250ms ease-out;
}

export default {
  mounted() {
    this.el.addEventListener("click", () => {
      navigator.clipboard.writeText(this.el.dataset.copy)
    })
  }
}

export default {
  mounted() {
    this.onScroll = () =>
      this.el.classList.toggle("is-scrolled", window.scrollY > 24)
    window.addEventListener("scroll", this.onScroll)
  },
  destroyed() {
    window.removeEventListener("scroll", this.onScroll)
  }
}