main

src/app/[locale]/not-found.tsx

@@ -0,0 +1,30 @@
+import { Link } from '@/i18n/navigation';
+import { Flex, Text, Button, VStack, Heading } from '@chakra-ui/react';
+import { getTranslations } from 'next-intl/server';
+
+export default async function NotFoundPage() {
+  const t = await getTranslations();
+
+  return (
+    <Flex h='100vh' alignItems='center' justifyContent='center' textAlign='center' px={6}>
+      <VStack spaceY={6}>
+        <Heading
+          as='h1'
+          fontSize={{ base: '5xl', md: '6xl' }}
+          fontWeight='bold'
+          color={{ base: 'primary.600', _dark: 'primary.400' }}
+        >
+          {t('error.404')}
+        </Heading>
+        <Text fontSize={{ base: 'md', md: 'lg' }} color={{ base: 'fg.muted', _dark: 'white' }}>
+          {t('error.not-found')}
+        </Text>
+        <Link href='/home' passHref>
+          <Button size={{ base: 'md', md: 'lg' }} rounded='md'>
+            {t('error.back-to-home')}
+          </Button>
+        </Link>
+      </VStack>
+    </Flex>
+  );
+}