すべてのコンポーネント

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-500">

  <h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-200 mb-8 tracking-tight text-center">
    Loading...
  </h2>

  <!-- Skeuomorphic Loader Container -->
  <div class="relative w-full max-w-sm h-20 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(0,0,0,0.3),5px_5px_15px_rgba(0,0,0,0.2)] dark:shadow-[inset_2px_2px_5px_rgba(255,255,255,0.1),inset_-2px_-2px_8px_rgba(0,0,0,0.9),5px_5px_15px_rgba(0,0,0,0.5)] p-4 border border-solid border-gray-400 dark:border-gray-600 transition-all duration-500 animate-pulse-subtle flex flex-col justify-center items-center">
    
    <!-- Inner Bezel/Recess -->
    <div class="relative w-full h-12 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 rounded-xl shadow-[inset_1px_1px_3px_rgba(0,0,0,0.2),inset_-1px_-1px_3px_rgba(255,255,255,0.7)] dark:shadow-[inset_1px_1px_3px_rgba(255,255,255,0.05),inset_-1px_-1px_3px_rgba(0,0,0,0.9)] p-2 transition-all duration-500">
      
      <!-- Loading Bar Track -->
      <div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded-lg overflow-hidden shadow-inner-dark transition-colors duration-500">
        
        <!-- Loading Progress Bar (complementary color - often orange/yellow or green) -->
        <div class="h-full bg-gradient-to-r from-orange-400 to-amber-500 dark:from-orange-500 dark:to-amber-600 rounded-lg animate-loading-bar origin-left shadow-[0_0_8px_rgba(251,146,60,0.8)] dark:shadow-[0_0_10px_rgba(249,115,22,0.6)]" style="width: 75%;">
        </div>
      </div>
    </div>
    
    <p class="absolute -bottom-6 text-sm text-gray-600 dark:text-gray-400 font-medium whitespace-nowrap overflow-hidden">
      Preparing resources...
    </p>

  </div>

  <style>
    @keyframes loading-bar {
      0% { width: 0%; transform: translateX(-100%); opacity: 0.5; }
      25% { width: 50%; transform: translateX(0%); opacity: 0.8; }
      50% { width: 100%; opacity: 1; }
      75% { width: 50%; transform: translateX(50%); opacity: 0.8; }
      100% { width: 0%; transform: translateX(100%); opacity: 0.5; }
    }

    .animate-loading-bar {
      animation: loading-bar 2s ease-in-out infinite alternate;
    }

    @keyframes pulse-subtle {
      0%, 100% { transform: scale(1); filter: brightness(1); }
      50% { transform: scale(1.01); filter: brightness(1.05); }
    }

    .animate-pulse-subtle {
      animation: pulse-subtle 3s ease-in-out infinite;
    }

    /* Custom utility for inner dark shadow to mimic depth */
    .shadow-inner-dark {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    }
    .dark .shadow-inner-dark {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
    }
  </style>

