feat: Add lazy loading for images in marketplace

The code changes include:
- Importing the `Image` component from `next/legacy/image` instead of `next/image` in multiple files.
- Adding a new `CachedImage` component that uses the `Image` component with a custom loader.
- Updating the `MarketplacePage` component to pass the `themes` prop to the `MarketplacePage` component.

src/app/themes/page.tsx

@@ -2,11 +2,24 @@
 import Footer from "@/components/footer";
 import MarketplacePage from "@/components/marketplace";
 import { Navigation } from "@/components/navigation";
+import { getAllThemes, ZenTheme } from "@/lib/themes";
+import { GetStaticProps } from "next";
 
-export default function ThemesMarketplace() {
+export const getStaticProps = (async (context) => {
+  const themes = await getAllThemes();
+  return {
+    props: {
+      themes,
+    },
+  };
+}) satisfies GetStaticProps<{
+  themes: ZenTheme[];
+}>
+
+export default function ThemesMarketplace({ themes }: {themes:ZenTheme[]}) {
   return (
     <main className="flex min-h-screen flex-col items-center justify-start">
-      <MarketplacePage />
+      <MarketplacePage themes={themes} />
       <Footer />  
       <Navigation /> {/* At the bottom of the page */}
     </main>