Tous les composants

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-900 font-sans">

  <!-- Main Container -->
  <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-8 max-w-sm w-full transform transition-all duration-300 ease-in-out hover:scale-105 border-4 border-yellow-400 dark:border-red-600">
    
    <!-- Header -->
    <div class="text-center mb-8">
      <div class="w-16 h-16 bg-red-500 rounded-full mx-auto flex items-center justify-center mb-4 text-white text-3xl font-bold dark:bg-red-700 transform rotate-45">
        <span class="transform -rotate-45">❤️</span>
      </div>
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-2 tracking-wide">
        MatchPoint
      </h2>
      <p class="text-md text-gray-600 dark:text-gray-400">
        Find your perfect connection.
      </p>
    </div>

    <!-- Tabs for Login/Signup -->
    <div class="flex mb-6 bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
      <button class="flex-1 py-3 px-4 text-center text-md font-semibold rounded-md transition-colors duration-200 ease-in-out bg-yellow-400 text-gray-900 dark:bg-yellow-600 dark:text-white">
        Login
      </button>
      <button class="flex-1 py-3 px-4 text-center text-md font-medium text-gray-700 dark:text-gray-300 rounded-md transition-colors duration-200 ease-in-out hover:bg-gray-200 dark:hover:bg-gray-600">
        Sign Up
      </button>
    </div>

    <!-- Form Area -->
    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
          Email Address
        </label>
        <input id="email" name="email" type="email" autocomplete="email" required
               class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400
                      focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500
                      bg-gray-50 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400
                      sm:text-sm transition-colors duration-200">
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
          Password
        </label>
        <input id="password" name="password" type="password" autocomplete="current-password" required
               class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400
                      focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500
                      bg-gray-50 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400
                      sm:text-sm transition-colors duration-200">
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox"
                 class="h-4 w-4 text-red-500 focus:ring-red-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700">
          <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
            Remember me
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
            Forgot your password?
          </a>
        </div>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-bold text-white
                       bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
                       dark:bg-red-700 dark:hover:bg-red-600 dark:focus:ring-red-700 transition-colors duration-200 transform hover:-translate-y-0.5">
          Sign In
        </button>
      </div>
    </form>

    <!-- Separator -->
    <div class="mt-8 relative">
      <div class="absolute inset-0 flex items-center">
        <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
      </div>
      <div class="relative flex justify-center text-sm">
        <span class="px-2 bg-white text-gray-500 dark:bg-gray-800 dark:text-gray-400">
          Or continue with
        </span>
      </div>
    </div>

    <!-- Social Login Buttons -->
    <div class="mt-6 grid grid-cols-2 gap-3">
      <div>
        <button type="button"
                class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700
                       bg-yellow-100 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500
                       dark:bg-yellow-800 dark:border-yellow-700 dark:text-white dark:hover:bg-yellow-900
                       transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18H11.5v-6H10v-2.25h1.5V8.5c0-1.298.591-2.022 2.05-2.022h2.25v2.25h-1.5c-.3 0-.75.075-.75.75v1.072h2.25l-.3 2.25h-1.95V18z" />
          </svg>
          Facebook
        </button>
      </div>
      <div>
        <button type="button"
                class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700
                       bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
                       dark:bg-blue-800 dark:border-blue-700 dark:text-white dark:hover:bg-blue-900
                       transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.35C0 23.407.593 24 1.325 24h21.35c.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0zM7.5 20.5H4V9h3.5v11.5zM5.75 7.5a1.75 1.75 0 110-3.5 1.75 1.75 0 010 3.5zm14 13H17V14c0-1.85-.82-2.93-2.16-2.93C13.56 11.07 13 12.06 13 13.5v7H9.5V9h3.5v1.5c.57-.96 1.48-1.52 2.7-1.52C17.26 9 18 10.3 18 13.2V20.5h2.5V13.2c0-3.26-2.12-4.7-4.9-4.7-2.3 0-3.9 1.25-4.13 2.1z" />
          </svg>
          LinkedIn
        </button>
      </div>
    </div>
  </div>
