From bedf5686427781d4ffb50404fb65ed12f1c12d80 Mon Sep 17 00:00:00 2001
From: matthew <ekumamatthew1@gmail.com>
Date: Tue, 16 Sep 2025 02:49:52 +0100
Subject: [PATCH 1/2] Enhance Error Page with Retry and Navigation Buttons

- Updated ErrorPage component to include a retry button that resets the error state and a navigation button to go back to the previous page.
- Improved error logging for development mode.
- Adjusted layout for better responsiveness and user experience.
- Added ErrorTest component to the main page for testing error handling.
---
 src/app/error.tsx            | 28 +++++++++++++++++++++++-----
 src/app/home/page.tsx        | 23 ++++++++++-------------
 src/app/layout.tsx           |  8 +++-----
 src/app/page.tsx             |  2 ++
 src/components/ErrorTest.tsx | 24 ++++++++++++++++++++++++
 5 files changed, 62 insertions(+), 23 deletions(-)
 create mode 100644 src/components/ErrorTest.tsx

diff --git a/src/app/error.tsx b/src/app/error.tsx
index e3b01e0..d97b2dc 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -1,21 +1,39 @@
 "use client";
 
-export default function ErrorPage() {
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
+
+interface ErrorPageProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+export default function ErrorPage({ error, reset }: ErrorPageProps) {
+  // Log error for debugging in development
+  if (process.env.NODE_ENV === "development") {
+    // eslint-disable-next-line no-console
+    console.error("Error caught:", error);
+  }
+  const router = useRouter();
   return (
     <div className="min-h-screen bg-slate-900 ">
-      {/* Main Error */}
-      <div className="h-screen flex flex-col items-center justify-center">
-        {/* Error Header */}
+      <div className="h-screen max-w-2xl mx-auto p-4 flex flex-col items-center justify-center">
         <div className="flex items-center justify-center mb-6">
           <h1 className="text-4xl text-white mr-2">500 |</h1>
           <p className="text-lg text-white">Internal Server Error</p>
         </div>
 
-        {/* Error Message */}
         <p className="text-sm text-white">
           We’re having trouble right now. Please refresh the page or try again
           later.
         </p>
+        <div className="flex lg:flex-row flex-col max-w-md my-4  gap-4">
+          <Button variant="destructive" onClick={reset}>
+            Try Again
+          </Button>
+          <Button variant="secondary" onClick={() => router.back()}>
+            Go Back
+          </Button>
+        </div>
       </div>
     </div>
   );
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index f0e018d..dac68bc 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -1,12 +1,12 @@
-import React from "react";
+// import ErrorTest from "@/components/ErrorTest";
 import CourseExplorationSection from "./components/welcomepage/courseExplorationSection";
 import HeroSection from "./components/welcomepage/heroSection";
 // import Register from "../register/page";
-import Trusted from "./components/welcomepage/trusted";
 import Journey from "./components/welcomepage/journey";
-import Steller from "./components/welcomepage/steller";
 import Ready from "./components/welcomepage/ready";
-import PrinciplesSection from "../about/components/principlesSection";
+import Steller from "./components/welcomepage/steller";
+import Trusted from "./components/welcomepage/trusted";
+// import PrinciplesSection from "../about/components/principlesSection";
 
 const welcomePage = () => {
   return (
@@ -17,7 +17,7 @@ const welcomePage = () => {
         <Journey />
         <CourseExplorationSection />
         <Steller />
-
+        {/* <ErrorTest /> */}
         {/* <section className="mt-4 md:mt-20 ">
         <Ready />
       </div>
@@ -58,7 +58,7 @@ export default welcomePage;
 										{[
 											"Fast and secure transactions",
 											"Low transaction fee",
-											"Global accessibility",			
+											"Global accessibility",
 											"Easy integration with our platform",
 										].map((item, index) => (
 											<li key={index} className="list-disc">
@@ -83,12 +83,9 @@ export default welcomePage;
 							</div>
 						</div>
 					</div>
-				</section> */
-}
-
+				</section> */}
 
-{
-  /* <section className="mt-4 md:mt-10 ">
+        {/* <section className="mt-4 md:mt-10 ">
 					<div className="w-full md:w-7/12 mx-auto grid gap-2">
 						{" "}
 						<h3 className="text-center font-medium text-2xl text-purple-600 md:text-4xl">
@@ -118,5 +115,5 @@ export default welcomePage;
 };
 
 export default welcomePage;
-				</section> */
-}
+// 				</section> */
+// }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 912e76d..f16fbeb 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,9 +1,8 @@
+import Footer from "@/components/footer";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-import Footer from "@/components/footer";
-import NavbarMenu from "@/components/nabvarMenu";
 import { Toaster } from "sonner";
+import "./globals.css";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -36,11 +35,10 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased bg-[#111627]`}
       >
-        <NavbarMenu variant="default" />
         <Toaster position="top-right" richColors />
         <main className="flex flex-col min-h-screen p1">{children}</main>
         <Footer />
       </body>
     </html>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a258170..47ed1da 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,11 @@
+import ErrorTest from "@/components/ErrorTest";
 import WelcomePage from "./home/page";
 
 export default function Page() {
   return (
     <div className="">
       <WelcomePage />
+      <ErrorTest />
     </div>
   );
 }
diff --git a/src/components/ErrorTest.tsx b/src/components/ErrorTest.tsx
new file mode 100644
index 0000000..ac7755c
--- /dev/null
+++ b/src/components/ErrorTest.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { useState } from "react";
+
+export default function ErrorTest() {
+  const [shouldThrow, setShouldThrow] = useState(false);
+
+  if (shouldThrow) {
+    throw new Error("Test error!");
+  }
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50">
+      <div className="bg-gray-800 border border-gray-600 rounded-lg p-3 shadow-lg">
+        <button
+          onClick={() => setShouldThrow(true)}
+          className="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 transition-colors"
+        >
+          🧪 Test Error
+        </button>
+      </div>
+    </div>
+  );
+}

From 5a8844b339d8ee58c5e86a72b49259489fd79910 Mon Sep 17 00:00:00 2001
From: matthew <ekumamatthew1@gmail.com>
Date: Tue, 16 Sep 2025 09:25:13 +0100
Subject: [PATCH 2/2] Integrate NavbarMenu into RootLayout and remove duplicate
 import in home/page.tsx

---
 src/app/home/page.tsx | 1 -
 src/app/layout.tsx    | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index ac345e6..3f3f48b 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -5,7 +5,6 @@ import HeroSection from "./components/welcomepage/heroSection";
 import Journey from "./components/welcomepage/journey";
 import Ready from "./components/welcomepage/ready";
 import Steller from "./components/welcomepage/steller";
-import Ready from "./components/welcomepage/ready";
 // import PrinciplesSection from "../about/components/principlesSection";
 import Trusted from "./components/welcomepage/trusted";
 // import PrinciplesSection from "../about/components/principlesSection";
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fccab9c..154bb53 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -36,6 +36,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased bg-[#111627]`}
       >
+        <NavbarMenu />
         <Toaster position="top-right" richColors />
         <main className="flex flex-col min-h-screen p1">{children}</main>
         <Footer />