237 lines
7.6 KiB
Svelte
237 lines
7.6 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" aria-labelledby="hero-heading">
|
||
<div class="mx-auto max-w-6xl px-6 py-24 text-center">
|
||
<h1 id="hero-heading" 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 ">
|
||
<a
|
||
href="/items"
|
||
class={cn(buttonVariants({ variant: 'default', size: 'xl' }), 'text-base')}
|
||
aria-label="Browse lost items"
|
||
>
|
||
Browse lost items
|
||
</a>
|
||
<div class="w-40 flex items-center gap-2 h-2">
|
||
<div class="flex-1 h-px bg-border"></div>
|
||
<span class="text-muted-foreground whitespace-nowrap">Or</span>
|
||
<div class="flex-1 h-px bg-border"></div>
|
||
</div>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
class="text-muted-foreground"
|
||
onclick={openCreateDialog}
|
||
aria-label="Submit a found item"
|
||
>
|
||
Submit found item
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
<!-- FEATURES -->
|
||
<section class="mx-auto max-w-6xl px-6 py-12" aria-labelledby="features-heading">
|
||
<h2 id="features-heading" class="text-2xl font-semibold text-center mb-12">
|
||
Everything you need to get items back fast
|
||
</h2>
|
||
|
||
<div class="grid gap-12 md:grid-cols-2 items-center">
|
||
<!-- Left visual / emphasis block -->
|
||
<div class="space-y-6">
|
||
<div class="rounded-2xl border bg-muted/30 p-6">
|
||
<h3 class="font-semibold text-lg">Built for speed</h3>
|
||
<p class="text-sm text-muted-foreground mt-2">
|
||
Report and browse items in seconds. The entire flow is designed to reduce friction.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="rounded-2xl border bg-muted/20 p-6">
|
||
<h3 class="font-semibold text-lg">Organized listings</h3>
|
||
<p class="text-sm text-muted-foreground mt-2">
|
||
Items are structured by location and category so nothing gets buried.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="rounded-2xl border bg-muted/10 p-6">
|
||
<h3 class="font-semibold text-lg">Trusted process</h3>
|
||
<p class="text-sm text-muted-foreground mt-2">
|
||
Every submission is reviewed before it’s visible.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right visual anchor -->
|
||
<div class="rounded-2xl border p-10 bg-gradient-to-br from-primary/10 to-transparent">
|
||
<h3 class="text-xl font-semibold">Designed for school life</h3>
|
||
<p class="text-sm text-muted-foreground mt-4">
|
||
Backpacks, phones, notebooks, jackets — the things that actually get lost daily.
|
||
Everything here is tuned for real student use, not generic “lost & found” systems.
|
||
</p>
|
||
|
||
<div class="mt-6 text-xs text-muted-foreground">
|
||
Over <span class="font-medium text-foreground">120+</span> items successfully returned
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- HOW IT WORKS (Vertical Timeline Style) -->
|
||
<section class="mx-auto max-w-4xl px-6 py-12" aria-labelledby="how-heading">
|
||
<h2 id="how-heading" class="text-2xl font-semibold text-center mb-12">
|
||
How it works
|
||
</h2>
|
||
|
||
<div class="relative border-l pl-8 space-y-10">
|
||
<div class="relative">
|
||
<div class="absolute -left-[40px] top-1 h-4 w-4 rounded-full bg-primary"></div>
|
||
<h3 class="font-semibold">Someone finds something</h3>
|
||
<p class="text-sm text-muted-foreground mt-1">
|
||
An item is discovered in a classroom, hallway, locker room, or common area.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<div class="absolute -left-[40px] top-1 h-4 w-4 rounded-full bg-primary/70"></div>
|
||
<h3 class="font-semibold">It gets submitted</h3>
|
||
<p class="text-sm text-muted-foreground mt-1">
|
||
A quick submission captures what it is and where it was found.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<div class="absolute -left-[40px] top-1 h-4 w-4 rounded-full bg-primary/40"></div>
|
||
<h3 class="font-semibold">It makes its way home</h3>
|
||
<p class="text-sm text-muted-foreground mt-1">
|
||
The owner identifies it and retrieves it through staff.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ACTION / INFO (Staggered Bento Style Instead of 3 Equal Cards) -->
|
||
<section class="mx-auto max-w-6xl px-6 py-24" aria-labelledby="info-heading">
|
||
<h2 id="info-heading" class="sr-only">Actions</h2>
|
||
|
||
<div class="grid md:grid-cols-2 gap-6">
|
||
<!-- Large primary card -->
|
||
<Card class="">
|
||
<CardHeader>
|
||
<CardTitle>Found something?</CardTitle>
|
||
</CardHeader>
|
||
<CardContent class="space-y-4 text-sm text-muted-foreground">
|
||
<p>
|
||
Help return it in under a minute. Every submission makes a difference.
|
||
</p>
|
||
<Button variant="outline" class="w-full" onclick={openCreateDialog}>
|
||
Submit Item
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<!-- Side card -->
|
||
<Card class="">
|
||
<CardHeader>
|
||
<CardTitle>Looking for yours?</CardTitle>
|
||
</CardHeader>
|
||
<CardContent class="space-y-4 text-sm text-muted-foreground">
|
||
<p>
|
||
Check the live list of items turned in around school.
|
||
</p>
|
||
<a
|
||
href="/items"
|
||
class={cn(buttonVariants({ variant: 'outline' }), 'w-full')}
|
||
>
|
||
Browse
|
||
</a>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
</div>
|
||
<!-- Wide bottom emphasis card -->
|
||
<Card class="md:col-span-3 border-muted bg-muted/20 mt-6">
|
||
<CardContent class=" flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||
<div>
|
||
<h3 class="font-semibold">Built on trust</h3>
|
||
<p class="text-sm text-muted-foreground">
|
||
A simple system powered by students and staff working together.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="text-sm text-muted-foreground">
|
||
<span class="font-medium text-foreground">120+</span> items returned and counting
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</section>
|
||
|
||
<!-- IMPORTANT DISCLAIMER -->
|
||
<section class="mx-auto max-w-6xl px-6 pb-20" aria-labelledby="policy-heading">
|
||
<Card class="border-amber-500/40 bg-amber-500/5">
|
||
<CardHeader>
|
||
<CardTitle id="policy-heading">Important Notice</CardTitle>
|
||
</CardHeader>
|
||
<CardContent class="text-sm text-muted-foreground space-y-3">
|
||
<p>
|
||
This platform is intended for everyday personal items such as notebooks, clothing,
|
||
water bottles, and similar belongings commonly misplaced at school.
|
||
</p>
|
||
|
||
<p>
|
||
Items of significant monetary, legal, or sensitive value (including but not limited to cash,
|
||
credit cards, IDs, or high-value electronics) should <strong>not</strong> be handled through
|
||
this system.
|
||
</p>
|
||
|
||
<p>
|
||
Such items must be immediately reported to the main office or appropriate school staff for
|
||
proper handling and documentation.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</section>
|
||
|
||
<section class="mx-auto max-w-6xl px-6 pb-24" aria-labelledby="staff-heading">
|
||
<h2 id="staff-heading" class="sr-only">Staff Access</h2>
|
||
<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"
|
||
aria-label="Admin sign in"
|
||
>
|
||
Admin sign in
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<SubmitItemDialog bind:open={createDialogOpen} />
|