import { Button, Col, Container, Image, Row, Stack } from "react-bootstrap";
import { Link } from "react-router-dom";

const NotFound: React.FC = () => {
  return (
    <Container>
        <Row>
            <Col>
                <Stack className="text-center notfound">
                    <Image src="/images/oops.png" />
                    <h1>404 : Page Not Found</h1>
                    <p>The page you are looking for might have been removed had its name changed or is temporarily unavailable.</p>
                    <Stack className="flex-row justify-content-center back-to-site">
                        <Link to="/" className="default-btn-style text-white">
                            Go to Homepage
                        </Link>
                    </Stack>
                </Stack>
            </Col>
        </Row>
    </Container>
    
  );
};

export default NotFound;