User Mentions 구성 요소

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-slate-800 dark:to-slate-950 min-h-screen font-sans">

  <!-- Component Wrapper with artistic background -->
  <div class="max-w-4xl mx-auto rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl relative
              bg-[url('https://www.transparenttextures.com/patterns/water-color.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-wood.png')] bg-cover bg-center
              border border-blue-200 dark:border-slate-700 backdrop-blur-sm">

    <!-- Watercolor Overlay (top) -->
    <div class="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-blue-300/40 to-transparent dark:from-blue-950/40 dark:via-blue-900/10 dark:to-transparent opacity-60 pointer-events-none rounded-t-3xl"></div>

    <!-- Content Area -->
    <div class="relative p-4 sm:p-8 bg-white/70 dark:bg-slate-900/70 backdrop-blur-sm rounded-3xl">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-6 text-center tracking-tight leading-tight relative z-10">
        <span class="relative">
          Property Mentions
          <span class="absolute -bottom-2 left-0 w-full h-1 bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 rounded-full"></span>
        </span>
      </h2>

      <!-- Search/Filter Input -->
      <div class="relative mb-8 shadow-md rounded-xl overflow-hidden">
        <input type="text" placeholder="Search mentions or properties..." class="w-full p-4 pl-12 pr-4 text-lg bg-blue-50 dark:bg-slate-800 text-blue-900 dark:text-slate-200 rounded-xl
                      focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700/50 transition-all duration-300
                      placeholder:text-blue-400 dark:placeholder:text-slate-500 border border-blue-200 dark:border-slate-700">
        <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-blue-500 dark:text-slate-400 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>

      <!-- Mentions Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">

        <!-- Mention Card 1 -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
                    hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
          <div class="flex items-start mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">Maria S.</h3>
              <p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 15, 2024</p>
            </div>
          </div>
          <p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"I just saw the listing for the beachfront villa in Malibu. It's absolutely stunning! Can we schedule a viewing soon? The photos are incredible."</p>
          <div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
            <img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property1/150/100" alt="Property Thumbnail">
            <div>
              <p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Beachfront Villa, Malibu</p>
              <p class="text-blue-600 dark:text-blue-400 text-xs truncate">$7,500,000</p>
            </div>
          </div>
          <div class="mt-4 flex justify-end space-x-2">
            <button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
              View Thread
            </button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              Reply
            </button>
          </div>
        </div>

        <!-- Mention Card 2 -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
                    hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
          <div class="flex items-start mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/men/30.jpg" alt="User Avatar">
            <div>
              <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">David L.</h3>
              <p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 14, 2024</p>
            </div>
          </div>
          <p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"Regarding the downtown condo in NYC, are there any virtual tour options available? My client is very interested but is out of state for now."</p>
          <div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
            <img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property2/150/100" alt="Property Thumbnail">
            <div>
              <p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Luxury Condo, NYC</p>
              <p class="text-blue-600 dark:text-blue-400 text-xs truncate">$2,100,000</p>
            </div>
          </div>
          <div class="mt-4 flex justify-end space-x-2">
            <button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
              View Thread
            </button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              Reply
            </button>
          </div>
        </div>

        <!-- Mention Card 3 -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
                    hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
          <div class="flex items-start mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar">
            <div>
              <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">Sophia K.</h3>
              <p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 12, 2024</p>
            </div>
          </div>
          <p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"Your recent blog post about investing in rental properties in Florida was incredibly insightful! I'm considering the one near Orlando. Can we connect?"</p>
          <div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
            <img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property3/150/100" alt="Property Thumbnail">
            <div>
              <p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Family Home, Orlando</p>
              <p class="text-blue-600 dark:text-blue-400 text-xs truncate">$480,000</p>
            </div>
          </div>
          <div class="mt-4 flex justify-end space-x-2">
            <button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
              View Thread
            </button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              Reply
            </button>
          </div>
        </div>

        <!-- Mention Card 4 -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-lg border border-blue-100 dark:border-slate-700
                    hover:shadow-xl hover:scale-[1.02] transition-all duration-300 ease-in-out cursor-pointer group">
          <div class="flex items-start mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 mr-4 shadow-sm" src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar">
            <div>
              <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-300">Michael R.</h3>
              <p class="text-sm text-blue-600 dark:text-blue-400">Mentioned you on Jan 10, 2024</p>
            </div>
          </div>
          <p class="text-blue-900 dark:text-slate-200 mb-4 line-clamp-3">"Hey, I found a promising commercial space in downtown Seattle through your platform. The details say it's perfect for a startup. Any more insights?"</p>
          <div class="flex items-center space-x-3 bg-blue-50 dark:bg-slate-700 p-3 rounded-xl border border-blue-100 dark:border-slate-600 transition-all group-hover:bg-blue-100 dark:group-hover:bg-slate-600">
            <img class="w-16 h-12 rounded-lg object-cover border border-blue-200 dark:border-slate-500" src="https://picsum.photos/seed/property4/150/100" alt="Property Thumbnail">
            <div>
              <p class="font-medium text-blue-800 dark:text-blue-300 text-sm">Commercial Loft, Seattle</p>
              <p class="text-blue-600 dark:text-blue-400 text-xs truncate">$1,200,000</p>
            </div>
          </div>
          <div class="mt-4 flex justify-end space-x-2">
            <button class="px-4 py-2 text-sm font-medium text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-800 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200">
              View Thread
            </button>
            <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 rounded-lg shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              Reply
            </button>
          </div>
        </div>

      </div>

      <!-- See All Mentions Button -->
      <div class="mt-10 text-center">
        <button class="inline-flex items-center px-8 py-3 bg-gradient-to-r from-blue-500 to-blue-700 dark:from-blue-700 dark:to-blue-900 text-white font-semibold rounded-full shadow-lg group
                       hover:from-blue-600 hover:to-blue-800 dark:hover:from-blue-800 dark:hover:to-blue-950 transition-all duration-300 transform hover:-translate-y-1">
          <svg class="w-5 h-5 mr-3 -ml-1 transform group-hover:scale-110 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
          </svg>
          See All Mentions
        </button>
      </div>

    </div>

    <!-- Watercolor Overlay (bottom) -->
    <div class="absolute inset-x-0 bottom-0 h-48 bg-gradient-to-t from-blue-300/40 to-transparent dark:from-blue-950/40 dark:via-transparent dark:to-transparent opacity-60 pointer-events-none rounded-b-3xl"></div>

  </div>
</div>