All Components

                <div class="font-['Roboto_Mono'] bg-amber-50 dark:bg-stone-950 text-stone-800 dark:text-stone-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl max-w-4xl mx-auto sm:my-8 border border-stone-200 dark:border-stone-800">
  <h2 class="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 text-amber-900 dark:text-amber-500 text-center uppercase tracking-wide">
    Activity Log <span class="text-stone-600 dark:text-stone-400 text-sm">(Past 365 Days)</span>
  </h2>

  <div class="overflow-x-auto pb-2 -mr-4 sm:-mr-6 lg:-mr-8 pr-4 sm:pr-6 lg:pr-8">
    <div class="flex flex-col flex-nowrap w-max min-w-full">
      <!-- Months Header -->
      <div class="flex text-xs text-stone-600 dark:text-stone-400 mb-2 whitespace-nowrap">
        <div class="w-4 sm:w-5 mr-1"></div> <!-- Placeholder for days label -->
        <div class="flex-grow grid grid-flow-col auto-cols-[minmax(1rem,1fr)] sm:auto-cols-[minmax(1.25rem,1fr)] lg:auto-cols-[minmax(1.5rem,1fr)] gap-0.5">
          <div class="flex-none w-16 text-center">Jan</div>
          <div class="flex-none w-16 text-center">Feb</div>
          <div class="flex-none w-16 text-center">Mar</div>
          <div class="flex-none w-16 text-center">Apr</div>
          <div class="flex-none w-16 text-center">May</div>
          <div class="flex-none w-16 text-center">Jun</div>
          <div class="flex-none w-16 text-center">Jul</div>
          <div class="flex-none w-16 text-center">Aug</div>
          <div class="flex-none w-16 text-center">Sep</div>
          <div class="flex-none w-16 text-center">Oct</div>
          <div class="flex-none w-16 text-center">Nov</div>
          <div class="flex-none w-16 text-center">Dec</div>
        </div>
      </div>

      <div class="flex flex-row flex-nowrap">
        <!-- Day Labels (Vertical) -->
        <div class="flex flex-col text-xs text-stone-600 dark:text-stone-400 mr-1 whitespace-nowrap min-w-[20px]">
          <div class="h-4 sm:h-5 text-right">Mon</div>
          <div class="h-4 sm:h-5 text-right"></div>
          <div class="h-4 sm:h-5 text-right">Wed</div>
          <div class="h-4 sm:h-5 text-right"></div>
          <div class="h-4 sm:h-5 text-right">Fri</div>
          <div class="h-4 sm:h-5 text-right"></div>
          <div class="h-4 sm:h-5 text-right">Sun</div>
        </div>

        <!-- Heatmap Grid -->
        <div class="grid grid-flow-col auto-cols-[minmax(1rem,1fr)] sm:auto-cols-[minmax(1.25rem,1fr)] lg:auto-cols-[minmax(1.5rem,1fr)] grid-rows-7 gap-0.5 border border-stone-300 dark:border-stone-700 bg-stone-200 dark:bg-stone-800 p-0.5 rounded-sm overflow-hidden">
          <!-- Example squares - 52 weeks (approx 365 days) * 7 days/week -->
          <!-- Dynamically generated for demonstration of variety -->
          <!-- Week 1 -->
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 1: 0 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm" title="Jan 2: 1 contribution"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm" title="Jan 3: 5 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm" title="Jan 4: 10 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm" title="Jan 5: 15 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm" title="Jan 6: 20 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm" title="Jan 7: 25+ contributions"></div>
          <!-- Week 2 -->
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm" title="Jan 8: 1 contribution"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm" title="Jan 9: 5 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 10: 0 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm" title="Jan 11: 10 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm" title="Jan 12: 15 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm" title="Jan 13: 1 contribution"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 14: 0 contributions"></div>
          <!-- Week 3 -->
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm" title="Jan 15: 20 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm" title="Jan 16: 25+ contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm" title="Jan 17: 15 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 18: 0 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm" title="Jan 19: 1 contribution"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm" title="Jan 20: 5 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm" title="Jan 21: 10 contributions"></div>
          <!-- Week 4 -->
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 22: 0 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 23: 0 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 24: 0 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 25: 0 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 26: 0 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 27: 0 contributions"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm" title="Jan 28: 0 contributions"></div>
          <!-- ... Repeat for 52 weeks or ~365 days ... -->
          <!-- This is a placeholder for brevity. In a real application, this would be data-driven. -->
          <!-- Total of 365 days / 7 days/column = approx 52 columns. -->
          <!-- Filling remaining weeks with varied data for visual fidelity -->
          <!-- Weeks 5-52 with varied activity -->
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>

          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-700 dark:bg-stone-100 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-500 dark:bg-stone-300 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-300 dark:bg-stone-500 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-100 dark:bg-stone-700 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-600 dark:bg-stone-200 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-400 dark:bg-stone-400 rounded-sm"></div>
          <div class="h-4 w-4 sm:h-5 sm:w-5 bg-amber-200 dark:bg-stone-600 rounded-sm"></div>

          <!-- Continue adding 7*52 squares for a full year -->
          <!-- ... approximately 365 squares in total ... -->
          <!-- For a full year you would need 52-53 columns of 7 elements -->
          <!-- Just showing enough for a decent visual example -->

          <!-- End of placeholder squares -->
        </div>
      </div>
    </div>
  </div>

  <div class="flex justify-end items-center text-xs mt-4 sm:mt-6 text-stone-600 dark:text-stone-400 space-x-2">
    <span class="uppercase">Less</span>
    <div class="flex space-x-0.5">
      <div class="h-3 w-3 bg-amber-100 dark:bg-stone-700 rounded-[2px]"></div>
      <div class="h-3 w-3 bg-amber-300 dark:bg-stone-500 rounded-[2px]"></div>
      <div class="h-3 w-3 bg-amber-500 dark:bg-stone-300 rounded-[2px]"></div>
      <div class="h-3 w-3 bg-amber-700 dark:bg-stone-100 rounded-[2px]"></div>
    </div>
    <span class="uppercase">More</span>
  </div>
