refactor: Update release notes page to handle missing release notes gracefully

src/app/release-notes/[version]/page.tsx

@@ -1,14 +1,35 @@
 'use client'
 
+import Footer from '@/components/footer';
+import { Navigation } from '@/components/navigation';
+import ReleaseNote from '@/components/release-note';
+import { Button } from '@/components/ui/button';
+import { releaseNotes } from '@/lib/release-notes';
+import Link from 'next/link';
 import { useParams } from 'next/navigation'
 
 export default function() {
   const params = useParams<{ version: string }>()
   const { version } = params;
 
+  const releaseNote = releaseNotes.find((note) => note.version === version);
+  if (!releaseNote) {
+    return (
+      <main className="flex min-h-screen flex-col items-center justify-start">
+        <div className="h-screen flex flex-col items-center justify-center">
+          <h1 className="text-4xl font-bold mt-12">Release note not found</h1>
+          <Link href="/release-notes"><Button className="mt-4">Back to release notes</Button></Link>
+        </div>
+        <Footer />  
+        <Navigation /> {/* At the bottom of the page */}
+      </main>
+    );
+  }
   return (
-    <div>
-      <h1>{version}</h1>
-    </div>
+    <main className="flex min-h-screen flex-col items-center justify-start">
+      <ReleaseNote data={releaseNote} />
+      <Footer />  
+      <Navigation /> {/* At the bottom of the page */}
+    </main>
   )
 }

src/app/release-notes/page.tsx

@@ -1,7 +1,33 @@
-import { releaseNotes } from "@/lib/release-notes";
-import { redirect } from "next/navigation";
+import Footer from "@/components/footer";
+import { Navigation } from "@/components/navigation";
+import { releaseNoteIsAlpha, releaseNotes } from "@/lib/release-notes";
+import Link from "next/link";
 
 export default function() {
-  // "0" is the latest release
-  redirect(`/release-notes/${releaseNotes[0].version}`);
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-start">
+      <div className="min-h-screen py-42 flex justify-center flex-col">
+        <h1 className="text-4xl text-center font-bold mt-12">Release Notes</h1>
+        <div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10">
+          {releaseNotes.map((releaseNote) => (
+            <Link href={`/release-notes/${releaseNote.version}`} className="bg-background relative max-w-64 overflow-hidden rounded-lg border p-5 hover:border-blue-500 transition-all duration-300 hover:-translate-y-1 hover:-translate-x-1">
+              <div className="text-md font-medium mb-5">
+                {releaseNote.version}
+              </div>
+              <div className="text-muted-foreground text-sm font-medium">
+                Check out the new features and improvements for {releaseNote.version}
+              </div>
+              {releaseNoteIsAlpha(releaseNote) && (
+                <div className="absolute top-0 right-0 bg-blue-500 text-white text-xs font-medium p-1 rounded-bl-lg">
+                  Alpha Release
+                </div>
+              )}
+            </Link>
+          ))}
+        </div>
+      </div>
+      <Footer />  
+      <Navigation /> {/* At the bottom of the page */}
+    </main>
+  )
 }