아르 데코 여행 미디어 임베드 구성 요소

<div class="font-sans antialiased bg-stone-100 text-stone-900 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-8 md:p-12 lg:p-16 rounded-xl shadow-2xl relative overflow-hidden">

  <!-- Art Deco Border Elements (Purely Decorative) -->
  <div class="absolute inset-0 border-4 border-stone-800 dark:border-stone-200 rounded-xl pointer-events-none z-0"></div>
  <div class="absolute top-0 left-0 w-16 h-16 bg-gradient-to-br from-amber-500 to-yellow-600 rounded-br-full transform origin-top-left -translate-x-1/2 -translate-y-1/2 opacity-70"></div>
  <div class="absolute bottom-0 right-0 w-16 h-16 bg-gradient-to-tl from-amber-500 to-yellow-600 rounded-tl-full transform origin-bottom-right translate-x-1/2 translate-y-1/2 opacity-70"></div>

  <div class="relative z-10 flex flex-col lg:flex-row gap-8 lg:gap-12 items-start">

    <!-- Left Section: Media Player and Geometric Background -->
    <div class="w-full lg:w-3/5 relative rounded-lg overflow-hidden shadow-xl aspect-video bg-stone-800 dark:bg-stone-700 border-4 border-stone-800 dark:border-stone-200">
      <!-- Placeholder for Video Embed -->
      <iframe class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <div class="absolute inset-0 bg-gradient-to-br from-stone-900/50 to-stone-900/10 dark:from-stone-900/70 dark:to-stone-900/30"></div>

      <!-- Geometric Overlay Example -->
      <div class="absolute inset-0 pointer-events-none opacity-20 dark:opacity-30">
        <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
          <polygon points="0,0 20,0 0,20" fill="#d4a26a"></polygon>
          <polygon points="100,0 80,0 100,20" fill="#d4a26a"></polygon>
          <polygon points="0,100 0,80 20,100" fill="#d4a26a"></polygon>
          <polygon points="100,100 100,80 80,100" fill="#d4a26a"></polygon>
          <rect x="25" y="25" width="50" height="50" rx="5" ry="5" fill="none" stroke="#d4a26a" stroke-width="1"></rect>
        </svg>
      </div>
    </div>

    <!-- Right Section: Content Details -->
    <div class="w-full lg:w-2/5 flex flex-col gap-6">
      <header>
        <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight leading-tight text-amber-600 dark:text-amber-400 drop-shadow-lg [text-shadow:2px_2px_4px_var(--tw-shadow-color)] shadow-stone-900 dark:shadow-stone-700">
          Explore the Golden Era of Travel
        </h2>
        <p class="mt-3 text-lg sm:text-xl text-stone-700 dark:text-stone-300 font-serif italic border-l-4 border-amber-500 pl-4">
          Discover the untouched marvels of a bygone world.
        </p>
      </header>

      <div class="space-y-4 text-stone-800 dark:text-stone-200">
        <p class="text-base leading-relaxed">
          Step back in time to an era of elegance and grand adventure. This exclusive journey takes you through breathtaking landscapes, unveiling hidden gems and iconic landmarks, all with a touch of vintage luxury.
        </p>
        <ul class="list-none p-0 m-0 space-y-2">
          <li class="flex items-center gap-3">
            <svg class="w-6 h-6 text-amber-500 flex-shrink-0" 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.5 13.5L5 9L1 13.5" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M23 12h-6.5M10.5 5.5L15 1L19.5 5.5" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M23 12h-6.5M10.5 5.5L15 1L19.5 5.5" /><rect x="1" y="1" width="22" height="22" rx="2" ry="2" stroke="currentColor" fill="none"/></svg>
            <span class="font-bold">Destination:</span> The Uncharted Highlands
          </li>
          <li class="flex items-center gap-3">
            <svg class="w-6 h-6 text-amber-500 flex-shrink-0" 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>
            <span class="font-bold">Duration:</span> 7 Days / 6 Nights
          </li>
          <li class="flex items-center gap-3">
            <svg class="w-6 h-6 text-amber-500 flex-shrink-0" 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.686 17.686A5 5 0 0015 13.5a5 5 0 00-7.071-7.071m2.122 2.121a2 2 0 112.828 2.828M15 11l-8 8m-4-2h1.01M20 16h1.01M13 1h-1.01M1 8h1.01M7 23h.01M17 23h.01M23 8h-.01M13 23h.01"></path></svg>
            <span class="font-bold">Travel Style:</span> Vintage Luxury, Expeditionary
          </li>
        </ul>
      </div>

      <div class="flex flex-col sm:flex-row gap-4 mt-6">
        <a href="#book-now" class="w-full sm:w-auto px-8 py-3 bg-amber-600 hover:bg-amber-700 text-stone-50 font-bold uppercase rounded-full shadow-lg transition duration-300 ease-in-out transform hover:scale-105 active:scale-95
          border-2 border-amber-700 dark:border-amber-400
          relative overflow-hidden group">
          <span class="relative z-10">Book Your Grand Tour</span>
          <div class="absolute inset-0 bg-stone-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        </a>
        <a href="#learn-more" class="w-full sm:w-auto px-8 py-3 bg-transparent text-amber-600 dark:text-amber-400 font-bold uppercase rounded-full shadow-lg transition duration-300 ease-in-out transform hover:scale-105 active:scale-95
          border-2 border-amber-600 dark:border-amber-400 hover:bg-amber-600 hover:text-stone-50 dark:hover:bg-amber-400 dark:hover:text-stone-900">
          <span class="relative z-10">Learn More</span>
        </a>
      </div>
    </div>

  </div>

</div>