Merge pull request #15296 from ethereum/error-page

Update error page content and structure

Author: corwintines

app/[locale]/error.tsx

@@ -4,15 +4,9 @@ import { useEffect } from "react"
 
 import MainArticle from "@/components/MainArticle"
 import Translation from "@/components/Translation"
-import { Button } from "@/components/ui/buttons/Button"
+import { BaseLink } from "@/components/ui/Link"
 
-export default function Error({
-  error,
-  reset,
-}: {
-  error: Error
-  reset: () => void
-}) {
+export default function Error({ error }: { error: Error; reset: () => void }) {
   useEffect(() => {
     // TODO: log the error to an error reporting service
     console.error(error)
@@ -22,10 +16,16 @@ export default function Error({
     <div className="mx-auto mb-0 mt-16 flex w-full flex-col items-center">
       <MainArticle className="my-8 w-full space-y-8 px-8 py-4">
         <h1>
-          <Translation id="we-couldnt-find-that-page" />
+          <Translation id="error-page-title" />
         </h1>
-        <p>Something went wrong.</p>
-        <Button onClick={() => reset()}>Try again</Button>
+        <p className="mb-4">
+          <Translation id="error-page-description" />
+        </p>
+        <p>
+          <BaseLink href="/">
+            <Translation id="error-page-home-link" />
+          </BaseLink>
+        </p>
       </MainArticle>
     </div>
   )

src/intl/en/common.json

@@ -437,6 +437,9 @@
   "verkle-trees": "Verkle trees",
   "wallets": "Wallets",
   "we-couldnt-find-that-page": "We couldn't find that page",
+  "error-page-title": "Oops! Something went wrong",
+  "error-page-description": "You can help us improve by reporting this issue on our <a href='https://github.com/ethereum/ethereum-org-website/issues/new?label%3A%22bug%20%F0%9F%90%9B%22&template=bug_report.yaml'>GitHub repository</a>.",
+  "error-page-home-link": "Return to the home page",
   "web3": "What is Web3?",
   "web3-title": "Web3",
   "website-last-updated": "Website last updated",