</div>
              

                <section class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gray-900 text-gray-200 dark:bg-gray-950 dark:text-gray-100 font-sans">
  <div class="max-w-7xl mx-auto space-y-10">

    <!-- Header Section -->
    <header class="flex flex-col md:flex-row items-center justify-between pb-8 border-b border-purple-700/50 dark:border-purple-800/50">
      <h1 class="text-4xl sm:text-5xl font-extrabold text-blue-400 dark:text-blue-300 mb-4 md:mb-0">Student Feedback Hub</h1>
      <div class="flex items-center space-x-4">
        <input type="search" placeholder="Search feedback..." class="px-4 py-2 rounded-lg bg-gray-800 dark:bg-gray-800 border border-teal-500/50 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-teal-400 focus:border-transparent transition duration-300">
        <button class="px-5 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white font-semibold transition duration-300 shadow-lg hover:shadow-xl">
          Give New Feedback
        </button>
      </div>
    </header>

    <!-- Feedback Categories/Filter Section -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <div class="p-5 rounded-xl bg-gradient-to-br from-blue-700 to-blue-900 dark:from-blue-800 dark:to-blue-950 shadow-xl border border-blue-600/50 dark:border-blue-700/50 text-center">
        <p class="text-blue-200 text-sm uppercas text-gray-200">Total Feedback</p>
        <p class="text-4xl font-bold mt-2 text-white">1,245</p>
      </div>
      <div class="p-5 rounded-xl bg-gradient-to-br from-teal-700 to-teal-900 dark:from-teal-800 dark:to-teal-950 shadow-xl border border-teal-600/50 dark:border-teal-700/50 text-center">
        <p class="text-teal-200 text-sm uppercase text-gray-200">Positive</p>
        <p class="text-4xl font-bold mt-2 text-white">890</p>
      </div>
      <div class="p-5 rounded-xl bg-gradient-to-br from-purple-700 to-purple-900 dark:from-purple-800 dark:to-purple-950 shadow-xl border border-purple-600/50 dark:border-purple-700/50 text-center">
        <p class="text-purple-200 text-sm uppercase text-gray-200">Suggestions</p>
        <p class="text-4xl font-bold mt-2 text-white">210</p>
      </div>
      <div class="p-5 rounded-xl bg-gradient-to-br from-red-700 to-red-900 dark:from-red-800 dark:to-red-950 shadow-xl border border-red-600/50 dark:border-red-700/50 text-center">
        <p class="text-red-200 text-sm uppercase text-gray-200">Concerns</p>
        <p class="text-4xl font-bold mt-2 text-white">145</p>
      </div>
    </div>

    <!-- Main Feedback Content Area -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

      <!-- Left Sidebar - Filters & Categories -->
      <aside class="md:col-span-1 space-y-6">
        <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-gray-700/50 dark:border-gray-800/50">
          <h3 class="text-xl font-bold mb-4 text-blue-400 dark:text-blue-300">Filter by Category</h3>
          <ul class="space-y-3">
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg bg-gray-700/50 hover:bg-gray-700 dark:bg-gray-800/50 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Course Content <span class="text-xs bg-purple-600 px-2 py-1 rounded-full text-white">80</span></a></li>
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Instructor Performance <span class="text-xs bg-teal-600 px-2 py-1 rounded-full text-white">65</span></a></li>
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Platform Usability <span class="text-xs bg-blue-600 px-2 py-1 rounded-full text-white">40</span></a></li>
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Technical Support <span class="text-xs bg-red-600 px-2 py-1 rounded-full text-white">15</span></a></li>
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">General <span class="text-xs bg-gray-600 px-2 py-1 rounded-full text-white">120</span></a></li>
          </ul>
        </div>

        <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-gray-700/50 dark:border-gray-800/50">
          <h3 class="text-xl font-bold mb-4 text-purple-400 dark:text-purple-300">Filter by Rating</h3>
          <div class="flex items-center space-x-3 mb-3">
            <input type="range" min="1" max="5" value="4" class="flex-grow h-2 rounded-lg appearance-none cursor-pointer bg-blue-600/50 dark:bg-blue-700/50 accent-blue-500">
            <span class="text-gray-300">4+ Stars</span>
          </div>
          <ul class="space-y-2">
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">5 Stars</span></label></li>
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500" checked> <span class="text-gray-300">4 Stars</span></label></li>
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">3 Stars</span></label></li>
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">2 Stars</span></label></li>
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">1 Star</span></label></li>
          </ul>
        </div>
      </aside>

      <!-- Right Content - Feedback Cards -->
      <div class="md:col-span-2 space-y-6">

        <!-- Feedback Card 1 (Positive) -->
        <article class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-teal-600/50 dark:border-teal-700/50">
          <div class="flex justify-between items-start mb-4">
            <div class="flex items-center space-x-4">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-teal-500 dark:ring-teal-600">
              <div>
                <h4 class="font-semibold text-white">Alex Johnson</h4>
                <p class="text-sm text-gray-400">Course: Advanced CSS & Tailwind</p>
              </div>
            </div>
            <div class="text-teal-400 flex items-center space-x-1">
              <span>5</span>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.113 1.178-5.875 5.728 1.389 8.082L12 18.06l-7.279 3.827 1.389-8.082-5.875-5.728 8.113-1.178L12 .587z"/></svg>
            </div>
          </div>
          <p class="text-gray-300 leading-relaxed mb-4">"This course was absolutely fantastic! The explanations were clear, and the hands-on projects really solidified my understanding of Tailwind CSS. Highly recommend it to anyone looking to master modern web design."</p>
          <div class="flex flex-wrap gap-2 text-sm">
            <span class="px-3 py-1 rounded-full bg-teal-700/50 text-teal-200">#CourseContent</span>
            <span class="px-3 py-1 rounded-full bg-teal-700/50 text-teal-200">#Excellent</span>
            <span class="px-3 py-1 rounded-full bg-teal-700/50 text-teal-200">#Practical</span>
          </div>
          <div class="flex items-center justify-between mt-4 text-gray-400">
            <span class="text-sm">Posted 2 days ago</span>
            <button class="text-blue-400 hover:text-blue-300 transition duration-300">View Details</button>
          </div>
        </article>

        <!-- Feedback Card 2 (Suggestion) -->
        <article class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-purple-600/50 dark:border-purple-700/50">
          <div class="flex justify-between items-start mb-4">
            <div class="flex items-center space-x-4">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-purple-500 dark:ring-purple-600">
              <div>
                <h4 class="font-semibold text-white">Sarah Chen</h4>
                <p class="text-sm text-gray-400">Course: JavaScript Fundamentals</p>
              </div>
            </div>
            <div class="text-purple-400 flex items-center space-x-1">
              <span>4</span>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.113 1.178-5.875 5.728 1.389 8.082L12 18.06l-7.279 3.827 1.389-8.082-5.875-5.728 8.113-1.178L12 .587z"/></svg>
            </div>
          </div>
          <p class="text-gray-300 leading-relaxed mb-4">"The JS course is solid, but I think adding more interactive coding challenges directly within the platform would significantly enhance the learning experience. Sometimes switching between platforms disrupts the flow."</p>
          <div class="flex flex-wrap gap-2 text-sm">
            <span class="px-3 py-1 rounded-full bg-purple-700/50 text-purple-200">#PlatformUsability</span>
            <span class="px-3 py-1 rounded-full bg-purple-700/50 text-purple-200">#Suggestion</span>
            <span class="px-3 py-1 rounded-full bg-purple-700/50 text-purple-200">#Engagement</span>
          </div>
          <div class="flex items-center justify-between mt-4 text-gray-400">
            <span class="text-sm">Posted 5 days ago</span>
            <button class="text-blue-400 hover:text-blue-300 transition duration-300">View Details</button>
          </div>
        </article>

        <!-- Feedback Card 3 (Concern/Bug Report) -->
        <article class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-red-600/50 dark:border-red-700/50">
          <div class="flex justify-between items-start mb-4">
            <div class="flex items-center space-x-4">
              <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-red-500 dark:ring-red-600">
              <div>
                <h4 class="font-semibold text-white">Marcus Hill</h4>
                <p class="text-sm text-gray-400">Course: Data Structures & Algorithms</p>
              </div>
            </div>
            <div class="text-red-400 flex items-center space-x-1">
              <span>2</span>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.113 1.178-5.875 5.728 1.389 8.082L12 18.06l-7.279 3.827 1.389-8.082-5.875-5.728 8.113-1.178L12 .587z"/></svg>
            </div>
          </div>
          <p class="text-gray-300 leading-relaxed mb-4">"I've encountered multiple broken links in the 'Further Reading' section of Module 3. It's frustrating to try and access resources only to find they're unavailable. Please update these links."</p>
          <div class="flex flex-wrap gap-2 text-sm">
            <span class="px-3 py-1 rounded-full bg-red-700/50 text-red-200">#TechnicalSupport</span>
            <span class="px-3 py-1 rounded-full bg-red-700/50 text-red-200">#BrokenLinks</span>
            <span class="px-3 py-1 rounded-full bg-red-700/50 text-red-200">#Urgent</span>
          </div>
          <div class="flex items-center justify-between mt-4 text-gray-400">
            <span class="text-sm">Posted 1 week ago</span>
            <button class="text-blue-400 hover:text-blue-300 transition duration-300">View Details</button>
          </div>
        </article>

      </div>
    </div>

    <!-- Pagination / Load More -->
    <div class="flex justify-center mt-10">
      <button class="px-6 py-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition duration-300 shadow-lg hover:shadow-xl">
        Load More Feedback
      </button>
    </div>

  </div>