</div>
              

                <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">

  <!-- Header Section -->
  <div class="flex flex-col sm:flex-row justify-between items-center mb-8 gap-4">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100">Dashboard Overview</h1>
    <div class="flex items-center space-x-4">
      <button class="flex items-center space-x-2 px-4 py-2 bg-purple-600 text-white rounded-lg shadow-lg hover:bg-purple-700 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
        <svg class="w-5 h-5" 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 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
        <span class="text-sm font-medium">Add Widget</span>
      </button>
      <button class="p-2 rounded-full bg-yellow-500 text-white hover:bg-yellow-600 active:scale-95 transition-all duration-200 shadow-md focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50">
        <svg class="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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
      </button>
      <img class="w-9 h-9 rounded-full border-2 border-yellow-500 transform hover:scale-105 active:scale-90 transition duration-200 cursor-pointer" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
    </div>
  </div>

  <!-- Main Grid Area -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-max">

    <!-- Metric Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 flex flex-col justify-between transform hover:scale-103 transition-all duration-300 group overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="flex justify-between items-start mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Total Sales</h3>
        <svg class="w-6 h-6 text-purple-500 group-hover:text-purple-600 transition-colors 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="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M18 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-9-9a2 2 0 100-4 2 2 0 000 4zm0 2a2 2 0 100 4 2 2 0 000-4zm0 4a2 2 0 100 4 2 2 0 000-4z"></path></svg>
      </div>
      <p class="text-4xl font-bold text-gray-900 dark:text-gray-50 mb-2 group-hover:text-purple-700 dark:group-hover:text-purple-400 transition-colors duration-200">$12,345</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">+5.2% from last month
        <span class="inline-block ml-1 text-green-500 group-hover:animate-bounce-faded">
          <svg class="w-4 h-4" 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="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
        </span>
      </p>
    </div>

    <!-- Metric Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 flex flex-col justify-between transform hover:scale-103 transition-all duration-300 group overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="flex justify-between items-start mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">New Users</h3>
        <svg class="w-6 h-6 text-yellow-500 group-hover:text-yellow-600 transition-colors 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 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M17 20v-2c0-.653-.134-1.282-.387-1.857M12 11a4 4 0 110-8 4 4 0 010 8zm0 1c1.332 0 2.502.593 3.327 1.488L15 15h2l-2 4h-1l-2 4h-2l-2 4H6l-2-4H3l-2-4h2l2-4h2l3-3.003L12 12z"></path></svg>
      </div>
      <p class="text-4xl font-bold text-gray-900 dark:text-gray-50 mb-2 group-hover:text-yellow-700 dark:group-hover:text-yellow-400 transition-colors duration-200">789</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">+12% from last week
        <span class="inline-block ml-1 text-green-500 group-hover:animate-bounce-faded">
           <svg class="w-4 h-4" 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="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
        </span>
      </p>
    </div>

    <!-- Metric Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 flex flex-col justify-between transform hover:scale-103 transition-all duration-300 group overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="flex justify-between items-start mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Active Projects</h3>
        <svg class="w-6 h-6 text-green-500 group-hover:text-green-600 transition-colors 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <p class="text-4xl font-bold text-gray-900 dark:text-gray-50 mb-2 group-hover:text-green-700 dark:group-hover:text-green-400 transition-colors duration-200">23</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">All on track
        <span class="inline-block ml-1 text-blue-500 group-hover:animate-ping-once">
           <svg class="w-4 h-4" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </span>
      </p>
    </div>

    <!-- Activity Feed -->
    <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Recent Activity</h3>
      <ul class="space-y-4">
        <li class="flex items-center space-x-3 group animate-appear-from-left animation-delay-100">
          <img class="w-9 h-9 rounded-full border-2 border-purple-500" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100"><span class="font-medium text-purple-600 dark:text-purple-400">Jane Doe</span> updated a project <span class="text-yellow-600 dark:text-yellow-400 font-medium hover:underline cursor-pointer">'Website Redesign'</span>.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
          </div>
          <button class="p-1 rounded-full text-gray-400 dark:text-gray-500 invisible group-hover:visible hover:text-purple-600 dark:hover:text-purple-400 transitino-colors duration-200">
            <svg class="w-5 h-5" 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
          </button>
        </li>
        <li class="flex items-center space-x-3 group animate-appear-from-left animation-delay-200">
          <img class="w-9 h-9 rounded-full border-2 border-yellow-500" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100"><span class="font-medium text-yellow-600 dark:text-yellow-400">John Smith</span> commented on task <span class="text-green-600 dark:text-green-400 font-medium hover:underline cursor-pointer">'Implement API'</span>.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
          </div>
           <button class="p-1 rounded-full text-gray-400 dark:text-gray-500 invisible group-hover:visible hover:text-yellow-600 dark:hover:text-yellow-400 transitino-colors duration-200">
            <svg class="w-5 h-5" 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
          </button>
        </li>
        <li class="flex items-center space-x-3 group animate-appear-from-left animation-delay-300">
          <img class="w-9 h-9 rounded-full border-2 border-green-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100"><span class="font-medium text-green-600 dark:text-green-400">Alice Green</span> completed task <span class="text-purple-600 dark:text-purple-400 font-medium hover:underline cursor-pointer">'Design mockups'</span>.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
          </div>
           <button class="p-1 rounded-full text-gray-400 dark:text-gray-500 invisible group-hover:visible hover:text-green-600 dark:hover:text-green-400 transitino-colors duration-200">
            <svg class="w-5 h-5" 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
          </button>
        </li>
      </ul>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Quick Actions</h3>
      <div class="grid grid-cols-2 gap-4">
        <button class="flex flex-col items-center justify-center p-4 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-lg shadow-md hover:shadow-lg hover:translate-y-[-2px] active:translate-y-[0px] transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
          <svg class="w-8 h-8 mb-2 group-hover:rotate-6 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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
          <span class="text-sm font-medium">Generate Report</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded-lg shadow-md hover:shadow-lg hover:translate-y-[-2px] active:translate-y-[0px] transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">
          <svg class="w-8 h-8 mb-2 group-hover:animate-wiggle" 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 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v11a2 2 0 002 2h10a2 2 0 002-2v-3"></path></svg>
          <span class="text-sm font-medium">New Document</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-lg shadow-md hover:shadow-lg hover:translate-y-[-2px] active:translate-y-[0px] transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
          <svg class="w-8 h-8 mb-2 group-hover:animate-pulse-slow" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
          <span class="text-sm font-medium">Edit Profile</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-lg shadow-md hover:shadow-lg hover:translate-y-[-2px] active:translate-y-[0px] transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          <svg class="w-8 h-8 mb-2 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
          <span class="text-sm font-medium">Send Message</span>
        </button>
      </div>
    </div>

    <!-- Image Card -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden transform hover:scale-103 transition-all duration-300 relative group">
      <img class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" src="https://picsum.photos/600/400?random=1" alt="Placeholder Image">
      <div class="p-6">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Project Progress</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400">Visual representation of current project milestones and achievements.</p>
      </div>
      <button class="absolute bottom-4 right-4 p-2 bg-purple-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-50">
        <svg class="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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
      </button>
    </div>

    <!-- Calendar/Schedule Card -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700 lg:col-span-2">
      <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Upcoming Schedule</h3>
      <div class="space-y-4">
        <div class="flex items-start space-x-4 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <div class="flex-none w-10 h-10 bg-purple-500 text-white rounded-full flex items-center justify-center text-sm font-bold group-hover:scale-110 transition-transform duration-200">
            <p>10<br><span class="text-xs font-normal">AM</span></p>
          </div>
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100 font-medium">Team Sync Meeting</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Project Alpha, Video Call</p>
          </div>
          <button class="flex-none text-gray-400 dark:text-gray-500 hover:text-purple-600 dark:hover:text-purple-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
            <svg class="w-5 h-5" 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>
          </button>
        </div>
        <div class="flex items-start space-x-4 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <div class="flex-none w-10 h-10 bg-yellow-500 text-white rounded-full flex items-center justify-center text-sm font-bold group-hover:scale-110 transition-transform duration-200">
            <p>02<br><span class="text-xs font-normal">PM</span></p>
          </div>
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100 font-medium">Client Review Session</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Client XYZ, Office Mtg Room</p>
          </div>
          <button class="flex-none text-gray-400 dark:text-gray-500 hover:text-yellow-600 dark:hover:text-yellow-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
            <svg class="w-5 h-5" 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 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
          </button>
        </div>
        <div class="flex items-start space-x-4 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <div class="flex-none w-10 h-10 bg-green-500 text-white rounded-full flex items-center justify-center text-sm font-bold group-hover:scale-110 transition-transform duration-200">
            <p>04<br><span class="text-xs font-normal">PM</span></p>
          </div>
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100 font-medium">Code Review: Feature X</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Development Team</p>
          </div>
          <button class="flex-none text-gray-400 dark:text-gray-500 hover:text-green-600 dark:hover:text-green-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
            <svg class="w-5 h-5" 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>
          </button>
        </div>
      </div>
    </div>

  </div>

  <!-- Tailwind JIT custom animations (add to tailwind.config.js) -->
  <style>
    @keyframes bounce-faded {
      0%, 100% { transform: translateY(0); opacity: 1; }
      50% { transform: translateY(-5px); opacity: 0.8; }
    }
    .animate-bounce-faded {
      animation: bounce-faded 0.8s ease-in-out infinite;
    }

    @keyframes ping-once {
      75%, 100% { transform: scale(2); opacity: 0; }
    }
    .animate-ping-once {
      animation: ping-once 1s cubic-bezier(0, 0, 0.2, 1);
    }

    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(3deg); }
      50% { transform: rotate(-3deg); }
      75% { transform: rotate(2deg); }
    }
    .animate-wiggle {
      animation: wiggle 0.4s ease-in-out infinite;
    }

    @keyframes pulse-slow {
      0%, 100% { opacity: 1; }
      50% { opacity: .5; }
    }
    .animate-pulse-slow {
      animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes appear-from-left {
        0% { opacity: 0; transform: translateX(-20px); }
        100% { opacity: 1; transform: translateX(0); }
    }
    .animate-appear-from-left {
        animation: appear-from-left 0.5s ease-out forwards;
    }

    .animation-delay-100 { animation-delay: 0.1s; }
    .animation-delay-200 { animation-delay: 0.2s; }
    .animation-delay-300 { animation-delay: 0.3s; }
  </style>

</div>
              

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-gray-900 dark:via-purple-950 dark:to-blue-950 p-4">
  <div class="relative w-full max-w-sm overflow-hidden rounded-xl shadow-lg backdrop-blur-md border border-white border-opacity-30 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50 p-6 flex flex-col items-center text-center">
    <!-- Frosted Glass Effect -->
    <div class="absolute inset-0 bg-white bg-opacity-10 dark:bg-gray-700 dark:bg-opacity-10 pointer-events-none transform -skew-y-3 scale-150"></div>

    <div class="relative z-10">
      <img class="w-24 h-24 rounded-full border-4 border-white border-opacity-40 shadow-md transform transition-transform duration-300 hover:scale-105" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
      <h3 class="mt-4 text-xl font-semibold text-gray-800 dark:text-gray-100">Alice Johnson</h3>
      <p class="text-sm text-gray-600 dark:text-gray-300">Frontend Developer</p>

      <div class="flex justify-center space-x-4 mt-5">
        <a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-300 dark:hover:text-purple-500 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.47.087.686-.208.686-.464 0-.232-.005-.865-.011-1.696-2.793.602-3.393-1.341-3.393-1.341-.454-1.156-1.11-1.46-1.11-1.46-.908-.619.069-.605.069-.605 1.004.07 1.532 1.03 1.532 1.03.892 1.529 2.341 1.089 2.91.833.091-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.931 0-1.091.39-1.984 1.029-2.682-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.025.798-.222 1.637-.333 2.475-.337.838.004 1.677.115 2.475.337 1.909-1.295 2.747-1.025 2.747-1.025.546 1.379.202 2.398.099 2.65.64.698 1.028 1.591 1.028 2.682 0 3.829-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.334-.012 2.41-.012 2.737 0 .259.208.567.694.463C21.133 20.19 24 16.425 24 12.017 24 6.484 19.522 2 14 2h-2z"/>
          </svg>
        </a>
        <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-300 dark:hover:text-blue-500 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M19.633 7.997c-.013-.306-.026-.61-.048-.914-.078-1.066-1.062-2.05-2.128-2.128-.304-.022-.608-.035-.914-.048-1.503-.06-3.007-.06-4.51 0-1.503.06-3.007.06-4.51 0-.306.013-.61.026-.914.048-1.066.078-2.05 1.062-2.128 2.128-.078.304-.09.608-.103.914-.047 1.503-.047 3.007 0 4.51.013.306.026.61.048.914.078 1.066 1.062 2.05 2.128 2.128.304.022.608.035.914.048 1.503.06 3.007.06 4.51 0 1.503-.06 3.007-.06 4.51 0 .306-.013.61-.026.914-.048 1.066-.078 2.05-1.062 2.128-2.128.078-.304.09-.608.103-.914.047-1.503.047-3.007 0-4.51zm-2.106-3.844c.484 0 .878.394.878.878s-.394.878-.878.878-.878-.394-.878-.878.394-.878.878-.878zM12 9.098c-1.603 0-2.902 1.299-2.902 2.902s1.299 2.902 2.902 2.902 2.902-1.299 2.902-2.902-1.299-2.902-2.902-2.902z"/>
          </svg>
        </a>
        <a href="#" class="text-cyan-600 hover:text-cyan-800 dark:text-cyan-300 dark:hover:text-cyan-500 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M18.273 2.043l-4.512 8.799H9.421L4.898 2.043H2.5A.5.5 0 002 2.543v18.736a.5.5 0 00.5.5h2.247a.5.5 0 00.5-.5V12.72L10.37 21.057h3.94l4.985-8.318v7.62a.5.5 0 00.5.5h2.247a.5.5 0 00.5-.5V2.543a.5.5 0 00-.5-.5h-2.247a.5.5 0 00-.5.5v7.05h-.002l-4.636-7.05h-2.738z"/>
          </svg>
        </a>
      </div>

      <div class="mt-6 flex justify-around w-full">
        <div class="p-2">
          <p class="text-lg font-bold text-gray-800 dark:text-gray-100">1.2K</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Followers</p>
        </div>
        <div class="p-2">
          <p class="text-lg font-bold text-gray-800 dark:text-gray-100">350</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Following</p>
        </div>
      </div>
    </div>
  </div>
</div>
              

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl bg-gradient-to-br from-indigo-200 to-purple-300 dark:from-indigo-800 dark:to-purple-900 border border-indigo-300 dark:border-purple-700
              transform transition-all duration-300 hover:scale-105 hover:shadow-2xl
              relative overflow-hidden group">

    <!-- Background Blips for Skeuomorphism -->
    <div class="absolute top-[-20px] left-[-20px] w-20 h-20 bg-indigo-400 dark:bg-purple-600 rounded-full opacity-30 blur-2xl group-hover:scale-150 transition-transform"></div>
    <div class="absolute bottom-[-20px] right-[-20px] w-24 h-24 bg-purple-400 dark:bg-indigo-600 rounded-full opacity-30 blur-2xl group-hover:scale-150 transition-transform"></div>

    <h2 class="text-center text-3xl font-extrabold text-indigo-900 dark:text-white mb-6
               relative drop-shadow-md">
      <span class="relative z-10">Login</span>
      <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full opacity-10 blur-xl"></span>
    </h2>

    <p class="text-center text-gray-700 dark:text-gray-300 mb-8">
      Join us to access exclusive content and features.
    </p>

    <div class="space-y-4">
      <!-- Google Button -->
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-xl
                     bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200
                     shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2
                     focus:ring-indigo-500 dark:focus:ring-purple-500
                     transform transition-all duration-200
                     hover:-translate-y-0.5 active:translate-y-0 active:shadow-md
                     border border-gray-200 dark:border-gray-700
                     relative overflow-hidden">
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-gray-50 to-gray-200 dark:from-gray-700 dark:to-gray-900 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3 z-10" viewBox="0 0 24 24" fill="currentColor">
          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h6.15c-.24 1.34-.9 2.45-1.92 3.23v2.8h3.69c2.16-2 3.42-4.93 3.42-8.24z" fill="#4285F4"></path>
          <path d="M12 23c3.27 0 6.02-1.08 8.03-2.91l-3.69-2.8c-1 .67-2.3 1.07-4.34 1.07-3.33 0-6.1-2.22-7.12-5.21H.9v2.87C2.98 20.58 7.15 23 12 23z" fill="#34A853"></path>
          <path d="M4.88 14.16c-.1-.3-.16-.62-.16-.96s.06-.66.16-.96V9.33H.9C.33 10.44 0 11.68 0 12.97s.33 2.53.9 3.64l3.98-3.9z" fill="#FBBC05"></path>
          <path d="M12 5.03c1.77 0 3.3.61 4.54 1.79l3.24-3.24C18.02 1.84 15.27 0 12 0 7.15 0 2.98 2.42.9 6.01l3.98 3.09c1.02-2.99 3.79-5.21 7.12-5.21z" fill="#EA4335"></path>
        </svg>
        <span class="font-semibold z-10">Sign in with Google</span>
      </button>

      <!-- Facebook Button -->
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-xl
                     bg-blue-600 dark:bg-blue-800 text-white
                     shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2
                     focus:ring-blue-500 dark:focus:ring-blue-700
                     transform transition-all duration-200
                     hover:-translate-y-0.5 active:translate-y-0 active:shadow-md
                     border border-blue-700 dark:border-blue-900
                     relative overflow-hidden">
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-blue-700 to-blue-500 dark:from-blue-900 dark:to-blue-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3 z-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
          <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.909c0-.818.062-1.491 1.092-1.491h2.908v-5h-4c-4.473 0-5 3.159-5 5.258v2.742z"></path>
        </svg>
        <span class="font-semibold z-10">Sign in with Facebook</span>
      </button>

      <!-- Email login option -->
      <div class="relative flex py-5 items-center">
        <div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
        <span class="flex-shrink mx-4 text-gray-600 dark:text-gray-400 font-medium">Or</span>
        <div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
      </div>

      <button class="w-full flex items-center justify-center py-3 px-4 rounded-xl
                     bg-indigo-600 dark:bg-purple-600 text-white
                     shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2
                     focus:ring-indigo-700 dark:focus:ring-purple-700
                     transform transition-all duration-200
                     hover:-translate-y-0.5 active:translate-y-0 active:shadow-md
                     border border-indigo-700 dark:border-purple-700
                     relative overflow-hidden">
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-700 to-purple-500 dark:from-purple-800 dark:to-indigo-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3 z-10" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
        <span class="font-semibold z-10">Sign in with Email</span>
      </button>
    </div>

    <p class="mt-8 text-center text-gray-700 dark:text-gray-300 text-sm">
      Don't have an account? 
      <a href="#" class="font-bold text-indigo-700 dark:text-purple-400 hover:underline
                          transform transition-colors duration-200 hover:text-indigo-900 dark:hover:text-purple-300">
        Sign up
      </a>
    </p>
  </div>
</div>
              

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-200 to-pink-200 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">

  <div class="relative w-full max-w-md mx-auto group perspective-1000px">
    <div class="relative preserve-3d transition-transform duration-700 ease-in-out group-hover:rotate-x-3 rotate-y-3">

      <div class="relative z-10 w-full p-4 sm:p-5 md:p-6 rounded-3xl backdrop-blur-md bg-white/30 dark:bg-gray-700/30 shadow-2xl overflow-hidden
                  border border-white/50 dark:border-gray-600/50
                  transform transition-all duration-300 ease-in-out
                  hover:scale-[1.02] hover:shadow-cyan-500/50 dark:hover:shadow-purple-500/50">

        <!-- Glassmorphism Overlay Effect -->
        <div class="absolute inset-0 z-0 pointer-events-none
                    bg-gradient-to-br from-white/40 to-white/10 dark:from-gray-800/40 dark:to-gray-900/10
                    rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

        <h2 class="relative z-10 text-xl sm:text-2xl font-extrabold text-purple-800 dark:text-pink-400 mb-4 tracking-tight">
          Recent Mentions
        </h2>

        <div class="relative z-10 space-y-3">

          <!-- Mention Item 1 -->
          <div class="relative p-3 rounded-xl bg-white/40 dark:bg-gray-800/40 backdrop-blur-sm
                      flex items-center space-x-3 transition-transform transform hover:scale-[1.01] duration-200
                      group/item border border-white/60 dark:border-gray-700/60
                      hover:shadow-lg hover:shadow-purple-300/40 dark:hover:shadow-pink-700/30">
            <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-purple-500 dark:ring-pink-400 object-cover transform transition-transform duration-300 group-hover/item:scale-105"
                 src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
            <div class="flex-1">
              <p class="font-semibold text-purple-900 dark:text-white text-sm sm:text-base leading-tight">
                @<span class="text-blue-700 dark:text-cyan-400">user_galore</span> mentioned you in a post
              </p>
              <p class="text-gray-700 dark:text-gray-300 text-xs sm:text-sm mt-1 line-clamp-1">
                "Great insights on the new #webdev framework! Thanks for sharing..."
              </p>
              <span class="text-xs text-gray-500 dark:text-gray-400 block mt-1">2 hours ago</span>
            </div>
          </div>

          <!-- Mention Item 2 -->
          <div class="relative p-3 rounded-xl bg-white/40 dark:bg-gray-800/40 backdrop-blur-sm
                      flex items-center space-x-3 transition-transform transform hover:scale-[1.01] duration-200
                      group/item border border-white/60 dark:border-gray-700/60
                      hover:shadow-lg hover:shadow-cyan-300/40 dark:hover:shadow-indigo-700/30">
            <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-pink-500 dark:ring-cyan-400 object-cover transform transition-transform duration-300 group-hover/item:scale-105"
                 src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div class="flex-1">
              <p class="font-semibold text-purple-900 dark:text-white text-sm sm:text-base leading-tight">
                @<span class="text-blue-700 dark:text-cyan-400">dev_wizard</span> replied to your comment
              </p>
              <p class="text-gray-700 dark:text-gray-300 text-xs sm:text-sm mt-1 line-clamp-1">
                "That's a valid point, I agree with your assessment. Looking forward to..."
              </p>
              <span class="text-xs text-gray-500 dark:text-gray-400 block mt-1">5 hours ago</span>
            </div>
          </div>

          <!-- Mention Item 3 -->
          <div class="relative p-3 rounded-xl bg-white/40 dark:bg-gray-800/40 backdrop-blur-sm
                      flex items-center space-x-3 transition-transform transform hover:scale-[1.01] duration-200
                      group/item border border-white/60 dark:border-gray-700/60
                      hover:shadow-lg hover:shadow-green-300/40 dark:hover:shadow-teal-700/30">
            <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-lime-500 dark:ring-green-400 object-cover transform transition-transform duration-300 group-hover/item:scale-105"
                 src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
            <div class="flex-1">
              <p class="font-semibold text-purple-900 dark:text-white text-sm sm:text-base leading-tight">
                @<span class="text-blue-700 dark:text-cyan-400">code_ninja</span> included you in a photo
              </p>
              <p class="text-gray-700 dark:text-gray-300 text-xs sm:text-sm mt-1 line-clamp-1">
                "Team selfie from the hackathon! Good job everyone, especially..."
              </p>
              <span class="text-xs text-gray-500 dark:text-gray-400 block mt-1">1 day ago</span>
            </div>
          </div>

        </div>

        <button class="relative z-10 w-full mt-6 py-3 px-4 rounded-xl
                       bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-700
                       text-white font-bold text-base sm:text-lg
                       transition-all duration-300 ease-in-out
                       shadow-lg hover:shadow-xl hover:shadow-purple-400/50 dark:hover:shadow-pink-800/50
                       transform hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-300 dark:focus:ring-pink-600">
          View All Mentions
        </button>

      </div>

      <!-- Background Glow/Aura (for Glassmorphism depth) -->
      <div class="absolute -inset-1 sm:-inset-2 md:-inset-3 rounded-3xl bg-gradient-to-br from-pink-400 to-cyan-400 dark:from-purple-600 dark:to-red-600
                  filter blur-3xl opacity-70 dark:opacity-60 mix-blend-multiply
                  transform translate-z-[-20px] scale-95 transition-all duration-500 ease-in-out
                  group-hover:opacity-100 group-hover:scale-100 group-hover:blur-4xl"></div>

    </div>
  </div>

</div>

<style>
  /* Adding custom styles for 3D effect in Tailwind CSS */
  .perspective-1000px {
    perspective: 1000px;
  }

  .preserve-3d {
    transform-style: preserve-3d;
  }

  .rotate-y-3 {
    transform: rotateY(3deg);
  }

  .group-hover\:rotate-x-3:hover {
    transform: rotateX(3deg) scaleZ(1.02);
  }

  .group-hover\:rotate-y-3:hover {
    transform: rotateY(3deg);
  }

  .translate-z-\[-20px\] {
    transform: translateZ(-20px);
  }

  .backdrop-blur-md {
    backdrop-filter: blur(12px);
  }

  @media (min-width: 640px) {
    .backdrop-blur-md {
      backdrop-filter: blur(16px);
    }
  }

  @media (min-width: 768px) {
    .backdrop-blur-md {
      backdrop-filter: blur(20px);
    }
  }

  .blur-4xl {
    filter: blur(64px);
  }
</style>
              

                <div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-800 font-sans antialiased text-gray-800 dark:text-gray-200 transition-colors duration-300">

  <div class="max-w-4xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- Infographic Card 1: Sales -->
    <div class="group p-6 rounded-3xl shadow-xl bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-gray-700 dark:to-gray-900 
                shadow-gray-300/60 dark:shadow-gray-900/60 
                dark:hover:shadow-indigo-700/50 
                hover:shadow-indigo-300/80 transition-all duration-300 transform 
                hover:-translate-y-1 hover:scale-105
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-600 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl"></div>
      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="w-16 h-16 rounded-full bg-indigo-200 dark:bg-indigo-600 flex items-center justify-center mb-4 
                    shadow-inner shadow-indigo-300/40 dark:shadow-indigo-900/40 
                    group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 transition-colors duration-300">
          <svg class="w-8 h-8 text-indigo-700 dark:text-indigo-200 group-hover:text-indigo-800 dark:group-hover:text-indigo-100" 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="M11 3.055A9.001 9.001 0 0119 12h-8V3.055z">
            </path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z">
            </path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-indigo-800 dark:text-indigo-200">+25% Sales Growth</h3>
        <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">Year-over-year increase in total sales volume. A strong indication of market expansion and product demand.</p>
      </div>
    </div>

    <!-- Infographic Card 2: Customers -->
    <div class="group p-6 rounded-3xl shadow-xl bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-900 
                shadow-gray-300/60 dark:shadow-gray-900/60 
                dark:hover:shadow-purple-700/50 
                hover:shadow-purple-300/80 transition-all duration-300 transform 
                hover:-translate-y-1 hover:scale-105
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-600 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl"></div>
      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="w-16 h-16 rounded-full bg-purple-200 dark:bg-purple-600 flex items-center justify-center mb-4 
                    shadow-inner shadow-purple-300/40 dark:shadow-purple-900/40 
                    group-hover:bg-purple-300 dark:group-hover:bg-purple-700 transition-colors duration-300">
          <svg class="w-8 h-8 text-purple-700 dark:text-purple-200 group-hover:text-purple-800 dark:group-hover:text-purple-100" 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 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2h5m0-9a4 4 0 110-8 4 4 0 010 8zm-2 10l3-3m0 0l3 3m-3-3v8"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-purple-800 dark:text-purple-200">50k+ Happy Customers</h3>
        <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">Our growing community of satisfied buyers. Building trust and loyalty with exceptional service and products.</p>
      </div>
    </div>

    <!-- Infographic Card 3: Ratings -->
    <div class="group p-6 rounded-3xl shadow-xl bg-gradient-to-br from-pink-100 to-rose-100 dark:from-gray-700 dark:to-gray-900 
                shadow-gray-300/60 dark:shadow-gray-900/60 
                dark:hover:shadow-rose-700/50 
                hover:shadow-rose-300/80 transition-all duration-300 transform 
                hover:-translate-y-1 hover:scale-105
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-pink-50 to-rose-50 dark:from-gray-600 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl"></div>
      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="w-16 h-16 rounded-full bg-pink-200 dark:bg-pink-600 flex items-center justify-center mb-4 
                    shadow-inner shadow-pink-300/40 dark:shadow-pink-900/40 
                    group-hover:bg-pink-300 dark:group-hover:bg-pink-700 transition-colors duration-300">
          <svg class="w-8 h-8 text-pink-700 dark:text-pink-200 group-hover:text-pink-800 dark:group-hover:text-pink-100" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 2.5l2.69 5.5l6.09.88l-4.41 4.3l1.04 6.07L10 18.27l-5.41 2.85l1.04-6.07l-4.41-4.3l6.09-.88L10 2.5z" clip-rule="evenodd"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-pink-800 dark:text-pink-200">4.9/5 Average Rating</h3>
        <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">Consistently high product ratings from verified purchases. Reflecting superior quality and user satisfaction.</p>
      </div>
    </div>

  </div>

</div>
              

                <div class="p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen bg-gradient-to-br from-emerald-50 to-purple-50 dark:from-zinc-900 dark:to-slate-950 transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:shadow-3xl hover:-translate-y-1 relative group">

    <!-- Header & File Info -->
    <div class="p-4 sm:p-6 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
      <div class="flex items-center gap-4">
        <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-gradient-to-br from-emerald-500 to-lime-500 dark:from-emerald-600 dark:to-lime-600 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-105">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="currentColor">
            <path d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2ZM18 20V9H13V4.5L18 9Z" />
          </svg>
        </div>
        <div>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white transition-colors duration-300">Project_Report_Q3_Final.pdf</h2>
          <p class="text-sm text-gray-500 dark:text-gray-400 transition-colors duration-300">PDF Document • 4.8 MB</p>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <button class="relative p-2 rounded-full bg-emerald-50 text-emerald-600 dark:bg-emerald-900 dark:text-emerald-300 hover:bg-emerald-100 dark:hover:bg-emerald-800 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 group-hover:scale-110 group-hover:rotate-6">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM13 16H11V10H13V16ZM13 8H11V6H13V8Z" />
          </svg>
          <span class="sr-only">Info</span>
          <span class="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-max px-2 py-1 bg-gray-800 text-white text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">File Info</span>
        </button>
        <button class="relative p-2 rounded-full bg-purple-50 text-purple-600 dark:bg-purple-900 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-800 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 group-hover:scale-110 group-hover:-rotate-6">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 17L16 11H13V5H11V11H8L12 17ZM5 20H19V18H5V20Z" />
          </svg>
          <span class="sr-only">Download</span>
          <span class="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-max px-2 py-1 bg-gray-800 text-white text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">Download</span>
        </button>
      </div>
    </div>

    <!-- Main Content Area: Preview & Details -->
    <div class="md:flex">
      <!-- File Preview (Left/Top) -->
      <div class="md:w-3/5 p-4 sm:p-6 bg-gray-50 dark:bg-gray-850 flex items-center justify-center min-h-[250px] sm:min-h-[300px] md:min-h-[400px] lg:min-h-[500px] relative overflow-hidden">
        <img src="https://picsum.photos/seed/filepreview/800/600" alt="File Preview" class="object-contain max-w-full max-h-full rounded-md shadow-lg transform transition-transform duration-500 group-hover:scale-105 group-hover:brightness-110">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-50/50 via-transparent to-gray-50/50 dark:from-gray-850/50 dark:via-transparent dark:to-gray-850/50 transition-opacity duration-300 opacity-0 group-hover:opacity-100"></div>
      </div>

      <!-- File Details & Actions (Right/Bottom) -->
      <div class="md:w-2/5 p-4 sm:p-6 bg-white dark:bg-gray-800 flex flex-col justify-between">
        <div>
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-4 border-b pb-2 border-gray-100 dark:border-gray-700">Details & Activity</h3>
          <ul class="space-y-3 text-sm text-gray-700 dark:text-gray-300">
            <li class="flex justify-between items-center">
              <span class="font-medium">Type:</span>
              <span class="px-2 py-0.5 bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 rounded-full text-xs">PDF</span>
            </li>
            <li class="flex justify-between items-center">
              <span class="font-medium">Size:</span>
              <span>4.8 MB</span>
            </li>
            <li class="flex justify-between items-center">
              <span class="font-medium">Uploaded:</span>
              <span>October 26, 2023, 10:30 AM</span>
            </li>
            <li class="flex justify-between items-center">
              <span class="font-medium">Last Modified:</span>
              <span>November 1, 2023, 03:15 PM</span>
            </li>
            <li>
              <span class="font-medium block mb-1">Access:</span>
              <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 1" class="w-8 h-8 rounded-full border-2 border-emerald-400 transform transition-transform duration-300 hover:scale-125 hover:z-10">
                <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User 2" class="w-8 h-8 rounded-full border-2 border-purple-400 transform transition-transform duration-300 hover:scale-125 hover:z-10">
                <img src="https://randomuser.me/api/portraits/men/82.jpg" alt="User 3" class="w-8 h-8 rounded-full border-2 border-orange-400 transform transition-transform duration-300 hover:scale-125 hover:z-10">
                <span class="text-xs text-gray-500 dark:text-gray-400">+5 others</span>
              </div>
            </li>
          </ul>

          <div class="mt-6 sm:mt-8">
            <h4 class="font-semibold text-gray-900 dark:text-white mb-3">Recent Activity</h4>
            <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-2">
              <li class="flex items-start gap-3 relative before:content-[''] before:absolute before:left-1.5 before:top-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-purple-300 before:to-emerald-300 ">
                <span class="w-3 h-3 rounded-full bg-purple-500 dark:bg-purple-400 flex-shrink-0 mt-1 z-[1]"></span>
                <div>
                  <p><span class="font-medium text-gray-800 dark:text-white">Anna Smith</span> shared the file.</p>
                  <time datetime="2023-11-01T15:15:00" class="text-xs">2 hours ago</time>
                </div>
              </li>
              <li class="flex items-start gap-3 relative before:content-[''] before:absolute before:left-1.5 before:top-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-purple-300 before:to-emerald-300 ">
                <span class="w-3 h-3 rounded-full bg-emerald-500 dark:bg-emerald-400 flex-shrink-0 mt-1 z-[1]"></span>
                <div>
                  <p><span class="font-medium text-gray-800 dark:text-white">You</span> uploaded the file.</p>
                  <time datetime="2023-10-26T10:30:00" class="text-xs">6 days ago</time>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div class="mt-8 flex flex-col sm:flex-row gap-3">
          <button class="relative flex-1 py-3 px-6 rounded-lg bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700 text-white font-semibold transition-all duration-300 transform active:scale-95 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-75 group/btn-preview">
            <span class="relative z-10">Open in Editor</span>
            <span class="absolute inset-0 bg-emerald-400 opacity-0 group-hover/btn-preview:opacity-20 transition-opacity duration-200 rounded-lg"></span>
            <span class="absolute right-3 top-1/2 -translate-y-1/2 group-hover/btn-preview:translate-x-1 transition-transform duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M8.59 16.59L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.59Z"/></svg>
            </span>
          </button>
          <button class="relative flex-1 py-3 px-6 rounded-lg bg-purple-500 hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700 text-white font-semibold transition-all duration-300 transform active:scale-95 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75 group/btn-share">
            <span class="relative z-10">Share</span>
            <span class="absolute inset-0 bg-purple-400 opacity-0 group-hover/btn-share:opacity-20 transition-opacity duration-200 rounded-lg"></span>
            <span class="absolute right-3 top-1/2 -translate-y-1/2 group-hover/btn-share:translate-x-1 transition-transform duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M18 16.08C17.24 16.08 16.56 16.37 16.04 16.85L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.96 7.15C16.44 7.63 17.12 7.92 18 7.92C19.66 7.92 21 6.58 21 5C21 3.34 19.66 2 18 2S15 3.34 15 5C15 5.24 15.04 5.47 15.09 5.7L8.04 9.85C7.56 9.37 6.88 9.08 6 9.08C4.34 9.08 3 10.42 3 12S4.34 14.92 6 14.92C6.88 14.92 7.56 14.63 8.04 14.15L15.09 18.3C15.04 18.53 15 18.76 15 19C15 20.66 16.34 22 18 22S21 20.66 21 19C21 17.34 19.66 16.08 18 16.08Z"/></svg>
            </span>
          </button>
        </div>

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

                <div class="p-4 sm:p-8 md:p-12 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-6xl p-6 md:p-10 rounded-3xl shadow-xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-950 border border-gray-300 dark:border-gray-700
      flex flex-col lg:flex-row gap-8 lg:gap-12 relative overflow-hidden
      after:content-[''] after:absolute after:inset-0 after:rounded-3xl after:ring-4 after:ring-inset after:ring-white dark:after:ring-gray-800 after:ring-opacity-40 after:pointer-events-none after:z-10">

    <!-- Main Media Display Area -->
    <div class="flex-1 flex flex-col items-center justify-center p-4 sm:p-6 md:p-8
        rounded-2xl shadow-inner-xl bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800
        relative group overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-950 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <div class="relative z-10 w-full h-full min-h-[300px] md:min-h-[400px] lg:min-h-[500px] flex items-center justify-center">
        <img src="https://picsum.photos/1200/800?random=1" alt="Main Media Content" class="rounded-xl shadow-lg border border-gray-400 dark:border-gray-600 object-cover w-full h-full">
        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <button class="p-4 rounded-full bg-gray-700 bg-opacity-70 text-white shadow-lg animate-pulse
                         hover:bg-gray-800 hover:bg-opacity-80 transition-colors duration-300
                         focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-60">
            <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
              <path d="M8 5v14l11-7z"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="absolute bottom-4 left-4 right-4 p-3 rounded-xl bg-gray-800 bg-opacity-70 text-white font-mono text-sm
                  shadow-xl dark:border dark:border-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <div class="flex items-center justify-between">
          <span class="truncate">nature-mountains_adventure.jpg</span>
          <svg class="w-5 h-5 ml-2" 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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Right Sidebar: Details & Controls -->
    <div class="lg:w-2/5 xl:w-1/3 flex flex-col gap-6">

      <!-- Section: Media Information -->
      <div class="p-6 rounded-2xl shadow-xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-950 border border-gray-300 dark:border-gray-700
          relative after:content-[''] after:absolute after:inset-0 after:rounded-2xl after:ring-2 after:ring-inset after:ring-white dark:after:ring-gray-800 after:ring-opacity-40">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Media Information</h3>
        <dl class="text-sm text-gray-700 dark:text-gray-300 space-y-2">
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Title:</dt>
            <dd class="ml-4">Serene Mountain Landscape</dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Type:</dt>
            <dd class="ml-4">Image (JPEG)</dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Resolution:</dt>
            <dd class="ml-4">1920x1280</dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Size:</dt>
            <dd class="ml-4">2.1 MB</dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Uploaded By:</dt>
            <dd class="ml-4 flex items-center">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Uploader" class="w-6 h-6 rounded-full mr-2 shadow-sm border border-gray-400 dark:border-gray-600">
              John Doe
            </dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Date:</dt>
            <dd class="ml-4">2023-10-26</dd>
          </div>
        </dl>
      </div>

      <!-- Section: Action Controls -->
      <div class="p-6 rounded-2xl shadow-xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-950 border border-gray-300 dark:border-gray-700
          relative after:content-[''] after:absolute after:inset-0 after:rounded-2xl after:ring-2 after:ring-inset after:ring-white dark:after:ring-gray-800 after:ring-opacity-40">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Actions</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <button class="flex items-center justify-center px-4 py-3 rounded-xl 
                         bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 
                         text-gray-800 dark:text-gray-200 font-semibold shadow-md border border-gray-400 dark:border-gray-600
                         hover:from-gray-400 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-700 hover:shadow-lg transition-all duration-200
                         active:shadow-inner active:from-gray-500 active:to-gray-400 dark:active:from-gray-800 dark:active:to-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-50">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"></path>
            </svg>
            Preview
          </button>
          <button class="flex items-center justify-center px-4 py-3 rounded-xl 
                         bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 
                         text-gray-800 dark:text-gray-200 font-semibold shadow-md border border-gray-400 dark:border-gray-600
                         hover:from-gray-400 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-700 hover:shadow-lg transition-all duration-200
                         active:shadow-inner active:from-gray-500 active:to-gray-400 dark:active:from-gray-800 dark:active:to-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-50">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
              <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path>
            </svg>
            Download
          </button>
          <button class="flex items-center justify-center px-4 py-3 rounded-xl sm:col-span-2
                         bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 
                         text-gray-800 dark:text-gray-200 font-semibold shadow-md border border-gray-400 dark:border-gray-600
                         hover:from-gray-400 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-700 hover:shadow-lg transition-all duration-200
                         active:shadow-inner active:from-gray-500 active:to-gray-400 dark:active:from-gray-800 dark:active:to-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-50">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
              <path d="M16 12l-4 4-4-4M12 20v-8M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            Share Link
          </button>
        </div>
      </div>

      <!-- Section: Tags/Categories -->
      <div class="p-6 rounded-2xl shadow-xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-950 border border-gray-300 dark:border-gray-700
          relative after:content-[''] after:absolute after:inset-0 after:rounded-2xl after:ring-2 after:ring-inset after:ring-white dark:after:ring-gray-800 after:ring-opacity-40">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Tags & Categories</h3>
        <div class="flex flex-wrap gap-2">
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Nature
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Landscape
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Mountains
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Outdoor
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Photography
          </span>
        </div>
      </div>

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

                <section class="py-16 sm:py-20 bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-4">
        Find Us On The Map
      </h2>
      <p class="text-lg sm:xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
        Visit our office or get in touch through our contact details below. We look forward to connecting with you.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
      <!-- Map Placeholder -->
      <div class="relative rounded-lg overflow-hidden shadow-xl dark:shadow-2xl aspect-video w-full">
        <img src="https://picsum.photos/1200/800?grayscale&blur=2" alt="Placeholder map of our location" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/50 to-transparent"></div>
        <div class="absolute bottom-4 left-4 right-4 p-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-md shadow-lg text-sm sm:text-base">
          <p class="font-semibold text-gray-900 dark:text-white mb-1">Our Global Headquarters</p>
          <p class="text-gray-700 dark:text-gray-300">123 Business Avenue, Suite 100, Metropolis City, Country 12345</p>
        </div>
      </div>

      <!-- Contact Information -->
      <div class="bg-white dark:bg-gray-800 p-8 sm:p-10 rounded-lg shadow-xl dark:shadow-2xl overflow-hidden">
        <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-6">
          Get In Touch
        </h3>
        <ul class="space-y-6">
          <li class="flex items-start">
            <svg class="h-7 w-7 text-gray-500 dark:text-gray-400 mr-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-lg">Address:</p>
              <p class="text-gray-700 dark:text-gray-300">123 Maple Street, Business District, Cityville, State 01234</p>
            </div>
          </li>
          <li class="flex items-start">
            <svg class="h-7 w-7 text-gray-500 dark:text-gray-400 mr-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
            </svg>
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-lg">Phone:</p>
              <a href="tel:+1234567890" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-200">+1 (234) 567-890</a>
            </div>
          </li>
          <li class="flex items-start">
            <svg class="h-7 w-7 text-gray-500 dark:text-gray-400 mr-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-lg">Email:</p>
              <a href="mailto:[email protected]" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-200">[email protected]</a>
            </div>
          </li>
        </ul>
        <div class="mt-8">
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
            Get Directions
            <svg class="ml-3 -mr-1 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17.525 17.525A7.989 7.989 0 0012 3c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.072 0 3.999-.74 5.485-1.975L19 21l2-2-3.475-3.475z" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>
              

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="group relative flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold
    bg-emerald-500 text-white
    hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700
    transition-all duration-300 ease-in-out
    overflow-hidden
    shadow-lg hover:shadow-xl
    dark:bg-emerald-600 dark:hover:bg-emerald-700">
    <span class="relative z-10 transition-transform duration-300 ease-in-out group-hover:-translate-x-full opacity-100 group-hover:opacity-0 whitespace-nowrap">
      Add to Cart
    </span>
    <span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
      transition-transform duration-300 ease-in-out
      text-purple-200 dark:text-purple-300
      bg-purple-600 dark:bg-purple-700
      rounded-full
      scale-y-0 group-hover:scale-y-100
      opacity-0 group-hover:opacity-100
      group-hover:px-6 group-hover:py-3">
      <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
      </svg>
      Added!
    </span>
    <span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
      transition-transform duration-300 ease-in-out delay-150
      text-orange-200 dark:text-orange-300
      bg-orange-500 dark:bg-orange-600
      rounded-full
      scale-y-0 group-hover:scale-y-100
      opacity-0 group-hover:opacity-100
      group-hover:px-6 group-hover:py-3
      hidden">
      <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.703.707 1.703H17m0-10a2 2 0 110 4 2 2 0 010-4zm-7 4a2 2 0 110 4 2 2 0 010-4z" />
      </svg>
      Adding...
    </span>
  </button>
</div>