1<script lang="ts">
 2	import { onMount } from 'svelte';
 3
 4	let status = $state('Checking...');
 5
 6	onMount(async () => {
 7		try {
 8			const res = await fetch('/api/health');
 9			const data = await res.json();
10			status = data.status === 'ok' ? 'Server is running' : `Status: ${data.status}`;
11		} catch {
12			status = 'Server unreachable';
13		}
14	});
15</script>
16
17<div class="hero">
18	<h1>WEIMAR</h1>
19	<div class="hero-line"></div>
20	<p class="hero-sub">Media Repository</p>
21	<p class="hero-status">{status}</p>
22	<div class="hero-actions">
23		<a href="/browse" class="btn">BROWSE</a>
24		<a href="/upload" class="btn btn-outline">UPLOAD</a>
25	</div>
26</div>
27
28<style>
29	.hero {
30		padding: 4rem 0;
31		display: flex;
32		flex-direction: column;
33		align-items: flex-start;
34		gap: 0.5rem;
35	}
36	.hero h1 {
37		font-family: 'Oswald', sans-serif;
38		font-weight: 700;
39		font-size: 5rem;
40		letter-spacing: 0.08em;
41		color: #1a1a1a;
42		line-height: 1;
43		margin: 0;
44	}
45	.hero-line {
46		height: 4px;
47		width: 5rem;
48		background: #c62828;
49		margin: 0.25rem 0 0.5rem;
50	}
51	.hero-sub {
52		font-family: 'Oswald', sans-serif;
53		font-weight: 500;
54		font-size: 1.1rem;
55		letter-spacing: 0.15em;
56		color: #888;
57		text-transform: uppercase;
58	}
59	.hero-status {
60		font-family: 'Inter', sans-serif;
61		font-size: 0.9rem;
62		color: #666;
63		margin-top: 0.25rem;
64	}
65
66	.hero-actions {
67		display: flex;
68		gap: 0.75rem;
69		margin-top: 1.5rem;
70	}
71	.btn {
72		display: inline-flex;
73		align-items: center;
74		padding: 0.65rem 1.5rem;
75		background: #1a1a1a;
76		color: #fff;
77		font-family: 'Oswald', sans-serif;
78		font-weight: 500;
79		font-size: 0.9rem;
80		letter-spacing: 0.1em;
81		text-decoration: none;
82		text-transform: uppercase;
83		transition: background 0.15s;
84	}
85	.btn:hover {
86		background: #c62828;
87		text-decoration: none;
88	}
89	.btn-outline {
90		background: none;
91		color: #1a1a1a;
92		border: 2px solid #1a1a1a;
93	}
94	.btn-outline:hover {
95		background: #1a1a1a;
96		color: #fff;
97		border-color: #1a1a1a;
98	}
99</style>