</div>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 via-purple-100 to-indigo-100 dark:from-gray-900 dark:via-purple-950 dark:to-indigo-950 min-h-screen font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-500 hover:shadow-2xl">
    <div class="p-6 sm:p-8 bg-gradient-to-r from-purple-600 to-indigo-700 dark:from-purple-800 dark:to-indigo-900 text-white flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-extrabold tracking-tight text-white dark:text-gray-100 drop-shadow-lg">Recent User Mentions</h2>
      <button class="px-4 py-2 bg-purple-700 hover:bg-purple-800 dark:bg-purple-900 dark:hover:bg-purple-800 text-white rounded-full text-sm font-semibold transition-all duration-300 transform hover:scale-105 shadow-md flex items-center group">
        <svg class="w-5 h-5 mr-1 text-white group-hover:rotate-12 transition-transform duration-300" 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 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
        <span class="hidden sm:inline">New Mention</span>
      </button>
    </div>

    <div class="p-6 sm:p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in">
      <!-- Mention Card 1 -->
      <div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600">
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
          <div>
            <p class="font-bold text-lg text-gray-900 dark:text-gray-100">Eleanor Pena</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">@eleanor_p</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
          "Just wanted to give a shoutout to @crm_plus for their amazing new analytics dashboard. Super intuitive and has saved us so much time! #CRM #BusinessTools"
        </p>
        <div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
          <span>2 hours ago</span>
          <div class="flex space-x-2">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100 transition-colors duration-300">Positive</span>
            <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
          </div>
        </div>
      </div>

      <!-- Mention Card 2 -->
      <div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600">
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
          <div>
            <p class="font-bold text-lg text-gray-900 dark:text-gray-100">Ralph Edwards</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">@ralphedwards</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
          "Experiencing some minor bugs with the new @crm_plus update, specifically with exporting contacts. Any workarounds? #CRMSupport"
        </p>
        <div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
          <span>6 hours ago</span>
          <div class="flex space-x-2">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100 transition-colors duration-300">Neutral</span>
            <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
          </div>
        </div>
      </div>

      <!-- Mention Card 3 -->
      <div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600">
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <div>
            <p class="font-bold text-lg text-gray-900 dark:text-gray-100">Robert Fox</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">@robert_f</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
          "Highly recommend @crm_plus for small businesses! Their customer support is top-notch. They helped me integrate everything seamlessly. #CRM"
        </p>
        <div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
          <span>1 day ago</span>
          <div class="flex space-x-2">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100 transition-colors duration-300">Positive</span>
            <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
          </div>
        </div>
      </div>

      <!-- Mention Card 4 -->
      <div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600 lg:col-span-1">
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
          <div>
            <p class="font-bold text-lg text-gray-900 dark:text-gray-100">Jane Cooper</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">@janecooper</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
          "The new reporting features in @crm_plus are a game-changer! So much easier to visualize our sales pipeline now. Fantastic update."
        </p>
        <div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
          <span>2 days ago</span>
          <div class="flex space-x-2">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100 transition-colors duration-300">Positive</span>
            <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
          </div>
        </div>
      </div>

      <!-- Mention Card 5 -->
      <div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600 lg:col-span-1">
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
          <div>
            <p class="font-bold text-lg text-gray-900 dark:text-gray-100">Wade Warren</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">@wadewarren</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
          "Considering switching to @crm_plus from our current system. Anyone have experience with their migration tools? Looking for something pain-free."
        </p>
        <div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
          <span>3 days ago</span>
          <div class="flex space-x-2">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100 transition-colors duration-300">Inquiry</span>
            <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
          </div>
        </div>
      </div>

       <!-- Mention Card 6 -->
      <div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600 lg:col-span-1">
        <div class="flex items-center space-x-4 mb-4">
          <img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div>
            <p class="font-bold text-lg text-gray-900 dark:text-gray-100">Esther Howard</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">@esther.h</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
          "Loving the custom automation features in @crm_plus! It's freed up so much time for my team to focus on high-value tasks. Highly recommend."
        </p>
        <div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
          <span>4 days ago</span>
          <div class="flex space-x-2">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100 transition-colors duration-300">Positive</span>
            <a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
          </div>
        </div>
      </div>

    </div>

    <div class="p-6 sm:p-8 border-t border-purple-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-center">
      <button class="px-6 py-3 bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 text-white font-semibold rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700">
        Load More Mentions
      </button>
    </div>
  </div>
</div>

<style>
  /* This is a simple keyframe animation for fade-in */
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in > div {
    animation: fade-in 0.6s ease-out forwards;
    opacity: 0; /* Ensures elements are hidden before animation */
  }
  /* Stagger animation for cards */
  .animate-fade-in > div:nth-child(1) { animation-delay: 0.1s; }
  .animate-fade-in > div:nth-child(2) { animation-delay: 0.2s; }
  .animate-fade-in > div:nth-child(3) { animation-delay: 0.3s; }
  .animate-fade-in > div:nth-child(4) { animation-delay: 0.4s; }
  .animate-fade-in > div:nth-child(5) { animation-delay: 0.5s; }
  .animate-fade-in > div:nth-child(6) { animation-delay: 0.6s; }

  /* Add a smooth focus ring for accessibility */
  :focus-visible {
    outline: none;
  }

  /* Custom scrollbar for subtle overflow visualization if needed */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }
  .dark ::-webkit-scrollbar-track {
    background: #333;
  }
  ::-webkit-scrollbar-thumb {
    background: #a78bfa; /* purple-400 */
    border-radius: 10px;
  }
  .dark ::-webkit-scrollbar-thumb {
    background: #8b5cf6; /* purple-500 */
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #8B5CF6; /* purple-500 */
  }
  .dark ::-webkit-scrollbar-thumb:hover {
    background: #7c3aed; /* purple-600 */
  }