</section>
              

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-orange-100 to-amber-200 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans">

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

    <!-- User Mention Card 1 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 group p-6 sm:p-8 overflow-hidden
                before:absolute before:inset-0 before:bg-gradient-to-br before:from-orange-500 before:to-red-700 before:opacity-0 group-hover:before:opacity-20 before:rounded-3xl before:transition-opacity before:duration-300
                after:absolute after:inset-0 after:rounded-3xl after:ring-4 after:ring-orange-400 dark:after:ring-gray-600 after:ring-opacity-0 group-hover:after:ring-opacity-50 after:transition-all after:duration-300 z-10">

      <div class="relative z-20 flex flex-col items-center text-center">

        <div class="relative mb-4">
          <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full object-cover border-4 border-amber-400 dark:border-gray-500 shadow-md" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <span class="absolute bottom-1 right-1 block w-5 h-5 bg-green-500 border-2 border-white dark:border-gray-700 rounded-full animate-pulse"></span>
        </div>

        <h3 class="text-2xl sm:text-3xl font-extrabold text-orange-800 dark:text-orange-300 mb-1 leading-tight">Chloe Dubois</h3>
        <p class="text-md sm:text-lg text-amber-700 dark:text-amber-400 mb-4 font-semibold">Fashion Influencer</p>

        <div class="flex items-center space-x-2 text-amber-900 dark:text-amber-200 mb-5">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-lg sm:text-xl font-bold">56 Mentions</span>
        </div>

        <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mb-6 line-clamp-3">"Chloe's latest collection lookbook is absolutely stunning! The autumn palette is inspiring."</p>

        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border-2 border-orange-600 dark:border-orange-400 rounded-full text-base font-semibold text-orange-800 dark:text-orange-100 bg-orange-200 dark:bg-orange-700 hover:bg-orange-300 dark:hover:bg-orange-600 transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg">
          View Profile
          <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
        </a>
      </div>
    </div>

    <!-- User Mention Card 2 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 group p-6 sm:p-8 overflow-hidden
                before:absolute before:inset-0 before:bg-gradient-to-br before:from-red-600 before:to-purple-800 before:opacity-0 group-hover:before:opacity-20 before:rounded-3xl before:transition-opacity before:duration-300
                after:absolute after:inset-0 after:rounded-3xl after:ring-4 after:ring-red-500 dark:after:ring-gray-600 after:ring-opacity-0 group-hover:after:ring-opacity-50 after:transition-all after:duration-300 z-10">

      <div class="relative z-20 flex flex-col items-center text-center">

        <div class="relative mb-4">
          <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full object-cover border-4 border-red-400 dark:border-gray-500 shadow-md" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
          <span class="absolute bottom-1 right-1 block w-5 h-5 bg-green-500 border-2 border-white dark:border-gray-700 rounded-full animate-pulse"></span>
        </div>

        <h3 class="text-2xl sm:text-3xl font-extrabold text-red-800 dark:text-red-300 mb-1 leading-tight">Liam Harris</h3>
        <p class="text-md sm:text-lg text-red-700 dark:text-red-400 mb-4 font-semibold">Beauty Vlogger</p>

        <div class="flex items-center space-x-2 text-red-900 dark:text-red-200 mb-5">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-lg sm:text-xl font-bold">41 Mentions</span>
        </div>

        <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mb-6 line-clamp-3">"Liam's review of the new fall lipstick shades was so insightful. Must-see for beauty enthusiasts."</p>

        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border-2 border-red-600 dark:border-red-400 rounded-full text-base font-semibold text-red-800 dark:text-red-100 bg-red-200 dark:bg-red-700 hover:bg-red-300 dark:hover:bg-red-600 transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg">
          View Profile
          <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
        </a>
      </div>
    </div>

    <!-- User Mention Card 3 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 group p-6 sm:p-8 overflow-hidden
                before:absolute before:inset-0 before:bg-gradient-to-br before:from-yellow-500 before:to-orange-700 before:opacity-0 group-hover:before:opacity-20 before:rounded-3xl before:transition-opacity before:duration-300
                after:absolute after:inset-0 after:rounded-3xl after:ring-4 after:ring-amber-500 dark:after:ring-gray-600 after:ring-opacity-0 group-hover:after:ring-opacity-50 after:transition-all after:duration-300 z-10">

      <div class="relative z-20 flex flex-col items-center text-center">

        <div class="relative mb-4">
          <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full object-cover border-4 border-amber-400 dark:border-gray-500 shadow-md" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
          <span class="absolute bottom-1 right-1 block w-5 h-5 bg-green-500 border-2 border-white dark:border-gray-700 rounded-full animate-pulse"></span>
        </div>

        <h3 class="text-2xl sm:text-3xl font-extrabold text-orange-800 dark:text-orange-300 mb-1 leading-tight">Isabella Rossi</h3>
        <p class="text-md sm:text-lg text-amber-700 dark:text-amber-400 mb-4 font-semibold">Stylist & Designer</p>

        <div class="flex items-center space-x-2 text-amber-900 dark:text-amber-200 mb-5">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-lg sm:text-xl font-bold">38 Mentions</span>
        </div>

        <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mb-6 line-clamp-3">"Isabella's insights on seasonal fashion trends are always on point. A true style guru!"</p>

        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border-2 border-amber-600 dark:border-amber-400 rounded-full text-base font-semibold text-amber-800 dark:text-amber-100 bg-amber-200 dark:bg-amber-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg">
          View Profile
          <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
        </a>
      </div>
    </div>

  </div>
