Brutalist_Dating_Dashboard

<div class="min-h-screen bg-purple-100 dark:bg-gray-900 text-purple-900 dark:text-purple-100 font-mono p-4 sm:p-8">

  <!-- Brutalist Header -->
  <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center py-4 border-b-4 border-purple-900 dark:border-purple-600 mb-8">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold uppercase tracking-wide leading-none mb-4 sm:mb-0">
      <span class="block -skew-x-12 bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-3 py-1 mr-2 inline-block">Crush</span><span class="block sm:inline-block">Link</span>
    </h1>
    <nav class="text-lg sm:text-xl font-bold flex flex-wrap gap-x-6 gap-y-2 uppercase">
      <a href="#" class="relative group hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
        Profiles
        <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-900 dark:bg-purple-600 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-300"></span>
      </a>
      <a href="#" class="relative group hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
        Messages
        <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-900 dark:bg-purple-600 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-300"></span>
      </a>
      <a href="#" class="relative group hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
        Likes
        <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-900 dark:bg-purple-600 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-300"></span>
      </a>
      <a href="#" class="relative group hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
        Settings
        <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-900 dark:bg-purple-600 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-300"></span>
      </a>
    </nav>
  </header>

  <!-- Main Content Grid -->
  <main class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">

    <!-- Left Sidebar / Profile Section -->
    <section class="md:col-span-1 bg-purple-300 dark:bg-purple-800 border-4 border-purple-900 dark:border-purple-600 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(76,29,149,1)] dark:shadow-[8px_8px_0px_0px_rgba(168,85,247,1)]">
      <h2 class="text-2xl sm:text-3xl font-extrabold mb-4 uppercase">My Profile</h2>
      <div class="flex flex-col items-center text-center">
        <div class="w-32 h-32 sm:w-40 sm:h-40 bg-purple-500 dark:bg-purple-900 border-4 border-purple-900 dark:border-purple-600 overflow-hidden relative mb-4 flex items-center justify-center">
          <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Profile Avatar" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-300">
          <div class="absolute bottom-2 right-2 w-6 h-6 sm:w-8 sm:h-8 bg-green-500 border-2 border-purple-900 dark:border-purple-600"></div>
        </div>
        <h3 class="text-xl sm:text-2xl font-bold mb-2 uppercase">Synthya 'Violet' Wave</h3>
        <p class="text-lg sm:text-xl font-bold mb-4 bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-3 py-1 -skew-x-12 inline-block">28, Musician</p>
        <p class="text-base mb-6 italic">"Seeking a connection as deep as a synth bassline. Let's make some noise together."</p>
        <div class="flex gap-4">
          <button class="px-4 py-2 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">Edit Profile</button>
          <button class="px-4 py-2 bg-purple-500 text-purple-900 dark:bg-purple-400 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-400 dark:hover:bg-purple-300 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">View Public</button>
        </div>
      </div>
    </section>

    <!-- Main Content Area -->
    <section class="md:col-span-2 grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">

      <!-- New Matches / Recommendations -->
      <div class="bg-purple-300 dark:bg-purple-800 border-4 border-purple-900 dark:border-purple-600 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(76,29,149,1)] dark:shadow-[8px_8px_0px_0px_rgba(168,85,247,1)]">
        <h2 class="text-2xl sm:text-3xl font-extrabold mb-4 uppercase">New Crushes</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

          <!-- Match Card 1 -->
          <article class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 flex flex-col items-center text-center shadow-[4px_4px_0px_0px_rgba(76,29,149,1)] dark:shadow-[4px_4px_0px_0px_rgba(168,85,247,1)]">
            <div class="w-24 h-24 sm:w-28 sm:h-28 bg-purple-700 dark:bg-purple-700 border-2 border-purple-900 dark:border-purple-600 overflow-hidden mb-3 relative flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/men/82.jpg" alt="User Avatar" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-300">
              <div class="absolute bottom-1 right-1 w-4 h-4 bg-green-500 border border-purple-900 dark:border-purple-600"></div>
            </div>
            <h3 class="text-lg sm:text-xl font-bold uppercase mb-1 bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Alex 'Byte' Flow</h3>
            <p class="text-sm mb-3">29, Developer</p>
            <button class="px-3 py-1 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[2px_2px_0px_0px_#4c1d95] dark:shadow-[2px_2px_0px_0px_#a855f7]">Connect</button>
          </article>

          <!-- Match Card 2 -->
          <article class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 flex flex-col items-center text-center shadow-[4px_4px_0px_0px_rgba(76,29,149,1)] dark:shadow-[4px_4px_0px_0px_rgba(168,85,247,1)]">
            <div class="w-24 h-24 sm:w-28 sm:h-28 bg-purple-700 dark:bg-purple-700 border-2 border-purple-900 dark:border-purple-600 overflow-hidden mb-3 relative flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-300">
              <div class="absolute bottom-1 right-1 w-4 h-4 bg-green-500 border border-purple-900 dark:border-purple-600"></div>
            </div>
            <h3 class="text-lg sm:text-xl font-bold uppercase mb-1 bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Luna 'Rift' Star</h3>
            <p class="text-sm mb-3">31, Artist</p>
            <button class="px-3 py-1 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[2px_2px_0px_0px_#4c1d95] dark:shadow-[2px_2px_0px_0px_#a855f7]">Connect</button>
          </article>

        </div>
        <button class="mt-6 w-full px-4 py-2 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">Discover More</button>
      </div>

      <!-- Recent Activity / Messages -->
      <div class="bg-purple-300 dark:bg-purple-800 border-4 border-purple-900 dark:border-purple-600 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(76,29,149,1)] dark:shadow-[8px_8px_0px_0px_rgba(168,85,247,1)]">
        <h2 class="text-2xl sm:text-3xl font-extrabold mb-4 uppercase">Recent Waves</h2>
        <ul class="space-y-4">

          <!-- Activity Item 1 -->
          <li class="flex items-start gap-3 p-3 bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar" class="w-12 h-12 sm:w-16 sm:h-16 border-2 border-purple-900 dark:border-purple-600 object-cover grayscale hover:grayscale-0 transition-all duration-300">
            <div>
              <p class="font-bold text-lg uppercase bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Kai 'Glitch' Spark</p>
              <p class="text-sm mt-1">Sent you a <span class="font-bold text-purple-900 dark:text-purple-300">new message</span>: "Hey, loved your bio! Wanna chat?"</p>
              <span class="text-xs text-purple-800 dark:text-purple-200 block mt-1">2 minutes ago</span>
            </div>
          </li>

          <!-- Activity Item 2 -->
          <li class="flex items-start gap-3 p-3 bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar" class="w-12 h-12 sm:w-16 sm:h-16 border-2 border-purple-900 dark:border-purple-600 object-cover grayscale hover:grayscale-0 transition-all duration-300">
            <div>
              <p class="font-bold text-lg uppercase bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Zara 'Pulse' Beat</p>
              <p class="text-sm mt-1">Liked your <span class="font-bold text-purple-900 dark:text-purple-300">recent photo</span>.</p>
              <span class="text-xs text-purple-800 dark:text-purple-200 block mt-1">1 hour ago</span>
            </div>
          </li>

          <!-- Activity Item 3 -->
          <li class="flex items-start gap-3 p-3 bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar" class="w-12 h-12 sm:w-16 sm:h-16 border-2 border-purple-900 dark:border-purple-600 object-cover grayscale hover:grayscale-0 transition-all duration-300">
            <div>
              <p class="font-bold text-lg uppercase bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Neo 'Code' Matrix</p>
              <p class="text-sm mt-1">Viewed your <span class="font-bold text-purple-900 dark:text-purple-300">profile</span>.</p>
              <span class="text-xs text-purple-800 dark:text-purple-200 block mt-1">5 hours ago</span>
            </div>
          </li>

        </ul>
        <button class="mt-6 w-full px-4 py-2 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">View All Activity</button>
      </div>

      <!-- Statistics / Quick Links -->
      <div class="lg:col-span-2 bg-purple-300 dark:bg-purple-800 border-4 border-purple-900 dark:border-purple-600 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(76,29,149,1)] dark:shadow-[8px_8px_0px_0px_rgba(168,85,247,1)]">
        <h2 class="text-2xl sm:text-3xl font-extrabold mb-4 uppercase">Your Stats // Quick Access</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          <!-- Stat Card 1 -->
          <div class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 text-center shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <p class="text-4xl sm:text-5xl font-extrabold text-purple-900 dark:text-purple-300 -skew-y-3">42</p>
            <p class="text-sm sm:text-base uppercase">New Likes</p>
          </div>
          <!-- Stat Card 2 -->
          <div class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 text-center shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <p class="text-4xl sm:text-5xl font-extrabold text-purple-900 dark:text-purple-300 -skew-y-3">18</p>
            <p class="text-sm sm:text-base uppercase">Unread Messages</p>
          </div>
          <!-- Stat Card 3 -->
          <div class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 text-center shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <p class="text-4xl sm:text-5xl font-extrabold text-purple-900 dark:text-purple-300 -skew-y-3">5</p>
            <p class="text-sm sm:text-base uppercase">New Matches</p>
          </div>
          <!-- Stat Card 4 -->
          <div class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 text-center shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <p class="text-4xl sm:text-5xl font-extrabold text-purple-900 dark:text-purple-300 -skew-y-3">124</p>
            <p class="text-sm sm:text-base uppercase">Profile Views</p>
          </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <button class="px-4 py-2 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">Boost Profile</button>
          <button class="px-4 py-2 bg-purple-500 text-purple-900 dark:bg-purple-400 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-400 dark:hover:bg-purple-300 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">Go Incognito</button>
        </div>
      </div>

    </section>
  </main>

  <!-- Brutalist Footer -->
  <footer class="mt-8 py-4 text-center border-t-4 border-purple-900 dark:border-purple-600 text-sm sm:text-base uppercase font-bold">
    <p>&copy; 2023 CrushLink Inc. All Rights Reserved. <span class="font-normal italic">No love lost.</span></p>
  </footer>

</div>