function Card(){
return(
<>
<a
href=""
className="h-[344px] w-full max-w-[280px] transition-all duration-300 ease-in-out relative cursor-pointer group border-2"
>
<div className="relative overflow-hidden h-full max-h-[280px]">
<img
src="/s1-1.jpg"
alt="def1"
className="h-full w-full object-cover transition-all duration-300 ease-in-out group-hover:scale-110"
/>
</div>
<div
className="mt-2 absolute top-0 right-2 backdrop-blur-lg p-1 px-2 flex gap-1 items-center bg-purple-500/30"
>
<div className="text-xs text-zinc-200">Epic</div>
</div>
<div
className="mt-2 absolute top-0 left-2 bg-green-500/30 backdrop-blur-lg p-1 px-2 flex gap-1 items-center"
>
<div className="text-xs text-green-400">S1</div>
</div>
<div className="w-full bg-zinc-900 px-2 py-2">
<div className="flex justify-between items-center">
<div className="text-start text-white text-xl">
Kai
</div>
<div className="text-xs text-zinc-200">#3012</div>
</div>
<div className="flex justify-between items-center">
<div className="font-body text-start text-zinc-400 text-xs">
Floor price
</div>
<div className="text-xs text-zinc-400 flex gap-1">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
><path
fill="currentColor"
fill-rule="evenodd"
d="M2.45 6.76h9.59c.12 0 .23.05.32.14l1.52 1.56c.28.29.08.78-.32.78H3.97c-.12 0-.23-.05-.32-.14L2.13 7.54c-.28-.29-.08-.78.32-.78m-.32-2.07l1.52-1.56c.08-.09.2-.14.32-.14h9.58c.4 0 .6.49.32.78l-1.51 1.56c-.08.09-.2.14-.32.14H2.45c-.4 0-.6-.49-.32-.78m11.74 6.61l-1.52 1.56c-.09.09-.2.14-.32.14H2.45c-.4 0-.6-.49-.32-.78l1.52-1.56c.08-.09.2-.14.32-.14h9.58c.4 0 .6.49.32.78"
/></svg
>
<div className="">0.26</div>
</div>
</div>
</div>
</a>
</>
)
}
export default Card