</div>
              

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

  <!-- Live/Now Playing Alert -->
  <div class="max-w-md mx-auto mb-6 bg-white dark:bg-gray-700 rounded-full shadow-lg p-3 flex items-center justify-between transition-all duration-300 ease-in-out hover:scale-105">
    <div class="flex items-center space-x-3">
      <div class="relative w-10 h-10">
        <img src="https://picsum.photos/id/1047/50/50" alt="Album Cover" class="w-full h-full object-cover rounded-full"/>
        <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-red-500 rounded-full animate-ping-slow"></div>
        <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-red-500 rounded-full"></div>
      </div>
      <div>
        <p class="text-sm font-semibold text-blue-800 dark:text-blue-200">Now Playing:</p>
        <p class="text-xs text-blue-600 dark:text-blue-300">"Groovy Tune" by Melodia Beats</p>
      </div>
    </div>
    <button class="p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-transform duration-200 transform hover:scale-110">
      <svg class="w-5 h-5 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
      </svg>
    </button>
  </div>

  <!-- Success Message -->
  <div class="max-w-md mx-auto mb-6 bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 text-white p-4 rounded-xl shadow-lg flex items-start space-x-4 transition-all duration-300 ease-in-out hover:rotate-1 hover:scale-105">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div>
      <h3 class="text-lg font-bold">Awesome! Playback Started!</h3>
      <p class="text-sm opacity-90">Your selected track is now streaming. Enjoy the vibes!</p>
    </div>
  </div>

  <!-- Warning Message -->
  <div class="max-w-md mx-auto mb-6 bg-yellow-300 dark:bg-yellow-700 text-yellow-900 dark:text-yellow-100 p-4 rounded-xl shadow-lg flex items-start space-x-4 transition-all duration-300 ease-in-out hover:-rotate-1 hover:scale-105">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-yellow-700 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div>
      <h3 class="text-lg font-bold">Heads Up! Data Usage Alert!</h3>
      <p class="text-sm opacity-90">You're on a mobile network. Streaming high-quality audio might eat up your data plan.</p>
    </div>
  </div>

  <!-- Error Message with Retry -->
  <div class="max-w-md mx-auto mb-6 bg-red-400 dark:bg-red-700 text-white p-4 rounded-xl shadow-lg flex items-start md:items-center space-x-4 transition-all duration-300 ease-in-out hover:animate-shake">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div class="flex-grow">
      <h3 class="text-lg font-bold">Oops! Playback Failed.</h3>
      <p class="text-sm opacity-90 mb-2 md:mb-0">Couldn't load your track. Please check your internet connection.</p>
    </div>
    <button class="flex-shrink-0 bg-white dark:bg-gray-800 text-red-600 dark:text-red-300 px-4 py-2 rounded-full font-semibold text-sm shadow hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
      Retry
    </button>
  </div>

  <!-- Info Message -->
  <div class="max-w-md mx-auto mb-6 bg-blue-200 dark:bg-blue-900 text-blue-800 dark:text-blue-200 p-4 rounded-xl shadow-lg flex items-start space-x-4 transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div>
      <h3 class="text-lg font-bold">New Feature: Shuffle Play!</h3>
      <p class="text-sm opacity-90">Discover personalized mixes with our new intelligent shuffle function.</p>
    </div>
  </div>

  <style>
  /* Custom keyframes for animation */
  @keyframes ping-slow {
    0% {
      transform: scale(0.6);
      opacity: 0.8;
    }
    100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }

  .animate-ping-slow {
    animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  /* Keyframes for shake animation */
  @keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(5px);
    }
  }

  .animate-shake {
    animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
  }
  </style>
