This repository has no description
2.2 kB
82 lines
1'use client';
2
3import {
4 BackgroundImage,
5 Center,
6 Stack,
7 Image,
8 Badge,
9 Text,
10 Group,
11 Button,
12 Container,
13} from '@mantine/core';
14import SembleLogo from '@/assets/semble-logo.svg';
15import BG from '@/assets/semble-bg.webp';
16import DarkBG from '@/assets/semble-bg-dark.png';
17import Link from 'next/link';
18import { BiRightArrowAlt } from 'react-icons/bi';
19import { useColorScheme } from '@mantine/hooks';
20
21export default function Error() {
22 const colorScheme = useColorScheme();
23
24 return (
25 <BackgroundImage
26 src={colorScheme === 'dark' ? DarkBG.src : BG.src}
27 h={'100svh'}
28 pos={'fixed'}
29 top={0}
30 left={0}
31 style={{ zIndex: 102 }}
32 >
33 <Center h={'100svh'} py={{ base: '2rem', xs: '5rem' }}>
34 <Container size={'xl'} p={'md'} my={'auto'}>
35 <Stack>
36 <Stack align="center" gap={'xs'}>
37 <Image
38 src={SembleLogo.src}
39 alt="Semble logo"
40 w={48}
41 h={64.5}
42 mx={'auto'}
43 />
44 <Badge size="sm">Alpha</Badge>
45 </Stack>
46
47 <Stack>
48 <Text fz={'h1'} fw={600} ta={'center'}>
49 A social knowledge network for researchers
50 </Text>
51 <Text
52 fz={'h3'}
53 fw={600}
54 c={colorScheme === 'dark' ? '#1e4dd9' : '#1F6144'}
55 ta={'center'}
56 >
57 Follow your peers’ research trails. Surface and discover new
58 connections. Built on ATProto so you own your data.
59 </Text>
60 </Stack>
61
62 <Group justify="center" gap="md" mt={'lg'}>
63 <Button component={Link} href="/signup" size="lg">
64 Sign up
65 </Button>
66
67 <Button
68 component={Link}
69 href="/login"
70 size="lg"
71 color="dark"
72 rightSection={<BiRightArrowAlt size={22} />}
73 >
74 Log in
75 </Button>
76 </Group>
77 </Stack>
78 </Container>
79 </Center>
80 </BackgroundImage>
81 );
82}