pages

2026-02-04 18:49:35 -06:00
parent 8ea632a14f
commit 5cd3af719d
9 changed files with 433 additions and 124 deletions
@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { Button, buttonVariants } from '$lib/components/ui/button';
+	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
+	import SubmitItemDialog from '$lib/components/custom/submit-item-dialog.svelte';
+	import { cn } from '$lib/utils';
+
+	let createDialogOpen: boolean = $state(false);
+
+	function openCreateDialog() {
+		createDialogOpen = true;
+	}
+</script>
+
+<section class="relative overflow-hidden">
+	<!-- Hero -->
+	<div class="mx-auto max-w-6xl px-6 py-24 text-center">
+		<h1 class="text-4xl font-bold tracking-tight sm:text-5xl">
+			Waukesha West Lost &amp; Found
+		</h1>
+		<p class="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">
+			Lost something at school? Found something that isn’t yours?
+			This is the official place to reconnect items with their owners.
+		</p>
+
+		<div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
+			<Button size="lg" class="px-8" onclick={openCreateDialog}>
+				Submit a Found Item
+			</Button>
+			<a href="/items" class={cn(buttonVariants({ variant: 'outline', size: 'lg' }), 'px-8')}>
+				Browse Lost Items
+			</a>
+		</div>
+	</div>
+
+	<!-- Subtle background accent -->
+	<div
+		aria-hidden="true"
+		class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl"
+	>
+		<div
+			class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-primary to-primary/40 opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72rem]"
+		></div>
+	</div>
+</section>
+
+<section class="mx-auto max-w-6xl px-6 py-20">
+	<div class="grid gap-8 md:grid-cols-3">
+		<Card>
+			<CardHeader>
+				<CardTitle>Found an Item?</CardTitle>
+			</CardHeader>
+			<CardContent class="space-y-3 text-sm text-muted-foreground">
+				<p>
+					Turn it in digitally in less than a minute. Add a description and where you found it.
+				</p>
+				<Button class="mt-2 w-full" onclick={openCreateDialog}>Submit Item</Button>
+			</CardContent>
+		</Card>
+
+		<Card>
+			<CardHeader>
+				<CardTitle>Lost Something?</CardTitle>
+			</CardHeader>
+			<CardContent class="space-y-3 text-sm text-muted-foreground">
+				<p>
+					Browse items that have been turned in by students and staff.
+				</p>
+				<a href="/items" class={cn(buttonVariants({ variant: 'outline', size: 'lg' }), 'mt-2 w-full')}>Browse Items</a>
+			</CardContent>
+		</Card>
+
+		<Card>
+			<CardHeader>
+				<CardTitle>Safe &amp; School-Run</CardTitle>
+			</CardHeader>
+			<CardContent class="space-y-3 text-sm text-muted-foreground">
+				<p>
+					Managed by Waukesha West staff. Items are reviewed before being listed.
+				</p>
+			</CardContent>
+		</Card>
+	</div>
+</section>
+
+<section class="mx-auto max-w-6xl px-6 pb-24">
+	<div class="flex items-center justify-center">
+		<p class="text-xs text-muted-foreground">
+			Staff only:
+			<a href="/login" class="ml-1 underline underline-offset-4 hover:text-foreground">
+				Admin sign in
+			</a>
+		</p>
+	</div>
+</section>
+
+<SubmitItemDialog bind:open={createDialogOpen} />