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

<div class="font-sans bg-amber-50 dark:bg-stone-950 text-stone-800 dark:text-stone-100 p-4 sm:p-8 md:p-12 lg:p-16 antialiased">

  <!-- Outer Deco Frame -->
  <div class="relative border-[6px] border-amber-900/60 dark:border-stone-700/60 p-4 sm:p-6 md:p-8 lg:p-10 shadow-2xl dark:shadow-stone-950/70 overflow-hidden">
    <div class="absolute inset-0 border-[3px] border-solid border-amber-800/40 dark:border-stone-800/40 opacity-70"></div>
    <div class="absolute inset-4 -m-[2px] border-[2px] border-dashed border-amber-700/30 dark:border-stone-600/30 opacity-50"></div>

    <!-- Background Geometric Pattern (Subtle) -->
    <div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(255,247,237,0.3)_0%,transparent_100%)] dark:bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(60,60,60,0.3)_0%,transparent_100%)] z-0"></div>
    <div class="absolute inset-0 opacity-10 dark:opacity-5 bg-[size:30px_30px] bg-[repeating-linear-gradient(45deg,_var(--tw-gradient-from)_0,_var(--tw-gradient-from)_1px,_transparent_1px,_transparent_8px),repeating-linear-gradient(-45deg,_var(--tw-gradient-from)_0,_var(--tw-gradient-from)_1px,_transparent_1px,_transparent_8px)] from-amber-700/30 to-amber-700/30 dark:from-stone-700/30 dark:to-stone-700/30 z-0"></div>

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

      <!-- Left Section: Main Media Display -->
      <div class="lg:col-span-2 flex flex-col items-center">
        <div class="w-full aspect-video md:aspect-[16/9] bg-stone-200 dark:bg-stone-800 border-4 border-amber-800 dark:border-stone-700 shadow-xl dark:shadow-stone-900/50 overflow-hidden relative">
          <img src="https://picsum.photos/id/1010/1200/700" alt="Panoramic view of ancient city" class="w-full h-full object-cover transform transition-transform duration-500 hover:scale-105">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent">
            <div class="absolute bottom-0 left-0 p-4 sm:p-6 text-white">
              <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-serif tracking-wider leading-tight text-amber-50 drop-shadow-lg">Mysteries of the Nile</h2>
              <p class="mt-2 text-base sm:text-lg opacity-90 max-w-lg hidden sm:block">Explore ancient wonders and timeless landscapes on a journey through history.</p>
            </div>
            <div class="absolute top-4 right-4 bg-amber-800/80 dark:bg-stone-800/80 text-white px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-semibold tracking-wider uppercase border border-amber-700 dark:border-stone-700 shadow-md">
              Featured Destination
            </div>
          </div>
        </div>

        <!-- Controls/Navigation (Optional: if this were interactive) -->
        <div class="mt-6 w-full flex justify-center space-x-4">
          <button class="flex-shrink-0 w-12 h-12 md:w-16 md:h-16 bg-amber-900 dark:bg-stone-800 text-amber-50 dark:text-stone-300 rounded-full border-2 border-amber-700 dark:border-stone-700 flex items-center justify-center shadow-lg dark:shadow-stone-900/50 hover:bg-amber-800 transform hover:scale-105 transition-all duration-300">
            <svg class="w-6 h-6 md:w-8 md: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="M15 19l-7-7 7-7"></path>
            </svg>
          </button>
          <button class="flex-shrink-0 w-12 h-12 md:w-16 md:h-16 bg-amber-900 dark:bg-stone-800 text-amber-50 dark:text-stone-300 rounded-full border-2 border-amber-700 dark:border-stone-700 flex items-center justify-center shadow-lg dark:shadow-stone-900/50 hover:bg-amber-800 transform hover:scale-105 transition-all duration-300">
            <svg class="w-6 h-6 md:w-8 md: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 5l7 7-7 7"></path>
            </svg>
          </button>
        </div>
      </div>

      <!-- Right Section: Details & Features -->
      <div class="lg:col-span-1">
        <div class="bg-amber-100 dark:bg-stone-900 p-6 sm:p-8 border-4 border-amber-800 dark:border-stone-700 shadow-xl dark:shadow-stone-900/50">
          <h3 class="text-2xl sm:text-3xl font-serif text-amber-900 dark:text-amber-200 tracking-wide mb-4 border-b-2 border-amber-700/60 dark:border-stone-700/60 pb-2">Journey Highlights</h3>

          <div class="grid gap-4">
            <!-- Highlight 1 -->
            <div class="flex items-start bg-amber-50 dark:bg-stone-800 p-3 rounded-lg border border-amber-600/50 dark:border-stone-700/50 shadow-inner group">
              <img src="https://picsum.photos/id/1020/80/80" alt="Pyramid" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-amber-700 dark:border-stone-600 mr-4 group-hover:scale-105 transition-transform duration-300">
              <div>
                <h4 class="text-lg sm:text-xl font-semibold text-amber-900 dark:text-stone-100">Ancient Pyramids</h4>
                <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">Unravel the secrets of Giza's majestic structures.</p>
              </div>
            </div>

            <!-- Highlight 2 -->
            <div class="flex items-start bg-amber-50 dark:bg-stone-800 p-3 rounded-lg border border-amber-600/50 dark:border-stone-700/50 shadow-inner group">
              <img src="https://picsum.photos/id/1025/80/80" alt="Desert Sunset" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-amber-700 dark:border-stone-600 mr-4 group-hover:scale-105 transition-transform duration-300">
              <div>
                <h4 class="text-lg sm:text-xl font-semibold text-amber-900 dark:text-stone-100">Desert Safaris</h4>
                <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">Experience the golden dunes at dusk.</p>
              </div>
            </div>

            <!-- Highlight 3 -->
            <div class="flex items-start bg-amber-50 dark:bg-stone-800 p-3 rounded-lg border border-amber-600/50 dark:border-stone-700/50 shadow-inner group">
              <img src="https://picsum.photos/id/1038/80/80" alt="River Boat" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-amber-700 dark:border-stone-600 mr-4 group-hover:scale-105 transition-transform duration-300">
              <div>
                <h4 class="text-lg sm:text-xl font-semibold text-amber-900 dark:text-stone-100">Nile River Cruises</h4>
                <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">Leisurely cruising through history.</p>
              </div>
            </div>
          </div>

          <div class="mt-8">
            <p class="text-sm sm:text-base text-stone-600 dark:text-stone-400 mb-2">Discover more about this exquisite journey:</p>
            <button class="w-full bg-amber-800 dark:bg-stone-700 text-white font-bold text-lg sm:text-xl py-3 px-6 rounded-md shadow-lg dark:shadow-stone-900/50 hover:bg-amber-700 dark:hover:bg-stone-600 transform hover:scale-105 transition-all duration-300 border-2 border-amber-700 dark:border-stone-600 tracking-wider uppercase">
              Book Your Adventure
            </button>
          </div>
        </div>

        <!-- Traveler Reviews/Profiles -->
        <div class="mt-8 bg-amber-100 dark:bg-stone-900 p-6 sm:p-8 border-4 border-amber-800 dark:border-stone-700 shadow-xl dark:shadow-stone-900/50">
          <h3 class="text-2xl sm:text-3xl font-serif text-amber-900 dark:text-amber-200 tracking-wide mb-4 border-b-2 border-amber-700/60 dark:border-stone-700/60 pb-2">Traveler's Voice</h3>
          <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Traveler Avatar" class="w-16 h-16 rounded-full object-cover border-4 border-amber-700 dark:border-stone-600 shadow-md">
            <div>
              <p class="font-bold text-lg text-amber-900 dark:text-stone-100">Eleanor Vance</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">"A truly unforgettable experience!"</p>
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Traveler Avatar" class="w-16 h-16 rounded-full object-cover border-4 border-amber-700 dark:border-stone-600 shadow-md">
            <div>
              <p class="font-bold text-lg text-amber-900 dark:text-stone-100">Arthur Sterling</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">"Seamless and breathtaking."</p>
            </div>
          </div>
        </div>

      </div>

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