NotFound.js

import React from 'react';
import Layout from '@theme/Layout';
import Translate, {translate} from '@docusaurus/Translate';
import {PageMetadata} from '@docusaurus/theme-common';
export default function NotFound() {
  return (
    <>
      <PageMetadata
        title={translate({
          id: 'theme.NotFound.title',
          message: 'Page Not Found',
        })}
      />
      <Layout>
        <main className="container margin-vert--xl">
          <div className="row">
            <div className="col col--6 col--offset-3 notfound">
              <h1 className="hero__title">
                <Translate
                  id="theme.NotFound.title"
                  description="The title of the 404 page">
                  Page Not Found
                </Translate>
              </h1>
              <p>
                  We could not find what you were looking for. Our docs have recently gone through a major reorganization, so it is possilbe that
                  the content still exists but the link was changed.
                  Try the <a href="https://clickhouse.com/docs/intro">docs home page</a> or using the search bar above to find what you are looking for.
              </p>
              <p>
                  Please contact us as at <a href="mailto:feedback@clickhouse.com">feedback@clickhouse.com</a> and let us know our link is broken.
              </p>
            </div>
          </div>
        </main>
      </Layout>
    </>
  );
}