</style>
              

                <div class="p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen font-sans antialiased text-stone-800 dark:text-stone-200">

  <div class="max-w-4xl mx-auto bg-white dark:bg-stone-800 shadow-xl rounded-lg overflow-hidden border border-stone-200 dark:border-stone-700">

    <!-- Header / Toolbar -->
    <div class="flex items-center justify-between p-4 sm:p-5 border-b border-stone-200 dark:border-stone-700 bg-stone-50 dark:bg-stone-700/50">
      <h2 class="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-100 uppercase tracking-wide">Document.pdf</h2>
      <div class="flex space-x-2 sm:space-x-3">
        <button class="p-2 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-600">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 text-stone-600 dark:text-stone-300" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
          <span class="sr-only">Search</span>
        </button>
        <button class="p-2 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-600">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 text-stone-600 dark:text-stone-300" 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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          <span class="sr-only">Download</span>
        </button>
        <button class="p-2 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-600">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 text-stone-600 dark:text-stone-300" 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>
          <span class="sr-only">View</span>
        </button>
      </div>
    </div>

    <!-- Content Area -->
    <div class="p-4 sm:p-6 md:p-8 bg-stone-50 dark:bg-stone-900/50 text-stone-700 dark:text-stone-300 leading-relaxed">

      <div class="mb-6 sm:mb-8 md:mb-10">
        <h3 class="text-xl sm:text-2xl font-bold mb-3 text-stone-800 dark:text-stone-100">The Foundations of Industrial Design</h3>
        <p class="text-sm sm:text-base mb-4">Industrial design often stems from the raw interplay of materials and function. This section explores the underlying principles that shape the aesthetic of utilitarian objects, emphasizing exposed components and a no-nonsense approach to form.</p>
        <figure class="mb-4">
          <img src="https://picsum.photos/800/450?random=1" alt="Industrial workshop interior" class="w-full h-auto rounded-md shadow-sm border border-stone-200 dark:border-stone-700 object-cover">
          <figcaption class="text-xs sm:text-sm text-center mt-2 text-stone-600 dark:text-stone-400">Fig 1. Exposed concrete and metal beams in a modern industrial setting.</figcaption>
        </figure>
        <p class="text-sm sm:text-base">The design philosophy reveres the honest display of construction and materials. Unpolished surfaces, visible welding, and structural elements are not defects but celebrated features, telling a story of the object's creation and purpose.</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 mb-6 sm:mb-8 md:mb-10">
        <div>
          <h4 class="text-lg sm:text-xl font-semibold mb-3 text-stone-800 dark:text-stone-100">Materiality: Texture and Tone</h4>
          <ul class="list-disc list-inside text-sm sm:text-base space-y-2">
            <li><strong class="text-stone-700 dark:text-stone-200">Steel & Iron:</strong> Often left untreated or with a patinated finish.</li>
            <li><strong class="text-stone-700 dark:text-stone-200">Reclaimed Wood:</strong> Imperfections and grain celebrated for character.</li>
            <li><strong class="text-stone-700 dark:text-stone-200">Concrete:</strong> Raw, poured surfaces providing a robust base.</li>
            <li><strong class="text-stone-700 dark:text-stone-200">Leather:</strong> Distressed or aged, adding warmth and tactile quality.</li>
          </ul>
        </div>
        <div>
          <h4 class="text-lg sm:text-xl font-semibold mb-3 text-stone-800 dark:text-stone-100">Color Palette: Warm Neutrals</h4>
          <p class="text-sm sm:text-base mb-3">The chosen scheme of warm neutrals complements the industrial character, softening its edges while maintaining an earthy, grounded feel. These colors reflect natural materials and aged patinas.</p>
          <div class="flex flex-wrap gap-2 sm:gap-3">
            <div class="w-12 h-12 sm:w-14 sm:h-14 bg-beige-300 dark:bg-beige-700 rounded-md shadow-sm border border-stone-200 dark:border-stone-600 flex items-center justify-center"><span class="sr-only">Beige</span></div>
            <div class="w-12 h-12 sm:w-14 sm:h-14 bg-cream-200 dark:bg-cream-800 rounded-md shadow-sm border border-stone-200 dark:border-stone-600 flex items-center justify-center"><span class="sr-only">Cream</span></div>
            <div class="w-12 h-12 sm:w-14 sm:h-14 bg-stone-400 dark:bg-stone-600 rounded-md shadow-sm border border-stone-200 dark:border-stone-600 flex items-center justify-center"><span class="sr-only">Warm Gray</span></div>
            <div class="w-12 h-12 sm:w-14 sm:h-14 bg-amber-700 dark:bg-amber-900 rounded-md shadow-sm border border-stone-200 dark:border-stone-600 flex items-center justify-center"><span class="sr-only">Accent Brown</span></div>
          </div>
        </div>
      </div>

      <p class="text-sm sm:text-base">The utilitarian approach extends beyond aesthetics to functionality, where form directly follows purpose. There is an inherent beauty in components that are designed purely for their task, without superfluous ornamentation. This ethos creates products that are durable, timeless, and deeply honest in their expression.</p>

      <div class="mt-6 sm:mt-8 md:mt-10 py-4 border-t border-stone-200 dark:border-stone-700 text-stone-600 dark:text-stone-400 text-xs sm:text-sm flex items-center justify-between">
        <div class="flex items-center space-x-2">
           <img class="w-6 h-6 sm:w-8 sm:h-8 rounded-full border border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
           <span>Authored by <span class="font-medium text-stone-700 dark:text-stone-200">J. Miller</span></span>
        </div>
        <span>Page <span class="font-medium text-stone-700 dark:text-stone-200">1</span> of <span class="font-medium text-stone-700 dark:text-stone-200">7</span></span>
      </div>

    </div>

    <!-- Footer / Pagination -->
    <div class="flex items-center justify-center p-4 sm:p-5 border-t border-stone-200 dark:border-stone-700 bg-stone-50 dark:bg-stone-700/50">
      <nav class="flex space-x-2 sm:space-x-4">
        <button class="p-2 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-600 group">
          <svg class="w-4 h-4 sm:w-5 sm:h-5 text-stone-600 dark:text-stone-300 group-hover:text-stone-700 dark:group-hover:text-stone-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="M15 19l-7-7 7-7"></path></svg>
          <span class="sr-only">Previous Page</span>
        </button>
        <span class="px-3 py-1 text-sm bg-stone-200 dark:bg-stone-600 text-stone-800 dark:text-stone-100 rounded-md font-semibold">1</span>
        <button class="px-3 py-1 text-sm text-stone-600 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-600">2</button>
        <button class="px-3 py-1 text-sm text-stone-600 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-700 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-600">3</button>
        <button class="p-2 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-600 group">
          <svg class="w-4 h-4 sm:w-5 sm:h-5 text-stone-600 dark:text-stone-300 group-hover:text-stone-700 dark:group-hover:text-stone-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 5l7 7-7 7"></path></svg>
          <span class="sr-only">Next Page</span>
        </button>
      </nav>
    </div>

  </div>
