src/lib/components/models/Card.svelte

<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>