Progress Indicators

                <div class="font-sans bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center mb-10">
      Our Consulting Process
    </h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Step 1 -->
      <div class="relative flex flex-col items-center group">
        <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-yellow-500 text-white font-bold text-2xl transition-all duration-300 group-hover:scale-110 group-hover:bg-yellow-600 shadow-lg">
          1
          <div class="absolute -right-2 top-1/2 w-4 h-1 bg-yellow-500 dark:bg-yellow-400 transform -translate-y-1/2 hidden md:block"></div>
          <div class="absolute -right-2 top-1/2 w-4 h-1 bg-yellow-500 dark:bg-yellow-400 transform -translate-y-1/2 hidden lg:hidden md:block"></div>
        </div>
        <div class="text-center mt-4 w-full md:w-auto">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Initial Consultation</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Understanding your needs and goals to tailor our approach.</p>
        </div>
        <div class="absolute top-16 md:hidden w-1 h-8 bg-yellow-500 dark:bg-yellow-400"></div>
      </div>

      <!-- Step 2 -->
      <div class="relative flex flex-col items-center group">
        <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-orange-500 text-white font-bold text-2xl transition-all duration-300 group-hover:scale-110 group-hover:bg-orange-600 shadow-lg">
          2
          <div class="absolute -left-2 top-1/2 w-4 h-1 bg-yellow-500 dark:bg-orange-400 transform -translate-y-1/2 hidden md:block"></div>
          <div class="absolute -right-2 top-1/2 w-4 h-1 bg-orange-500 dark:bg-orange-400 transform -translate-y-1/2 hidden md:block"></div>
        </div>
        <div class="text-center mt-4 w-full md:w-auto">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Strategy & Planning</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Developing a custom strategy roadmap and detailed action plans.</p>
        </div>
        <div class="absolute top-16 md:hidden w-1 h-8 bg-orange-500 dark:bg-orange-400"></div>
      </div>

      <!-- Step 3 -->
      <div class="relative flex flex-col items-center group">
        <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-red-500 text-white font-bold text-2xl transition-all duration-300 group-hover:scale-110 group-hover:bg-red-600 shadow-lg">
          3
          <div class="absolute -left-2 top-1/2 w-4 h-1 bg-orange-500 dark:bg-red-400 transform -translate-y-1/2 hidden md:block"></div>
        </div>
        <div class="text-center mt-4 w-full md:w-auto">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Execution & Review</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Implementing solutions and continuously reviewing progress.</p>
        </div>
      </div>
    </div>
  </div>
</div>
              

                <div class="font-sans bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-6 md:p-10 lg:p-16 antialiased">
  <h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center mb-12 transform -rotate-2 selection:bg-yellow-200 selection:text-black dark:selection:bg-yellow-800 dark:selection:text-white transition-colors duration-300">
    <span class="block bg-gradient-to-r from-yellow-500 to-amber-600 dark:from-yellow-400 dark:to-amber-500 text-transparent bg-clip-text drop-shadow-lg">Your Career Journey</span>
    <span class="block text-2xl md:text-3xl text-gray-600 dark:text-gray-400 mt-2 tracking-wide">Progress Overview</span>
  </h2>

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

    <!-- Left Column: Overall Progress -->
    <div class="lg:col-span-1 bg-white dark:bg-gray-850 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform hover:scale-[1.01] transition-all duration-300 border-4 border-yellow-400 dark:border-amber-600">
      <div class="p-6 md:p-8 flex flex-col justify-between h-full">
        <div>
          <div class="text-center mb-8">
            <div class="relative w-48 h-48 mx-auto mb-4">
              <svg class="w-full h-full transform rotate-[-90deg]" viewBox="0 0 100 100">
                <circle class="text-gray-200 dark:text-gray-700 stroke-current" stroke-width="6" cx="50" cy="50" r="40" fill="transparent"></circle>
                <circle class="text-yellow-500 stroke-current progress-circle transition-all duration-1000 ease-out" stroke-width="6" stroke-linecap="round" cx="50" cy="50" r="40" fill="transparent" stroke-dasharray="calc(2.51 * 75) 251"></circle>
              </svg>
              <div class="absolute inset-0 flex flex-col items-center justify-center">
                <span class="text-5xl font-bold bg-gradient-to-r from-yellow-500 to-amber-600 dark:from-yellow-400 dark:to-amber-500 text-transparent bg-clip-text">75%</span>
                <span class="text-lg text-gray-600 dark:text-gray-400">Completed</span>
              </div>
            </div>
            <p class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">Overall Completion</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Your journey unfolds with great progress.</p>
          </div>

          <div class="space-y-4">
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-400 shadow-md"></div>
              <span class="text-sm text-gray-600 dark:text-gray-400">Profile Setup: <span class="font-semibold text-gray-800 dark:text-gray-200">100%</span></span>
              <!-- Example of a small progress bar for sub-sections -->
              <div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                <div class="bg-blue-500 dark:bg-blue-400 h-full rounded-full" style="width: 100%;"></div>
              </div>
            </div>
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-green-500 dark:bg-green-400 shadow-md"></div>
              <span class="text-sm text-gray-600 dark:text-gray-400">Skills & Experience: <span class="font-semibold text-gray-800 dark:text-gray-200">80%</span></span>
              <div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                <div class="bg-green-500 dark:bg-green-400 h-full rounded-full" style="width: 80%;"></div>
              </div>
            </div>
            <div class="flex items-center space-x-3">
              <div class="w-4 h-4 rounded-full bg-purple-500 dark:bg-purple-400 shadow-md"></div>
              <span class="text-sm text-gray-600 dark:text-gray-400">Job Applications: <span class="font-semibold text-gray-800 dark:text-gray-200">60%</span></span>
              <div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                <div class="bg-purple-500 dark:bg-purple-400 h-full rounded-full" style="width: 60%;"></div>
              </div>
            </div>
          </div>
        </div>

        <button class="mt-8 w-full py-3 px-6 rounded-lg bg-yellow-500 hover:bg-amber-600 dark:bg-amber-600 dark:hover:bg-yellow-500 text-white font-bold text-lg shadow-lg transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-amber-800">
          View Full Details
        </button>
      </div>
    </div>

    <!-- Right Columns: Milestones & Challenges -->
    <div class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Milestones Card -->
      <div class="bg-white dark:bg-gray-850 rounded-3xl shadow-xl dark:shadow-2xl p-6 md:p-8 transform hover:scale-[1.01] transition-all duration-300 border-4 border-yellow-400 dark:border-amber-600">
        <h3 class="text-3xl font-bold bg-gradient-to-r from-blue-500 to-cyan-600 dark:from-blue-400 dark:to-cyan-500 text-transparent bg-clip-text mb-6 pb-2 border-b-2 border-blue-200 dark:border-cyan-700 text-center md:text-left">🚀 Milestones Achieved</h3>
        <div class="space-y-6">
          <div class="flex items-start">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-blue-500 dark:bg-blue-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">Profile Completed</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">All essential information filled on 2023-10-26.</p>
            </div>
          </div>
          <div class="flex items-start">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-cyan-500 dark:bg-cyan-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">First 5 Applications</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Successfully applied to 5 jobs on 2023-11-01.</p>
            </div>
          </div>
          <div class="flex items-start opacity-70">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-gray-600 dark:text-gray-400 text-xl font-bold mr-4 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-700 dark:text-gray-300 text-lg">Awaiting Interview Invite</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">Next milestone: confirm an interview request.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Challenges Card -->
      <div class="bg-white dark:bg-gray-850 rounded-3xl shadow-xl dark:shadow-2xl p-6 md:p-8 transform hover:scale-[1.01] transition-all duration-300 border-4 border-yellow-400 dark:border-amber-600">
        <h3 class="text-3xl font-bold bg-gradient-to-r from-red-500 to-orange-600 dark:from-red-400 dark:to-orange-500 text-transparent bg-clip-text mb-6 pb-2 border-b-2 border-red-200 dark:border-orange-700 text-center md:text-left">⚠️ Pending Actions</h3>
        <div class="space-y-6">
          <div class="flex items-start">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-red-500 dark:bg-red-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">Update Resume</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Your resume may need updates for relevance. <a href="#" class="text-red-500 hover:underline dark:text-red-400">Action Required</a></p>
            </div>
          </div>
          <div class="flex items-start">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-orange-500 dark:bg-orange-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">Review Notifications</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">You have 3 unread messages from recruiters. <a href="#" class="text-orange-500 hover:underline dark:text-orange-400">Check Now</a></p>
            </div>
          </div>
          <div class="flex items-start">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-green-500 dark:bg-green-400 flex items-center justify-center text-white text-xl font-bold mr-4 shadow-md">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg>
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 text-lg">Add Cover Letter</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Enhance your application for 'Senior Dev Role' job. <a href="#" class="text-green-500 hover:underline dark:text-green-400">Upload Here</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Avatar & CTA card -->
    <div class="lg:col-span-3 bg-white dark:bg-gray-850 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden p-6 md:p-8 flex flex-col md:flex-row items-center justify-between mt-8 transform hover:scale-[1.005] transition-all duration-300 border-4 border-yellow-400 dark:border-amber-600">
      <div class="flex items-center space-x-6 mb-6 md:mb-0">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full border-4 border-yellow-400 dark:border-amber-600 shadow-lg">
        <div>
          <p class="text-3xl font-extra-bold bg-gradient-to-r from-teal-500 to-lime-600 dark:from-teal-400 dark:to-lime-500 text-transparent bg-clip-text">Keep Up The Great Work!</p>
          <p class="text-lg text-gray-600 dark:text-gray-400 mt-1">Stay focused on your career goals.</p>
        </div>
      </div>
      <button class="py-4 px-8 rounded-full bg-teal-500 hover:bg-lime-600 dark:bg-lime-600 dark:hover:bg-teal-500 text-white font-bold text-xl shadow-lg transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-lime-800">
        Explore New Opportunities
      </button>
    </div>

  </div>