</div>
              

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-lime-100 via-sky-100 to-fuchsia-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4 font-sans">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden backdrop-blur-sm bg-opacity-70 dark:bg-opacity-70 border border-lime-200 dark:border-gray-700 transform transition-all duration-300 hover:scale-105 group" style="box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), inset 0 0 50px rgba(255, 255, 255, 0.1);">
    <div class="relative p-8 text-center">
      <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10" style="background: radial-gradient(circle at center, #CCEEFF, transparent 70%), url('https://picsum.photos/600/400?blur=5') center center / cover no-repeat;"></div>
      <div class="relative z-10">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white capitalize leading-tight mb-2">
          Find Your Dream Home
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-6">
          Sign in to explore properties tailored for you.
        </p>
        <div class="space-y-4">
          <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold bg-gradient-to-r from-blue-500 to-blue-700 text-white shadow-xl hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition transform duration-300 active:scale-95 group-hover:drop-shadow-lg group-hover:scale-100 relative overflow-hidden group-hover:glow-blue" aria-label="Sign in with Facebook">
            <div class="absolute inset-0 bg-blue-500 opacity-20 pointer-events-none group-hover:neon-blue"></div>
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.812c-3.267 0-4.188 1.504-4.188 4.004v2.996z" />
            </svg>
            <span class="relative z-10">Continue with Facebook</span>
          </button>

          <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold bg-gradient-to-r from-red-500 to-red-700 text-white shadow-xl hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800 transition transform duration-300 active:scale-95 group-hover:drop-shadow-lg group-hover:scale-100 relative overflow-hidden group-hover:glow-red" aria-label="Sign in with Google">
            <div class="absolute inset-0 bg-red-500 opacity-20 pointer-events-none group-hover:neon-red"></div>
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 4.5c2.47 0 4.48 1.48 5.42 3.63L20.1 5.4C18.47 2.15 15.42 0 12 0 7.8 0 4.2 2.7 2.4 6.3l3.22 2.53C6.4 6.9 8.9 4.5 12 4.5zM24 12c0-.75-.07-1.49-.2-2.2L12 12V24h6c3.3 0 6-2.7 6-6 0-1.8-.8-3.4-2-4.5zM0 12c0 .75.07 1.49.2 2.2L12 12V0H6C2.7 0 0 2.7 0 6c0 1.8.8 3.4 2 4.5z" />
            </svg>
            <span class="relative z-10">Continue with Google</span>
          </button>
        </div>
        <p class="mt-6 text-xs text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-300">
          By signing in, you agree to our <a href="#" class="text-lime-600 dark:text-lime-400 font-medium hover:underline">Terms of Service</a> and <a href="#" class="text-lime-600 dark:text-lime-400 font-medium hover:underline">Privacy Policy</a>.
        </p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Neon Glow for Buttons */
  .group-hover\:neon-blue {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.8), inset 0 0 10px rgba(59, 130, 246, 0.5);
    transition: box-shadow 0.3s ease-in-out;
  }

  .group-hover\:neon-red {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.8), inset 0 0 10px rgba(239, 68, 68, 0.5);
    transition: box-shadow 0.3s ease-in-out;
  }

  /* Optional: Light glow for the card itself on hover */
  .group:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(255, 255, 255, 0.1), 0 0 30px rgba(163, 239, 59, 0.3) !important; /* Adding a subtle lime glow */
  }

  .dark .group:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 0 50px rgba(0, 0, 0, 0.2), 0 0 30px rgba(163, 239, 59, 0.3) !important;
  }
