Componente Feed attività

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-950 min-h-screen font-sans antialiased text-stone-800 dark:text-stone-200">
  <div class="max-w-4xl mx-auto space-y-8">
    <h1 class="text-4xl font-extrabold text-center mb-10 tracking-tight text-wood-900 dark:text-wood-100 drop-shadow-lg leading-tight">
      <span class="block">Property Activity</span> Insights
    </h1>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Quick Stats Card -->
      <div class="md:col-span-1 bg-gradient-to-br from-stone-50 to-stone-100 dark:from-stone-800 dark:to-stone-900 p-6 rounded-3xl shadow-xl border border-stone-200 dark:border-stone-700 transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
        <div class="relative flex flex-col items-center justify-center h-full">
          <div class="absolute inset-0 bg-gradient-to-br from-stone-200/50 to-stone-200/30 dark:from-stone-700/50 dark:to-stone-700/30 rounded-3xl -z-10 group-hover:blur-sm transition-all duration-300" style="transform: translateZ(-10px); filter: blur(5px); opacity: 0.7; "></div>
          <h2 class="text-xl font-bold mb-4 text-wood-700 dark:text-wood-200">Quick Stats</h2>
          <ul class="space-y-3 text-center text-lg">
            <li class="flex items-center justify-center font-semibold text-wood-800 dark:text-wood-100">
              <svg class="w-6 h-6 mr-2 text-green-600 dark:text-green-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="M7 12l3 3 7-7m-8 6a4 4 0 11-8 0 4 4 0 018 0zm6 0a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
              New Listings: <span class="ml-2 text-2xl font-extrabold text-green-700 dark:text-green-300">23</span>
            </li>
            <li class="flex items-center justify-center font-semibold text-wood-800 dark:text-wood-100">
              <svg class="w-6 h-6 mr-2 text-blue-600 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0-8H9m3 0h3m-3 6a9 9 0 100-18 9 9 0 000 18z"></path></svg>
              Interests: <span class="ml-2 text-2xl font-extrabold text-blue-700 dark:text-blue-300">189</span>
            </li>
            <li class="flex items-center justify-center font-semibold text-wood-800 dark:text-wood-100">
              <svg class="w-6 h-6 mr-2 text-yellow-600 dark:text-yellow-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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
              Sold: <span class="ml-2 text-2xl font-extrabold text-yellow-700 dark:text-yellow-300">5</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- Recent Activity Feed -->
      <div class="md:col-span-2 bg-gradient-to-br from-stone-50 to-stone-100 dark:from-stone-800 dark:to-stone-900 p-6 rounded-3xl shadow-xl border border-stone-200 dark:border-stone-700 transition-all duration-300 ease-in-out">
        <h2 class="text-2xl font-bold mb-6 text-wood-700 dark:text-wood-200 text-center">Recent Activity</h2>
        <div class="space-y-6 relative ml-4 sm:ml-6 md:ml-12 border-l-4 border-wood-400 dark:border-wood-600">

          <!-- Activity Item 1 -->
          <div class="relative flex items-start group">
            <div class="absolute -left-6 sm:-left-8 md:-left-12 top-0 flex items-center justify-center w-10 h-10 bg-wood-500 rounded-full shadow-lg border-2 border-stone-50 dark:border-wood-800 z-10 transition-transform duration-300 group-hover:scale-110">
              <svg class="w-6 h-6 text-white" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
            </div>
            <div class="ml-6 sm:ml-8 md:ml-12 p-5 bg-stone-100 dark:bg-stone-800 rounded-2xl shadow-md transition-shadow duration-300 hover:shadow-lg w-full relative overflow-hidden transform translateZ(0)">
                <div class="absolute inset-0 bg-white/20 dark:bg-stone-700/20 rounded-2xl -z-10 group-hover:blur-sm transition-all duration-300" style="transform: translateZ(-5px); filter: blur(3px); opacity: 0.6;"></div>
              <p class="text-sm text-stone-500 dark:text-stone-400 mb-2">2 hours ago</p>
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-wood-400 dark:border-wood-600 shadow-md">
                <p class="font-semibold text-wood-700 dark:text-wood-200">John Doe</p>
              </div>
              <p class="text-stone-700 dark:text-stone-300 leading-relaxed">
                <span class="font-medium text-wood-600 dark:text-wood-300">Added a new listing:</span>
                <a href="#" class="font-bold text-lg text-brown-700 dark:text-brown-300 hover:underline ml-1">Luxurious Riverside Villa</a> and detailed its amenities.
              </p>
              <img src="https://picsum.photos/400/250?random=1" alt="Property Image" class="mt-4 rounded-xl shadow-lg w-full max-h-48 object-cover object-center border border-stone-200 dark:border-stone-700">
            </div>
          </div>

          <!-- Activity Item 2 -->
          <div class="relative flex items-start group">
            <div class="absolute -left-6 sm:-left-8 md:-left-12 top-0 flex items-center justify-center w-10 h-10 bg-wood-500 rounded-full shadow-lg border-2 border-stone-50 dark:border-wood-800 z-10 transition-transform duration-300 group-hover:scale-110">
              <svg class="w-6 h-6 text-white" 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 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13h5m-5 3h5m-5 3h5"></path></svg>
            </div>
            <div class="ml-6 sm:ml-8 md:ml-12 p-5 bg-stone-100 dark:bg-stone-800 rounded-2xl shadow-md transition-shadow duration-300 hover:shadow-lg w-full relative overflow-hidden transform translateZ(0)">
                <div class="absolute inset-0 bg-white/20 dark:bg-stone-700/20 rounded-2xl -z-10 group-hover:blur-sm transition-all duration-300" style="transform: translateZ(-5px); filter: blur(3px); opacity: 0.6;"></div>
              <p class="text-sm text-stone-500 dark:text-stone-400 mb-2">4 hours ago</p>
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/7.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-wood-400 dark:border-wood-600 shadow-md">
                <p class="font-semibold text-wood-700 dark:text-wood-200">Jane Smith</p>
              </div>
              <p class="text-stone-700 dark:text-stone-300 leading-relaxed">
                <span class="font-medium text-wood-600 dark:text-wood-300">Updated property status:</span>
                <a href="#" class="font-bold text-lg text-brown-700 dark:text-brown-300 hover:underline ml-1">Cozy Downtown Apartment</a> is now 'Under Offer'.
              </p>
            </div>
          </div>

          <!-- Activity Item 3 -->
          <div class="relative flex items-start group">
            <div class="absolute -left-6 sm:-left-8 md:-left-12 top-0 flex items-center justify-center w-10 h-10 bg-wood-500 rounded-full shadow-lg border-2 border-stone-50 dark:border-wood-800 z-10 transition-transform duration-300 group-hover:scale-110">
              <svg class="w-6 h-6 text-white" 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 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            </div>
            <div class="ml-6 sm:ml-8 md:ml-12 p-5 bg-stone-100 dark:bg-stone-800 rounded-2xl shadow-md transition-shadow duration-300 hover:shadow-lg w-full relative overflow-hidden transform translateZ(0)">
                <div class="absolute inset-0 bg-white/20 dark:bg-stone-700/20 rounded-2xl -z-10 group-hover:blur-sm transition-all duration-300" style="transform: translateZ(-5px); filter: blur(3px); opacity: 0.6;"></div>
              <p class="text-sm text-stone-500 dark:text-stone-400 mb-2">1 day ago</p>
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-wood-400 dark:border-wood-600 shadow-md">
                <p class="font-semibold text-wood-700 dark:text-wood-200">Emily White</p>
              </div>
              <p class="text-stone-700 dark:text-stone-300 leading-relaxed">
                <span class="font-medium text-wood-600 dark:text-wood-300">Left a new review for:</span>
                <a href="#" class="font-bold text-lg text-brown-700 dark:text-brown-300 hover:underline ml-1">Spacious Family Home</a>.
                "The agent was very helpful and knowledgeable!"
              </p>
            </div>
          </div>

          <!-- Activity Item 4 -->
          <div class="relative flex items-start group">
            <div class="absolute -left-6 sm:-left-8 md:-left-12 top-0 flex items-center justify-center w-10 h-10 bg-wood-500 rounded-full shadow-lg border-2 border-stone-50 dark:border-wood-800 z-10 transition-transform duration-300 group-hover:scale-110">
              <svg class="w-6 h-6 text-white" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>
            <div class="ml-6 sm:ml-8 md:ml-12 p-5 bg-stone-100 dark:bg-stone-800 rounded-2xl shadow-md transition-shadow duration-300 hover:shadow-lg w-full relative overflow-hidden transform translateZ(0)">
                <div class="absolute inset-0 bg-white/20 dark:bg-stone-700/20 rounded-2xl -z-10 group-hover:blur-sm transition-all duration-300" style="transform: translateZ(-5px); filter: blur(3px); opacity: 0.6;"></div>
              <p class="text-sm text-stone-500 dark:text-stone-400 mb-2">2 days ago</p>
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/9.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-wood-400 dark:border-wood-600 shadow-md">
                <p class="font-semibold text-wood-700 dark:text-wood-200">Michael Brown</p>
              </div>
              <p class="text-stone-700 dark:text-stone-300 leading-relaxed">
                <span class="font-medium text-wood-600 dark:text-wood-300">Scheduled a viewing for:</span>
                <a href="#" class="font-bold text-lg text-brown-700 dark:text-brown-300 hover:underline ml-1">Modern City Loft</a> on October 26th.
              </p>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom styles for Earth Tones with 'wood' and 'brown' shades */
  .text-wood-900 { color: #3E2723; }
  .dark\:text-wood-100 { color: #D7CCC8; }
  .text-wood-700 { color: #5D4037; }
  .dark\:text-wood-200 { color: #BCAAA4; }
  .text-wood-800 { color: #4E342E; }
  .dark\:text-wood-100 { color: #D7CCC8; }
  .bg-wood-500 { background-color: #795548; }
  .border-wood-400 { border-color: #8D6E63; }
  .dark\:border-wood-600 { border-color: #6D4C41; }
  .dark\:border-wood-800 { border-color: #4E342E; }
  .border-wood-400 { border-color: #8D6E63; }
  .dark\:border-wood-600 { border-color: #6D4C41; }
  .border-l-4 { border-left-color: #8D6E63; }
  .dark\:border-wood-600 { border-left-color: #6D4C41; }
  .text-wood-600 { color: #6D4C41; }
  .dark\:text-wood-300 { color: #A1887F; }
  .text-brown-700 { color: #7B3F00; /* Darker brown for emphasis */ }
  .dark\:text-brown-300 { color: #CDA27C; /* Lighter brown for dark mode emphasis */ }

  /* 3D Transform and Shadow Adjustments (Perspective required on parent for actual 3D effect) */
  /* Add a perspective to a parent element if you want true 3D transforms */
  /* For this component, we'll apply it to a container, or assume body has it for general use */
  body {
    perspective: 1000px;
  }
</style>