</div>

<style>
  /* Custom CSS for the circular progress bar animation */
  .progress-circle {
    transform-origin: center;
    transition: stroke-dasharray 1s ease-out;
    stroke-dashoffset: 0;
  }

  /* Art Deco inspired background patterns */
  .bg-gray-50 {
    background-image: radial-gradient(circle at 100% 150%, #fefce8, rgba(255,255,255,0) 50%), radial-gradient(circle at 0% 150%, #dbeafe, rgba(255,255,255,0) 50%), radial-gradient(circle at 100% 50%, #fefce8, rgba(255,255,255,0) 50%), radial-gradient(circle at 0% 50%, #dbeafe, rgba(255,255,255,0) 50%), radial-gradient(circle at 100% 0%, #dbeafe, rgba(255,255,255,0) 50%), radial-gradient(circle at 0% 0%, #fefce8, rgba(255,255,255,0) 50%), radial-gradient(circle at 50% 100%, #dbeafe, rgba(255,255,255,0) 50%), radial-gradient(circle at 50% 0%, #fefce8, rgba(255,255,255,0) 50%);
    background-size: 80px 80px;
    background-position: 0 0, 80px 80px, 80px 0, 0 80px;
  }

  .dark .bg-gray-900 {
    background-image: radial-gradient(circle at 100% 150%, #2f344f, rgba(0,0,0,0) 50%), radial-gradient(circle at 0% 150%, #3a3f5a, rgba(0,0,0,0) 50%), radial-gradient(circle at 100% 50%, #2f344f, rgba(0,0,0,0) 50%), radial-gradient(circle at 0% 50%, #3a3f5a, rgba(0,0,0,0) 50%), radial-gradient(circle at 100% 0%, #3a3f5a, rgba(0,0,0,0) 50%), radial-gradient(circle at 0% 0%, #2f344f, rgba(0,0,0,0) 50%), radial-gradient(circle at 50% 100%, #3a3f5a, rgba(0,0,0,0) 50%), radial-gradient(circle at 50% 0%, #2f344f, rgba(0,0,0,0) 50%);
    background-size: 80px 80px;
    background-position: 0 0, 80px 80px, 80px 0, 0 80px;
  }

  .bg-gray-850 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 40 49 / var(--tw-bg-opacity)); /* Slightly lighter than gray-900 for card background */
  }

  .dark .bg-gray-850 {
    --tw-bg-opacity: 1;
    background-color: rgb(34 40 49 / var(--tw-bg-opacity));
  }

  /* Glowing effect for specific backgrounds */
  .dark .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 40px -10px rgba(255, 255, 0, 0.2);
  }

  .selection\:bg-yellow-200::selection {
    background-color: var(--tw-selection-background-color, #fef08a);
  }
  .selection\:text-black::selection {
    color: var(--tw-selection-color, #000);
  }
  .dark .selection\:bg-yellow-800::selection {
    background-color: var(--tw-selection-background-color, #92400e);
  }
  .dark .selection\:text-white::selection {
    color: var(--tw-selection-color, #fff);
  }
</style>
              

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-pink-100 via-purple-100 to-blue-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-xl p-6 md:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out
    border border-pink-200 dark:border-gray-700
    hover:shadow-2xl hover:scale-[1.01]
    relative
    before:content-[''] before:absolute before:inset-0 before:rounded-3xl before:bg-gradient-to-br before:from-pink-50 before:via-purple-50 before:to-blue-50 before:opacity-0 hover:before:opacity-100 dark:before:from-gray-800 dark:before:via-gray-700 dark:before:to-gray-600 dark:hover:before:opacity-5">

    <!-- Background '3D' elements -->
    <div class="absolute -top-10 -left-10 w-32 h-32 bg-pink-300 dark:bg-fuchsia-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob"></div>
    <div class="absolute -bottom-8 -right-8 w-40 h-40 bg-purple-300 dark:bg-violet-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000"></div>
    <div class="absolute top-1/4 right-5 w-24 h-24 bg-blue-300 dark:bg-cyan-800 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000"></div>

    <div class="relative z-10 space-y-6">
      <!-- Song Info & Album Art -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-6">
        <div class="relative w-32 h-32 sm:w-24 sm:h-24 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg transform transition-all duration-300 ease-in-out
          bg-gradient-to-br from-pink-300 to-purple-300 dark:from-fuchsia-700 dark:to-violet-700
          hover:scale-105 hover:rotate-3"> 
          <!-- 3D effect border -->
          <div class="absolute inset-0.5 rounded-2xl overflow-hidden">
            <img src="https://picsum.photos/id/1043/300/300" alt="Album Art" class="w-full h-full object-cover" />
          </div>
          <div class="absolute inset-0.5 rounded-2xl border-4 border-white border-opacity-30 dark:border-gray-800 dark:border-opacity-30"></div>
        </div>
        <div class="text-center sm:text-left">
          <h3 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white mb-1 leading-tight tracking-wider transform transition-colors duration-300">
            Dreamy Synthwave
          </h3>
          <p class="text-md sm:text-lg text-gray-600 dark:text-gray-300 tracking-wide transform transition-colors duration-300">
            <span class="font-semibold text-purple-600 dark:text-purple-400">Synthwave Artist</span> - Album Name
          </p>
        </div>
      </div>

      <!-- Progress Bar -->
      <div class="relative py-4">
        <div class="w-full h-4 relative rounded-full bg-pink-200 dark:bg-gray-700 shadow-inner overflow-hidden">
          <!-- 3D 'track' -->
          <div class="absolute inset-0 rounded-full bg-gradient-to-r from-pink-100 via-purple-100 to-blue-100 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
          <div class="absolute bottom-0 left-0 right-0 h-2 bg-pink-300 dark:bg-gray-900 rounded-b-full opacity-30"></div>

          <!-- Progress fill -->
          <div class="absolute top-0 left-0 h-4 rounded-full bg-gradient-to-r from-pink-400 to-purple-400 dark:from-fuchsia-600 dark:to-violet-600 shadow-lg glow-pink-purple transition-all duration-500 ease-out"
            style="width: 65%;">
            <!-- Inner 3D sparkle -->
            <div class="absolute inset-0 rounded-full bg-white opacity-20 dark:opacity-10 glow-white"></div>
            <!-- 3D 'edge' -->
            <div class="absolute bottom-0 left-0 right-0 h-2 bg-purple-500 dark:bg-violet-800 rounded-b-full opacity-50"></div>
          </div>

          <!-- Playhead 'knob' -->
          <div class="absolute top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-gradient-to-tr from-pink-500 to-purple-500 dark:from-fuchsia-700 dark:to-violet-700 shadow-xl
            flex items-center justify-center glow-pink-purple transition-all duration-500 ease-out"
            style="left: 65%; transform: translateX(-50%) translateY(-50%);">
            <div class="w-3 h-3 rounded-full bg-white dark:bg-gray-100 shadow-md"></div>
          </div>
        </div>
        <div class="flex justify-between text-sm mt-2 text-gray-500 dark:text-gray-400">
          <span class="font-medium">2:35</span>
          <span class="font-medium">3:45</span>
        </div>
      </div>

      <!-- Volume/Playback Speed Bars (mini-progress indicators) -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
        <div>
          <label for="volume-slider" class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1">Volume</label>
          <div class="w-full h-3 relative rounded-full bg-teal-100 dark:bg-gray-700 shadow-inner overflow-hidden">
            <div class="absolute inset-0 rounded-full bg-gradient-to-r from-teal-50 to-emerald-50 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
            <div class="absolute bottom-0 left-0 right-0 h-1.5 bg-teal-200 dark:bg-gray-900 rounded-b-full opacity-30"></div>

            <div class="absolute top-0 left-0 h-3 rounded-full bg-gradient-to-r from-teal-400 to-emerald-400 dark:from-emerald-600 dark:to-teal-600 shadow-md glow-teal-emerald"
              style="width: 80%;"></div>
          </div>
        </div>
        <div>
          <label for="speed-slider" class="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1">Speed</label>
          <div class="w-full h-3 relative rounded-full bg-orange-100 dark:bg-gray-700 shadow-inner overflow-hidden">
            <div class="absolute inset-0 rounded-full bg-gradient-to-r from-orange-50 to-amber-50 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 opacity-60 dark:opacity-40"></div>
            <div class="absolute bottom-0 left-0 right-0 h-1.5 bg-orange-200 dark:bg-gray-900 rounded-b-full opacity-30"></div>

            <div class="absolute top-0 left-0 h-3 rounded-full bg-gradient-to-r from-orange-400 to-amber-400 dark:from-amber-600 dark:to-orange-600 shadow-md glow-orange-amber"
              style="width: 50%;"></div>
          </div>
        </div>
      </div>

      <!-- Controls (example, not focus of progress) -->
      <div class="flex justify-around items-center pt-6 text-gray-500 dark:text-gray-400">
        <button class="p-3 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out transform hover:scale-110 shadow-sm dark:shadow-md">
          <!-- < Previous Icon -->
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
          </svg>
        </button>
        <button class="p-4 rounded-full bg-gradient-to-br from-pink-500 to-purple-500 dark:from-fuchsia-700 dark:to-violet-700 text-white shadow-xl glow-pink-purple
          transition-all duration-300 ease-in-out transform hover:scale-105 hover:rotate-3 active:scale-95
          relative overflow-hidden group"
          aria-label="Play">
          <div class="absolute inset-0 rounded-full bg-white opacity-10 dark:opacity-5 group-hover:opacity-20 transition-opacity duration-300"></div>
          <!-- Play Icon -->
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
        <button class="p-3 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 ease-in-out transform hover:scale-110 shadow-sm dark:shadow-md">
          <!-- Next Icon -->
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
          </svg>
        </button>
      </div>
    </div>

  </div>
</div>

<!-- Custom Styles for 3D effect and animations -->
<style>
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, 0.4, 0.4, 0.8);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Glow effects */
  .glow-pink-purple {
    filter: drop-shadow(0 4px 8px rgba(236, 72, 153, 0.4)) drop-shadow(0 2px 4px rgba(168, 85, 247, 0.3));
  }
  .dark .glow-pink-purple {
    filter: drop-shadow(0 4px 8px rgba(186, 104, 200, 0.3)) drop-shadow(0 2px 4px rgba(126, 75, 140, 0.2)); /* Darker glow for dark mode */
  }

  .glow-teal-emerald {
    filter: drop-shadow(0 2px 4px rgba(20, 184, 166, 0.3)) drop-shadow(0 1px 2px rgba(16, 185, 129, 0.2));
  }
  .dark .glow-teal-emerald {
    filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.2)) drop-shadow(0 1px 2px rgba(20, 184, 166, 0.1));
  }

  .glow-orange-amber {
    filter: drop-shadow(0 2px 4px rgba(249, 115, 22, 0.3)) drop-shadow(0 1px 2px rgba(245, 158, 11, 0.2));
  }
  .dark .glow-orange-amber {
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.2)) drop-shadow(0 1px 2px rgba(249, 115, 22, 0.1));
  }

  .glow-white {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
  }

