<!-- Card -->
<div class="flex flex-col max-w-sm">
    <!-- Image -->
    <div class="bg-[url('/backgrounds/forest.jpg')] bg-center rounded-t-box h-72"></div>

    <!-- Status -->
    <div class="flex items-center gap-4 bg-neutral text-neutral-content py-4 px-6 font-bold text-lg">
        <i class="fa-solid fa-headphones-simple"></i>
        Focusing
    </div>

    <!-- Content -->
    <div class="flex flex-col gap-6 bg-base-200 p-6 rounded-b-box">
        <h1 class="font-bold text-xl">
            Patters