</div>
              

                <div class="bg-white p-4 sm:p-6 lg:p-8 rounded-2xl shadow-xl max-w-4xl mx-auto my-8 dark:bg-gray-800 transition-colors duration-300">
  <h2 class="text-2xl sm:text-3xl font-extrabold text-center mb-6 text-green-600 dark:text-green-400">Compare Our Fun Features!</h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Product 1 Card -->
    <div class="bg-blue-100 p-6 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 dark:bg-blue-900/40">
      <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/100/100?random=1" alt="Product 1" class="rounded-full border-4 border-blue-400 dark:border-blue-600 shadow-lg">
      </div>
      <h3 class="text-xl sm:text-2xl font-bold text-center mb-4 text-blue-800 dark:text-blue-300">Product Alpha 🎉</h3>
      
      <ul class="list-none space-y-3 text-lg text-blue-700 dark:text-blue-200">
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Super Speedy Performance</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Unlimited Whimsical Widgets</li>
        <li class="flex items-center"><span class="text-red-500 mr-2">&#10007;</span> No Unicorn Mode</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Friendly Support Sprites</li>
      </ul>
      <div class="text-center mt-6">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-800">
          Choose Alpha!
        </button>
      </div>
    </div>

    <!-- Product 2 Card -->
    <div class="bg-orange-100 p-6 rounded-xl shadow-md transform hover:scale-105 transition-transform duration-300 dark:bg-orange-900/40">
      <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/100/100?random=2" alt="Product 2" class="rounded-full border-4 border-orange-400 dark:border-orange-600 shadow-lg">
      </div>
      <h3 class="text-xl sm:text-2xl font-bold text-center mb-4 text-orange-800 dark:text-orange-300">Product Beta 🌟</h3>
      

      <ul class="list-none space-y-3 text-lg text-orange-700 dark:text-orange-200">
        <li class="flex items-center"><span class="text-red-500 mr-2">&#10007;</span> Standard Speed</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Dazzling Gimmicks Included</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Exclusive Unicorn Mode</li>
        <li class="flex items-center"><span class="text-green-500 mr-2">&#10003;</span> Mythical Support Beings</li>
      </ul>
      <div class="text-center mt-6">
        <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:bg-orange-700 dark:hover:bg-orange-600 dark:focus:ring-orange-800">
          Select Beta!
        </button>
      </div>
    </div>
  </div>
</div>
              

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen font-mono">
  <div class="w-full max-w-sm rounded-lg shadow-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 overflow-hidden">
    <div class="flex justify-between items-center bg-blue-200 dark:bg-blue-900 p-3 border-b border-gray-300 dark:border-gray-700">
      <span class="text-blue-800 dark:text-blue-200 text-sm font-semibold uppercase tracking-wider">[ METEO REPORT ]</span>
      <span class="text-gray-600 dark:text-gray-400 text-xs">ONLINE</span>
    </div>
    <div class="p-4 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">CURRENT TEMPERATURE</p>
      <div class="flex items-baseline justify-center mb-3">
        <span class="text-5xl md:text-6xl font-bold text-teal-600 dark:text-teal-400">18</span>
        <span class="text-2xl text-teal-600 dark:text-teal-400">&deg;C</span>
      </div>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">[ Feels Like: 17&deg;C ]</p>
      <div class="text-left space-y-1 text-sm md:text-base">
        <p class="flex justify-between items-center"><span class="text-gray-700 dark:text-gray-300">HUMIDITY:</span> <span class="text-purple-600 dark:text-purple-400">65%</span></p>
        <p class="flex justify-between items-center"><span class="text-gray-700 dark:text-gray-300">WIND SPD:</span> <span class="text-purple-600 dark:text-purple-400">12 KM/H</span></p>
        <p class="flex justify-between items-center"><span class="text-gray-700 dark:text-gray-300">PRESSURE:</span> <span class="text-purple-600 dark:text-purple-400">1012 HPA</span></p>
      </div>
    </div>
    <div class="bg-blue-100 dark:bg-blue-800 p-3 pt-2 text-xs border-t border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300">
      <p class="flex justify-between"><span class="text-blue-700 dark:text-blue-300">STATUS:</span> <span class="text-green-600 dark:text-green-400">CLEAR SKIES</span></p>
    </div>
  </div>
