97 lines
2.9 KiB
Svelte
97 lines
2.9 KiB
Svelte
<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">
|
||
Westuffinder
|
||
</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 & 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} />
|