Your calm window into the Atmosphere.
morgen.blue
rss
atproto
feat(ui): welcome + login redesign with Window primitive and view transitions
Replaces the Laravel starter welcome and the generic login form with the
first real Morgenblau product surface.
- / : full-viewport sunrise Window with brand mark, intro copy,
and an Enter affordance. Pressing Enter morphs the Window
to the login shape via the native CSS View Transitions API.
- /login : golden-ratio split — left form panel (handle input,
Caveat hint, OAuth submit), right sunrise Window. Submit
spinner persists through the OAuth redirect handoff.
New primitives and infra:
- components/window.tsx — Window with asymmetric radii (4rem / 0.5rem),
sunrise variant, view-transition-name="window"
- lib/view-transition.ts — visitWithTransition() wrapping router.visit
in startViewTransition with reduced-motion
and feature-detection fallbacks
- layouts/auth/auth-login-layout.tsx — golden-ratio layout for /login
Design-language scaffolding:
- app.css: heading defaults moved to base layer (text-2xl/font-semibold/
tracking-tight for h1/h2); body weight 300 → 400; bg-sunrise utility;
::selection in atmosphere-blue with relative color syntax for the text;
view-transition rules for window, brand-logo, and login-form
- button.tsx: cursor-pointer, ghost-on-gradient variant, stronger
disabled state (opacity + saturate)
- input.tsx, input-group.tsx: L0-correct bg (gray-50 / gray-700),
rounded-xl, no shadow, h-10, focus = border-ring (no outer outline)
- morgenblau-designer skill: four weights (300/400/500/600), tracking-tight
on all headings, split focus rule (outline for buttons, border-color for
inputs), and a note that heading defaults live in CSS now
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+319
-429
+28
-20
.claude/skills/morgenblau-designer/SKILL.md
+28
-20
.claude/skills/morgenblau-designer/SKILL.md
···
57
57
58
58
**Exception — level 0 (base) inverts the inversion.** On the darkest surface, there is no darker step available in light mode (and no lighter step in dark mode), so the rule flips: on L0, controls go **lighter** than the surface, not darker. On L0 the input **bg** matches the L2 bg, but the **border goes a step darker than L2's** (gray-200 in light mode) so the edge still reads against the base; dark mode reuses the L2 border (gray-600) unchanged because it already stands out against gray-950.
59
59
60
-
**Focus state — a 1 px outline on the perceived element.** Morgenblau draws its own outline so the indicator lands on the element the user actually perceives — not always the natively focusable one. Pattern: `outline-none` base, then `focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring` on controls, and `focus-within:…` on compound containers (e.g. `InputGroup`, where the native input sits inside a wrapper with an addon — the outline belongs on the wrapper, not the inner input). `outline-solid` is explicit — Tailwind v4 has no bare `outline` utility, so the style has to be set by name. The result looks native: thin, solid, 2 px offset, atmosphere-blue. No box-shadow ring, no border-color swap, no halo. Error/invalid states (`aria-invalid`) keep their own softer ring so focus and validation stay distinguishable.
60
+
**Focus state — different rule for buttons and inputs.** Morgenblau draws its own focus indicator on the element the user actually perceives — not always the natively focusable one. The shape of the indicator depends on the control:
61
+
62
+
- **Buttons and clickable controls — 1 px outline, offset 2 px, atmosphere-blue.** Pattern: `outline-none` base, then `focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-ring`. `outline-solid` is explicit — Tailwind v4 has no bare `outline` utility. The result looks native: thin, solid, sits *outside* the control. Use this on `<Button>`, links, icon buttons, anything you click.
63
+
- **Inputs and compound input wrappers — border color swap, no outline, no ring.** Pattern: `border-input` base, then `focus-visible:border-ring` on a bare input, or `has-[[data-slot=input-group-control]:focus-visible]:border-ring` on a compound wrapper. The border itself becomes atmosphere-blue. No outer halo, no box-shadow, no offset outline — the field's edge already exists, so the focus indicator just colors it. Stays inside the field's footprint and reads as a single calm shape.
64
+
65
+
Why split: an outline on a control with a visible border looks like two parallel rings (border + outline), which feels noisy. Buttons (typically borderless or border-transparent) need a separate shape; inputs already have one.
66
+
67
+
Error / invalid states (`aria-invalid`) swap the border to `border-destructive` on inputs, and the existing destructive ring style on buttons — so focus and validation stay distinguishable.
61
68
62
69
**Two button variants only: primary (soft blue) and secondary (gray).** There is no solid / dark / black variant. When a button needs to feel more critical, the answer is **copy and placement**, not a louder color. A confirmation word, a more prominent position, a Caveat hint — but never a third button variant.
63
70
···
98
105
99
106
Scale is **calm, not dramatic**. h1 is not 40 px. Hierarchy is built more with weight than size.
100
107
101
-
**Three weights, ever.** No bold, no semibold. Hierarchy is carried by the delta between weights plus size plus tracking, not by heavy strokes.
108
+
**Four weights, ever.** No bold (700+). Hierarchy is carried by the delta between weights plus size plus tracking, not by heavy strokes.
102
109
103
-
| Weight | Role |
104
-
| ------------- | ------------------------------------------ |
105
-
| 300 — light | paragraphs, body text, hints, descriptions |
106
-
| 400 — regular | labels, metadata, UI chrome text |
107
-
| 500 — medium | headings (h1–h6), card titles |
110
+
| Weight | Role |
111
+
| --------------- | -------------------------------------------------------------------------------------------- |
112
+
| 300 — light | secondary / muted text — hints, captions, timestamps, fine print |
113
+
| 400 — regular | body, paragraphs, labels, metadata, UI chrome text — the default voice |
114
+
| 500 — medium | small / mid-size headings (h3–h6), card titles, long-form titles |
115
+
| 600 — semibold | page-level headings (h1 / h2) on auth and entry surfaces — used sparingly to anchor a screen |
108
116
109
-
These defaults are wired into base styles (`h1–h6 → font-medium`, `p → font-light`), so plain tags pick them up automatically. Only override when the semantic tag doesn't match the role (e.g. a `<span>` acting as a heading).
117
+
**These defaults are wired into base styles in `app.css` and apply automatically by tag.** Plain `<h1>`, `<h2>`, … pick up size + weight + tracking without any className. Plain `<p>` picks up `font-normal`. Override only when the semantic tag doesn't match the role (e.g. a `<span>` acting as a heading) or when stepping a paragraph down to light for muted/secondary copy. **Don't repeat the defaults in className** — if you find yourself writing `<h1 className="text-2xl font-semibold tracking-tight">`, delete those classes.
110
118
111
-
| Token | Size | Weight | Tracking | Use |
112
-
| ----------- | --------- | ------ | ------------------ | --------------------------- |
113
-
| `text-xs` | 0.75 rem | 300 | normal | tiny meta (timestamps) |
114
-
| `text-sm` | 0.875 rem | 300 | normal | secondary text, hints |
115
-
| `text-sm` | 0.875 rem | 400 | normal | labels |
116
-
| `text-base` | 1 rem | 300 | normal | body |
117
-
| `text-lg` | 1.125 rem | 500 | `tracking-tight` | small headings, card titles |
118
-
| `text-xl` | 1.25 rem | 500 | `tracking-tight` | section headings (h3) |
119
-
| `text-2xl` | 1.5 rem | 500 | `tracking-tighter` | page headings (h1 / h2) |
119
+
| Token | Size | Weight | Tracking | Use |
120
+
| ----------- | --------- | ------ | ---------------- | ----------------------------------------- |
121
+
| `text-xs` | 0.75 rem | 300 | normal | tiny meta (timestamps, fine print) |
122
+
| `text-sm` | 0.875 rem | 300 | normal | secondary text, hints |
123
+
| `text-sm` | 0.875 rem | 400 | normal | labels, inline UI text |
124
+
| `text-base` | 1 rem | 400 | normal | body |
125
+
| `text-lg` | 1.125 rem | 500 | `tracking-tight` | small headings, card titles |
126
+
| `text-xl` | 1.25 rem | 500 | `tracking-tight` | section headings (h3) |
127
+
| `text-2xl` | 1.5 rem | 600 | `tracking-tight` | page headings (h1 / h2) — `font-semibold` |
120
128
121
129
**Rules:**
122
130
123
-
- h1 caps at 1.5 rem (about 1.5× body). Whispered, not shouted.
124
-
- **Tracking tightens as size grows** — body is normal, mid-size headings are `tracking-tight` (-0.025em), large headings are `tracking-tighter` (-0.05em). Tight tracking at scale is a craft signature; it reads as intentional.
125
-
- In long-form text (article reader), titles and paragraphs differ mainly by **weight**, not size. Titles go medium (500), paragraphs stay light (300) — the delta reads as hierarchy without size jumps.
131
+
- h1 caps at 1.5 rem (about 1.5× body). Whispered, not shouted — but at this size, semibold (600) is what carries the page; medium would feel too soft against the calm scale.
132
+
- **Headings always use `tracking-tight` (-0.025em)** — body stays at normal tracking. Tightening once, gently, is a craft signature; tightening more (`tracking-tighter`) reads as anxious, not calm. Don't escalate.
133
+
- In long-form text (article reader), titles and paragraphs differ mainly by **weight**, not size. Titles go medium (500), paragraphs stay regular (400) — the delta reads as hierarchy without size jumps. Long-form titles stay at medium; only page headings step up to semibold. Drop a paragraph to light (300) only when it is genuinely *secondary* (caption under a figure, fine print under a form).
126
134
- Caveat renders visually smaller than Geist at the same nominal size — bump it up one step when placed beside Geist body. Caveat's usable weights are 400–700; let it pick the nearest when used inside `<p>` (it reads as regular either way).
127
135
- **Caveat is always secondary color.** Never primary. Never atmosphere-blue. Never a category color.
128
136
+63
-4
resources/css/app.css
+63
-4
resources/css/app.css
···
166
166
@apply font-sans;
167
167
}
168
168
h1,
169
-
h2,
170
-
h3,
169
+
h2 {
170
+
@apply text-2xl font-semibold tracking-tight;
171
+
}
172
+
h3 {
173
+
@apply text-xl font-medium tracking-tight;
174
+
}
171
175
h4,
172
176
h5,
173
177
h6 {
174
-
@apply font-medium;
178
+
@apply text-lg font-medium tracking-tight;
175
179
}
176
180
p {
177
-
@apply font-light;
181
+
@apply font-normal;
182
+
}
183
+
::selection {
184
+
background-color: var(--color-atmosphere-blue);
185
+
color: oklch(
186
+
from var(--color-atmosphere-blue) calc(l * 2) calc(c * 0.25) h
187
+
);
188
+
}
189
+
}
190
+
191
+
@utility bg-sunrise {
192
+
background: linear-gradient(
193
+
to bottom,
194
+
var(--color-atmosphere-blue) 0%,
195
+
var(--color-atmosphere-blue) 25%,
196
+
var(--color-sand-brown) 100%
197
+
);
198
+
}
199
+
200
+
::view-transition-group(window),
201
+
::view-transition-old(window),
202
+
::view-transition-new(window),
203
+
::view-transition-group(brand-logo),
204
+
::view-transition-old(brand-logo),
205
+
::view-transition-new(brand-logo) {
206
+
animation-duration: 420ms;
207
+
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
208
+
}
209
+
210
+
::view-transition-new(login-form) {
211
+
animation: morgenblau-fade-in 200ms ease-out 220ms both;
212
+
}
213
+
::view-transition-old(login-form) {
214
+
animation: morgenblau-fade-out 140ms ease-out both;
215
+
}
216
+
@keyframes morgenblau-fade-in {
217
+
from {
218
+
opacity: 0;
219
+
transform: translateY(4px);
220
+
}
221
+
to {
222
+
opacity: 1;
223
+
transform: none;
224
+
}
225
+
}
226
+
@keyframes morgenblau-fade-out {
227
+
to {
228
+
opacity: 0;
229
+
}
230
+
}
231
+
232
+
@media (prefers-reduced-motion: reduce) {
233
+
::view-transition-group(*),
234
+
::view-transition-old(*),
235
+
::view-transition-new(*) {
236
+
animation: none !important;
178
237
}
179
238
}
+3
resources/js/app.tsx
+3
resources/js/app.tsx
···
3
3
import { TooltipProvider } from '@/components/ui/tooltip';
4
4
import { initializeTheme } from '@/hooks/use-appearance';
5
5
import AppLayout from '@/layouts/app-layout';
6
+
import AuthLoginLayout from '@/layouts/auth/auth-login-layout';
6
7
import AuthLayout from '@/layouts/auth-layout';
7
8
import SettingsLayout from '@/layouts/settings/layout';
8
9
···
14
15
switch (true) {
15
16
case name === 'welcome':
16
17
return null;
18
+
case name === 'auth/login':
19
+
return AuthLoginLayout;
17
20
case name.startsWith('auth/'):
18
21
return AuthLayout;
19
22
case name.startsWith('settings/'):
+1
-1
resources/js/components/ui/input-group.tsx
+1
-1
resources/js/components/ui/input-group.tsx
···
14
14
data-slot="input-group"
15
15
role="group"
16
16
className={cn(
17
-
"group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
17
+
"group/input-group relative flex h-10 w-full min-w-0 items-center rounded-xl border border-input bg-gray-50 transition-colors has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-gray-700 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
18
18
className
19
19
)}
20
20
{...props}
+1
-1
resources/js/components/ui/input.tsx
+1
-1
resources/js/components/ui/input.tsx
···
9
9
type={type}
10
10
data-slot="input"
11
11
className={cn(
12
-
"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
12
+
"h-10 w-full min-w-0 rounded-xl border border-input bg-gray-50 px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive md:text-sm dark:bg-gray-700 dark:aria-invalid:border-destructive/50",
13
13
className
14
14
)}
15
15
{...props}
+35
resources/js/components/window.tsx
+35
resources/js/components/window.tsx
···
1
+
import type { ReactNode } from 'react';
2
+
import { cn } from '@/lib/utils';
3
+
4
+
type WindowVariant = 'plain' | 'sunrise';
5
+
6
+
type WindowProps = {
7
+
children?: ReactNode;
8
+
variant?: WindowVariant;
9
+
className?: string;
10
+
};
11
+
12
+
const VARIANT_STYLES: Record<WindowVariant, string> = {
13
+
plain: 'bg-gray-50 dark:bg-gray-900',
14
+
sunrise: 'bg-sunrise shadow-[inset_0_0_0_1px_rgba(255,255,255,0.4)]',
15
+
};
16
+
17
+
export function Window({
18
+
children,
19
+
variant = 'plain',
20
+
className,
21
+
}: WindowProps) {
22
+
return (
23
+
<div
24
+
data-slot="window"
25
+
style={{ viewTransitionName: 'window' }}
26
+
className={cn(
27
+
'overflow-hidden rounded-tl-[4rem] rounded-tr-[4rem] rounded-br-[0.5rem] rounded-bl-[0.5rem]',
28
+
VARIANT_STYLES[variant],
29
+
className,
30
+
)}
31
+
>
32
+
{children}
33
+
</div>
34
+
);
35
+
}
+22
resources/js/layouts/auth/auth-login-layout.tsx
+22
resources/js/layouts/auth/auth-login-layout.tsx
···
1
+
import type { ReactNode } from 'react';
2
+
import AppLogoIcon from '@/components/app-logo-icon';
3
+
import { Window } from '@/components/window';
4
+
5
+
export default function AuthLoginLayout({ children }: { children: ReactNode }) {
6
+
return (
7
+
<div className="flex min-h-svh gap-6 bg-background p-6">
8
+
<section className="flex flex-[1.618] items-center">
9
+
<div className="w-full max-w-md pl-6 lg:pl-12">{children}</div>
10
+
</section>
11
+
<Window
12
+
variant="sunrise"
13
+
className="flex flex-1 items-center justify-center text-white"
14
+
>
15
+
<AppLogoIcon
16
+
className="size-16"
17
+
style={{ viewTransitionName: 'brand-logo' }}
18
+
/>
19
+
</Window>
20
+
</div>
21
+
);
22
+
}
+24
resources/js/lib/view-transition.ts
+24
resources/js/lib/view-transition.ts
···
1
+
import { router } from '@inertiajs/react';
2
+
3
+
export function visitWithTransition(href: string) {
4
+
const prefersReduced =
5
+
typeof window !== 'undefined' &&
6
+
window.matchMedia('(prefers-reduced-motion: reduce)').matches;
7
+
8
+
if (
9
+
typeof document === 'undefined' ||
10
+
!document.startViewTransition ||
11
+
prefersReduced
12
+
) {
13
+
router.visit(href);
14
+
15
+
return;
16
+
}
17
+
18
+
document.startViewTransition(
19
+
() =>
20
+
new Promise<void>((resolve) => {
21
+
router.visit(href, { onFinish: () => resolve() });
22
+
}),
23
+
);
24
+
}
+82
-30
resources/js/pages/auth/login.tsx
+82
-30
resources/js/pages/auth/login.tsx
···
1
+
import { Loading03Icon, Login03Icon } from '@hugeicons/core-free-icons';
2
+
import { HugeiconsIcon } from '@hugeicons/react';
1
3
import { Form, Head } from '@inertiajs/react';
4
+
import { useState } from 'react';
5
+
import { store } from '@/actions/App/Http/Controllers/Auth/AuthenticatedSessionController';
2
6
import InputError from '@/components/input-error';
3
7
import { Button } from '@/components/ui/button';
4
-
import { Input } from '@/components/ui/input';
8
+
import {
9
+
InputGroup,
10
+
InputGroupAddon,
11
+
InputGroupInput,
12
+
} from '@/components/ui/input-group';
5
13
import { Label } from '@/components/ui/label';
6
-
import AuthLayout from '@/layouts/auth-layout';
7
14
8
15
export default function Login() {
16
+
const [handle, setHandle] = useState('');
17
+
const [pending, setPending] = useState(false);
18
+
9
19
return (
10
-
<AuthLayout
11
-
title="Sign in with Bluesky"
12
-
description="Enter your handle to continue"
13
-
>
14
-
<Head title="Log in" />
20
+
<div style={{ viewTransitionName: 'login-form' }} className="space-y-8">
21
+
<Head title="Sign in" />
15
22
16
-
<Form action="/login" method="post" className="space-y-6">
17
-
{({ processing, errors }) => (
23
+
<header className="space-y-1">
24
+
<h1>Discover. Consume. Create.</h1>
25
+
<p className="text-sm text-balance text-muted-foreground">
26
+
A calmer way to explore the web. Powered by RSS and the AT
27
+
Protocol.
28
+
</p>
29
+
</header>
30
+
31
+
<Form
32
+
{...store.form()}
33
+
onBefore={() => setPending(true)}
34
+
onError={() => setPending(false)}
35
+
className="space-y-3"
36
+
>
37
+
{({ errors }) => (
18
38
<>
19
-
<div className="grid gap-2">
20
-
<Label htmlFor="handle">Handle</Label>
21
-
<Input
22
-
id="handle"
23
-
type="text"
24
-
name="handle"
25
-
autoComplete="username"
26
-
autoFocus
27
-
placeholder="alice.bsky.social"
28
-
inputMode="email"
29
-
spellCheck={false}
30
-
/>
39
+
<div className="space-y-2">
40
+
<Label htmlFor="handle">
41
+
Enter with your Atmosphere Account
42
+
</Label>
43
+
<div className="flex items-center gap-2">
44
+
<InputGroup className="flex-1">
45
+
<InputGroupAddon align="inline-start">
46
+
@
47
+
</InputGroupAddon>
48
+
<InputGroupInput
49
+
id="handle"
50
+
name="handle"
51
+
type="text"
52
+
autoComplete="username"
53
+
autoFocus
54
+
placeholder="alice.bsky.social"
55
+
inputMode="email"
56
+
spellCheck={false}
57
+
value={handle}
58
+
onChange={(e) =>
59
+
setHandle(e.target.value)
60
+
}
61
+
aria-invalid={
62
+
errors.handle ? true : undefined
63
+
}
64
+
/>
65
+
</InputGroup>
66
+
<Button
67
+
type="submit"
68
+
size="icon"
69
+
disabled={pending || !handle.trim()}
70
+
aria-label="Continue"
71
+
data-test="login-submit"
72
+
>
73
+
{pending ? (
74
+
<HugeiconsIcon
75
+
icon={Loading03Icon}
76
+
className="motion-safe:animate-spin"
77
+
/>
78
+
) : (
79
+
<HugeiconsIcon icon={Login03Icon} />
80
+
)}
81
+
</Button>
82
+
</div>
31
83
<InputError message={errors.handle} />
32
84
</div>
33
85
34
-
<Button
35
-
type="submit"
36
-
disabled={processing}
37
-
className="w-full"
38
-
data-test="login-submit"
39
-
>
40
-
Continue
41
-
</Button>
86
+
<div className="space-y-1 pt-2 font-handwritten text-base leading-snug text-muted-foreground">
87
+
<p>New here?</p>
88
+
<p>
89
+
An Atmosphere account is your identity (or user
90
+
name) across Bluesky, Tangled, Leaflet, Grain
91
+
and other AT Protocol apps.
92
+
</p>
93
+
</div>
42
94
</>
43
95
)}
44
96
</Form>
45
-
</AuthLayout>
97
+
</div>
46
98
);
47
99
}
+57
-372
resources/js/pages/welcome.tsx
+57
-372
resources/js/pages/welcome.tsx
···
1
-
import { Head, Link, usePage } from '@inertiajs/react';
2
-
import { dashboard } from '@/routes';
1
+
import { Head, usePage } from '@inertiajs/react';
2
+
import { useEffect } from 'react';
3
+
import AppLogoIcon from '@/components/app-logo-icon';
4
+
import { Button } from '@/components/ui/button';
5
+
import { Window } from '@/components/window';
6
+
import { visitWithTransition } from '@/lib/view-transition';
7
+
import { dashboard, login } from '@/routes';
3
8
4
9
export default function Welcome() {
5
10
const { auth } = usePage().props;
11
+
const target = auth.user ? dashboard().url : login().url;
6
12
7
-
return (
8
-
<>
9
-
<Head title="Welcome">
10
-
<link rel="preconnect" href="https://fonts.bunny.net" />
11
-
<link
12
-
href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600"
13
-
rel="stylesheet"
14
-
/>
15
-
</Head>
16
-
<div className="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]">
17
-
<header className="mb-6 w-full max-w-[335px] text-sm not-has-[nav]:hidden lg:max-w-4xl">
18
-
<nav className="flex items-center justify-end gap-4">
19
-
{auth.user ? (
20
-
<Link
21
-
href={dashboard()}
22
-
className="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
23
-
>
24
-
Dashboard
25
-
</Link>
26
-
) : (
27
-
<Link
28
-
href="/login"
29
-
className="inline-block rounded-sm border border-transparent px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#19140035] dark:text-[#EDEDEC] dark:hover:border-[#3E3E3A]"
30
-
>
31
-
Log in
32
-
</Link>
33
-
)}
34
-
</nav>
35
-
</header>
36
-
<div className="flex w-full items-center justify-center opacity-100 transition-opacity duration-750 lg:grow starting:opacity-0">
37
-
<main className="flex w-full max-w-[335px] flex-col-reverse lg:max-w-4xl lg:flex-row">
38
-
<div className="flex-1 rounded-br-lg rounded-bl-lg bg-white p-6 pb-12 text-[13px] leading-[20px] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:rounded-tl-lg lg:rounded-br-none lg:p-20 dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]">
39
-
<h1 className="mb-1 font-medium">
40
-
Let's get started
41
-
</h1>
42
-
<p className="mb-2 text-[#706f6c] dark:text-[#A1A09A]">
43
-
Laravel has an incredibly rich ecosystem.
44
-
<br />
45
-
We suggest starting with the following.
46
-
</p>
47
-
<ul className="mb-4 flex flex-col lg:mb-6">
48
-
<li className="relative flex items-center gap-4 py-2 before:absolute before:top-1/2 before:bottom-0 before:left-[0.4rem] before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]">
49
-
<span className="relative bg-white py-1 dark:bg-[#161615]">
50
-
<span className="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[#e3e3e0] bg-[#FDFDFC] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] dark:border-[#3E3E3A] dark:bg-[#161615]">
51
-
<span className="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]" />
52
-
</span>
53
-
</span>
54
-
<span>
55
-
Read the
56
-
<a
57
-
href="https://laravel.com/docs"
58
-
target="_blank"
59
-
className="ml-1 inline-flex items-center space-x-1 font-medium text-[#f53003] underline underline-offset-4 dark:text-[#FF4433]"
60
-
>
61
-
<span>Documentation</span>
62
-
<svg
63
-
width={10}
64
-
height={11}
65
-
viewBox="0 0 10 11"
66
-
fill="none"
67
-
xmlns="http://www.w3.org/2000/svg"
68
-
className="h-2.5 w-2.5"
69
-
>
70
-
<path
71
-
d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001"
72
-
stroke="currentColor"
73
-
strokeLinecap="square"
74
-
/>
75
-
</svg>
76
-
</a>
77
-
</span>
78
-
</li>
79
-
<li className="relative flex items-center gap-4 py-2 before:absolute before:top-0 before:bottom-1/2 before:left-[0.4rem] before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]">
80
-
<span className="relative bg-white py-1 dark:bg-[#161615]">
81
-
<span className="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[#e3e3e0] bg-[#FDFDFC] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] dark:border-[#3E3E3A] dark:bg-[#161615]">
82
-
<span className="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]" />
83
-
</span>
84
-
</span>
85
-
<span>
86
-
Watch video tutorials at
87
-
<a
88
-
href="https://laracasts.com"
89
-
target="_blank"
90
-
className="ml-1 inline-flex items-center space-x-1 font-medium text-[#f53003] underline underline-offset-4 dark:text-[#FF4433]"
91
-
>
92
-
<span>Laracasts</span>
93
-
<svg
94
-
width={10}
95
-
height={11}
96
-
viewBox="0 0 10 11"
97
-
fill="none"
98
-
xmlns="http://www.w3.org/2000/svg"
99
-
className="h-2.5 w-2.5"
100
-
>
101
-
<path
102
-
d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001"
103
-
stroke="currentColor"
104
-
strokeLinecap="square"
105
-
/>
106
-
</svg>
107
-
</a>
108
-
</span>
109
-
</li>
110
-
</ul>
111
-
<ul className="flex gap-3 text-sm leading-normal">
112
-
<li>
113
-
<a
114
-
href="https://cloud.laravel.com"
115
-
target="_blank"
116
-
className="inline-block rounded-sm border border-black bg-[#1b1b18] px-5 py-1.5 text-sm leading-normal text-white hover:border-black hover:bg-black dark:border-[#eeeeec] dark:bg-[#eeeeec] dark:text-[#1C1C1A] dark:hover:border-white dark:hover:bg-white"
117
-
>
118
-
Deploy now
119
-
</a>
120
-
</li>
121
-
</ul>
122
-
</div>
123
-
<div className="relative -mb-px aspect-[335/364] w-full shrink-0 overflow-hidden rounded-t-lg bg-[#fff2f2] lg:mb-0 lg:-ml-px lg:aspect-auto lg:w-[438px] lg:rounded-t-none lg:rounded-r-lg dark:bg-[#1D0002]">
124
-
{/* Laravel Logo */}
125
-
<svg
126
-
className="w-full max-w-none translate-y-0 text-[#F53003] opacity-100 transition-all duration-750 dark:text-[#F61500] starting:opacity-0 motion-safe:starting:translate-y-6"
127
-
viewBox="0 0 438 104"
128
-
fill="none"
129
-
xmlns="http://www.w3.org/2000/svg"
130
-
>
131
-
<path
132
-
d="M17.2036 -3H0V102.197H49.5189V86.7187H17.2036V-3Z"
133
-
fill="currentColor"
134
-
/>
135
-
<path
136
-
d="M110.256 41.6337C108.061 38.1275 104.945 35.3731 100.905 33.3681C96.8667 31.3647 92.8016 30.3618 88.7131 30.3618C83.4247 30.3618 78.5885 31.3389 74.201 33.2923C69.8111 35.2456 66.0474 37.928 62.9059 41.3333C59.7643 44.7401 57.3198 48.6726 55.5754 53.1293C53.8287 57.589 52.9572 62.274 52.9572 67.1813C52.9572 72.1925 53.8287 76.8995 55.5754 81.3069C57.3191 85.7173 59.7636 89.6241 62.9059 93.0293C66.0474 96.4361 69.8119 99.1155 74.201 101.069C78.5885 103.022 83.4247 103.999 88.7131 103.999C92.8016 103.999 96.8667 102.997 100.905 100.994C104.945 98.9911 108.061 96.2359 110.256 92.7282V102.195H126.563V32.1642H110.256V41.6337ZM108.76 75.7472C107.762 78.4531 106.366 80.8078 104.572 82.8112C102.776 84.8161 100.606 86.4183 98.0637 87.6206C95.5202 88.823 92.7004 89.4238 89.6103 89.4238C86.5178 89.4238 83.7252 88.823 81.2324 87.6206C78.7388 86.4183 76.5949 84.8161 74.7998 82.8112C73.004 80.8078 71.6319 78.4531 70.6856 75.7472C69.7356 73.0421 69.2644 70.1868 69.2644 67.1821C69.2644 64.1758 69.7356 61.3205 70.6856 58.6154C71.6319 55.9102 73.004 53.5571 74.7998 51.5522C76.5949 49.5495 78.738 47.9451 81.2324 46.7427C83.7252 45.5404 86.5178 44.9396 89.6103 44.9396C92.7012 44.9396 95.5202 45.5404 98.0637 46.7427C100.606 47.9451 102.776 49.5487 104.572 51.5522C106.367 53.5571 107.762 55.9102 108.76 58.6154C109.756 61.3205 110.256 64.1758 110.256 67.1821C110.256 70.1868 109.756 73.0421 108.76 75.7472Z"
137
-
fill="currentColor"
138
-
/>
139
-
<path
140
-
d="M242.805 41.6337C240.611 38.1275 237.494 35.3731 233.455 33.3681C229.416 31.3647 225.351 30.3618 221.262 30.3618C215.974 30.3618 211.138 31.3389 206.75 33.2923C202.36 35.2456 198.597 37.928 195.455 41.3333C192.314 44.7401 189.869 48.6726 188.125 53.1293C186.378 57.589 185.507 62.274 185.507 67.1813C185.507 72.1925 186.378 76.8995 188.125 81.3069C189.868 85.7173 192.313 89.6241 195.455 93.0293C198.597 96.4361 202.361 99.1155 206.75 101.069C211.138 103.022 215.974 103.999 221.262 103.999C225.351 103.999 229.416 102.997 233.455 100.994C237.494 98.9911 240.611 96.2359 242.805 92.7282V102.195H259.112V32.1642H242.805V41.6337ZM241.31 75.7472C240.312 78.4531 238.916 80.8078 237.122 82.8112C235.326 84.8161 233.156 86.4183 230.614 87.6206C228.07 88.823 225.251 89.4238 222.16 89.4238C219.068 89.4238 216.275 88.823 213.782 87.6206C211.289 86.4183 209.145 84.8161 207.35 82.8112C205.554 80.8078 204.182 78.4531 203.236 75.7472C202.286 73.0421 201.814 70.1868 201.814 67.1821C201.814 64.1758 202.286 61.3205 203.236 58.6154C204.182 55.9102 205.554 53.5571 207.35 51.5522C209.145 49.5495 211.288 47.9451 213.782 46.7427C216.275 45.5404 219.068 44.9396 222.16 44.9396C225.251 44.9396 228.07 45.5404 230.614 46.7427C233.156 47.9451 235.326 49.5487 237.122 51.5522C238.917 53.5571 240.312 55.9102 241.31 58.6154C242.306 61.3205 242.806 64.1758 242.806 67.1821C242.805 70.1868 242.305 73.0421 241.31 75.7472Z"
141
-
fill="currentColor"
142
-
/>
143
-
<path
144
-
d="M438 -3H421.694V102.197H438V-3Z"
145
-
fill="currentColor"
146
-
/>
147
-
<path
148
-
d="M139.43 102.197H155.735V48.2834H183.712V32.1665H139.43V102.197Z"
149
-
fill="currentColor"
150
-
/>
151
-
<path
152
-
d="M324.49 32.1665L303.995 85.794L283.498 32.1665H266.983L293.748 102.197H314.242L341.006 32.1665H324.49Z"
153
-
fill="currentColor"
154
-
/>
155
-
<path
156
-
d="M376.571 30.3656C356.603 30.3656 340.797 46.8497 340.797 67.1828C340.797 89.6597 356.094 104 378.661 104C391.29 104 399.354 99.1488 409.206 88.5848L398.189 80.0226C398.183 80.031 389.874 90.9895 377.468 90.9895C363.048 90.9895 356.977 79.3111 356.977 73.269H411.075C413.917 50.1328 398.775 30.3656 376.571 30.3656ZM357.02 61.0967C357.145 59.7487 359.023 43.3761 376.442 43.3761C393.861 43.3761 395.978 59.7464 396.099 61.0967H357.02Z"
157
-
fill="currentColor"
158
-
/>
159
-
</svg>
13
+
useEffect(() => {
14
+
const handler = (event: KeyboardEvent) => {
15
+
if (event.key !== 'Enter') {
16
+
return;
17
+
}
160
18
161
-
{/* 13 */}
162
-
<svg
163
-
className="relative -mt-[6.6rem] -ml-8 w-[438px] max-w-none [--stroke-color:#1B1B18] lg:ml-0 dark:[--stroke-color:#FF750F]"
164
-
viewBox="0 0 440 392"
165
-
fill="none"
166
-
xmlns="http://www.w3.org/2000/svg"
167
-
>
168
-
<g className="text-[#1B1B18] opacity-100 mix-blend-darken transition-all delay-300 duration-750 dark:text-black dark:mix-blend-normal starting:opacity-0">
169
-
<mask
170
-
id="path-1-mask"
171
-
maskUnits="userSpaceOnUse"
172
-
x="-0.328613"
173
-
y="103"
174
-
width="338"
175
-
height="299"
176
-
fill="black"
177
-
>
178
-
<rect
179
-
fill="white"
180
-
x="-0.328613"
181
-
y="103"
182
-
width="338"
183
-
height="299"
184
-
/>
185
-
<path d="M234.936 400.8C204.136 400.8 178.936 392.4 159.336 375.6C140.136 358.8 130.536 337 130.536 310.2H200.736C200.736 318.2 203.736 324.8 209.736 330C215.736 335.2 223.736 337.8 233.736 337.8C243.336 337.8 251.136 335 257.136 329.4C263.536 323.8 266.736 316.6 266.736 307.8C266.736 299.8 263.936 293.2 258.336 288C252.736 282.8 245.536 280.2 236.736 280.2H199.536V218.4H236.736C243.536 218.4 249.336 216 254.136 211.2C258.936 206.4 261.336 200.4 261.336 193.2C261.336 184.8 258.736 178.2 253.536 173.4C248.336 168.6 241.736 166.2 233.736 166.2C226.536 166.2 220.336 168.4 215.136 172.8C210.336 177.2 207.936 182.8 207.936 189.6H141.336C141.336 164.8 150.136 144.6 167.736 129C185.336 113 207.936 105 235.536 105C263.136 105 285.536 112.2 302.736 126.6C320.336 141 329.136 160 329.136 183.6C329.136 200.8 324.536 214.8 315.336 225.6C306.136 236 294.336 243.2 279.936 247.2C297.136 252 310.736 260.2 320.736 271.8C331.136 283.4 336.336 298 336.336 315.6C336.336 340.4 326.936 360.8 308.136 376.8C289.336 392.8 264.936 400.8 234.936 400.8Z" />
186
-
<path d="M26.8714 167.6H1.67139V105.2H94.6714V400.2H26.8714V167.6Z" />
187
-
</mask>
188
-
<path
189
-
d="M234.936 400.8C204.136 400.8 178.936 392.4 159.336 375.6C140.136 358.8 130.536 337 130.536 310.2H200.736C200.736 318.2 203.736 324.8 209.736 330C215.736 335.2 223.736 337.8 233.736 337.8C243.336 337.8 251.136 335 257.136 329.4C263.536 323.8 266.736 316.6 266.736 307.8C266.736 299.8 263.936 293.2 258.336 288C252.736 282.8 245.536 280.2 236.736 280.2H199.536V218.4H236.736C243.536 218.4 249.336 216 254.136 211.2C258.936 206.4 261.336 200.4 261.336 193.2C261.336 184.8 258.736 178.2 253.536 173.4C248.336 168.6 241.736 166.2 233.736 166.2C226.536 166.2 220.336 168.4 215.136 172.8C210.336 177.2 207.936 182.8 207.936 189.6H141.336C141.336 164.8 150.136 144.6 167.736 129C185.336 113 207.936 105 235.536 105C263.136 105 285.536 112.2 302.736 126.6C320.336 141 329.136 160 329.136 183.6C329.136 200.8 324.536 214.8 315.336 225.6C306.136 236 294.336 243.2 279.936 247.2C297.136 252 310.736 260.2 320.736 271.8C331.136 283.4 336.336 298 336.336 315.6C336.336 340.4 326.936 360.8 308.136 376.8C289.336 392.8 264.936 400.8 234.936 400.8Z"
190
-
fill="currentColor"
191
-
/>
192
-
<path
193
-
d="M26.8714 167.6H1.67139V105.2H94.6714V400.2H26.8714V167.6Z"
194
-
fill="currentColor"
195
-
/>
196
-
<path
197
-
d="M234.936 400.8C204.136 400.8 178.936 392.4 159.336 375.6C140.136 358.8 130.536 337 130.536 310.2H200.736C200.736 318.2 203.736 324.8 209.736 330C215.736 335.2 223.736 337.8 233.736 337.8C243.336 337.8 251.136 335 257.136 329.4C263.536 323.8 266.736 316.6 266.736 307.8C266.736 299.8 263.936 293.2 258.336 288C252.736 282.8 245.536 280.2 236.736 280.2H199.536V218.4H236.736C243.536 218.4 249.336 216 254.136 211.2C258.936 206.4 261.336 200.4 261.336 193.2C261.336 184.8 258.736 178.2 253.536 173.4C248.336 168.6 241.736 166.2 233.736 166.2C226.536 166.2 220.336 168.4 215.136 172.8C210.336 177.2 207.936 182.8 207.936 189.6H141.336C141.336 164.8 150.136 144.6 167.736 129C185.336 113 207.936 105 235.536 105C263.136 105 285.536 112.2 302.736 126.6C320.336 141 329.136 160 329.136 183.6C329.136 200.8 324.536 214.8 315.336 225.6C306.136 236 294.336 243.2 279.936 247.2C297.136 252 310.736 260.2 320.736 271.8C331.136 283.4 336.336 298 336.336 315.6C336.336 340.4 326.936 360.8 308.136 376.8C289.336 392.8 264.936 400.8 234.936 400.8Z"
198
-
stroke="var(--stroke-color)"
199
-
strokeWidth="2.4"
200
-
mask="url(#path-1-mask)"
201
-
/>
202
-
<path
203
-
d="M26.8714 167.6H1.67139V105.2H94.6714V400.2H26.8714V167.6Z"
204
-
stroke="var(--stroke-color)"
205
-
strokeWidth="2.4"
206
-
mask="url(#path-1-mask)"
207
-
/>
208
-
</g>
19
+
const target = event.target as HTMLElement | null;
209
20
210
-
<g className="text-[#F3BEC7] opacity-100 transition-all delay-400 duration-750 dark:text-[#4B0600] starting:opacity-0 motion-safe:starting:-translate-x-[26px]">
211
-
<mask
212
-
id="path-2-mask"
213
-
maskUnits="userSpaceOnUse"
214
-
x="25.3357"
215
-
y="103"
216
-
width="338"
217
-
height="299"
218
-
fill="black"
219
-
>
220
-
<rect
221
-
fill="white"
222
-
x="25.3357"
223
-
y="103"
224
-
width="338"
225
-
height="299"
226
-
/>
227
-
<path d="M260.6 400.8C229.8 400.8 204.6 392.4 185 375.6C165.8 358.8 156.2 337 156.2 310.2H226.4C226.4 318.2 229.4 324.8 235.4 330C241.4 335.2 249.4 337.8 259.4 337.8C269 337.8 276.8 335 282.8 329.4C289.2 323.8 292.4 316.6 292.4 307.8C292.4 299.8 289.6 293.2 284 288C278.4 282.8 271.2 280.2 262.4 280.2H225.2V218.4H262.4C269.2 218.4 275 216 279.8 211.2C284.6 206.4 287 200.4 287 193.2C287 184.8 284.4 178.2 279.2 173.4C274 168.6 267.4 166.2 259.4 166.2C252.2 166.2 246 168.4 240.8 172.8C236 177.2 233.6 182.8 233.6 189.6H167C167 164.8 175.8 144.6 193.4 129C211 113 233.6 105 261.2 105C288.8 105 311.2 112.2 328.4 126.6C346 141 354.8 160 354.8 183.6C354.8 200.8 350.2 214.8 341 225.6C331.8 236 320 243.2 305.6 247.2C322.8 252 336.4 260.2 346.4 271.8C356.8 283.4 362 298 362 315.6C362 340.4 352.6 360.8 333.8 376.8C315 392.8 290.6 400.8 260.6 400.8Z" />
228
-
<path d="M52.5357 167.6H27.3357V105.2H120.336V400.2H52.5357V167.6Z" />
229
-
</mask>
230
-
<path
231
-
d="M260.6 400.8C229.8 400.8 204.6 392.4 185 375.6C165.8 358.8 156.2 337 156.2 310.2H226.4C226.4 318.2 229.4 324.8 235.4 330C241.4 335.2 249.4 337.8 259.4 337.8C269 337.8 276.8 335 282.8 329.4C289.2 323.8 292.4 316.6 292.4 307.8C292.4 299.8 289.6 293.2 284 288C278.4 282.8 271.2 280.2 262.4 280.2H225.2V218.4H262.4C269.2 218.4 275 216 279.8 211.2C284.6 206.4 287 200.4 287 193.2C287 184.8 284.4 178.2 279.2 173.4C274 168.6 267.4 166.2 259.4 166.2C252.2 166.2 246 168.4 240.8 172.8C236 177.2 233.6 182.8 233.6 189.6H167C167 164.8 175.8 144.6 193.4 129C211 113 233.6 105 261.2 105C288.8 105 311.2 112.2 328.4 126.6C346 141 354.8 160 354.8 183.6C354.8 200.8 350.2 214.8 341 225.6C331.8 236 320 243.2 305.6 247.2C322.8 252 336.4 260.2 346.4 271.8C356.8 283.4 362 298 362 315.6C362 340.4 352.6 360.8 333.8 376.8C315 392.8 290.6 400.8 260.6 400.8Z"
232
-
fill="currentColor"
233
-
/>
234
-
<path
235
-
d="M52.5357 167.6H27.3357V105.2H120.336V400.2H52.5357V167.6Z"
236
-
fill="currentColor"
237
-
/>
238
-
<path
239
-
d="M260.6 400.8C229.8 400.8 204.6 392.4 185 375.6C165.8 358.8 156.2 337 156.2 310.2H226.4C226.4 318.2 229.4 324.8 235.4 330C241.4 335.2 249.4 337.8 259.4 337.8C269 337.8 276.8 335 282.8 329.4C289.2 323.8 292.4 316.6 292.4 307.8C292.4 299.8 289.6 293.2 284 288C278.4 282.8 271.2 280.2 262.4 280.2H225.2V218.4H262.4C269.2 218.4 275 216 279.8 211.2C284.6 206.4 287 200.4 287 193.2C287 184.8 284.4 178.2 279.2 173.4C274 168.6 267.4 166.2 259.4 166.2C252.2 166.2 246 168.4 240.8 172.8C236 177.2 233.6 182.8 233.6 189.6H167C167 164.8 175.8 144.6 193.4 129C211 113 233.6 105 261.2 105C288.8 105 311.2 112.2 328.4 126.6C346 141 354.8 160 354.8 183.6C354.8 200.8 350.2 214.8 341 225.6C331.8 236 320 243.2 305.6 247.2C322.8 252 336.4 260.2 346.4 271.8C356.8 283.4 362 298 362 315.6C362 340.4 352.6 360.8 333.8 376.8C315 392.8 290.6 400.8 260.6 400.8Z"
240
-
stroke="var(--stroke-color)"
241
-
strokeWidth="2.4"
242
-
mask="url(#path-2-mask)"
243
-
/>
244
-
<path
245
-
d="M52.5357 167.6H27.3357V105.2H120.336V400.2H52.5357V167.6Z"
246
-
stroke="var(--stroke-color)"
247
-
strokeWidth="2.4"
248
-
mask="url(#path-2-mask)"
249
-
/>
250
-
</g>
21
+
if (
22
+
target &&
23
+
target.closest('input, textarea, [contenteditable]')
24
+
) {
25
+
return;
26
+
}
251
27
252
-
<g className="text-[#F8B803] opacity-100 mix-blend-color transition-all delay-400 duration-750 dark:text-[#391800] dark:mix-blend-hard-light starting:opacity-0 motion-safe:starting:-translate-x-[51px]">
253
-
<mask
254
-
id="path-3-mask"
255
-
maskUnits="userSpaceOnUse"
256
-
x="51"
257
-
y="103"
258
-
width="338"
259
-
height="299"
260
-
fill="black"
261
-
>
262
-
<rect
263
-
fill="white"
264
-
x="51"
265
-
y="103"
266
-
width="338"
267
-
height="299"
268
-
/>
269
-
<path d="M286.264 400.8C255.464 400.8 230.264 392.4 210.664 375.6C191.464 358.8 181.864 337 181.864 310.2H252.064C252.064 318.2 255.064 324.8 261.064 330C267.064 335.2 275.064 337.8 285.064 337.8C294.664 337.8 302.464 335 308.464 329.4C314.864 323.8 318.064 316.6 318.064 307.8C318.064 299.8 315.264 293.2 309.664 288C304.064 282.8 296.864 280.2 288.064 280.2H250.864V218.4H288.064C294.864 218.4 300.664 216 305.464 211.2C310.264 206.4 312.664 200.4 312.664 193.2C312.664 184.8 310.064 178.2 304.864 173.4C299.664 168.6 293.064 166.2 285.064 166.2C277.864 166.2 271.664 168.4 266.464 172.8C261.664 177.2 259.264 182.8 259.264 189.6H192.664C192.664 164.8 201.464 144.6 219.064 129C236.664 113 259.264 105 286.864 105C314.464 105 336.864 112.2 354.064 126.6C371.664 141 380.464 160 380.464 183.6C380.464 200.8 375.864 214.8 366.664 225.6C357.464 236 345.664 243.2 331.264 247.2C348.464 252 362.064 260.2 372.064 271.8C382.464 283.4 387.664 298 387.664 315.6C387.664 340.4 378.264 360.8 359.464 376.8C340.664 392.8 316.264 400.8 286.264 400.8Z" />
270
-
<path d="M78.2 167.6H53V105.2H146V400.2H78.2V167.6Z" />
271
-
</mask>
272
-
<path
273
-
d="M286.264 400.8C255.464 400.8 230.264 392.4 210.664 375.6C191.464 358.8 181.864 337 181.864 310.2H252.064C252.064 318.2 255.064 324.8 261.064 330C267.064 335.2 275.064 337.8 285.064 337.8C294.664 337.8 302.464 335 308.464 329.4C314.864 323.8 318.064 316.6 318.064 307.8C318.064 299.8 315.264 293.2 309.664 288C304.064 282.8 296.864 280.2 288.064 280.2H250.864V218.4H288.064C294.864 218.4 300.664 216 305.464 211.2C310.264 206.4 312.664 200.4 312.664 193.2C312.664 184.8 310.064 178.2 304.864 173.4C299.664 168.6 293.064 166.2 285.064 166.2C277.864 166.2 271.664 168.4 266.464 172.8C261.664 177.2 259.264 182.8 259.264 189.6H192.664C192.664 164.8 201.464 144.6 219.064 129C236.664 113 259.264 105 286.864 105C314.464 105 336.864 112.2 354.064 126.6C371.664 141 380.464 160 380.464 183.6C380.464 200.8 375.864 214.8 366.664 225.6C357.464 236 345.664 243.2 331.264 247.2C348.464 252 362.064 260.2 372.064 271.8C382.464 283.4 387.664 298 387.664 315.6C387.664 340.4 378.264 360.8 359.464 376.8C340.664 392.8 316.264 400.8 286.264 400.8Z"
274
-
fill="currentColor"
275
-
/>
276
-
<path
277
-
d="M78.2 167.6H53V105.2H146V400.2H78.2V167.6Z"
278
-
fill="currentColor"
279
-
/>
280
-
<path
281
-
d="M286.264 400.8C255.464 400.8 230.264 392.4 210.664 375.6C191.464 358.8 181.864 337 181.864 310.2H252.064C252.064 318.2 255.064 324.8 261.064 330C267.064 335.2 275.064 337.8 285.064 337.8C294.664 337.8 302.464 335 308.464 329.4C314.864 323.8 318.064 316.6 318.064 307.8C318.064 299.8 315.264 293.2 309.664 288C304.064 282.8 296.864 280.2 288.064 280.2H250.864V218.4H288.064C294.864 218.4 300.664 216 305.464 211.2C310.264 206.4 312.664 200.4 312.664 193.2C312.664 184.8 310.064 178.2 304.864 173.4C299.664 168.6 293.064 166.2 285.064 166.2C277.864 166.2 271.664 168.4 266.464 172.8C261.664 177.2 259.264 182.8 259.264 189.6H192.664C192.664 164.8 201.464 144.6 219.064 129C236.664 113 259.264 105 286.864 105C314.464 105 336.864 112.2 354.064 126.6C371.664 141 380.464 160 380.464 183.6C380.464 200.8 375.864 214.8 366.664 225.6C357.464 236 345.664 243.2 331.264 247.2C348.464 252 362.064 260.2 372.064 271.8C382.464 283.4 387.664 298 387.664 315.6C387.664 340.4 378.264 360.8 359.464 376.8C340.664 392.8 316.264 400.8 286.264 400.8Z"
282
-
stroke="var(--stroke-color)"
283
-
strokeWidth="2.4"
284
-
mask="url(#path-3-mask)"
285
-
/>
286
-
<path
287
-
d="M78.2 167.6H53V105.2H146V400.2H78.2V167.6Z"
288
-
stroke="var(--stroke-color)"
289
-
strokeWidth="2.4"
290
-
mask="url(#path-3-mask)"
291
-
/>
292
-
</g>
28
+
event.preventDefault();
29
+
visitWithTransition(auth.user ? dashboard().url : login().url);
30
+
};
31
+
window.addEventListener('keydown', handler);
293
32
294
-
<g className="text-[#F3BEC7] opacity-100 mix-blend-multiply transition-all delay-400 duration-750 dark:text-[#733000] dark:mix-blend-normal starting:opacity-0 motion-safe:starting:-translate-x-[78px]">
295
-
<mask
296
-
id="path-4-mask"
297
-
maskUnits="userSpaceOnUse"
298
-
x="76.6643"
299
-
y="103"
300
-
width="338"
301
-
height="299"
302
-
fill="black"
303
-
>
304
-
<rect
305
-
fill="white"
306
-
x="76.6643"
307
-
y="103"
308
-
width="338"
309
-
height="299"
310
-
/>
311
-
<path d="M311.929 400.8C281.129 400.8 255.929 392.4 236.329 375.6C217.129 358.8 207.529 337 207.529 310.2H277.729C277.729 318.2 280.729 324.8 286.729 330C292.729 335.2 300.729 337.8 310.729 337.8C320.329 337.8 328.129 335 334.129 329.4C340.529 323.8 343.729 316.6 343.729 307.8C343.729 299.8 340.929 293.2 335.329 288C329.729 282.8 322.529 280.2 313.729 280.2H276.529V218.4H313.729C320.529 218.4 326.329 216 331.129 211.2C335.929 206.4 338.329 200.4 338.329 193.2C338.329 184.8 335.729 178.2 330.529 173.4C325.329 168.6 318.729 166.2 310.729 166.2C303.529 166.2 297.329 168.4 292.129 172.8C287.329 177.2 284.929 182.8 284.929 189.6H218.329C218.329 164.8 227.129 144.6 244.729 129C262.329 113 284.929 105 312.529 105C340.129 105 362.529 112.2 379.729 126.6C397.329 141 406.129 160 406.129 183.6C406.129 200.8 401.529 214.8 392.329 225.6C383.129 236 371.329 243.2 356.929 247.2C374.129 252 387.729 260.2 397.729 271.8C408.129 283.4 413.329 298 413.329 315.6C413.329 340.4 403.929 360.8 385.129 376.8C366.329 392.8 341.929 400.8 311.929 400.8Z" />
312
-
<path d="M103.864 167.6H78.6643V105.2H171.664V400.2H103.864V167.6Z" />
313
-
</mask>
314
-
<path
315
-
d="M311.929 400.8C281.129 400.8 255.929 392.4 236.329 375.6C217.129 358.8 207.529 337 207.529 310.2H277.729C277.729 318.2 280.729 324.8 286.729 330C292.729 335.2 300.729 337.8 310.729 337.8C320.329 337.8 328.129 335 334.129 329.4C340.529 323.8 343.729 316.6 343.729 307.8C343.729 299.8 340.929 293.2 335.329 288C329.729 282.8 322.529 280.2 313.729 280.2H276.529V218.4H313.729C320.529 218.4 326.329 216 331.129 211.2C335.929 206.4 338.329 200.4 338.329 193.2C338.329 184.8 335.729 178.2 330.529 173.4C325.329 168.6 318.729 166.2 310.729 166.2C303.529 166.2 297.329 168.4 292.129 172.8C287.329 177.2 284.929 182.8 284.929 189.6H218.329C218.329 164.8 227.129 144.6 244.729 129C262.329 113 284.929 105 312.529 105C340.129 105 362.529 112.2 379.729 126.6C397.329 141 406.129 160 406.129 183.6C406.129 200.8 401.529 214.8 392.329 225.6C383.129 236 371.329 243.2 356.929 247.2C374.129 252 387.729 260.2 397.729 271.8C408.129 283.4 413.329 298 413.329 315.6C413.329 340.4 403.929 360.8 385.129 376.8C366.329 392.8 341.929 400.8 311.929 400.8Z"
316
-
fill="currentColor"
317
-
/>
318
-
<path
319
-
d="M103.864 167.6H78.6643V105.2H171.664V400.2H103.864V167.6Z"
320
-
fill="currentColor"
321
-
/>
322
-
<path
323
-
d="M311.929 400.8C281.129 400.8 255.929 392.4 236.329 375.6C217.129 358.8 207.529 337 207.529 310.2H277.729C277.729 318.2 280.729 324.8 286.729 330C292.729 335.2 300.729 337.8 310.729 337.8C320.329 337.8 328.129 335 334.129 329.4C340.529 323.8 343.729 316.6 343.729 307.8C343.729 299.8 340.929 293.2 335.329 288C329.729 282.8 322.529 280.2 313.729 280.2H276.529V218.4H313.729C320.529 218.4 326.329 216 331.129 211.2C335.929 206.4 338.329 200.4 338.329 193.2C338.329 184.8 335.729 178.2 330.529 173.4C325.329 168.6 318.729 166.2 310.729 166.2C303.529 166.2 297.329 168.4 292.129 172.8C287.329 177.2 284.929 182.8 284.929 189.6H218.329C218.329 164.8 227.129 144.6 244.729 129C262.329 113 284.929 105 312.529 105C340.129 105 362.529 112.2 379.729 126.6C397.329 141 406.129 160 406.129 183.6C406.129 200.8 401.529 214.8 392.329 225.6C383.129 236 371.329 243.2 356.929 247.2C374.129 252 387.729 260.2 397.729 271.8C408.129 283.4 413.329 298 413.329 315.6C413.329 340.4 403.929 360.8 385.129 376.8C366.329 392.8 341.929 400.8 311.929 400.8Z"
324
-
stroke="var(--stroke-color)"
325
-
strokeWidth="2.4"
326
-
mask="url(#path-4-mask)"
327
-
/>
328
-
<path
329
-
d="M103.864 167.6H78.6643V105.2H171.664V400.2H103.864V167.6Z"
330
-
stroke="var(--stroke-color)"
331
-
strokeWidth="2.4"
332
-
mask="url(#path-4-mask)"
333
-
/>
334
-
</g>
33
+
return () => window.removeEventListener('keydown', handler);
34
+
}, [auth.user]);
335
35
336
-
<g className="text-[#F3BEC7] opacity-100 mix-blend-hard-light transition-all delay-400 duration-750 dark:text-[#4B0600] starting:opacity-0 motion-safe:starting:-translate-x-[102px]">
337
-
<mask
338
-
id="path-5-mask"
339
-
maskUnits="userSpaceOnUse"
340
-
x="102.329"
341
-
y="103"
342
-
width="338"
343
-
height="299"
344
-
fill="black"
345
-
>
346
-
<rect
347
-
fill="white"
348
-
x="102.329"
349
-
y="103"
350
-
width="338"
351
-
height="299"
352
-
/>
353
-
<path d="M337.593 400.8C306.793 400.8 281.593 392.4 261.993 375.6C242.793 358.8 233.193 337 233.193 310.2H303.393C303.393 318.2 306.393 324.8 312.393 330C318.393 335.2 326.393 337.8 336.393 337.8C345.993 337.8 353.793 335 359.793 329.4C366.193 323.8 369.393 316.6 369.393 307.8C369.393 299.8 366.593 293.2 360.993 288C355.393 282.8 348.193 280.2 339.393 280.2H302.193V218.4H339.393C346.193 218.4 351.993 216 356.793 211.2C361.593 206.4 363.993 200.4 363.993 193.2C363.993 184.8 361.393 178.2 356.193 173.4C350.993 168.6 344.393 166.2 336.393 166.2C329.193 166.2 322.993 168.4 317.793 172.8C312.993 177.2 310.593 182.8 310.593 189.6H243.993C243.993 164.8 252.793 144.6 270.393 129C287.993 113 310.593 105 338.193 105C365.793 105 388.193 112.2 405.393 126.6C422.993 141 431.793 160 431.793 183.6C431.793 200.8 427.193 214.8 417.993 225.6C408.793 236 396.993 243.2 382.593 247.2C399.793 252 413.393 260.2 423.393 271.8C433.793 283.4 438.993 298 438.993 315.6C438.993 340.4 429.593 360.8 410.793 376.8C391.993 392.8 367.593 400.8 337.593 400.8Z" />
354
-
<path d="M129.529 167.6H104.329V105.2H197.329V400.2H129.529V167.6Z" />
355
-
</mask>
356
-
<path
357
-
d="M337.593 400.8C306.793 400.8 281.593 392.4 261.993 375.6C242.793 358.8 233.193 337 233.193 310.2H303.393C303.393 318.2 306.393 324.8 312.393 330C318.393 335.2 326.393 337.8 336.393 337.8C345.993 337.8 353.793 335 359.793 329.4C366.193 323.8 369.393 316.6 369.393 307.8C369.393 299.8 366.593 293.2 360.993 288C355.393 282.8 348.193 280.2 339.393 280.2H302.193V218.4H339.393C346.193 218.4 351.993 216 356.793 211.2C361.593 206.4 363.993 200.4 363.993 193.2C363.993 184.8 361.393 178.2 356.193 173.4C350.993 168.6 344.393 166.2 336.393 166.2C329.193 166.2 322.993 168.4 317.793 172.8C312.993 177.2 310.593 182.8 310.593 189.6H243.993C243.993 164.8 252.793 144.6 270.393 129C287.993 113 310.593 105 338.193 105C365.793 105 388.193 112.2 405.393 126.6C422.993 141 431.793 160 431.793 183.6C431.793 200.8 427.193 214.8 417.993 225.6C408.793 236 396.993 243.2 382.593 247.2C399.793 252 413.393 260.2 423.393 271.8C433.793 283.4 438.993 298 438.993 315.6C438.993 340.4 429.593 360.8 410.793 376.8C391.993 392.8 367.593 400.8 337.593 400.8Z"
358
-
fill="currentColor"
359
-
/>
360
-
<path
361
-
d="M129.529 167.6H104.329V105.2H197.329V400.2H129.529V167.6Z"
362
-
fill="currentColor"
363
-
/>
364
-
<path
365
-
d="M337.593 400.8C306.793 400.8 281.593 392.4 261.993 375.6C242.793 358.8 233.193 337 233.193 310.2H303.393C303.393 318.2 306.393 324.8 312.393 330C318.393 335.2 326.393 337.8 336.393 337.8C345.993 337.8 353.793 335 359.793 329.4C366.193 323.8 369.393 316.6 369.393 307.8C369.393 299.8 366.593 293.2 360.993 288C355.393 282.8 348.193 280.2 339.393 280.2H302.193V218.4H339.393C346.193 218.4 351.993 216 356.793 211.2C361.593 206.4 363.993 200.4 363.993 193.2C363.993 184.8 361.393 178.2 356.193 173.4C350.993 168.6 344.393 166.2 336.393 166.2C329.193 166.2 322.993 168.4 317.793 172.8C312.993 177.2 310.593 182.8 310.593 189.6H243.993C243.993 164.8 252.793 144.6 270.393 129C287.993 113 310.593 105 338.193 105C365.793 105 388.193 112.2 405.393 126.6C422.993 141 431.793 160 431.793 183.6C431.793 200.8 427.193 214.8 417.993 225.6C408.793 236 396.993 243.2 382.593 247.2C399.793 252 413.393 260.2 423.393 271.8C433.793 283.4 438.993 298 438.993 315.6C438.993 340.4 429.593 360.8 410.793 376.8C391.993 392.8 367.593 400.8 337.593 400.8Z"
366
-
stroke="var(--stroke-color)"
367
-
strokeWidth="2.4"
368
-
mask="url(#path-5-mask)"
369
-
/>
370
-
<path
371
-
d="M129.529 167.6H104.329V105.2H197.329V400.2H129.529V167.6Z"
372
-
stroke="var(--stroke-color)"
373
-
strokeWidth="2.4"
374
-
mask="url(#path-5-mask)"
375
-
/>
376
-
</g>
377
-
</svg>
378
-
<div className="absolute inset-0 rounded-t-lg shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:rounded-t-none lg:rounded-r-lg dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"></div>
36
+
return (
37
+
<>
38
+
<Head title="Morgenblau" />
39
+
<div className="min-h-svh bg-background p-6">
40
+
<Window
41
+
variant="sunrise"
42
+
className="flex min-h-[calc(100svh-3rem)] items-center justify-center"
43
+
>
44
+
<div className="flex flex-col items-center gap-8 px-6 text-center text-white">
45
+
<AppLogoIcon
46
+
className="size-16"
47
+
style={{ viewTransitionName: 'brand-logo' }}
48
+
/>
49
+
<div className="space-y-3">
50
+
<h1>Morgenblau</h1>
51
+
<p className="max-w-md text-base text-balance">
52
+
A morning edition of the open web.
53
+
</p>
54
+
<p className="max-w-md text-sm font-light text-pretty text-white/80">
55
+
Pick your sources. Read once a day. Close the
56
+
tab.
57
+
</p>
379
58
</div>
380
-
</main>
381
-
</div>
382
-
<div className="hidden h-14.5 lg:block"></div>
59
+
<Button
60
+
variant="ghost-on-gradient"
61
+
className="text-base"
62
+
onClick={() => visitWithTransition(target)}
63
+
>
64
+
Enter
65
+
</Button>
66
+
</div>
67
+
</Window>
383
68
</div>
384
69
</>
385
70
);