ClintchizandClaude Opus 5
247f360ae7
It was written up in 4.7 but never made the work order, which is exactly how it stayed dangerous in the first place. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
64 lines
3.9 KiB
Plaintext
64 lines
3.9 KiB
Plaintext
// Home page (route: /). SSR-first: the view is server-rendered, then components
|
|
// (.wrn files under app/components) hydrate in the browser. Styled with Tailwind.
|
|
page Home {
|
|
seo {
|
|
title = "Home"
|
|
description = "web — built with WrNexus, an SSR-first Bun framework."
|
|
}
|
|
|
|
view {
|
|
<main class="relative min-h-screen overflow-hidden bg-white text-slate-900 dark:bg-[#0b0f1e] dark:text-slate-100">
|
|
<div aria-hidden="true" class="pointer-events-none absolute inset-x-0 -top-40 mx-auto h-96 max-w-2xl rounded-full bg-indigo-500/20 blur-3xl"></div>
|
|
|
|
<div class="relative mx-auto flex min-h-screen max-w-3xl flex-col px-6">
|
|
<header class="flex items-center justify-between py-6">
|
|
<span class="flex items-center gap-2.5 font-semibold tracking-tight">
|
|
<span class="grid h-7 w-7 place-items-center rounded-md bg-gradient-to-br from-indigo-500 to-violet-600 text-sm font-bold text-white">W</span>
|
|
web
|
|
</span>
|
|
<button data-wire-theme-toggle class="rounded-md border border-slate-200 px-3 py-1.5 text-sm text-slate-600 transition hover:border-slate-300 hover:text-slate-900 dark:border-white/10 dark:text-slate-400 dark:hover:border-white/20 dark:hover:text-white">
|
|
Toggle theme
|
|
</button>
|
|
</header>
|
|
|
|
<section class="flex flex-1 flex-col items-center justify-center py-16 text-center">
|
|
<p class="font-mono text-xs uppercase tracking-[0.2em] text-indigo-500 dark:text-indigo-400">SSR-first · Bun-native</p>
|
|
|
|
<h1 class="mt-5 text-4xl font-bold leading-[1.1] tracking-tight sm:text-6xl">
|
|
Server-rendered.<br />
|
|
Instantly <span class="bg-gradient-to-r from-indigo-500 to-violet-500 bg-clip-text text-transparent">interactive</span>.
|
|
</h1>
|
|
|
|
<p class="mt-5 max-w-md text-base leading-relaxed text-slate-600 dark:text-slate-400">
|
|
web runs on WrNexus — write <code class="rounded bg-slate-100 px-1.5 py-0.5 font-mono text-[0.85em] text-slate-800 dark:bg-white/10 dark:text-slate-200">.wrn</code> components, ship no client boilerplate, and let the server do the work.
|
|
</p>
|
|
|
|
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
|
|
<a href="/about" class="rounded-lg bg-slate-900 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-slate-700 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200">Get started</a>
|
|
<a href="/api/hello" class="rounded-lg border border-slate-200 px-5 py-2.5 text-sm font-medium text-slate-700 transition hover:border-slate-300 dark:border-white/10 dark:text-slate-300 dark:hover:border-white/20">View API</a>
|
|
</div>
|
|
|
|
<div class="mt-14 w-full max-w-md rounded-2xl border border-slate-200 bg-white p-6 text-left shadow-sm dark:border-white/10 dark:bg-white/5">
|
|
<div class="flex items-center gap-2 font-mono text-xs text-slate-400">
|
|
<span class="h-2 w-2 rounded-full bg-emerald-400"></span>
|
|
live · hydrated on the server
|
|
</div>
|
|
<div class="mt-4 flex items-center justify-between gap-4">
|
|
<div data-component="counter" start="0" label="Clicks"></div>
|
|
<span class="max-w-[10rem] text-right text-xs leading-snug text-slate-500">This button works. You wrote zero client JavaScript.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mt-10 font-mono text-xs text-slate-400 dark:text-slate-600">
|
|
edit <span class="text-slate-600 dark:text-slate-400">app/pages/index.wrn</span> to make it yours
|
|
</p>
|
|
</section>
|
|
|
|
<footer class="border-t border-slate-100 py-6 text-center text-xs text-slate-400 dark:border-white/5 dark:text-slate-600">
|
|
Built with <a href="https://www.npmjs.com/package/@wrnexus/cli" class="text-slate-600 underline-offset-2 hover:underline dark:text-slate-400">WrNexus</a>
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
}
|
|
}
|