</style>
              

                <footer class="bg-gradient-to-r from-blue-900 to-indigo-900 text-blue-200 dark:from-gray-950 dark:to-gray-800 dark:text-gray-300 py-12 md:py-16 lg:py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 md:gap-12 lg:gap-16">

      <!-- Company Info & Logo -->
      <div class="lg:col-span-2 space-y-6">
        <a href="#" class="flex items-center space-x-3">
          <svg class="h-8 w-8 text-blue-400 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V5m0 0l-3 3m3-3l3 3M6.75 20h10.5c.75 0 1.5-.75 1.5-1.5V11.25c0-1.25-1-2.25-2.25-2.25H6.75C5.5 9 4.5 10.25 4.5 11.25v7.25c0 .75.75 1.5 1.5 1.5z" />
          </svg>
          <span class="text-3xl font-extrabold tracking-tight text-white dark:text-gray-100">AQUA</span><span class="text-3xl font-extrabold tracking-tight text-blue-300 dark:text-blue-400">DRIFT</span>
        </a>
        <p class="text-blue-300 dark:text-gray-400 leading-relaxed text-sm lg:text-base pr-8">
          Revolutionizing the way you manage and scale your digital presence with cutting-edge cloud solutions.
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-.03.01-.06.02-.09.03-.46.163-1.02.242-1.59.242-2.24 0-4.06-1.803-4.06-4.025 0-.75.21-1.427.67-2.008C3.77 14.1 4.7 15.657 6.24 16.7L7.2 16.27c.45.16 1 .25 1.56.25 2.23 0 4.04-1.79 4.04-4S10.55 8.25 8.32 8.25c-.56 0-1.12.09-1.57.25l-.94-.4.07-.1c.3-.59.7-1.15 1.18-1.6L8.29 20.251zm-5.75-8.5v.02c.03-.01.06-.02.09-.03.46-.163 1.02-.242 1.59-.242 2.24 0 4.06 1.803 4.06 4.025 0 .75-.21 1.427-.67 2.008-1.1.9-2.03 2.457-3.57 3.55l-1.05.47c-.45-.16-1-.25-1.56-.25-2.23 0-4.04 1.79-4.04 4S10.55 8.25 8.32 8.25c-.56 0-1.12.09-1.57.25l-.94-.4.07-.1c.3-.59.7-1.15 1.18-1.6L8.29 20.251z" />
              <path d="M8 0c4.417 0 8 3.582 8 8s-3.583 8-8 8-8-3.582-8-8 3.583-8 8-8zm0 2.2C4.1 2.2 1 5.3 1 9.2s3.1 7 7 7 7-3.1 7-7S11.9 2.2 8 2.2z" fill="#1da1f2" />
              <path d="M17.448 3.858c-.851.378-1.748.636-2.613.743.975-.583 1.724-1.503 2.072-2.593-.91.54-1.921.93-3.003 1.15a5.59 5.59 0 00-9.605 5.093c-4.664-.22-8.78-2.455-11.542-5.836C.68 6.968 1 8.878 2.2 9.489c-.7.01-1.35-.21-1.9-.53v.07c0 2.12 1.5 3.89 3.5 4.3c-.3.08-.6.12-.9.12-.2 0-.4 0-.6-.05.5 1.7 2.1 2.9 3.9 2.94-1.5 1.2-3.4 1.9-5.4 1.9-.3 0-.6 0-.8-.04C2.5 21.2 4.7 22 7.1 22c8.6 0 13-7.1 13-13 0-.2 0-.4 0-.6.9-2 1.7-4 2.2-6.1z" />
            </svg>
          </a>
          <a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.715.056 8.903.417 10.579 2.083 10.998 10.998.043.93.056 1.286.056 3.715 0 2.43-.013 2.784-.056 3.715-.417 8.903-2.083 10.579-10.998 10.998-.93.043-1.286.056-3.715.056-2.43 0-2.784-.013-3.715-.056-8.903-.417-10.579-2.083-10.998-10.998-.043-.93-.056-1.286-.056-3.715 0-2.43.013-2.784.056-3.715.417-8.903 2.083-10.579 10.998-10.998.93-.043 1.286-.056 3.715-.056zm0 2.18c-2.427 0-2.753.011-3.693.051-7.16 0-8.498 1.4-8.89 8.89-.04.94-.051 1.266-.051 3.693 0 2.427.011 2.753.051 3.693.392 7.16 1.73 8.498 8.89 8.89.94.04 1.266.051 3.693.051 2.427 0 2.753-.011 3.693-.051 7.16-.392 8.498-1.73 8.89-8.89.04-.94.051-1.266.051-3.693 0-2.427-.011-2.753-.051-3.693-.392-7.16-1.73-8.498-8.89-8.89zM12.315 9.255c-1.68 0-3.056 1.376-3.056 3.056s1.376 3.056 3.056 3.056 3.056-1.376 3.056-3.056-1.376-3.056-3.056-3.056zm0 5.011c-1.076 0-1.955-.879-1.955-1.955s.879-1.955 1.955-1.955 1.955.879 1.955 1.955-.879 1.955-1.955 1.955zm6.606-5.87a1.442 1.442 0 100-2.884 1.442 1.442 0 000 2.884z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0c-6.627 0-12 5.372-12 12 0 5.308 3.435 9.799 8.203 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.016-2.03-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.334-1.758-1.334-1.758-1.09-.744.08-.729.08-.729 1.205.086 1.838 1.238 1.838 1.238 1.07 1.833 2.809 1.303 3.492.996.108-.775.419-1.303.762-1.602-2.665-.304-5.467-1.334-5.467-5.932 0-1.31.465-2.383 1.235-3.22-.124-.303-.535-1.52.117-3.176 0 0 1.008-.323 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.046.138 3.003.404 2.292-1.553 3.3-1.23 3.3-1.23.653 1.656.242 2.873.118 3.176.77.837 1.233 1.91 1.233 3.22 0 4.61-2.809 5.624-5.474 5.922.43.37.817 1.109.817 2.23 0 1.61-.015 2.904-.015 3.29 0 .322.218.698.827.576C20.565 21.795 24 17.308 24 12 24 5.372 18.627 0 12 0z" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Navigation Sections -->
      <div class="space-y-6">
        <h3 class="text-lg font-semibold text-white dark:text-gray-100">Product</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Features</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Pricing</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Integrations</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Testimonials</a></li>
        </ul>
      </div>

      <div class="space-y-6">
        <h3 class="text-lg font-semibold text-white dark:text-gray-100">Company</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">About Us</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Careers</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Blog</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Press</a></li>
        </ul>
      </div>

      <div class="space-y-6">
        <h3 class="text-lg font-semibold text-white dark:text-gray-100">Support</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Help Center</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Contact Us</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">API Docs</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Status</a></li>
        </ul>
      </div>

      <!-- Newsletter Signup -->
      <div class="lg:col-span-1 space-y-6 md:col-span-2">
        <h3 class="text-lg font-semibold text-white dark:text-gray-100">Stay Updated</h3>
        <p class="text-blue-300 dark:text-gray-400 text-sm">Subscribe to our newsletter for the latest news and updates.</p>
        <form class="flex flex-col sm:flex-row gap-3">
          <label for="email-address" class="sr-only">Email address</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required class="min-w-0 flex-auto rounded-md border-0 bg-blue-800/50 dark:bg-gray-700/50 px-3.5 py-2 text-white dark:text-gray-200 shadow-sm ring-1 ring-inset ring-blue-700/50 dark:ring-gray-600 focus:ring-2 focus:ring-inset focus:ring-blue-400 dark:focus:ring-indigo-400 sm:text-sm sm:leading-6 placeholder:text-blue-300/80 dark:placeholder:text-gray-400" placeholder="Enter your email">
          <button type="submit" class="flex-none rounded-md bg-blue-500 dark:bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 dark:hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400 dark:focus-visible:outline-indigo-500 transition duration-300 ease-in-out">
            Subscribe
          </button>
        </form>
      </div>
    </div>

    <!-- Divider -->
    <div class="mt-12 md:mt-16 lg:mt-20 border-t border-blue-700/50 dark:border-gray-700 pt-8">
      <div class="flex flex-col md:flex-row items-center justify-between text-blue-400 dark:text-gray-500 text-sm space-y-4 md:space-y-0">
        <p>&copy; 2023 AquaDrift. All rights reserved.</p>
        <div class="flex space-x-6">
          <a href="#" class="hover:text-blue-100 dark:hover:text-gray-300 transition duration-300 ease-in-out">Privacy Policy</a>
          <a href="#" class="hover:text-blue-100 dark:hover:text-gray-300 transition duration-300 ease-in-out">Terms of Service</a>
          <a href="#" class="hover:text-blue-100 dark:hover:text-gray-300 transition duration-300 ease-in-out">Cookies Settings</a>
        </div>
      </div>
    </div>
  </div>