</div>
              

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="w-full max-w-md bg-gradient-to-br from-gray-300 to-gray-100 dark:from-gray-700 dark:to-gray-900 rounded-3xl shadow-xl border border-gray-400 dark:border-gray-600 p-8 transform transition-all duration-300 hover:shadow-2xl hover:scale-[1.01] overflow-hidden relative">
    <!-- Top 'screen' bezel effect -->
    <div class="absolute top-0 left-0 right-0 h-12 bg-gray-400 dark:bg-gray-800 rounded-t-3xl shadow-inner-top blur-sm"></div>
    <div class="absolute bottom-0 left-0 right-0 h-12 bg-gray-400 dark:bg-gray-800 rounded-b-3xl shadow-inner-bottom blur-sm"></div>

    <div class="relative z-10">
      <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6 drop-shadow-md">Verify you are human!</h2>

      <div class="bg-gradient-to-br from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-6 mb-8 border border-gray-300 dark:border-gray-600 shadow-inner flex flex-col items-center space-y-4">
        <p class="text-lg text-gray-700 dark:text-gray-200 text-center mb-4">Please select all squares with:</p>
        <div class="text-3xl font-extrabold text-blue-600 dark:text-teal-400 drop-shadow-lg">Traffic Lights</div>

        <div class="grid grid-cols-3 gap-3 w-full max-w-xs mx-auto">
          <!-- Captcha Grid Items -->
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=1" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=2" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=3" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=4" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=5" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=6" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=7" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=8" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
          <button class="captcha-grid-item w-full aspect-square bg-gray-100 dark:bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border border-gray-300 dark:border-gray-700 shadow-md transform transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-teal-500 dark:focus:ring-opacity-70 group">
            <img src="https://picsum.photos/100/100?random=9" alt="grid image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200 blur-sm group-[.is-selected]:blur-none group-[.is-selected]:brightness-110">
            <div class="absolute inset-0 bg-blue-500/0 dark:bg-teal-500/0 group-[.is-selected]:bg-blue-500/30 dark:group-[.is-selected]:bg-teal-500/30 rounded-lg transition-colors duration-200"></div>
            <svg class="absolute w-8 h-8 text-white opacity-0 group-[.is-selected]:opacity-100 transform scale-0 group-[.is-selected]:scale-100 transition-all 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="3" d="M5 13l4 4L19 7"></path></svg>
          </button>
        </div>
      </div>

      <div class="flex justify-between items-center">
        <button class="px-6 py-3 bg-gradient-to-br from-yellow-300 to-amber-400 dark:from-yellow-600 dark:to-orange-700 text-gray-800 dark:text-gray-100 font-semibold rounded-xl shadow-lg border border-yellow-500 dark:border-orange-800 transform transition-all duration-200 hover:scale-105 hover:shadow-xl active:scale-95 focus:outline-none focus:ring-4 focus:ring-yellow-400 focus:ring-opacity-70 dark:focus:ring-orange-500 dark:focus:ring-opacity-70 relative overflow-hidden group">
          <span class="relative z-10">Refresh</span>
          <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-amber-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200 mix-blend-overlay"></div>
        </button>

        <button class="px-8 py-3 bg-gradient-to-br from-blue-500 to-indigo-600 dark:from-blue-700 dark:to-indigo-800 text-white font-semibold rounded-xl shadow-lg border border-blue-700 dark:border-indigo-900 transform transition-all duration-200 hover:scale-105 hover:shadow-xl active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-opacity-70 dark:focus:ring-indigo-500 dark:focus:ring-opacity-70 relative overflow-hidden group">
          <span class="relative z-10">Verify</span>
          <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200 mix-blend-overlay"></div>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Just for demonstration: Simulate click effect with JS (not part of the deliverable) -->
<script>
  document.querySelectorAll('.captcha-grid-item').forEach(button => {
    button.addEventListener('click', () => {
      button.classList.toggle('is-selected');
    });
  });
</script>

