src/theme/NotFound/Content/index.js

import React from 'react';
import Translate, {translate} from '@docusaurus/Translate';
import ExternalLink from '@site/src/components/external-link/external-link';
import { ExternalLinkArrowIcon } from '@site/src/components/Icons/external-link-arrow-icon';

export default function NotFoundContent({ className }) {
    return (
        <main className={`container margin-vert--xl ${className || ''}`}>
            <div className="row">
                <div className="col">
                    <div className="flex justify-center mb-10">
                        <img
                            style={{ width: 120 }}
                            src={require('@site/static/images/empty-data.png').default}
                            alt=""
                        />
                    </div>
                    <h1 className="text-[1.75rem] text-[#1D1D1D] leading-[1.6] text-center">
                        <Translate id="theme.NotFound.title" description="The title of the 404 page">
                            Page Not Found
                        </Translate>
                    </h1>
                    <p className="text-center mt-2 text-sm text-[#8592A6]">
                        <Translate id="theme.NotFound.p1" description="The first paragraph of the 404 page">
                            Oops! The page you are looking for can't be found. In any case, try to look for a
                            different page or report this issue.
                        </Translate>
                    </p>
                    <div className="flex justify-center gap-x-6 lg:gap-x-10 mt-10">
                        <div className="w-[9.75rem]">
                            <ExternalLink
                                to="/"
                                label={translate({id: 'site.notFound.home', message: 'Go to home'})}
                                className="text-sm h-[2.625rem] bg-primary text-white rounded-md hover:text-white cursor-pointer"
                                linkIcon={<ExternalLinkArrowIcon />}
                            />
                        </div>
                        <div className="w-[9.75rem]">
                            <ExternalLink
                                label={translate({id: 'site.notFound.report', message: 'Report this issue'})}
                                linkIcon={<ExternalLinkArrowIcon />}
                                to="https://github.com/apache/doris-website/issues"
                                className="text-sm border border-primary h-[2.625rem] rounded-md text-primary cursor-pointer"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </main>
    );
}