</footer>
              

                <div class="min-h-screen p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-blue-100 to-indigo-200 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 flex items-center justify-center font-sans">
  <div class="w-full max-w-6xl rounded-3xl backdrop-blur-xl bg-white/30 dark:bg-gray-800/30 p-6 sm:p-8 lg:p-10 shadow-2xl border border-white/50 dark:border-gray-700/50 overflow-hidden relative">

    <!-- Glassmorphism Overlay Elements -->
    <div class="absolute inset-0 -z-10 overflow-hidden">
      <div class="absolute top-1/4 left-1/3 w-96 h-96 bg-blue-400 opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob"></div>
      <div class="absolute bottom-1/4 right-1/3 w-96 h-96 bg-indigo-400 opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000"></div>
      <div class="absolute top-1/2 left-1/4 w-80 h-80 bg-sky-400 opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000"></div>
    </div>

    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-400 dark:to-sky-500 drop-shadow-lg">
      Your Wishlist ❤️
    </h1>

    <p class="text-center text-lg sm:text-xl mb-12 text-gray-700 dark:text-gray-300">
      People you've liked who resonated with you. Send a message to connect!
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

      <!-- Wishlist Item 1 -->
      <div class="rounded-2xl backdrop-blur-xl bg-white/40 dark:bg-gray-800/40 p-5 border border-white/60 dark:border-gray-700/60 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300/20 to-indigo-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <div class="w-28 h-28 sm:w-32 sm:h-32 rounded-full overflow-hidden border-4 border-blue-400 dark:border-sky-500 shadow-md mb-4 bg-gray-200 dark:bg-gray-700 flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Picture" class="w-full h-full object-cover">
          </div>
          <h3 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-700 to-indigo-800 dark:from-blue-300 dark:to-sky-400 mb-2 drop-shadow-sm">Eleanor R.</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">28, New York</p>
          <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2 line-clamp-2">Loves hiking, indie music, and cozy coffee shops.</p>
          <div class="mt-4 flex space-x-3">
            <button class="flex items-center px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-700 dark:bg-sky-600 dark:hover:bg-sky-700 text-white text-sm font-medium transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.516 12.234 2 10.368 2 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm4 0H9v2h2V9zm4 0h-2v2h2V9z" clip-rule="evenodd" />
              </svg>
              Message
            </button>
            <button class="p-2 rounded-full bg-red-500/80 hover:bg-red-600 dark:bg-red-600/80 dark:hover:bg-red-700 text-white transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="rounded-2xl backdrop-blur-xl bg-white/40 dark:bg-gray-800/40 p-5 border border-white/60 dark:border-gray-700/60 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300/20 to-indigo-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <div class="w-28 h-28 sm:w-32 sm:h-32 rounded-full overflow-hidden border-4 border-blue-400 dark:border-sky-500 shadow-md mb-4 bg-gray-200 dark:bg-gray-700 flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture" class="w-full h-full object-cover">
          </div>
          <h3 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-700 to-indigo-800 dark:from-blue-300 dark:to-sky-400 mb-2 drop-shadow-sm">Michael B.</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">30, Los Angeles</p>
          <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2 line-clamp-2">Software engineer who enjoys surfing and playing guitar.</p>
          <div class="mt-4 flex space-x-3">
            <button class="flex items-center px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-700 dark:bg-sky-600 dark:hover:bg-sky-700 text-white text-sm font-medium transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.516 12.234 2 10.368 2 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm4 0H9v2h2V9zm4 0h-2v2h2V9z" clip-rule="evenodd" />
              </svg>
              Message
            </button>
            <button class="p-2 rounded-full bg-red-500/80 hover:bg-red-600 dark:bg-red-600/80 dark:hover:bg-red-700 text-white transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="rounded-2xl backdrop-blur-xl bg-white/40 dark:bg-gray-800/40 p-5 border border-white/60 dark:border-gray-700/60 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300/20 to-indigo-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <div class="w-28 h-28 sm:w-32 sm:h-32 rounded-full overflow-hidden border-4 border-blue-400 dark:border-sky-500 shadow-md mb-4 bg-gray-200 dark:bg-gray-700 flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile Picture" class="w-full h-full object-cover">
          </div>
          <h3 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-700 to-indigo-800 dark:from-blue-300 dark:to-sky-400 mb-2 drop-shadow-sm">Sophia L.</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">26, Chicago</p>
          <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2 line-clamp-2">Passionate chef, loves exploring new cuisines and traveling.</p>
          <div class="mt-4 flex space-x-3">
            <button class="flex items-center px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-700 dark:bg-sky-600 dark:hover:bg-sky-700 text-white text-sm font-medium transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.516 12.234 2 10.368 2 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm4 0H9v2h2V9zm4 0h-2v2h2V9z" clip-rule="evenodd" />
              </svg>
              Message
            </button>
            <button class="p-2 rounded-full bg-red-500/80 hover:bg-red-600 dark:bg-red-600/80 dark:hover:bg-red-700 text-white transition-colors duration-200 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- Add more wishlist items as needed -->

    </div>

    <div class="mt-12 text-center">
      <button class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 dark:from-sky-500 dark:to-blue-600 dark:hover:from-sky-600 dark:hover:to-blue-700 text-white text-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-xl">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Discover More People
      </button>
    </div>

  </div>
</div>

<style>
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }
  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>
              

                <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">
  <div class="group relative inline-block">
    <button class="px-6 py-3 bg-white text-gray-900 rounded-lg shadow-md hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-indigo-500/50 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-indigo-400/50 transition-all duration-300 ease-in-out text-lg font-semibold uppercase tracking-wider">
      Hover for Item Info
    </button>

    <div class="opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 ease-in-out absolute z-50 mt-2 left-1/2 -translate-x-1/2 w-80 lg:w-96 p-4 rounded-lg shadow-2xl bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-700 dark:from-gray-700 dark:to-gray-600 dark:border-gray-500 transform scale-95 group-hover:scale-100 origin-top">
      <div class="flex items-center space-x-4 mb-4 border-b border-gray-700 dark:border-gray-500 pb-3">
        <img src="https://picsum.photos/80/80?random=1" alt="Item Icon" class="w-16 h-16 rounded-lg object-cover border-2 border-indigo-500 shadow-lg">
        <div>
          <h3 class="text-xl font-bold text-indigo-400 mb-1 leading-tight">Legendary Sword of Awesomeness</h3>
          <p class="text-sm text-gray-300 dark:text-gray-200">One-Handed Sword</p>
        </div>
      </div>

      <div class="space-y-3 mb-4 text-gray-200 dark:text-gray-100">
        <p class="text-base leading-snug">A blade of untold power, forged in the heart of a dying star. Grants immense strength to its wielder.</p>
        <ul class="list-none p-0 m-0 space-y-1">
          <li class="flex items-center text-green-400 text-sm">
            <svg class="w-4 h-4 mr-2 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            +150 Attack Damage
          </li>
          <li class="flex items-center text-green-400 text-sm">
            <svg class="w-4 h-4 mr-2 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            +50 Critical Chance
          </li>
          <li class="flex items-center text-blue-400 text-sm">
            <svg class="w-4 h-4 mr-2 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v2.102a4 4 0 00.865 3.197 6 6 0 01-1.397 1.258l-5.717 5.717a1 1 0 00-.342.827l-.027.674a3 3 0 00.814 2.842 3 3 0 002.842.814l.674-.027a1 1 0 00.827-.342L15.953 13.1a1 1 0 000-1.414l-4.95-4.95a1 1 0 00-1.414 0l-.636.636a1 1 0 10-1.414 1.414l.115-.115L12 14.066V7.834a1 1 0 01.077-.426l.462-1.042A1 1 0 0113 5.485V2a1 1 0 01.3-.707A1 1 0 0114 1z" clip-rule="evenodd"></path></svg>
            25% Chance for Double Strike
          </li>
        </ul>
      </div>
      
      <div class="flex justify-between items-center text-sm pt-3 border-t border-gray-700 dark:border-gray-500">
        <div class="text-gray-400 dark:text-gray-300">Equip: Warrior, Paladin</div>
        <div class="text-yellow-400 font-bold">Value: 5000 Gold</div>
      </div>

      <div class="absolute -top-3 left-1/2 -ml-2 w-0 h-0 border-l-[10px] border-l-transparent border-r-[10px] border-r-transparent border-b-[10px] border-b-gray-800 dark:border-b-gray-600"></div>
    </div>
  </div>
