Create custom 404 not found page

[bveeramani]

We need a custom 404 page that's shown when users navigate to a page that doesn't exist in the documentation.

What to build:
A friendly, helpful 404 error page that matches the documentation site's design and helps users find what they're looking for.

Where to work:

• Create src/luma/app/pages/404.tsx (Next.js automatically uses this for 404 errors)
• You can reference the existing page structure in other files in the pages/ directory

What it should include:

1. Clear messaging:

   • A friendly heading like "Page Not Found" or "Oops! We couldn't find that page"
   • Brief explanation that the page doesn't exist or may have moved
   • Keep the tone helpful, not alarming

2. Helpful navigation:

   • Link back to the homepage/documentation root
   • Maybe show a few popular/top-level pages from the navigation
   • Search box (if search functionality exists, otherwise save for later)

3. Visual design:

   • Match the site's existing design and colors
   • Consider adding an illustration or icon (404, broken link, magnifying glass, etc.)
   • Use Tailwind CSS for styling to match the rest of the site

4. Technical details:

   • Include the site header/navigation so users aren't stranded
   • Maybe show the URL they tried to access
   • Proper page title and meta tags

Next.js note:
In Next.js, you just need to create pages/404.tsx and it automatically handles routing to it when a page isn't found. It can use the same layout as other pages.

Example structure:

export default function NotFound() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>The page you're looking for doesn't exist.</p>
      <a href="/">Go back home</a>
    </div>
  );
}

Make it more polished than this, but that's the basic idea!