</style>
              

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-rose-50 dark:bg-zinc-900 font-sans">
  <div class="max-w-6xl mx-auto bg-white dark:bg-zinc-800 rounded-lg shadow-xl overflow-hidden print-like-border transition-colors duration-300">
    <div class="p-6 sm:p-8 md:p-10 border-b border-rose-100 dark:border-rose-900">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-pink-600 dark:text-pink-400 mb-2 font-serif tracking-tight">Order Progress</h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300">Track the journey of your current marketplace order.</p>
    </div>

    <div class="px-4 py-6 sm:p-8 md:p-10">
      <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
        <!-- Progress Steps -->
        <div class="flex-1 w-full lg:w-auto">
          <ol class="relative text-gray-500 border-s-2 border-rose-200 dark:border-rose-700 space-y-8">
            <!-- Step 1: Order Placed -->
            <li class="mb-8 ms-6 flex items-start group">
              <span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-pink-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6 9a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
              </span>
              <div class="ml-2 flex flex-col">
                <h3 class="font-semibold text-lg text-pink-600 dark:text-pink-400 leading-tight">Order Placed</h3>
                <time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 10:30 AM</time>
                <p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Your order #ABC-123 has been successfully placed.</p>
              </div>
            </li>

            <!-- Step 2: Payment Confirmed -->
            <li class="mb-8 ms-6 flex items-start group">
              <span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-pink-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0113 3.414L16.586 7A2 2 0 0118 8.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 2v6h5a1 1 0 011 1v3h2V8H8a2 2 0 01-2-2z" clip-rule="evenodd"></path></svg>
              </span>
              <div class="ml-2 flex flex-col">
                <h3 class="font-semibold text-lg text-pink-600 dark:text-pink-400 leading-tight">Payment Confirmed</h3>
                <time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 10:35 AM</time>
                <p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Payment processed successfully. Awaiting vendor confirmation.</p>
              </div>
            </li>

            <!-- Step 3: Vendor Preparing Order -->
            <li class="mb-8 ms-6 flex items-start group">
              <span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-pink-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.885 9.117a.75.75 0 01-.164.839l-3.056 3.055a.75.75 0 01-1.06-.007 2.25 2.25 0 00-3.327-.374l-3.326-2.66c-.664-.53-.984-1.393-.823-2.185.166-.803.791-1.394 1.579-1.554.717-.183 1.488.083 2.052.542l.685.549a.75.75 0 01.077 1.18L9 11.25l-.234.187a.75.75 0 01-.762-.058L5.27 8.358a.75.75 0 01-.013-1.054.75.75 0 011.054-.013l3.41 2.728 2.302-2.302a.75.75 0 011.061 0l3.056 3.055a.75.75 0 010 1.06z" clip-rule="evenodd"></path></svg>
              </span>
              <div class="ml-2 flex flex-col">
                <h3 class="font-semibold text-lg text-pink-600 dark:text-pink-400 leading-tight">Vendor Preparing Order</h3>
                <time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 11:00 AM</time>
                <p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Your items are being prepared by <span class="font-medium text-pink-700 dark:text-pink-300">Sweet Treats Bakery</span>.</p>
              </div>
            </li>

            <!-- Step 4: Out for Delivery (Current) -->
            <li class="mb-8 ms-6 flex items-start group">
              <span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-lime-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.52 1.715a.75.75 0 01.46 0l6.5 2.25a.75.75 0 01.46 1.07V15.5a.75.75 0 01-.75.75h-3.72a.75.75 0 01-.689-.5l-1.442-3.605A.75.75 0 0010.5 11.25h-1.5a.75.75 0 00-.689.444L6.97 15.5H3.75a.75.75 0 01-.75-.75V5.035a.75.75 0 01.46-1.07l6.5-2.25zM12 1.5v3.25h2.5V1.5h-2.5z"/></svg>
              </span>
              <div class="ml-2 flex flex-col">
                <h3 class="font-bold text-lg text-lime-600 dark:text-lime-400 leading-tight">Out for Delivery</h3>
                <time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 02:15 PM</time>
                <p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Your delicious treats are on their way! Estimated arrival: <span class="font-medium text-lime-700 dark:text-lime-300">3:00 PM - 4:00 PM</span>.</p>
                <div class="flex items-center gap-3 mt-3 p-3 bg-lime-50 dark:bg-lime-900 rounded-md shadow-inner border border-lime-200 dark:border-lime-700">
                  <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Delivery Driver" class="w-10 h-10 rounded-full border-2 border-lime-300 dark:border-lime-600">
                  <div>
                    <p class="font-medium text-lime-700 dark:text-lime-300">Driver: John Smith</p>
                    <a href="tel:+1234567890" class="text-sm text-lime-600 dark:text-lime-400 hover:underline flex items-center">
                      <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.774a11.037 11.037 0 006.103 6.103l.774-1.548a1 1 0 011.06-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
                      (123) 456-7890
                    </a>
                  </div>
                </div>
              </div>
            </li>

            <!-- Step 5: Delivered -->
            <li class="ms-6 flex items-start group">
              <span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-rose-200 dark:bg-rose-700 text-gray-400 dark:text-gray-500 shadow-md transition-all duration-300 group-hover:scale-110">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 000-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
              </span>
              <div class="ml-2 flex flex-col">
                <h3 class="font-semibold text-lg text-gray-500 dark:text-gray-400 leading-tight">Delivered</h3>
                <time class="block text-sm text-gray-400 dark:text-gray-600 font-normal leading-none pt-0.5">Awaiting</time>
                <p class="text-base font-normal text-gray-400 dark:text-gray-500 mt-2">Your order will be marked as delivered upon arrival.</p>
              </div>
            </li>
          </ol>
        </div>

        <!-- Order Summary / Details -->
        <div class="relative flex-shrink-0 w-full lg:w-96 p-6 lg:p-8 border border-rose-200 dark:border-rose-700 rounded-lg bg-rose-50 dark:bg-zinc-700 shadow-md transform -rotate-1 perspective-origin-top-left candy-stripes">
          <div class="absolute z-10 w-full h-full inset-0 bg-gradient-to-br from-rose-50/70 via-rose-100/70 to-rose-200/70 dark:from-zinc-700/70 dark:via-zinc-750/70 dark:to-zinc-800/70 mix-blend-overlay"></div>
          <div class="relative z-20">
            <h3 class="text-xl font-bold text-pink-700 dark:text-pink-300 mb-4 font-serif">Order Summary</h3>
            <div class="space-y-3 text-gray-700 dark:text-gray-200">
              <div class="flex justify-between items-center">
                <span class="font-medium">Order ID:</span>
                <span class="text-pink-600 dark:text-pink-400 font-semibold">#ABC-123</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="font-medium">Total Items:</span>
                <span>3</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="font-medium">Total Amount:</span>
                <span class="font-bold text-lg text-lime-600 dark:text-lime-400">$29.99</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="font-medium">Delivery Address:</span>
                <span class="text-right">123 Candy Lane, Sweetville, CA 90210</span>
              </div>
            </div>
            <h4 class="text-lg font-bold text-pink-700 dark:text-pink-300 mt-6 mb-3 font-serif">Items in Order:</h4>
            <ul class="space-y-4">
              <li class="flex items-center gap-3 p-3 bg-white dark:bg-zinc-800 rounded-md shadow-sm border border-rose-100 dark:border-rose-700">
                <img src="https://picsum.photos/80/80?random=1" alt="Item" class="w-16 h-16 rounded-md object-cover border border-rose-200 dark:border-rose-600">
                <div class="flex-1">
                  <p class="font-semibold text-pink-600 dark:text-pink-400">Rainbow Cupcakes (x2)</p>
                  <p class="text-sm text-gray-600 dark:text-gray-300">Vendor: Sweet Treats Bakery</p>
                </div>
              </li>
              <li class="flex items-center gap-3 p-3 bg-white dark:bg-zinc-800 rounded-md shadow-sm border border-rose-100 dark:border-rose-700">
                <img src="https://picsum.photos/80/80?random=2" alt="Item" class="w-16 h-16 rounded-md object-cover border border-rose-200 dark:border-rose-600">
                <div class="flex-1">
                  <p class="font-semibold text-pink-600 dark:text-pink-400">Gummy Bear Mix (x1)</p>
                  <p class="text-sm text-gray-600 dark:text-gray-300">Vendor: Candy Kingdom</p>
                </div>
              </li>
            </ul>
            <button class="mt-8 w-full bg-gradient-to-r from-pink-500 to-rose-500 text-white font-bold py-3 px-6 rounded-lg hover:from-pink-600 hover:to-rose-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-pink-400 transition-all duration-300 shadow-lg">
              View Order Details
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* Basic Paper-like shadow and border on light mode */
    .print-like-border {
      border: 2px solid theme('colors.rose.100');
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    /* Dark mode adjustments for border and shadow */
    .dark .print-like-border {
      border-color: theme('colors.zinc.700');
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    /* Candy Stripes for the Order Summary */
    .candy-stripes {
      background-image: repeating-linear-gradient(
        45deg, 
        theme('colors.rose.100'), 
        theme('colors.rose.100') 10px, 
        theme('colors.pink.50') 10px, 
        theme('colors.pink.50') 20px
      );
      background-size: 40px 40px;
      box-shadow: 5px 5px 0px theme('colors.pink.200'); /* 'paper curl' shadow */
    }

    .dark .candy-stripes {
      background-image: repeating-linear-gradient(
        45deg, 
        theme('colors.zinc.800'), 
        theme('colors.zinc.800') 10px, 
        theme('colors.zinc.700') 10px, 
        theme('colors.zinc.700') 20px
      );
      box-shadow: 5px 5px 0px theme('colors.zinc.900');
    }
  </style>
</div>
              

                <div class="font-sans antialiased bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen">
  <div class="max-w-4xl mx-auto bg-stone-200 dark:bg-stone-800 shadow-xl rounded-lg overflow-hidden border border-stone-300 dark:border-stone-700">
    <!-- Header -->
    <div class="bg-gradient-to-br from-amber-800 to-amber-950 dark:from-amber-900 dark:to-stone-950 p-6 sm:p-8 text-center text-stone-100 relative overflow-hidden">
      <div class="absolute inset-0 bg-repeat opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width=\'6\' height=\'6\' viewBox=\'0 0 6 6\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23000000\' fill-opacity=\'0.4\' fill-rule=\'evenodd\'%3E%3Cpath d=\'M5 0h1L0 6V5zM6 5v1H5z\'%3E%3C/path%3E%3C/g%3E%3C/svg%3E');"></div>
      <h1 class="text-3xl sm:text-4xl font-bold tracking-wider mb-2 text-stone-100 drop-shadow-md">Your Order Progress</h1>
      <p class="text-stone-200 text-lg">From Kitchen to Your Door</p>
    </div>

    <!-- Progress Steps Container -->
    <div class="p-6 sm:p-8 md:p-10 lg:p-12">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 relative">
        <!-- Horizontal Line for Desktop/Tablet -->
        <div class="hidden md:block absolute top-[25px] left-0 right-0 h-1 bg-stone-400 dark:bg-stone-600 mx-8 lg:mx-16"></div>

        <!-- Step 1: Order Placed -->
        <div class="flex flex-col items-center text-center relative z-10">
          <div class="w-12 h-12 sm:w-14 sm:h-14 bg-amber-700 dark:bg-amber-600 rounded-full flex items-center justify-center text-stone-100 font-bold text-2xl border-4 border-amber-500 dark:border-amber-400 shadow-lg">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
          </div>
          <p class="mt-3 text-sm sm:text-base font-semibold text-amber-700 dark:text-amber-300">Order Placed</p>
          <p class="text-xs sm:text-sm text-stone-600 dark:text-stone-400">10:30 AM</p>
        </div>

        <!-- Step 2: Preparing Order -->
        <div class="flex flex-col items-center text-center relative z-10">
          <div class="w-12 h-12 sm:w-14 sm:h-14 bg-amber-700 dark:bg-amber-600 rounded-full flex items-center justify-center text-stone-100 font-bold text-2xl border-4 border-amber-500 dark:border-amber-400 shadow-lg">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h-3a2 2 0 01-2-2V7a2 2 0 012-2h3a2 2 0 012 2v11a2 2 0 01-2 2z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20h3a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v11a2 2 0 002 2z"></path></svg>
          </div>
          <p class="mt-3 text-sm sm:text-base font-semibold text-amber-700 dark:text-amber-300">Preparing Order</p>
          <p class="text-xs sm:text-sm text-stone-600 dark:text-stone-400">10:45 AM</p>
        </div>

        <!-- Step 3: Out For Delivery -->
        <div class="flex flex-col items-center text-center relative z-10">
          <div class="w-12 h-12 sm:w-14 sm:h-14 bg-stone-500 dark:bg-stone-700 rounded-full flex items-center justify-center text-stone-100 font-bold text-2xl border-4 border-stone-400 dark:border-stone-600 shadow-lg opacity-70">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" 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 17l6-6-6-6"></path></svg>
          </div>
          <p class="mt-3 text-sm sm:text-base font-semibold text-stone-700 dark:text-stone-300 opacity-70">Out For Delivery</p>
          <p class="text-xs sm:text-sm text-stone-500 dark:text-stone-400"></p>
        </div>

        <!-- Step 4: Delivered -->
        <div class="flex flex-col items-center text-center relative z-10">
          <div class="w-12 h-12 sm:w-14 sm:h-14 bg-stone-500 dark:bg-stone-700 rounded-full flex items-center justify-center text-stone-100 font-bold text-2xl border-4 border-stone-400 dark:border-stone-600 shadow-lg opacity-70">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
          <p class="mt-3 text-sm sm:text-base font-semibold text-stone-700 dark:text-stone-300 opacity-70">Delivered</p>
          <p class="text-xs sm:text-sm text-stone-500 dark:text-stone-400"></p>
        </div>

        <!-- Vertical Line for Mobile -->
        <div class="absolute inset-y-0 left-1/2 -translate-x-1/2 w-1 bg-stone-400 dark:bg-stone-600 md:hidden"></div>
      </div>
    </div>


    <!-- Delivery Details / Map Section -->
    <div class="bg-stone-300 dark:bg-stone-850 p-6 sm:p-8 md:p-10 lg:p-12 border-t-4 border-amber-800 dark:border-amber-900 border-dashed">
      <h2 class="text-xl sm:text-2xl font-bold text-amber-900 dark:text-amber-200 mb-6 text-center tracking-wide">Delivery Details</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- Driver Info Card -->
        <div class="bg-stone-100 dark:bg-stone-700 rounded-lg shadow-md border border-stone-300 dark:border-stone-600 p-6 flex flex-col items-center text-center md:items-start md:text-left">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Driver Avatar" class="w-24 h-24 rounded-full border-4 border-amber-600 dark:border-amber-400 mb-4 shadow-lg">
          <p class="text-lg font-semibold text-stone-800 dark:text-stone-200">Your Driver: John Doe</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">Estimated Arrival: 11:30 AM</p>
          <a href="tel:+1234567890" class="mt-4 px-5 py-2 bg-amber-700 dark:bg-amber-600 text-stone-100 rounded-lg shadow-md hover:bg-amber-800 dark:hover:bg-amber-500 transition duration-300 flex items-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.134L9.349 14.45a14.001 14.001 0 007.443 7.443l1.815-.545a1 1 0 011.134-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
            Call Driver
          </a>
        </div>

        <!-- Map Placeholder -->
        <div class="bg-stone-100 dark:bg-stone-700 rounded-lg shadow-md border border-stone-300 dark:border-stone-600 p-2 overflow-hidden relative">
          <img src="https://picsum.photos/600/400?grayscale&random=2" alt="Map" class="w-full h-48 md:h-full object-cover rounded-md">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent flex items-end p-4 text-stone-100 font-semibold">
            Tracking Live...
          </div>
        </div>
      </div>
    </div>

    <!-- Decorative Footer -->
    <div class="bg-amber-800 dark:bg-amber-900 h-6 sm:h-8 md:h-10 relative overflow-hidden">
      <div class="absolute inset-0 bg-repeat opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width=\'6\' height=\'6\' viewBox=\'0 0 6 6\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23000000\' fill-opacity=\'0.4\' fill-rule=\'evenodd\'%3E%3Cpath d=\'M5 0h1L0 6V5zM6 5v1H5z\'%3E%3C/path%3E%3C/g%3E%3C/svg%3E');"></div>
    </div>
  </div>
</div>
              

                <div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-gray-50 to-gray-200 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans text-gray-800 dark:text-gray-200 flex items-center justify-center">
  <div class="w-full max-w-5xl bg-white dark:bg-gray-850 shadow-xl rounded-xl p-6 sm:p-8 md:p-10 border border-gray-200 dark:border-gray-700 overflow-hidden">

    <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-center mb-6 sm:mb-8 md:mb-10 text-gray-900 dark:text-gray-100 leading-tight">
      Application Progress Tracker
    </h2>

    <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 mb-8 sm:mb-10 md:mb-12">
      <!-- Step Navigation -->
      <div class="flex flex-col sm:flex-row lg:flex-col items-center lg:items-start w-full lg:w-auto mb-6 lg:mb-0">
        <div class="flex flex-wrap justify-center sm:justify-start lg:block space-x-2 sm:space-x-4 lg:space-x-0 lg:space-y-4 mb-4 lg:mb-0">
          <a href="#" class="flex items-center text-sm sm:text-base font-medium rounded-full px-4 py-2 transition-all duration-300 
            bg-blue-600/10 text-blue-700 dark:bg-blue-400/20 dark:text-blue-300 shadow-sm hover:underline">
            <svg class="w-4 h-4 mr-2 hidden sm:block" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span class="block">Step 1: Personal Details</span>
          </a>
          <a href="#" class="flex items-center text-sm sm:text-base font-medium rounded-full px-4 py-2 transition-all duration-300 
            bg-blue-500/5 text-blue-600 dark:bg-gray-700/50 dark:text-gray-400 hover:text-blue-700 dark:hover:text-blue-300 hover:bg-blue-600/10 dark:hover:bg-blue-400/20 shadow-sm">
            <svg class="w-4 h-4 mr-2 hidden sm:block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="block">Step 2: Address Information</span>
          </a>
          <a href="#" class="flex items-center text-sm sm:text-base font-medium rounded-full px-4 py-2 transition-all duration-300 
            bg-gray-100 dark:bg-gray-750 text-gray-500 dark:text-gray-400 cursor-not-allowed">
            <svg class="w-4 h-4 mr-2 hidden sm:block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="block">Step 3: Document Upload</span>
          </a>
          <a href="#" class="flex items-center text-sm sm:text-base font-medium rounded-full px-4 py-2 transition-all duration-300 
            bg-gray-100 dark:bg-gray-750 text-gray-500 dark:text-gray-400 cursor-not-allowed">
            <svg class="w-4 h-4 mr-2 hidden sm:block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="block">Step 4: Review and Submit</span>
          </a>
        </div>
      </div>

      <!-- Overall Progress Bar -->
      <div class="flex-1 w-full lg:w-auto lg:max-w-md">
        <h3 class="text-lg font-semibold mb-2 text-gray-800 dark:text-gray-200 text-center lg:text-left">Overall Progress: 50% Complete</h3>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden relative">
          <div class="h-full bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 rounded-full transition-all duration-500 ease-out"
               style="width: 50%;">
            <span class="sr-only">50% Complete</span>
          </div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white dark:text-gray-200">50%</span>
        </div>
      </div>
    </div>

    <!-- Current Step Details -->
    <div class="border-t border-gray-200 dark:border-gray-700 pt-6 sm:pt-8">
      <h3 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Current Step: Personal Details</h3>
      <p class="text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
        Please provide your basic personal information. All fields are required to proceed to the next step. Your data is securely handled and protected in accordance with government regulations.
      </p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 md:gap-8 mb-8">
        <div>
          <label for="firstName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label>
          <input type="text" id="firstName" name="firstName" placeholder="e.g., John" class="appearance-none block w-full px-4 py-2 sm:py-2.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200">
        </div>
        <div>
          <label for="lastName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label>
          <input type="text" id="lastName" name="lastName" placeholder="e.g., Doe" class="appearance-none block w-full px-4 py-2 sm:py-2.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200">
        </div>
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
          <input type="email" id="email" name="email" placeholder="e.g., [email protected]" class="appearance-none block w-full px-4 py-2 sm:py-2.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200">
        </div>
        <div>
          <label for="dob" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Date of Birth</label>
          <input type="date" id="dob" name="dob" class="appearance-none block w-full px-4 py-2 sm:py-2.5 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200">
        </div>
      </div>

      <div class="flex justify-end gap-3">
        <button type="button" class="px-6 py-2 sm:py-2.5 rounded-md text-base font-medium 
          bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300 
          hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 
          focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-850">
          Save Draft
        </button>
        <button type="button" class="px-6 py-2 sm:py-2.5 rounded-md text-base font-medium 
          bg-gradient-to-r from-blue-500 to-blue-700 text-white dark:from-blue-700 dark:to-blue-900 
          shadow-blue-500/30 hover:from-blue-600 hover:to-blue-800 dark:hover:from-blue-800 dark:hover:to-blue-950 transition-all duration-300 
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">
          Next Step
        </button>
      </div>
    </div>
  </div>
</div>
              

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 font-sans text-gray-800 dark:text-gray-200 min-h-screen">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-400 mb-2 tracking-tight">Project Status Overview</h2>
      <p class="text-gray-600 dark:text-gray-400 text-lg">Comprehensive progress tracking for 'Aurora Borealis' initiative.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-2 sm:gap-4 p-4 sm:p-6 md:p-8">
      <!-- Left Column: Primary Progress Indicators -->
      <div class="lg:col-span-2 space-y-6 sm:space-y-8">
        <!-- Overall Project Progress -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
            Overall Project Progress
          </h3>
          <div class="mb-2 flex justify-between items-center">
            <span class="text-lg font-medium text-blue-700 dark:text-blue-300">75% Complete</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">Target: 90% by EOM</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden border border-gray-300 dark:border-gray-600">
            <div class="bg-blue-600 dark:bg-blue-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 75%;"></div>
          </div>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Last Updated: 2 min ago</p>
        </section>

        <!-- Key Milestones Progress -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Key Milestones
          </h3>
          <div class="space-y-4">
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 1: Design & Planning</span>
                <span class="text-md font-medium text-emerald-600 dark:text-emerald-400">100%</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-emerald-600 dark:bg-emerald-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 100%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 2: Development & Integration</span>
                <span class="text-md font-medium text-yellow-600 dark:text-yellow-400">60%</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-yellow-600 dark:bg-yellow-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 60%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 3: Testing & Deployment</span>
                <span class="text-md font-medium text-red-600 dark:text-red-400">20%</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-red-600 dark:bg-red-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 20%;"></div>
              </div>
            </div>
          </div>
        </section>

        <!-- Resource Utilization -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-cyan-600 dark:text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            Resource Utilization
          </h3>
          <div class="space-y-4">
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Budget Allocation</span>
                <span class="text-md font-medium text-orange-600 dark:text-orange-400">85% Used</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-orange-600 dark:bg-orange-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 85%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Team Workload</span>
                <span class="text-md font-medium text-green-600 dark:text-green-400">70% Capacity</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-green-600 dark:bg-green-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 70%;"></div>
              </div>
            </div>
          </div>
        </section>
      </div>

      <!-- Right Column: Status & Updates -->
      <div class="lg:col-span-1 space-y-6 sm:space-y-8">
        <!-- Project Status Board -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-purple-600 dark:text-purple-400" 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 17L12 20L15 17M9 7L12 4L15 7M21 12H3"></path></svg>
            Current Status
          </h3>
          <dl class="divide-y divide-gray-200 dark:divide-gray-700">
            <div class="flex justify-between py-3">
              <dt class="text-gray-600 dark:text-gray-400">Overall Health:</dt>
              <dd class="font-semibold text-lg text-emerald-600 dark:text-emerald-400">Stable</dd>
            </div>
            <div class="flex justify-between py-3">
              <dt class="text-gray-600 dark:text-gray-400">Next Deadline:</dt>
              <dd class="font-semibold text-lg text-blue-600 dark:text-blue-400">Feb 28, 2024</dd>
            </div>
            <div class="flex justify-between py-3">
              <dt class="text-gray-600 dark:text-gray-400">Critical Issues:</dt>
              <dd class="font-semibold text-lg text-red-600 dark:text-red-400">2 Open</dd>
            </div>
            <div class="flex justify-between py-3">
              <dt class="text-gray-600 dark:text-gray-400">Team Capacity:</dt>
              <dd class="font-semibold text-lg text-orange-600 dark:text-orange-400">Stretched</dd>
            </div>
          </dl>
        </section>

        <!-- Recent Activity -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Recent Activity
          </h3>
          <ul class="space-y-4">
            <li class="flex items-start">
              <div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-purple-500"></div>
              <div>
                <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">Dev Team</span> updated 'Auth Module' to 90%.</p>
                <time datetime="2024-02-20" class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</time>
              </div>
            </li>
            <li class="flex items-start">
              <div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-orange-500"></div>
              <div>
                <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">QA Team</span> reported 2 critical bugs in 'Payment Gateway'.</p>
                <time datetime="2024-02-19" class="text-sm text-gray-500 dark:text-gray-400">Yesterday</time>
              </div>
            </li>
            <li class="flex items-start">
              <div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-emerald-500"></div>
              <div>
                <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">Project Manager</span> approved 'Phase 1' completion.</p>
                <time datetime="2024-02-18" class="text-sm text-gray-500 dark:text-gray-400">2 days ago</time>
              </div>
            </li>
          </ul>
        </section>

        <!-- Team Members -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-sky-600 dark:text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857m7.5 1.857A2.75 2.75 0 1011 4.252A2.75 2.75 0 0017 17.009zM2 13V7a3 3 0 015.356-1.857M2 13v6a3 3 0 005.356 1.857"></path></svg>
            Core Team
          </h3>
          <div class="flex flex-wrap gap-3">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-blue-500 dark:border-blue-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar of Sarah Johnson">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-500 dark:border-emerald-400" src="https://randomuser.me/api/portraits/men/83.jpg" alt="Avatar of David Lee">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-purple-500 dark:border-purple-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Emily White">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-orange-500 dark:border-orange-400" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar of Michael Brown">
            <a href="#" class="w-12 h-12 rounded-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 font-semibold text-lg border-2 border-gray-400 dark:border-gray-500 transition-colors hover:bg-gray-300 dark:hover:bg-gray-600" aria-label="View all team members">+5</a>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="p-6 sm:p-8">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-pink-600 dark:text-pink-400 mb-2 text-center">
        Your Job Hunt Adventure!
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 text-center">
        Let's track your progress, one sweet step at a time.
      </p>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
        <!-- Application Overview Card -->
        <div class="bg-pink-50 dark:bg-gray-600 rounded-2xl p-6 shadow-md transition-all duration-300 transform hover:scale-105">
          <h3 class="text-xl font-bold text-pink-700 dark:text-pink-300 mb-3">Current Application</h3>
          <p class="text-2xl font-extrabold text-purple-700 dark:text-purple-300">Frontend Developer</p>
          <p class="text-gray-600 dark:text-gray-400 mb-4">at Sparkle Tech Innovations</p>
          <div class="flex items-center text-sm font-medium text-pink-600 dark:text-pink-400">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            Applied on: Apr 12, 2024
          </div>
        </div>

        <!-- Motivational Quote Card -->
        <div class="bg-purple-50 dark:bg-gray-600 rounded-2xl p-6 shadow-md transition-all duration-300 transform hover:scale-105">
          <div class="flex items-center justify-center mb-3">
            <svg class="w-10 h-10 text-purple-600 dark:text-purple-300 mr-3" 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.663 17h4.673M12 3v1m6.414 1.758l-.707.707M3.757 19.414l.707-.707M1.021 10.499a11.955 11.955 0 010-2.998m12.745 10.603a11.955 11.955 0 01-2.998 0M21.021 10.499a11.955 11.955 0 000-2.998M3.757 4.586L3.05 3.879m16.97 16.97l-.707-.707M16.95 20.485l.707-.707M12 21.001v-1m-4.504-2.504l-.707.707M5.074 1.758L4.367 1.051M10 12h4m-2 4v-4"></path></svg>
            <h3 class="text-xl font-bold text-purple-700 dark:text-purple-300">Keep Shining!</h3>
          </div>
          <blockquote class="text-lg italic text-gray-700 dark:text-gray-300 text-center">
            "Every 'no' gets you closer to a 'yes'! Your dream job is just around the corner."
          </blockquote>
        </div>
      </div>

      <!-- Progress Steps Container -->
      <div class="relative flex flex-col sm:flex-row justify-between items-center w-full px-4 sm:px-0 mb-8">
        <!-- Progress Line (Mobile/Tablet Hidden) -->
        <div class="hidden sm:block absolute top-1/2 left-0 right-0 h-2 bg-gradient-to-r from-pink-200 to-purple-200 dark:from-gray-500 dark:to-gray-600 rounded-full mx-auto -mt-1 z-0"></div>
        <div class="hidden sm:block absolute top-1/2 left-0 h-2 bg-gradient-to-r from-pink-500 to-purple-500 dark:from-mint-400 dark:to-pink-400 rounded-full transition-all duration-1000 ease-out z-10" style="width: 66%;"></div>

        <!-- Steps -->
        <div class="flex flex-col sm:flex-row w-full justify-between z-20">

          <!-- Step 1: Applied -->
          <div class="flex flex-col items-center mb-6 sm:mb-0 w-full sm:w-auto relative group">
            <div class="w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-full bg-gradient-to-br from-pink-400 to-purple-400 dark:from-mint-500 dark:to-teal-500 text-white shadow-lg transform transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl">
              <svg class="w-8 h-8 sm:w-10 sm:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>
            <p class="mt-3 text-sm sm:text-base font-bold text-pink-700 dark:text-pink-300 text-center">1. Applied!</p>
            <div class="absolute hidden group-hover:block bottom-full mb-2 p-2 rounded-lg bg-pink-600 dark:bg-gray-800 text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform -translate-y-2 group-hover:translate-y-0">
              Application Sent (Apr 12)
              <div class="absolute left-1/2 -bottom-1 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-pink-600 dark:border-t-gray-800 -translate-x-1/2"></div>
            </div>
          </div>

          <!-- Step 2: Interview Scheduled -->
          <div class="flex flex-col items-center mb-6 sm:mb-0 w-full sm:w-auto relative group">
            <div class="w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-full bg-gradient-to-br from-mint-400 to-teal-400 dark:from-purple-500 dark:to-pink-500 text-white shadow-lg transform transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl">
              <svg class="w-8 h-8 sm:w-10 sm:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            </div>
            <p class="mt-3 text-sm sm:text-base font-bold text-mint-700 dark:text-mint-300 text-center">2. Interview Time!</p>
            <div class="absolute hidden group-hover:block bottom-full mb-2 p-2 rounded-lg bg-mint-600 dark:bg-gray-800 text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform -translate-y-2 group-hover:translate-y-0">
              Round 1 Interview (Apr 20)
              <div class="absolute left-1/2 -bottom-1 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-mint-600 dark:border-t-gray-800 -translate-x-1/2"></div>
            </div>
          </div>

          <!-- Step 3: Feedback Received -->
          <div class="flex flex-col items-center mb-6 sm:mb-0 w-full sm:w-auto relative group">
            <div class="w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-full bg-gradient-to-br from-orange-400 to-yellow-400 dark:from-amber-500 dark:to-orange-500 text-white shadow-lg opacity-60 transform transition-all duration-300 group-hover:scale-110 group-hover:opacity-100 group-hover:shadow-xl">
              <svg class="w-8 h-8 sm:w-10 sm:h-10" 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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
            </div>
            <p class="mt-3 text-sm sm:text-base font-bold text-orange-700 dark:text-orange-300 opacity-60 group-hover:opacity-100 text-center">3. Feedback Fun!</p>
            <div class="absolute hidden group-hover:block bottom-full mb-2 p-2 rounded-lg bg-orange-600 dark:bg-gray-800 text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform -translate-y-2 group-hover:translate-y-0">
              Awaiting Feedback
              <div class="absolute left-1/2 -bottom-1 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-orange-600 dark:border-t-gray-800 -translate-x-1/2"></div>
            </div>
          </div>

          <!-- Step 4: Offer/Rejection -->
          <div class="flex flex-col items-center w-full sm:w-auto relative group">
            <div class="w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-full bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-500 dark:to-gray-600 text-gray-600 dark:text-gray-200 shadow-inner opacity-40 transform transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl group-hover:opacity-100">
              <svg class="w-8 h-8 sm:w-10 sm:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L12 21l-2.286-6.857L3 12l5.714-2.143L12 3z"></path></svg>
            </div>
            <p class="mt-3 text-sm sm:text-base font-bold text-gray-600 dark:text-gray-400 opacity-40 group-hover:opacity-100 text-center">4. Tada Moment!</p>
            <div class="absolute hidden group-hover:block bottom-full mb-2 p-2 rounded-lg bg-gray-800 dark:bg-gray-800 text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform -translate-y-2 group-hover:translate-y-0">
              Offer or Next Steps
              <div class="absolute left-1/2 -bottom-1 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-gray-800 dark:border-t-gray-800 -translate-x-1/2"></div>
            </div>
          </div>

        </div>
      </div>

      <!-- Call to Action / Next Steps -->
      <div class="text-center mt-12">
        <p class="text-xl text-gray-700 dark:text-gray-300 mb-6">Ready for your next power-up? ✨</p>
        <button class="px-8 py-4 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 dark:from-mint-500 dark:to-teal-500 text-white text-lg font-bold shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-mint-300 animate-bounce-slow">
          View All Applications!
        </button>
      </div>

      <!-- Related Content / Profile Link -->
      <div class="mt-10 pt-8 border-t border-gray-200 dark:border-gray-600 text-center">
        <p class="text-gray-600 dark:text-gray-400">Don't forget to keep your profile sparkling! ✨</p>
        <div class="flex items-center justify-center mt-4">
          <img class="w-12 h-12 rounded-full border-4 border-pink-400 dark:border-mint-400 shadow-md mr-3 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <a href="#" class="text-lg font-semibold text-purple-600 dark:text-purple-300 hover:text-purple-800 dark:hover:text-purple-100 transition-colors duration-300">
            My Sparkle Profile
          </a>
        </div>
      </div>

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

<style>
  /* Custom bouncy animation for button */
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  .animate-bounce-slow {
    animation: bounce-slow 2s infinite ease-in-out;
  }
</style>
              

                <div class="min-h-screen bg-gray-950 p-4 sm:p-8 flex items-center justify-center font-sans dark:bg-gray-950">
  <div class="w-full max-w-4xl bg-gray-900 rounded-lg shadow-xl overflow-hidden dark:bg-gray-900">
    <div class="p-6 sm:p-8 border-b border-gray-800 dark:border-gray-800">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-100 mb-2 dark:text-gray-100">Your Social Progress</h2>
      <p class="text-gray-400 text-sm sm:text-base dark:text-gray-400">Track your engagement and reach milestones.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8">
      <!-- Engagement Progress -->
      <div class="bg-gray-850 p-5 rounded-lg dark:bg-gray-850">
        <h3 class="text-lg font-semibold text-gray-100 mb-3 dark:text-gray-100">Engagement Level</h3>
        <div class="w-full bg-gray-700 rounded-full h-3 dark:bg-gray-700">
          <div class="bg-blue-600 h-3 rounded-full" style="width: 75%;"></div>
        </div>
        <p class="text-sm text-gray-400 mt-2 dark:text-gray-400">75% Towards 'Influencer' Tier</p>
        <div class="flex justify-between items-center text-gray-500 text-xs mt-3 dark:text-gray-500">
          <span>Points: 750/1000</span>
          <span>Next: 250</span>
        </div>
      </div>

      <!-- Post Reach Progress -->
      <div class="bg-gray-850 p-5 rounded-lg dark:bg-gray-850">
        <h3 class="text-lg font-semibold text-gray-100 mb-3 dark:text-gray-100">Post Reach</h3>
        <div class="w-full bg-gray-700 rounded-full h-3 dark:bg-gray-700">
          <div class="bg-purple-600 h-3 rounded-full" style="width: 60%;"></div>
        </div>
        <p class="text-sm text-gray-400 mt-2 dark:text-gray-400">60% of Monthly Target</p>
        <div class="flex justify-between items-center text-gray-500 text-xs mt-3 dark:text-gray-500">
          <span>Reached: 12K/20K</span>
          <span>Remaining: 8K</span>
        </div>
      </div>

      <!-- Profile Completion Progress -->
      <div class="bg-gray-850 p-5 rounded-lg dark:bg-gray-850">
        <h3 class="text-lg font-semibold text-gray-100 mb-3 dark:text-gray-100">Profile Completion</h3>
        <div class="w-full bg-gray-700 rounded-full h-3 dark:bg-gray-700">
          <div class="bg-green-600 h-3 rounded-full" style="width: 90%;"></div>
        </div>
        <p class="text-sm text-gray-400 mt-2 dark:text-gray-400">Almost perfect! Add a bio.</p>
        <div class="flex justify-between items-center text-gray-500 text-xs mt-3 dark:text-gray-500">
          <span>Complete: 9/10 fields</span>
          <span>Missing: 1</span>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 bg-gray-900 border-t border-gray-800 dark:bg-gray-900 dark:border-gray-800">
      <h3 class="text-xl font-semibold text-gray-100 mb-4 dark:text-gray-100">Recent Activity</h3>
      <ul class="space-y-4">
        <!-- Activity Item 1 -->
        <li class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-gray-700 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-200 text-sm dark:text-gray-200"><strong class="text-gray-50">Alex Johnson</strong> liked your post "Summer Vibes".</p>
            <span class="text-gray-500 text-xs dark:text-gray-500">2 hours ago</span>
          </div>
        </li>
        <!-- Activity Item 2 -->
        <li class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-gray-700 dark:border-gray-700" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-200 text-sm dark:text-gray-200"><strong class="text-gray-50">Maria T.</strong> commented on your photo.</p>
            <span class="text-gray-500 text-xs dark:text-gray-500">5 hours ago</span>
          </div>
        </li>
        <!-- Activity Item 3 -->
        <li class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-gray-700 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-200 text-sm dark:text-gray-200"><strong class="text-gray-50">David K.</strong> started following you.</p>
            <span class="text-gray-500 text-xs dark:text-gray-500">1 day ago</span>
          </div>
        </li>
      </ul>
    </div>

    <div class="p-6 sm:p-8 border-t border-gray-800 bg-gray-900 text-center dark:bg-gray-900 dark:border-gray-800">
      <button class="bg-blue-700 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg text-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200 dark:bg-blue-700 dark:hover:bg-blue-600">
        View Detailed Analytics
      </button>
    </div>
  </div>
</div>
              

                <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>