Carte d’annonce immobilière - Aquarelle/Néon

<div class="font-sans antialiased bg-stone-50 dark:bg-zinc-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] dark:shadow-zinc-800/50 relative p-0 group">
    <!-- Artistic Background Overlay -->
    <div class="absolute inset-0 bg-gradient-to-br from-purple-200 via-pink-100 to-blue-200 dark:from-zinc-700 dark:via-zinc-800 dark:to-zinc-700 opacity-70 rounded-3xl z-0 group-hover:opacity-80 transition-opacity duration-300"></div>
    <div class="absolute inset-0 filter blur-3xl opacity-30 dark:opacity-20 z-0 bg-[url('https://www.transparenttextures.com/patterns/natural-paper.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-mosaic.png')] group-hover:blur-2xl transition-all duration-300"></div>

    <div class="relative z-10 flex flex-col md:flex-row p-4 sm:p-8 lg:p-12 gap-6 sm:gap-8 lg:gap-10">

      <!-- Image Section -->
      <div class="flex-shrink-0 w-full md:w-2/5 aspect-video md:aspect-square overflow-hidden rounded-2xl shadow-lg border-2 border-fuchsia-400 dark:border-cyan-600 group-hover:border-lime-400 dark:group-hover:border-fuchsia-600 transition-all duration-300">
        <img src="https://picsum.photos/id/1015/800/600" alt="Modern House" class="w-full h-full object-cover transform scale-105 group-hover:scale-100 transition-transform duration-500 ease-in-out">
      </div>

      <!-- Content Section -->
      <div class="flex flex-col flex-grow">
        <header class="mb-4 sm:mb-6">
          <div class="flex items-center justify-between mb-2">
            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-indigo-700 dark:text-orange-300 leading-tight group-hover:text-fuchsia-600 dark:group-hover:text-lime-400 transition-colors duration-300 tracking-tight">
              Luxury Waterfront Villa
            </h2>
            <span class="text-2xl sm:text-3xl font-bold px-4 py-2 bg-gradient-to-br from-lime-400 to-teal-400 text-purple-900 rounded-full shadow-lg dark:from-cyan-500 dark:to-blue-700 dark:text-white transform rotate-3 transition-transform duration-300 group-hover:rotate-0 group-hover:scale-105">
              $1,850,000
            </span>
          </div>
          <p class="text-lg text-stone-600 dark:text-zinc-400 mt-1 flex items-center">
            <svg class="w-5 h-5 mr-2 text-fuchsia-500 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            Miami Beach, FL 33139
          </p>
        </header>

        <div class="grid grid-cols-2 gap-y-3 gap-x-6 mb-6 sm:mb-8 text-stone-700 dark:text-zinc-300">
          <div class="flex items-center text-lg">
            <svg class="w-6 h-6 mr-2 text-cyan-500 dark:text-lime-400" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h2a1 1 0 001-1m-6 0v-4a1 1 0 011-1h2a1 1 0 011 1v4m-6 0h6"></path></svg>
            <span class="font-semibold">5</span> Beds
          </div>
          <div class="flex items-center text-lg">
            <svg class="w-6 h-6 mr-2 text-fuchsia-500 dark:text-blue-400" 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="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path></svg>
            <span class="font-semibold">6</span> Baths
          </div>
          <div class="flex items-center text-lg">
            <svg class="w-6 h-6 mr-2 text-teal-500 dark:text-purple-400" 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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4m0-10h.01"></path></svg>
            <span class="font-semibold">7,200</span> sqft
          </div>
          <div class="flex items-center text-lg">
            <svg class="w-6 h-6 mr-2 text-orange-500 dark:text-pink-400" 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="M9 20l-5 5V9l5-5 5 5v7.21l-3 3M15 15l-3 3-3-3m-2 4h6m-1 0v-3m2 3v-3"></path></svg>
            <span class="font-semibold">Built 2021</span>
          </div>
        </div>

        <p class="text-stone-700 dark:text-zinc-300 text-base sm:text-lg mb-6 leading-relaxed">
          Discover unparalleled luxury in this stunning waterfront estate. Featuring panoramic ocean views, a private dock, and state-of-the-art smart home technology. Perfect for discerning buyers seeking an exquisite lifestyle.
        </p>

        <!-- Agent Info -->
        <div class="flex items-center mt-auto pt-4 border-t border-purple-200 dark:border-zinc-700">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Name" class="w-14 h-14 rounded-full mr-4 border-2 border-lime-400 dark:border-cyan-500 shadow-md group-hover:border-fuchsia-500 dark:group-hover:border-lime-300 transition-all duration-300">
          <div>
            <p class="font-semibold text-lg text-emerald-800 dark:text-orange-200 group-hover:text-purple-600 dark:group-hover:text-yellow-300 transition-colors duration-300">Michael Scott</p>
            <p class="text-sm text-stone-500 dark:text-zinc-400">Senior Real Estate Agent</p>
          </div>
          <a href="#" class="ml-auto bg-gradient-to-br from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 dark:from-cyan-600 dark:to-blue-700 dark:hover:from-cyan-700 dark:hover:to-blue-800 text-white font-bold py-3 px-6 rounded-full shadow-lg transform transition-all duration-300 tracking-wide text-sm sm:text-base hover:scale-105 active:scale-95 ease-out flex items-center group-hover:from-fuchsia-500 group-hover:to-pink-600 dark:group-hover:from-lime-500 dark:group-hover:to-emerald-600">
            <svg class="w-5 h-5 mr-2 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
            Contact Agent
          </a>
        </div>
      </div>
    </div>
  </div>
</div>