feat: add 404 Not Found page with custom styling and translations

[danielmarv]

This pull request introduces a new custom 404 "Not Found" page with enhanced visuals and internationalization support, and adds documentation to guide contributors in adding new pages with localization.

User-facing feature:

• Added a new not-found.tsx page under src/app/[locale]/ that displays a custom 404 page with illustrations, localized text, and a prominent link back to the homepage. The page supports both English and German via next-intl and uses next/image for optimized images. (src/app/[locale]/not-found.tsxR1-R47)

Documentation:

• Updated README.md to include a link to an "Adding New Pages" guide (ADDING_PAGES.md), which explains how to add new pages with EN/DE versions, image handling, and layout options.

[Copilot]

Pull request overview

This PR adds a custom 404 Not Found page with internationalization support and comprehensive documentation for adding new pages to the Open Elements website.

Changes:

• New custom 404 page component with localized content, styled with Tailwind CSS and optimized images
• Added comprehensive "Adding New Pages" documentation covering page creation, markdown structure, layouts, images, and troubleshooting
• Updated README to reference the new documentation guide

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
src/app/[locale]/not-found.tsx	New 404 page component with custom styling, illustrations, and internationalized text using next-intl
ADDING_PAGES.md	Comprehensive 424-line guide documenting how to add new pages with EN/DE versions, markdown frontmatter, layouts, images, and troubleshooting
README.md	Added link to the new "Adding New Pages Guide" in the Documentation section

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The translation key '404.notFound' is incorrect. According to the translation files (locales/en.json and locales/de.json), the key is just 'notFound' at the root level, not nested under '404'. This should be changed to t('notFound') to match the actual translation structure.

Suggested change

	<span>{t('404.notFound')}</span>
	<span>{t('notFound')}</span>

[Copilot]

The documentation should include guidance on when to use client components with the 'use client' directive, particularly for pages that need the useTranslations hook from next-intl. The template provided shows a server component pattern, but doesn't explain when a client component is needed. This is especially relevant since the 404 page added in this PR uses useTranslations and requires 'use client'. Consider adding a section or note explaining the difference between server and client component patterns for pages, including when to use useTranslations versus hardcoding localized strings.

[Copilot]

The text "Ooops - " is hardcoded in English and not internationalized. While this might be intentional (as "Oops" is commonly used in German contexts), it's inconsistent with the page's approach of using translations for other text elements. Consider adding this to the translation files (e.g., as 'oops' key) to maintain consistency with the internationalization pattern used throughout the page.

Suggested change

	<span className="relative">Ooops - </span>
	<span className="relative">{t('oops')}</span>

[Copilot]

The component imports Link from 'next/link', but should use the localized Link from '@/i18n/routing' instead. The codebase convention (as seen in Navbar.tsx and Footer.tsx) is to use the localized Link which properly handles locale prefixes. Without this, the home link may not correctly navigate to the German homepage when the user is on the German 404 page.

Suggested change

	import Link from 'next/link'
	import Link from '@/i18n/routing'

[Copilot]

This component is missing the 'use client' directive at the top of the file. All pages that use the useTranslations hook from next-intl must be client components and include 'use client' at the very first line. Without this directive, the component will fail to render properly because hooks can only be used in client components.