Skip to content

add 404 page #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
f0reachARR merged 2 commits into from
Apr 23, 2026
Merged

add 404 page #36

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ae34ca1
add 404 page
f0reachARR Apr 23, 2026
dc3fa02
fix accessibility
f0reachARR Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 81 additions & 0 deletions apps/frontend/app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { FileQuestionIcon, HomeIcon, SearchXIcon, TrophyIcon } from 'lucide-react';
import Link from 'next/link';
import { Header } from '@/components/layout/Header';
import { Button } from '@/components/ui/button';

export default function NotFound() {
return (
<>
<Header />
<main className='flex-1'>
<div className='container mx-auto min-h-[calc(100svh-3.5rem)] px-4 py-12 flex items-center'>
<section className='mx-auto grid w-full max-w-5xl items-center gap-10 md:grid-cols-[1fr_0.9fr]'>
<div className='space-y-6 text-center md:text-left'>
<p className='text-sm font-semibold text-primary'>404</p>
<div className='space-y-3'>
<h1 className='text-3xl font-bold tracking-tight sm:text-4xl'>
探している資料が見つかりません
</h1>
<p className='mx-auto max-w-2xl text-base leading-7 text-muted-foreground md:mx-0'>
URLが変わったか、資料が整理されたか、閲覧できる場所ではないのかもしれません。
いったん戻って、必要な資料を探し直してみてください。
</p>
</div>

<div className='flex flex-col items-stretch gap-3 sm:flex-row sm:items-center md:justify-start justify-center'>
<Button size='lg' render={<Link href='/' />}>
<HomeIcon className='h-4 w-4' />
ホームへ戻る
</Button>
<Button size='lg' variant='outline' render={<Link href='/competitions' />}>
<TrophyIcon className='h-4 w-4' />
大会一覧を見る
</Button>
</div>

<Button variant='link' className='px-0' render={<Link href='/dashboard' />}>
ダッシュボードを開く
</Button>
</div>

<div className='relative mx-auto aspect-[4/3] w-full max-w-md' aria-hidden='true'>
<div className='absolute inset-x-8 bottom-6 h-5 rounded-full bg-foreground/10 blur-xl' />

<div className='absolute left-8 top-12 h-52 w-36 -rotate-6 rounded-lg border bg-card p-4 shadow-md'>
<div className='mb-4 h-3 w-20 rounded-full bg-muted' />
<div className='space-y-2'>
<div className='h-2 rounded-full bg-muted' />
<div className='h-2 w-4/5 rounded-full bg-muted' />
<div className='h-2 w-2/3 rounded-full bg-muted' />
</div>
</div>

<div className='absolute right-8 top-16 h-52 w-36 rotate-6 rounded-lg border bg-card p-4 shadow-md'>
<div className='mb-4 h-3 w-16 rounded-full bg-secondary' />
<div className='space-y-2'>
<div className='h-2 rounded-full bg-muted' />
<div className='h-2 w-3/4 rounded-full bg-muted' />
<div className='h-2 w-5/6 rounded-full bg-muted' />
</div>
</div>

<div className='absolute inset-x-0 top-8 mx-auto flex h-56 w-40 flex-col items-center justify-center rounded-lg border bg-background p-5 text-center shadow-lg'>
<div className='mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-secondary text-secondary-foreground'>
<FileQuestionIcon className='h-8 w-8' />
</div>
<div className='space-y-2'>
<div className='mx-auto h-2 w-20 rounded-full bg-muted' />
<div className='mx-auto h-2 w-14 rounded-full bg-muted' />
</div>
</div>

<div className='absolute bottom-12 right-12 flex h-16 w-16 items-center justify-center rounded-full border bg-card text-muted-foreground shadow-md'>
<SearchXIcon className='h-8 w-8' />
</div>
</div>
</section>
</div>
</main>
</>
);
}
Loading