<style>
  .shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  }
  .shadow-inner-top {
    box-shadow: inset 0 8px 10px -6px rgba(0, 0, 0, 0.2), inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-inner-top {
    box-shadow: inset 0 8px 10px -6px rgba(0, 0, 0, 0.4), inset 0 1px 2px 0 rgba(255, 255, 255, 0.05);
  }
  .shadow-inner-bottom {
    box-shadow: inset 0 -8px 10px -6px rgba(0, 0, 0, 0.2), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-inner-bottom {
    box-shadow: inset 0 -8px 10px -6px rgba(0, 0, 0, 0.4), inset 0 -1px 2px 0 rgba(255, 255, 255, 0.05);
  }
  .drop-shadow-md {
    filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  }
  .drop-shadow-lg {
    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  }
</style>
              

                <section class="py-12 md:py-24 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="container mx-auto px-4 max-w-7xl">
    <div class="text-center mb-16">
      <h2 class="text-5xl md:text-6xl font-extrabold text-blue-800 dark:text-blue-300 mb-4 tracking-[-0.03em] leading-tight drop-shadow-md">
        <span class="block">Unlock Your Learning Potential</span>
        <span class="hidden md:inline-block text-4xl mt-2 text-blue-700 dark:text-blue-400 drop-shadow-sm">Dive Deep into Key Concepts</span>
      </h2>
      <p class="text-lg md:text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
        Explore complex topics with our engaging, interactive infographics. Designed to make learning visual and memorable.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-12">

      <!-- Infographic Card 1 -->
      <div class="relative p-8 md:p-10 border-4 border-yellow-700 dark:border-yellow-600 rounded-3xl overflow-hidden shadow-2xl
                  transform transition-all duration-300 hover:-translate-y-2 hover:shadow-yellow-500/40
                  bg-yellow-50 dark:bg-yellow-950
                  group perspective-1000">
        <!-- 3D 'Pop-out' Effect Base -->
        <div class="absolute -inset-1 rounded-3xl bg-gradient-to-br from-yellow-100/50 to-yellow-200/50 dark:from-yellow-900/50 dark:to-yellow-800/50
                    transform -rotate-y-1 -rotate-x-1 translate-z-10 group-hover:rotate-y-0 group-hover:rotate-x-0 group-hover:translate-z-0 transition-transform duration-500"></div>

        <div class="relative z-10 text-center">
          <div class="w-24 h-24 mx-auto mb-6 bg-yellow-600 dark:bg-yellow-700 rounded-full flex items-center justify-center
                      shadow-inner border-4 border-yellow-400 dark:border-yellow-500
                      transform transition-transform duration-300 group-hover:scale-110">
            <svg class="w-12 h-12 text-yellow-50 dark:text-yellow-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="1.5" d="M7 12l3 3 7-7m-6 4H3m0 0l3-3m-3 3l3 3m13-3H11m0 0l-3 3m3-3l-3-3"></path>
            </svg>
          </div>
          <h3 class="text-3xl font-bold text-yellow-800 dark:text-yellow-200 mb-3 drop-shadow-sm">Step 1: Understand</h3>
          <p class="text-yellow-700 dark:text-yellow-300 mb-6 text-lg leading-relaxed">
            Grasp foundational concepts with clear, concise explanations.
          </p>
          <img src="https://picsum.photos/400/250?random=1" alt="Concept understanding" class="w-full rounded-xl shadow-lg border-2 border-yellow-300 dark:border-yellow-600 mb-6 object-cover object-center aspect-video">
          <a href="#" class="inline-flex items-center px-6 py-3 bg-yellow-600 hover:bg-yellow-700 dark:bg-yellow-700 dark:hover:bg-yellow-600
                          text-white font-semibold rounded-full shadow-md transition-all duration-300
                          transform hover:scale-105 active:scale-95 group-hover:after:content-[''] group-hover:after:absolute
                          group-hover:after:inset-0 group-hover:after:rounded-full group-hover:after:bg-yellow-500/30 group-hover:after:animate-pulse">
            Learn More
            <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="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Infographic Card 2 -->
      <div class="relative p-8 md:p-10 border-4 border-teal-700 dark:border-teal-600 rounded-3xl overflow-hidden shadow-2xl
                  transform transition-all duration-300 hover:-translate-y-2 hover:shadow-teal-500/40
                  bg-teal-50 dark:bg-teal-950
                  group perspective-1000">
        <!-- 3D 'Pop-out' Effect Base -->
        <div class="absolute -inset-1 rounded-3xl bg-gradient-to-br from-teal-100/50 to-teal-200/50 dark:from-teal-900/50 dark:to-teal-800/50
                    transform -rotate-y-1 -rotate-x-1 translate-z-10 group-hover:rotate-y-0 group-hover:rotate-x-0 group-hover:translate-z-0 transition-transform duration-500"></div>

        <div class="relative z-10 text-center">
          <div class="w-24 h-24 mx-auto mb-6 bg-teal-600 dark:bg-teal-700 rounded-full flex items-center justify-center
                      shadow-inner border-4 border-teal-400 dark:border-teal-500
                      transform transition-transform duration-300 group-hover:scale-110">
            <svg class="w-12 h-12 text-teal-50 dark:text-teal-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="1.5" 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>
          </div>
          <h3 class="text-3xl font-bold text-teal-800 dark:text-teal-200 mb-3 drop-shadow-sm">Step 2: Visualize</h3>
          <p class="text-teal-700 dark:text-teal-300 mb-6 text-lg leading-relaxed">
            See data and processes come alive with interactive charts and diagrams.
          </p>
          <img src="https://picsum.photos/400/250?random=2" alt="Data visualization" class="w-full rounded-xl shadow-lg border-2 border-teal-300 dark:border-teal-600 mb-6 object-cover object-center aspect-video">
          <a href="#" class="inline-flex items-center px-6 py-3 bg-teal-600 hover:bg-teal-700 dark:bg-teal-700 dark:hover:bg-teal-600
                          text-white font-semibold rounded-full shadow-md transition-all duration-300
                          transform hover:scale-105 active:scale-95 group-hover:after:content-[''] group-hover:after:absolute
                          group-hover:after:inset-0 group-hover:after:rounded-full group-hover:after:bg-teal-500/30 group-hover:after:animate-pulse">
            Explore Data
            <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="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Infographic Card 3 -->
      <div class="relative p-8 md:p-10 border-4 border-red-700 dark:border-red-600 rounded-3xl overflow-hidden shadow-2xl
                  transform transition-all duration-300 hover:-translate-y-2 hover:shadow-red-500/40
                  bg-red-50 dark:bg-red-950
                  group perspective-1000">
        <!-- 3D 'Pop-out' Effect Base -->
        <div class="absolute -inset-1 rounded-3xl bg-gradient-to-br from-red-100/50 to-red-200/50 dark:from-red-900/50 dark:to-red-800/50
                    transform -rotate-y-1 -rotate-x-1 translate-z-10 group-hover:rotate-y-0 group-hover:rotate-x-0 group-hover:translate-z-0 transition-transform duration-500"></div>

        <div class="relative z-10 text-center">
          <div class="w-24 h-24 mx-auto mb-6 bg-red-600 dark:bg-red-700 rounded-full flex items-center justify-center
                      shadow-inner border-4 border-red-400 dark:border-red-500
                      transform transition-transform duration-300 group-hover:scale-110">
            <svg class="w-12 h-12 text-red-50 dark:text-red-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="1.5" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9H3m0 0l3 3m-3-3l3-3m0 0V3m0 3V3m0 3v12m0-3h6m0 0h6m-6 0l3 3m-3-3l3-3m-3 3v6m0 0v-6
              

                <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden p-4 font-serif">

  <!-- Background geometric patterns (simplified for Art Deco feel) -->
  <div class="absolute inset-0 pointer-events-none opacity-5 dark:opacity-10">
    <div class="absolute top-1/4 left-1/4 w-48 h-48 border border-gray-400 dark:border-gray-700 transform rotate-45"></div>
    <div class="absolute bottom-1/4 right-1/4 w-64 h-64 border-2 border-gray-300 dark:border-gray-800 transform -rotate-30"></div>
    <div class="absolute top-1/3 right-1/4 w-32 h-32 border-dashed border-gray-400 dark:border-gray-700 transform rotate-60"></div>
  </div>

  <!-- Tooltip Trigger Wrapper -->
  <div class="group relative inline-block z-10">
    <button class="relative px-6 py-3 bg-gradient-to-br from-gray-800 to-gray-600 dark:from-gray-200 dark:to-gray-400 text-gray-100 dark:text-gray-900 font-bold text-lg tracking-wider rounded-md 
                   shadow-lg transition-all duration-300 ease-in-out 
                   hover:from-gray-700 hover:to-gray-500 hover:dark:from-gray-300 hover:dark:to-gray-500 
                   active:scale-95 overflow-hidden border border-gray-500 dark:border-gray-500 
                   focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">
      <span class="relative z-10">Explore Art Deco</span>
      <!-- Subtle geometric overlay on button -->
      <div class="absolute inset-0 bg-gradient-to-br from-transparent via-gray-700/10 to-gray-500/10 dark:via-gray-300/10 dark:to-gray-100/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 w-72 md:w-96 p-6 
                bg-white dark:bg-gray-800 border-2 border-gray-700 dark:border-gray-400 
                shadow-2xl rounded-lg opacity-0 pointer-events-none 
                group-hover:opacity-100 group-hover:pointer-events-auto 
                transform scale-90 group-hover:scale-100 transition-all duration-300 ease-in-out 
                origin-bottom-left z-20
                before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:w-0 before:h-0 before:border-l-[12px] before:border-l-transparent before:border-r-[12px] before:border-r-transparent before:border-t-[12px] before:border-t-gray-700 dark:before:border-t-gray-400 
                after:absolute after:left-1/2 after:top-full after:-translate-x-1/2 after:mt-[2px] after:w-0 after:h-0 after:border-l-[10px] after:border-l-transparent after:border-r-[10px] after:border-r-transparent after:border-t-[10px] after:border-t-white dark:after:border-t-gray-800">

      <!-- Header Section -->
      <div class="flex items-center justify-between pb-4 mb-4 border-b border-gray-300 dark:border-gray-600 relative">
        <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-gray-100 tracking-wide leading-tight">
          <span class="relative inline-block z-10">The Art Deco Era</span>
          <!-- Title Underline/Accent -->
          <span class="absolute bottom-0 left-0 w-full h-1 bg-gray-500 dark:bg-gray-400 transform -skew-x-12 z-0"></span>
        </h3>
        <div class="flex space-x-2">
          <button aria-label="Favorites" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
          </button>
          <button aria-label="Share" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.316l4.94 2.47a3 3 0 10.61-.307L12.067 12h-1.65a3 3 0 10-2.31 3h3.893l1.09-1.091a3 3 0 10.61.307z"></path></svg>
          </button>
        </div>
      </div>

      <!-- Main Content -->
      <div class="text-gray-700 dark:text-gray-300 text-sm md:text-base leading-relaxed mb-4">
        <p class="mb-3">Art Deco, short for Arts Décoratifs, is a distinctive style from the 1920s and 1930s, characterized by rich colors, bold geometric shapes, and lavish ornamentation.</p>
        <p class="mb-3">It emerged in France before WWI and became prominent in the 'Roaring Twenties,' influencing architecture, fashion, and visual arts globally.</p>
        <p>This era epitomized glamour, luxury, and technological progress.</p>
      </div>

      <!-- Key Features/Details (Geometric Blocks) -->
      <div class="grid grid-cols-2 gap-2 mb-4 border-t border-gray-300 dark:border-gray-600 pt-4">
        <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-sm border border-gray-300 dark:border-gray-600 relative overflow-hidden">
          <span class="block font-semibold text-gray-800 dark:text-gray-200 uppercase text-xs md:text-sm mb-1">Era</span>
          <span class="block text-gray-600 dark:text-gray-400 text-xs md:text-sm">1920s-1930s</span>
          <div class="absolute -top-2 -right-2 w-8 h-8 bg-gray-300 dark:bg-gray-600 transform rotate-45"></div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-sm border border-gray-300 dark:border-gray-600 relative overflow-hidden">
          <span class="block font-semibold text-gray-800 dark:text-gray-200 uppercase text-xs md:text-sm mb-1">Origin</span>
          <span class="block text-gray-600 dark:text-gray-400 text-xs md:text-sm">France</span>
          <div class="absolute -bottom-2 -left-2 w-8 h-8 bg-gray-300 dark:bg-gray-600 transform rotate-45"></div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-sm border border-gray-300 dark:border-gray-600 relative overflow-hidden col-span-2">
          <span class="block font-semibold text-gray-800 dark:text-gray-200 uppercase text-xs md:text-sm mb-1">Key Elements</span>
          <span class="block text-gray-600 dark:text-gray-400 text-xs md:text-sm">Geometric shapes, streamlined forms, luxurious materials.</span>
          <div class="absolute -top-2 left-1/2 -translate-x-1/2 w-8 h-8 bg-gray-300 dark:bg-gray-600 transform -rotate-45"></div>
        </div>
      </div>

      <!-- Related Links/Authors (List) -->
      <div class="border-t border-gray-300 dark:border-gray-600 pt-4">
        <h4 class="text-md md:text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Further Reading</h4>
        <ul class="space-y-2">
          <li class="flex items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 group">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-3 border border-gray-400 dark:border-gray-600">
            <a href="#" class="underline-offset-2 hover:underline decoration-1 decoration-gray-500 dark:decoration-gray-400 text-sm md:text-base">The Legacy of Art Deco Architecture</a>
          </li>
          <li class="flex items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 group">
            <img src="https://randomuser.me/api/portraits/men/8.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-3 border border-gray-400 dark:border-gray-600">
            <a href="#" class="underline-offset-2 hover:underline decoration-1 decoration-gray-500 dark:decoration-gray-400 text-sm md:text-base">From Paris to New York: Art Deco's Journey</a>
          </li>
          <li class="flex items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 group">
            <img src="https://randomuser.me/api/portraits/women/15.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-3 border border-gray-400 dark:border-gray-600">
            <a href="#" class="underline-offset-2 hover:underline decoration-1 decoration-gray-500 dark:decoration-gray-400 text-sm md:text-base">Identifying Art Deco: A Style Guide</a>
          </li>
        </ul>
      </div>

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

                <section class="py-12 md:py-20 lg:py-28 bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-50 font-serif overflow-hidden">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
    <div class="text-center mb-12 md:mb-16 lg:mb-20">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-4 dark:text-gray-50">
        Find Your Perfect Match
      </h2>
      <p class="text-lg sm:text-xl lg:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
        Discover meaningful connections in a refined and exclusive environment.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 lg:gap-16">

      <!-- Column 1: Discover -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg transition-all duration-300 hover:shadow-xl dark:hover:shadow-gray-700/50 hover:scale-105">
        <div class="mb-6 w-32 h-32 rounded-full overflow-hidden border-4 border-rose-500 dark:border-rose-400 shadow-lg">
          <img src="https://picsum.photos/300/300?random=1" alt="Discover Profiles" class="w-full h-full object-cover">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold mb-3 dark:text-gray-50">
          Explore Profiles
        </h3>
        <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
          Browse through a curated selection of sophisticated individuals looking for genuine connections.
        </p>
      </div>

      <!-- Column 2: Connect -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg transition-all duration-300 hover:shadow-xl dark:hover:shadow-gray-700/50 hover:scale-105">
        <div class="mb-6 w-32 h-32 rounded-full overflow-hidden border-4 border-rose-500 dark:border-rose-400 shadow-lg">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Connect Seamlessly" class="w-full h-full object-cover">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold mb-3 dark:text-gray-50">
          Connect Seamlessly
        </h3>
        <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
          Initiate conversations with ease using our intuitive messaging system and elegant interface.
        </p>
      </div>

      <!-- Column 3: Thrive -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg transition-all duration-300 hover:shadow-xl dark:hover:shadow-gray-700/50 hover:scale-105">
        <div class="mb-6 w-32 h-32 rounded-full overflow-hidden border-4 border-rose-500 dark:border-rose-400 shadow-lg">
          <img src="https://picsum.photos/300/300?random=2" alt="Build Relationships" class="w-full h-full object-cover">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold mb-3 dark:text-gray-50">
          Build Lasting Bonds
        </h3>
        <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
          Foster meaningful relationships that enrich your life and lead to a brighter future.
        </p>
      </div>

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

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-[150px]">
  <button class="follow-button group relative overflow-hidden px-6 py-2 rounded-full font-semibold text-lg transition-all duration-300 ease-out shadow-md
    bg-gradient-to-r from-red-500 to-purple-600 
    hover:from-purple-600 hover:to-red-500 
    text-white dark:text-gray-100
    focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-red-800">
    <span class="relative z-10 block transition-transform duration-300 ease-in-out group-hover:scale-105" data-text-initial="Follow" data-text-followed="Following">Follow</span>
    <span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-10 pointer-events-none"></span>
  </button>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const button = document.querySelector('.follow-button');
      const buttonText = button.querySelector('span[data-text-initial]');

      let isFollowing = false;

      button.addEventListener('click', () => {
        isFollowing = !isFollowing;

        if (isFollowing) {
          buttonText.textContent = buttonText.dataset.textFollowed;
          button.classList.remove('from-red-500', 'to-purple-600', 'hover:from-purple-600', 'hover:to-red-500');
          button.classList.add('from-gray-400', 'to-gray-500', 'dark:from-gray-700', 'dark:to-gray-800', 'hover:from-gray-500', 'hover:to-gray-400', 'dark:hover:from-gray-800', 'dark:hover:to-gray-700',
          'text-gray-800', 'dark:text-gray-200');
          button.classList.remove('text-white', 'dark:text-gray-100');
        } else {
          buttonText.textContent = buttonText.dataset.textInitial;
          button.classList.remove('from-gray-400', 'to-gray-500', 'dark:from-gray-700', 'dark:to-gray-800', 'hover:from-gray-500', 'hover:to-gray-400', 'dark:hover:from-gray-800', 'dark:hover:to-gray-700',
          'text-gray-800', 'dark:text-gray-200');
          button.classList.add('from-red-500', 'to-purple-600', 'hover:from-purple-600', 'hover:to-red-500',
          'text-white', 'dark:text-gray-100');
        }
      });
    });
  </script>
</div>