Description: Next.js renders a default 404 page when a route is not found, but it's unstyled and doesn't match the BettaPay brand. A custom 404 page would provide a better user experience and keep users within the app.
Requirements:
- Create
app/not-found.tsx (Next.js 14 convention for custom 404)
- Show: the BettaPay logo, "Page not found" heading, a helpful message, and navigation buttons
- Include links to: Dashboard (home), Contact Support
- Use the existing layout (sidebar + topbar) if the user is authenticated, or the public layout if not
- Add a subtle illustration or icon
Suggested execution steps:
- Create
app/not-found.tsx
- Check if the user is authenticated (read from auth store or cookies) to determine the layout
- Render the page within the appropriate layout
- Add navigation buttons: "Back to Dashboard" or "Go Home"
- Style with the brand's amber/slate palette
- Test by navigating to a non-existent route (e.g.,
/nonexistent)
Example commit message:
feat: add branded 404 page with navigation to dashboard or home
Created app/not-found.tsx with BettaPay branding, contextual messaging,
and navigation buttons. Adapts layout based on authentication state
(auth layout for unauthenticated, dashboard layout for authenticated).
Description: Next.js renders a default 404 page when a route is not found, but it's unstyled and doesn't match the BettaPay brand. A custom 404 page would provide a better user experience and keep users within the app.
Requirements:
app/not-found.tsx(Next.js 14 convention for custom 404)Suggested execution steps:
app/not-found.tsx/nonexistent)Example commit message: