diff --git a/frontend/app/not-found.tsx b/frontend/app/not-found.tsx index 7fc53dd..b15efb4 100644 --- a/frontend/app/not-found.tsx +++ b/frontend/app/not-found.tsx @@ -1,8 +1,49 @@ +"use client"; + +/** + * not-found.tsx — 404 page (issue #356) + * + * Improvements over the previous static version: + * • All text is translated via next-intl (4 locales: en, yo, ig, ha). + * • Authenticated users see additional quick-links: "Sell an asset" and + * "View your wallet". Guest users see the sign-in / create-account links + * instead — giving every visitor an actionable next step. + * • Styled consistently with the rest of the app (Tailwind + dark mode). + */ + +import { useTranslations } from "next-intl"; +import Link from "next/link"; +import { useAuth } from "./hooks/useAuth"; + export default function NotFound() { + const t = useTranslations("NotFound"); + const { user, isLoading } = useAuth(); + + const isAuthenticated = !isLoading && user !== null; + + /** + * Quick-link rows shown beneath the primary CTAs. + * Guests see the sign-in / create-account links; authenticated users see + * the marketplace, sell, and wallet pages instead. + */ + const quickLinks = isAuthenticated + ? [ + { href: "/", label: t("marketplace") }, + { href: "/sell", label: t("sellAirtime") }, + { href: "/wallet", label: t("viewWallet") }, + ] + : [ + { href: "/", label: t("marketplace") }, + { href: "/sell", label: t("sellAirtime") }, + { href: "/auth/signup", label: t("createAccount") }, + { href: "/auth/verify", label: t("signIn") }, + ]; + return (
+ {/* Decorative large "404" */}

- Page not found + {t("heading")}

- The page you're looking for doesn't exist or has been moved. - Check the URL or head back to the marketplace. + {t("body")}

+ {/* Primary CTAs — always visible */}
- - Browse marketplace - + {t("browseListings")} + - - Sell airtime / data - + {/* Authenticated: sell + wallet. Guest: sell only (wallet requires auth) */} + {!isLoading && ( + <> + + {t("sellAsset")} + + + {isAuthenticated && ( + + {t("viewWallet")} + + )} + + )}
+ {/* Secondary quick-links */}

- You might be looking for + {t("youMightBeLookingFor")}

    - {[ - { href: "/", label: "Marketplace" }, - { href: "/sell", label: "Sell airtime" }, - { href: "/auth/signup", label: "Create account" }, - { href: "/auth/verify", label: "Sign in" }, - ].map(({ href, label }) => ( + {quickLinks.map(({ href, label }) => (
  • - {label} - +
  • ))}
@@ -65,16 +118,16 @@ export default function NotFound() {