</div>
              

                <div class="p-4 dark:bg-gray-900 bg-gray-100 min-h-screen font-sans antialiased">
  <div class="max-w-xs mx-auto dark:bg-gray-800 bg-white rounded-lg shadow-xl p-6 border dark:border-gray-700 border-gray-200">
    <h3 class="text-lg font-semibold dark:text-emerald-400 text-emerald-600 mb-4 text-center">Weekly Progress</h3>
    
    <div class="relative w-40 h-40 mx-auto">
      <!-- Background Circle -->
      <div class="absolute inset-0 rounded-full dark:bg-gray-700 bg-gray-200 opacity-75"></div>
      
      <!-- Progress Arc -->
      <div class="absolute inset-0 rounded-full border-4 border-transparent dark:border-t-emerald-500 dark:border-r-emerald-500 border-t-emerald-600 border-r-emerald-600 transform rotate-45" style="clip-path: inset(0 50% 50% 0); animation: rotate-arc 2s forwards;"></div>
      
      <!-- Center Text -->
      <div class="absolute inset-0 flex items-center justify-center">
        <span class="text-3xl font-bold dark:text-ruby-400 text-ruby-600">75%</span>
      </div>
    </div>
    
    <p class="text-center dark:text-gray-400 text-gray-700 mt-4 text-sm">
      Goal Achieved
    </p>

    <div class="flex justify-around mt-6 text-sm">
      <div class="text-center">
        <p class="dark:text-gray-300 text-gray-800 font-medium">Runs</p>
        <p class="dark:text-emerald-300 text-emerald-700 font-bold">5/7</p>
      </div>
      <div class="text-center">
        <p class="dark:text-gray-300 text-gray-800 font-medium">Distance</p>
        <p class="dark:text-sapphire-300 text-sapphire-700 font-bold">30km</p>
      </div>
    </div>
  </div>
</div>

<style>
  @keyframes rotate-arc {
    from { transform: rotate(45deg); clip-path: inset(0 100% 100% 0); }
    to { transform: rotate(225deg); clip-path: inset(0 0% 0% 0%); }
  }

  /* Custom colors for jewel tones (if not already in your Tailwind config) */
  /* Assuming these are defined in your tailwind.config.js for custom colors */
  /* If not, you'd substitute with closest default Tailwind colors like green-500, blue-500, red-500 */
  .dark\:text-emerald-400 { color: #34D399; } /* Example emerald */
  .text-emerald-600 { color: #06906a; } 
  .dark\:border-t-emerald-500 { border-top-color: #10B981; } 
  .dark\:border-r-emerald-500 { border-right-color: #10B981; } 
  .border-t-emerald-600 { border-top-color: #06906a; } 
  .border-r-emerald-600 { border-right-color: #06906a; } 
  .dark\:text-ruby-400 { color: #FB7185; } /* Example ruby */
  .text-ruby-600 { color: #E11D48; } 
  .dark\:text-sapphire-300 { color: #60A5FA; } /* Example sapphire */
  .text-sapphire-700 { color: #2563EB; } 

</style>
              

                <footer class="bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 dark:from-gray-900 dark:via-zinc-800 dark:to-stone-700 p-4 text-white uppercase tracking-wider font-mono shadow-inner border-t-2 border-l-2 border-r-2 border-b-8 border-gray-700 dark:border-gray-950">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
    <div class="text-sm text-gray-100 dark:text-gray-400 opacity-80">
      <p>&copy; 2023 Nexus Bank Co. All Rights Reserved.</p>
      <p class="mt-1">Built with raw power and precision.</p>
    </div>
    <nav class="flex flex-wrap justify-center space-x-4 sm:space-x-6">
      <a href="#" class="text-sm hover:text-gray-200 dark:hover:text-gray-300 transition-colors duration-200
                          border-b border-white hover:border-gray-200 dark:border-gray-500 dark:hover:border-gray-300
                          pb-1">About Us</a>
      <a href="#" class="text-sm hover:text-gray-200 dark:hover:text-gray-300 transition-colors duration-200
                          border-b border-white hover:border-gray-200 dark:border-gray-500 dark:hover:border-gray-300
                          pb-1">Services</a>
      <a href="#" class="text-sm hover:text-gray-200 dark:hover:text-gray-300 transition-colors duration-200
                          border-b border-white hover:border-gray-200 dark:border-gray-500 dark:hover:border-gray-300
                          pb-1">Pricing</a>
      <a href="#" class="text-sm hover:text-gray-200 dark:hover:text-gray-300 transition-colors duration-200
                          border-b border-white hover:border-gray-200 dark:border-gray-500 dark:hover:border-gray-300
                          pb-1">Security</a>
      <a href="#" class="text-sm hover:text-gray-200 dark:hover:text-gray-300 transition-colors duration-200
                          border-b border-white hover:border-gray-200 dark:border-gray-500 dark:hover:border-gray-300
                          pb-1">Support</a>
    </nav>
  </div>
</footer>