Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import { ChevronRightIcon } from '@heroicons/react/20/solid'
import {
BookOpenIcon,
QueueListIcon,
CodeBracketSquareIcon,
} from '@heroicons/react/24/solid'
import Footer from '../components/Footer'
const links = [
{
name: 'Documentation',
href: '/introduction',
external: false,
description: 'Learn more about the Badge Programm',
icon: BookOpenIcon,
},
{
name: 'Live Demo',
href: '/#api-small-demo',
external: false,
description: 'Try the Badge API with a live demo',
icon: QueueListIcon,
},
{
name: 'Project on openCode',
href: 'https://gitlab.opencode.de/open-code/badgebackend',
external: true,
description: 'Have a look at the project on openCode',
icon: CodeBracketSquareIcon,
},
]
export default function Custom404() {
return (
<div className="h-screen bg-white">
<main className="mx-auto w-full max-w-7xl px-6 pb-16 pt-24 sm:pb-24 lg:px-8">
<img
alt="Badge Programm Logo"
src="/assets/badge-programm-logo.svg"
className="mx-auto h-10 w-auto sm:h-32"
/>
<div className="mx-auto mt-10 max-w-2xl text-center sm:mt-24">
<p className="text-2xl font-semibold text-blue-600">404</p>
<h1 className="mt-4 text-balance text-5xl font-semibold tracking-tight text-gray-900 sm:text-6xl">
Uuupss... <br />
Page not found
</h1>
<p className="mt-6 text-pretty text-lg font-medium text-gray-500 sm:text-xl/8">
Sorry, we couldn’t find the page you’re looking for.
</p>
</div>
<div className="mx-auto mt-16 flow-root max-w-lg sm:mt-20">
<h2 className="sr-only">Popular pages</h2>
<ul
role="list"
className="-mt-6 divide-y divide-gray-900/5 border-b border-gray-900/5"
>
{links.map((link, linkIdx) => (
<li
key={linkIdx}
className="relative flex gap-x-6 py-6"
>
<div className="flex size-10 flex-none items-center justify-center rounded-lg shadow-sm ring-1 ring-gray-900/10">
<link.icon
aria-hidden="true"
className="size-6 text-blue-600"
/>
</div>
<div className="flex-auto">
<h3 className="text-sm/6 font-semibold text-gray-900">
<a
href={link.href}
rel="noopener noreferrer"
target={
link.external
? '_blank'
: '_self'
}
>
<span
aria-hidden="true"
className="absolute inset-0"
/>
{link.name}
</a>
</h3>
<p className="mt-2 text-sm/6 text-gray-600">
{link.description}
</p>
</div>
<div className="flex-none self-center">
<ChevronRightIcon
aria-hidden="true"
className="size-5 text-gray-400"
/>
</div>
</li>
))}
</ul>
<div className="mt-10 flex justify-center">
<a href="/" className="font-semibold text-blue-600">
<span aria-hidden="true">←</span> Back to home
</a>
</div>
</div>
</main>
<div className="bg-gray-50">
<Footer />
</div>
</div>
)
}