Add visible 404 error indicator to page layout

[Copilot]

The 404 page only indicated errors via page title, leaving users with an empty content area and no clear indication they've hit a missing page.

Changes

• Added centered error message section with prominent "404" display, explanatory text, and navigation buttons
• Used onclick="history.back()" instead of javascript: protocol for security
• Applied Bootstrap 5 utilities (display-1, text-center, py-5, me-3) for styling

Implementation

<div class="error-404 text-center py-5">
  <h2 class="display-1 fw-bold text-primary">404</h2>
  <h3 class="mb-4">Page Not Found</h3>
  <p class="lead mb-4">Sorry, the page you are looking for could not be found.</p>
  <p class="mb-4">The page may have been moved, deleted, or the URL may be incorrect.</p>
  <div class="d-flex justify-content-center">
    <a href="{{ $.Site.BaseURL }}" class="btn btn-primary me-3">Go to Home</a>
    <button onclick="history.back()" class="btn btn-outline-secondary">Go Back</button>
  </div>
</div>

Screenshot

Before

After

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Improving 404-error page layout</issue_title>
<issue_description>Currently, the 404 page only indicates the error through the page title. To enhance user experience, the layout should include a clear, visible indicator that this is a 404-error page.

</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Improving 404-error page layout #97

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[cloudflare-workers-and-pages]

Deploying eh-docs with    Cloudflare Pages

Latest commit:	35620b9
Status:	✅  Deploy successful!
Preview URL:	https://f75c4939.eh-docs.pages.dev
Branch Preview URL:	https://copilot-improve-404-error-pa.eh-docs.pages.dev

View logs