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>   

src/components/marketplace.tsx

@@ -5,14 +5,9 @@ import { getAllThemes, getThemesFromSearch, ZenTheme } from "@/lib/themes";
 import ThemeCard from "./theme-card";
 import { Button } from "./ui/button";
 
-export default function MarketplacePage() {
+export default function MarketplacePage({ themes }: {themes:ZenTheme[]}) {
   const [searchInput, setSearchInput] = React.useState("");
   const [tags, setTags] = React.useState<string[]>(["all"]);
-  const [themes, setThemes] = React.useState<ZenTheme[]>([]);
-
-  React.useEffect(() => {
-    getAllThemes().then(setThemes);
-  }, []);
 
   return (
     <div className="flex flex-col w-full mx-auto items-center justify-center h-full">