Refactor import statement in release notes page and version list component

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

@@ -8,7 +8,6 @@ import { releaseNotes } from "@/lib/release-notes";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { ChevronLeft, ChevronRight, ChevronDown } from 'lucide-react';
-import { VersionList } from '@/components/version-list';
 
 export async function generateStaticParams() {
   return [{version: "latest"}, ...releaseNotes.map((note) => ({ version: note.version }))];
@@ -43,34 +42,31 @@ export default function ReleaseNotePage({ params }: { params: { version: string
   const nextNote = releaseNotes[currentIndex - 1];
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between">
-      <VersionList currentVersion={version} />
-      
-      <div className="w-full max-w-4xl px-4 py-2">
+    <main className="flex min-h-screen flex-col items-center">    
+      <div className='w-full lg:w-1/2 px-5 md:px-10 lg:px-0'>
         <ReleaseNote data={releaseNote} />
+        <div className="flex flex-col md:flex-row items-center justify-between h-fit px-4 lg:px-0 pb-4 mt-8">
+          {prevNote && (
+            <a href={`/release-notes/${prevNote.version}`} className='mx-auto md:mx-0'>
+              <Button variant="outline" className="flex items-center">
+                <ChevronLeft className="mr-2 h-4 w-4" />
+                Previous ({prevNote.version})
+              </Button>
+            </a>
+          )}
+          <a href="/download" className='mx-auto md:mx-4'>
+            <Button className="mt-4 md:mt-0 w-fit">Download Zen now!</Button>
+          </a>
+          {nextNote && (
+            <a href={`/release-notes/${nextNote.version}`} className="mt-4 mx-auto md:mx-0 md:mt-0">
+              <Button variant="outline" className="flex items-center ">
+                Next ({nextNote.version})
+                <ChevronRight className="ml-2 h-4 w-4" />
+              </Button>
+            </a>
+          )}
+        </div>
       </div>
-      
-      <div className="flex justify-between w-full max-w-4xl px-4 py-4">
-        {prevNote && (
-          <Link href={`/release-notes/${prevNote.version}`}>
-            <Button variant="outline" className="flex items-center">
-              <ChevronLeft className="mr-2 h-4 w-4" />
-              Previous ({prevNote.version})
-            </Button>
-          </Link>
-        )}
-        {nextNote && (
-          <Link href={`/release-notes/${nextNote.version}`} className="ml-auto">
-            <Button variant="outline" className="flex items-center">
-              Next ({nextNote.version})
-              <ChevronRight className="ml-2 h-4 w-4" />
-            </Button>
-          </Link>
-        )}
-      </div>
-      
-      <Footer />
-      <Navigation /> {/* At the bottom of the page */}
     </main>
   );
 }

src/components/marketplace.tsx

@@ -11,7 +11,7 @@ export default function MarketplacePage({ themes }: {themes:ZenTheme[]}) {
 
   return (
     <div className="flex flex-col w-full mx-auto items-center justify-center h-full">
-      <div className="mx-auto w-full text-center border-b pt-48 pb-24 mb-12 bg-surface">
+      <div className="mx-auto w-full text-center border-b pt-48 pb-24 mb-12 bg-surface dark:bg-[#121212]">
         <div className="w-full lg:w-1/2 xl:w-1/2 mx-auto px-2 lg:px-none">
           <h1 className="text-4xl lg:text-7xl font-bold">Themes Store</h1>
           <ThemesSearch input={searchInput} setInput={setSearchInput} tags={tags} setTags={setTags} />

src/components/release-note.tsx

@@ -3,13 +3,17 @@ import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { CheckCheckIcon, StarIcon } from "lucide-react";
 import { Button } from "./ui/button";
 import Link from "next/link";
+import { VersionList } from "./version-list";
 export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
   return (
-    <div className="flex flex-col mt-52 mb-24">
-      <div className="mx-auto w-full px-10 md:px-0 lg:w-2/3">
-        <h1 className="text-4xl font-bold">
-          Release notes for {data.version} 🎉
-        </h1>
+    <div className="flex flex-col mt-52">
+      <div className="w-full px-10 md:px-0">
+        <div className="flex flex-col lg:flex-row-reverse items-center justify-between">
+          <VersionList currentVersion={data.version} />
+          <h1 className="text-4xl font-bold">
+            Release notes for {data.version} 🎉
+          </h1>
+        </div>
         <p className="text-sm mt-1 font-bold text-muted-foreground">
           {data.date}
         </p>
@@ -95,11 +99,6 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
           </>
         )}
       </div>
-      <div className="flex flex-wrap items-center justify-center">
-        <a href="/download">
-          <Button className="mt-12 w-fit mx-auto">Download Zen now!</Button>
-        </a>
-      </div>
     </div>
   );
 }

src/components/version-list.tsx

@@ -13,7 +13,7 @@ export const VersionList = React.memo(({ currentVersion }: { currentVersion: str
   }, []);
 
   return (
-    <div className="fixed right-0 lg:right-0 top-20 z-10 pr-2">
+    <div className="z-10 mb-10 lg:mb-0 pr-2">
       <div className="relative">
         <Button
           variant="outline"