models list

src/lib/components/models/Card.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { CommunityCard } from "$lib/type";
+	import Button from "$lib/components/Button.svelte";
+	import Icon from "@iconify/svelte";
+
+  export let card: CommunityCard;
+
+</script>
+
+<div
+  class="cursor-pointer group bg-neutral-900 rounded-xl relative flex items-start justify-between flex-col p-3 border border-neutral-800 transition-all duration-200 brightness-75 hover:brightness-100 z-[1]"
+>
+  <div class="w-full h-[250px] relative z-[1] mb-3 overflow-hidden">
+    <div class="w-full h-full bg-center bg-cover rounded-lg" style="background-image: url('{card.image}');"></div>
+    <div class="group-hover:opacity-100 opacity-0 translate-x-full group-hover:translate-x-0 transition-all duration-200 absolute right-3 bottom-3">
+      <Button theme="light" size="md">
+        Try it now
+      </Button>
+    </div>
+  </div>
+  <div class="flex items-center justify-between w-full">
+    <p class="text-white font-semibold text-base mb-1">{card.model_name}</p>
+    <div class="text-white text-sm flex items-center justify-end gap-1.5">
+      <Icon icon="solar:heart-bold" class="w-5 h-5 text-red-500" />
+      234
+    </div>
+  </div>
+</div>

src/routes/api/models/+server.ts

@@ -0,0 +1,22 @@
+import { error, json, type RequestEvent } from '@sveltejs/kit';
+// import { env } from '$env/dynamic/private'
+
+import jsonData from "$lib/cards.json";
+
+/** @type {import('./$types').RequestHandler} */
+
+export async function GET(request : RequestEvent) {
+  const hasError = false
+  
+  const page = parseInt(request.url.searchParams.get('page') || '0')
+  if (hasError) {
+    return error(500, 'Internal Server Error')
+  }
+
+  const cards = jsonData.slice(page * 25, page * 25 + 25)
+
+  return json({
+    cards,
+    total_items: jsonData.length,
+  })
+}

src/routes/models/+page.svelte

@@ -3,7 +3,7 @@
 	import InfiniteScroll from "svelte-infinite-scroll";
 
 	import Button from "$lib/components/Button.svelte";
-	import Card from "$lib/components/community/Card.svelte";
+	import Card from "$lib/components/models/Card.svelte";
 	import Input from "$lib/components/fields/Input.svelte";
 	import Radio from "$lib/components/fields/Radio.svelte";
 	import { MODELS_FILTER_OPTIONS } from "$lib/utils/index.js";

src/routes/models/+page.ts

@@ -1,5 +1,5 @@
 export async function load({ fetch }) {
-  const response = await fetch("/api/community?page=1", {
+  const response = await fetch("/api/models?page=1", {
     method: "GET",
     headers: {
       "Content-Type": "application/json"