Bio-Sepia-Fortschrittsindikator

<div class="bg-amber-50 dark:bg-stone-900 min-h-screen p-6 sm:p-10 flex items-center justify-center font-sans">
  <div class="w-full max-w-sm rounded-3xl p-6 sm:p-8 bg-gradient-to-br from-amber-100 to-amber-200 dark:from-stone-800 dark:to-stone-950 shadow-xl overflow-hidden relative border-t border-l border-amber-200/50 dark:border-stone-700/50">
    <!-- Organic Shape Background - Placeholder for SVG/Complex CSS shape -->
    <div class="absolute inset-0 opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'100\%' height=\'100\%' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M0 0 C20 40 80 60 100 20 L100 100 L0 100 Z\' fill=\'#ccc\'/><path d=\'M0 100 C20 60 80 40 100 80 L100 0 L0 0 Z\' fill=\'#eee\'/> Sorry, a true organic shape would require inline SVG or complex CSS, which is outside the scope of pure HTML/Tailwind for this placeholder example. For actual organic shapes, embed an SVG background. This is a subtle radial gradient fallback. '); background-size: cover; background-position: center; border-radius: 1.5rem;"></div>
    <div class="relative z-10 space-y-6">
      <div class="text-center">
        <h2 class="text-2xl font-semibold text-amber-900 dark:text-amber-100 mb-2">Your Journey So Far...</h2>
        <p class="text-sm text-amber-700 dark:text-stone-300">Connecting hearts, one step at a time.</p>
      </div>

      <!-- Progress Steps -->
      <div class="flex justify-between items-center relative">
        <div class="absolute top-1/2 left-0 right-0 h-1 bg-amber-300 dark:bg-stone-700 rounded-full -translate-y-1/2"></div>
        <div class="absolute top-1/2 left-0 right-0 h-1 bg-amber-600 dark:bg-amber-500 rounded-full -translate-y-1/2" style="width: 66.66%;"></div>

        <!-- Step 1 -->
        <div class="relative z-10 flex flex-col items-center">
          <div class="w-8 h-8 rounded-full bg-amber-600 dark:bg-amber-500 flex items-center justify-center text-white text-sm font-bold shadow-md">1</div>
          <p class="text-xs mt-2 text-amber-800 dark:text-stone-200 hidden sm:block">Profile</p>
        </div>

        <!-- Step 2 -->
        <div class="relative z-10 flex flex-col items-center">
          <div class="w-8 h-8 rounded-full bg-amber-600 dark:bg-amber-500 flex items-center justify-center text-white text-sm font-bold shadow-md">2</div>
          <p class="text-xs mt-2 text-amber-800 dark:text-stone-200 hidden sm:block">Interests</p>
        </div>

        <!-- Step 3 (Current) -->
        <div class="relative z-10 flex flex-col items-center">
          <div class="w-10 h-10 rounded-full bg-amber-700 dark:bg-amber-600 border-2 border-amber-500 dark:border-amber-400 flex items-center justify-center text-white text-base font-bold shadow-lg ring-4 ring-amber-300/50 dark:ring-amber-500/30">3</div>
          <p class="text-xs mt-2 text-amber-900 dark:text-amber-100 font-medium sm:block">Photos</p>
        </div>

        <!-- Step 4 -->
        <div class="relative z-10 flex flex-col items-center">
          <div class="w-8 h-8 rounded-full bg-amber-300 dark:bg-stone-700 flex items-center justify-center text-amber-700 dark:text-stone-400 text-sm font-bold">4</div>
          <p class="text-xs mt-2 text-amber-700 dark:text-stone-300 hidden sm:block">Ready!</p>
        </div>
      </div>

      <!-- Call to action/Current Step Info -->
      <div class="text-center pt-4">
        <p class="text-amber-800 dark:text-stone-200 font-medium">You are currently on <span class="font-bold text-amber-900 dark:text-amber-100">Step 3: Upload Photos</span></p>
        <button class="mt-6 w-full py-3 px-6 rounded-full bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 text-white text-lg font-semibold shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-300">Continue</button>
      </div>
    </div>
  </div>
</div>