full-stack-fastapi-template/new-frontend/src/components/Common/NotFound.tsx

import { Button, Container, Text } from '@chakra-ui/react';
import { Link } from '@tanstack/react-router';

const NotFound: React.FC = () => {

    return (
        <>
            <Container h='100vh'
                alignItems='stretch'
                justifyContent='center' textAlign='center' maxW='sm' centerContent>
                <Text fontSize='8xl' color='ui.main' fontWeight='bold' lineHeight='1' mb={4}>404</Text>
                <Text fontSize='md'>Oops!</Text>
                <Text fontSize='md'>Page not found.</Text>
                <Button as={Link} to='/' color='ui.main' borderColor='ui.main' variant='outline' mt={4}>Go back</Button>
            </Container>
        </>
    );
}

export default NotFound;