added custom 404 page [fixes #210]

src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/page.tsx

@@ -91,12 +91,19 @@ export default async function Chapter({ params }: Props) {
     languageSettings.translationAuthor.id,
   );
 
+  const translations = await getTranslations(locale);
+
   if (!chapterData) {
-    return <NotFound hint={`Chapter ${chapterNumber} not found`} />;
+    return (
+      <NotFound
+        translations={translations}
+        locale={locale}
+        hint={chapterNumber}
+        isChapter={true}
+      />
+    );
   }
 
-  const translations = await getTranslations(locale);
-
   return (
     <>
       <script

src/app/chapter/[chapterNumber]/verse/[verseNumber]/[[...locale]]/page.tsx

@@ -82,12 +82,19 @@ const Verse = async ({ params }: Props) => {
     languageSettings.translationAuthor.id,
   );
 
+  const translations = await getTranslations(locale);
+
   if (!verseData) {
-    return <NotFound hint={`Verse ${verseNumber} not found`} />;
+    return (
+      <NotFound
+        translations={translations}
+        locale={locale}
+        hint={verseNumber}
+        isVerse={true}
+      />
+    );
   }
 
-  const translations = await getTranslations(locale);
-
   return (
     <article>
       <script

src/app/verse-of-the-day/[[...locale]]/page.tsx

@@ -56,7 +56,13 @@ const Page = async ({ params }: ParamsWithLocale) => {
   const dailyVerse = await getDailyVerse(locale);
 
   if (!dailyVerse) {
-    return <NotFound hint="Daily verse not found" />;
+    return (
+      <NotFound
+        translations={await getTranslations(locale)}
+        locale={locale}
+        hint="Daily verse not found"
+      />
+    );
   }
 
   return (

src/components/NotFound/index.tsx

@@ -1,11 +1,50 @@
+import Image from "next/image";
+
+import LinkWithLocale from "components/LinkWithLocale";
+import { getTranslate } from "shared/translate";
+
 type Props = {
   hint?: string;
-};
+  isChapter?: boolean;
+  isVerse?: boolean;
+} & LocaleAndTranslations;
 
 function NotFound(props: Props) {
   const { hint } = props;
+  const { translations, locale, isChapter, isVerse } = props;
+
+  const translate = getTranslate(translations, locale);
 
-  return <h1 className="p-10 text-center">{hint || "Not found"}</h1>;
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <Image
+        src={"/quotes-bg.png"}
+        alt="BG Not Found Banner Image"
+        layout="fill"
+        objectFit="cover"
+        objectPosition="center"
+      />
+      <div className="p-2 text-center drop-shadow-card">
+        <h1 className="mb-4 text-4xl font-bold text-my-orange ">
+          {isChapter
+            ? `${translate("Chapter")} ${hint} ${translate("Not found")}`
+            : isVerse
+            ? `${translate("Verse")} ${hint} ${translate("Not found")}`
+            : `${translate(hint || "Not found")}`}
+        </h1>
+        <p className="mb-8 text-xl text-white">
+          {" "}
+          {translate("Sorry, the page you're looking for doesn't exist")}
+        </p>
+        <LinkWithLocale
+          href={"/"}
+          className="items-center rounded-md border border-gray-300 bg-white px-6 py-3 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-my-orange focus:ring-offset-2"
+        >
+          {translate("Go Back to Home")}
+        </LinkWithLocale>
+      </div>
+    </div>
+  );
 }
 
 export default NotFound;

src/shared/translate/locales/hi.json

@@ -84,5 +84,9 @@
   "App": "मोबाइल ऐप",
   "Privacy": "प्राइवेसी",
   "Acknowledgements": "स्वीकृतियाँ",
+  "Go Back to Home": "होम पेज पर वापस जाएँ",
+  "Sorry, the page you're looking for doesn't exist": "क्षमा करें, आप जिस पेज की तलाश कर रहे हैं वह मौजूद नहीं है",
+  "Daily verse not found": "दैनिक श्लोक नहीं मिला",
+  "Not found": "नहीं मिला",
   "Gita AI": "गीता एआई"
 }