레트로위시리스트컴포넌트

<div class="font-sans p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-zinc-900 text-stone-800 dark:text-stone-200 border-t-4 border-amber-800 dark:border-amber-600 rounded-lg shadow-md max-w-4xl mx-auto">
  <div class="flex items-center mb-4">
    <svg class="w-8 h-8 mr-3 text-amber-700 dark:text-amber-500" 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 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
    </svg>
    <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-amber-800 dark:text-amber-300 font-mono">Wish List</h2>
  </div>

  <p class="text-sm sm:text-base mb-6 text-stone-700 dark:text-stone-300">
    This is your personalized collection of items you're interested in. Click 'Add to Cart' to make them yours!
  </p>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

    <!-- Wishlist Item 1 -->
    <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-sm overflow-hidden border border-brown-300 dark:border-zinc-700 transition-transform duration-200 ease-in-out hover:scale-[1.01] flex flex-col">
      <img src="https://picsum.photos/300/200?random=1" alt="Placeholder Image" class="w-full h-48 object-cover object-center border-b border-brown-300 dark:border-zinc-700">
      <div class="p-4 flex-grow">
        <h3 class="text-xl font-semibold mb-2 text-brown-800 dark:text-brown-200 font-mono">Vintage Record Player</h3>
        <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Classic design with modern capabilities. Enjoy your favorite vinyls.</p>
        <p class="text-lg font-bold text-amber-700 dark:text-amber-400">$199.99</p>
      </div>
      <div class="px-4 pb-4">
        <button class="w-full bg-burgundy-700 hover:bg-burgundy-800 text-white font-bold py-2 px-4 rounded transition-colors duration-200 dark:bg-burgundy-600 dark:hover:bg-burgundy-700 focus:outline-none focus:ring-2 focus:ring-burgundy-500">Add to Cart</button>
      </div>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-sm overflow-hidden border border-brown-300 dark:border-zinc-700 transition-transform duration-200 ease-in-out hover:scale-[1.01] flex flex-col">
      <img src="https://picsum.photos/300/200?random=2" alt="Placeholder Image" class="w-full h-48 object-cover object-center border-b border-brown-300 dark:border-zinc-700">
      <div class="p-4 flex-grow">
        <h3 class="text-xl font-semibold mb-2 text-brown-800 dark:text-brown-200 font-mono">Retro Gaming Console</h3>
        <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Relive the 8-bit era with this multi-game console.</p>
        <p class="text-lg font-bold text-amber-700 dark:text-amber-400">$79.50</p>
      </div>
      <div class="px-4 pb-4">
        <button class="w-full bg-burgundy-700 hover:bg-burgundy-800 text-white font-bold py-2 px-4 rounded transition-colors duration-200 dark:bg-burgundy-600 dark:hover:bg-burgundy-700 focus:outline-none focus:ring-2 focus:ring-burgundy-500">Add to Cart</button>
      </div>
    </div>

  </div>

  <div class="text-center mt-8 pt-6 border-t border-amber-200 dark:border-zinc-700 text-sm italic text-stone-500 dark:text-stone-400">
    More items coming soon to your list!
  </div>
</div>