Компонент временной шкалы в стиле ар-деко

<div class="font-sans antialiased bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-8 sm:p-12 md:p-16 lg:p-20">

  <div class="max-w-5xl mx-auto py-8 lg:py-12 bg-purple-50 dark:bg-purple-950 shadow-xl rounded-xl border border-purple-200 dark:border-purple-800">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-center mb-12 text-purple-800 dark:text-purple-300 tracking-wider uppercase font-serif-display leading-tight">
      Event Schedule
    </h2>

    <div class="relative px-4 sm:px-8 lg:px-12">
      <!-- Vertical Line -->
      <div class="absolute left-1/2 -ml-0.5 w-1 bg-purple-300 dark:bg-purple-700 h-full rounded-full transform -translate-x-1/2"></div>

      <!-- Timeline Item 1 -->
      <div class="mb-16 flex justify-between items-center w-full right-aligned">
        <div class="order-1 w-full sm:w-5/12"></div>
        <div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
          <h1 class="mx-auto font-semibold text-lg text-white">1</h1>
        </div>
        <div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:ml-8 animate-fade-in-right border border-purple-300 dark:border-purple-700 transform hover:-translate-x-1 transition-transform duration-300">
          <h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Grand Opening & Keynote</h3>
          <p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
            Welcome address by CEO and a profound keynote speech on the future of design.
          </p>
          <span class="text-xs text-purple-600 dark:text-purple-400 font-medium">09:00 AM - 10:30 AM</span>
          <img src="https://picsum.photos/300/200?random=1" alt="Grand Opening" class="w-full h-auto mt-4 rounded-lg shadow-md border border-purple-200 dark:border-purple-800 object-cover">
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="mb-16 flex justify-between flex-row-reverse items-center w-full left-aligned">
        <div class="order-1 w-full sm:w-5/12"></div>
        <div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
          <h1 class="mx-auto font-semibold text-lg text-white">2</h1>
        </div>
        <div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:mr-8 animate-fade-in-left border border-purple-300 dark:border-purple-700 transform hover:translate-x-1 transition-transform duration-300">
          <h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Breakout Sessions: Track A & B</h3>
          <p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
            Concurrent sessions covering advanced UI/UX principles and backend integration techniques.
          </p>
          <span class="text-xs text-purple-600 dark:text-purple-400 font-medium mb-4 block">10:45 AM - 12:15 PM</span>
          <div class="flex space-x-2 mt-2">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Speaker 1" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Speaker 2" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
          </div>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="mb-16 flex justify-between items-center w-full right-aligned">
        <div class="order-1 w-full sm:w-5/12"></div>
        <div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
          <h1 class="mx-auto font-semibold text-lg text-white">3</h1>
        </div>
        <div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:ml-8 animate-fade-in-right border border-purple-300 dark:border-purple-700 transform hover:-translate-x-1 transition-transform duration-300">
          <h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Networking Lunch</h3>
          <p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
            Opportunity to connect with peers and industry leaders over a catered lunch.
          </p>
          <span class="text-xs text-purple-600 dark:text-purple-400 font-medium mb-4 block">12:30 PM - 01:30 PM</span>
          <img src="https://picsum.photos/300/200?random=2" alt="Networking Lunch" class="w-full h-auto mt-4 rounded-lg shadow-md border border-purple-200 dark:border-purple-800 object-cover">
        </div>
      </div>

      <!-- Timeline Item 4 -->
      <div class="mb-16 flex justify-between flex-row-reverse items-center w-full left-aligned">
        <div class="order-1 w-full sm:w-5/12"></div>
        <div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
          <h1 class="mx-auto font-semibold text-lg text-white">4</h1>
        </div>
        <div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:mr-8 animate-fade-in-left border border-purple-300 dark:border-purple-700 transform hover:translate-x-1 transition-transform duration-300">
          <h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Interactive Workshops</h3>
          <p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
            Hands-on sessions focusing on new development tools and agile methodologies.
          </p>
          <span class="text-xs text-purple-600 dark:text-purple-400 font-medium mb-4 block">01:45 PM - 03:15 PM</span>
          <div class="flex -space-x-4 mt-4">
              <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Participant 1" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
              <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Participant 2" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
              <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Participant 3" class="w-10 h-10 rounded-full border-2 border-purple-600 dark:border-purple-400 shadow-md transform hover:scale-105 transition-transform duration-200">
              <div class="w-10 h-10 rounded-full bg-purple-600 dark:bg-purple-400 flex items-center justify-center text-white text-xs font-bold ring-2 ring-purple-600 dark:ring-purple-400 shadow-md">+15</div>
          </div>
        </div>
      </div>

      <!-- Timeline Item 5 -->
      <div class="flex justify-between items-center w-full right-aligned">
        <div class="order-1 w-full sm:w-5/12"></div>
        <div class="z-20 flex items-center order-1 bg-purple-700 dark:bg-purple-500 shadow-xl w-8 h-8 rounded-full sm:w-10 sm:h-10 transition-all duration-300 hover:scale-110 border-2 border-purple-900 dark:border-purple-300">
          <h1 class="mx-auto font-semibold text-lg text-white">5</h1>
        </div>
        <div class="order-1 bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 rounded-xl shadow-lg w-full sm:w-5/12 px-6 py-4 sm:ml-8 animate-fade-in-right border border-purple-300 dark:border-purple-700 transform hover:-translate-x-1 transition-transform duration-300">
          <h3 class="mb-3 font-bold text-purple-800 dark:text-purple-200 text-xl md:text-2xl">Closing Remarks & Farewell</h3>
          <p class="text-sm md:text-base leading-snug tracking-wide text-stone-700 dark:text-stone-300 mb-2">
            Summary of the event and thanks to all participants and sponsors.
          </p>
          <span class="text-xs text-purple-600 dark:text-purple-400 font-medium">03:30 PM - 04:00 PM</span>
          <img src="https://picsum.photos/300/200?random=3" alt="Closing Remarks" class="w-full h-auto mt-4 rounded-lg shadow-md border border-purple-200 dark:border-purple-800 object-cover">
        </div>
      </div>

    </div>
  </div>

  <!-- Custom Styles for responsiveness and Art Deco feel -->
  <style>
    @layer base {
      /* Basic font for content */
      body {
        font-family: 'Open Sans', sans-serif;
      }
      /* A more decorative font for headings, simulating Art Deco */
      .font-serif-display {
        font-family: 'Playfair Display', serif; /* A common choice for classic/elegant feel */
      }
    }

    /* Tailwind's default breakpoints for reference:
    sm: 640px
    md: 768px
    lg: 1024px
    xl: 1280px
    2xl: 1536px
    */

    /* Mobile styles (default) */
    .timeline-item > div:first-child {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
    }

    .left-aligned .order-1:first-child {
        order: 1; /* text content */
    }

    .left-aligned .order-1:nth-child(2) {
        order: 2; /* circle */
    }

    .left-aligned .order-1:nth-child(3) {
        order: 3; /* empty div */
    }

    .right-aligned .order-1:first-child {
        order: 3; /* empty div */
    }

    .right-aligned .order-1:nth-child(2) {
        order: 2; /* circle */
    }

    .right-aligned .order-1:nth-child(3) {
        order: 1; /* text content */
    }

    /* Small screens and up (sm) */
    @media (min-width: 640px) {
      .left-aligned .order-1:first-child {
        order: 3;
      }
      .left-aligned .order-1:nth-child(2) {
        order: 2;
      }
      .left-aligned .order-1:nth-child(3) {
        order: 1;
      }

      .right-aligned .order-1:first-child {
        order: 1;
      }
      .right-aligned .order-1:nth-child(2) {
        order: 2;
      }
      .right-aligned .order-1:nth-child(3) {
        order: 3;
      }

      .left-aligned div:nth-child(3) {
        text-align: right; /* Align text right for left-aligned card */
      }

      /* Adjust margins for two-column layout */
      .left-aligned div:nth-child(3) {
        margin-right: -4px; /* compensate for line */
        transform: translateX(4px);
      }

      .right-aligned div:nth-child(3) {
        margin-left: -4px; /* compensate for line */
        transform: translateX(-4px);
      }

      .timeline-item > div:nth-child(3) {
        width: 45%; /* Shrink content width for two columns */
      }

      .timeline-item > div:first-child {
        width: 45%; /* Shrink content width for two columns */
      }

      /* Specific adjustment for mobile: make the line less prominent */
      .absolute.left-1\/2 {
        left: 50%; /* Center the line */
      }

    }

    /* Keyframe for fade-in animations */
    @keyframes fade-in-right {
      from { opacity: 0; transform: translateX(-20px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes fade-in-left {
      from { opacity: 0; transform: translateX(20px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .animate-fade-in-right {
      animation: fade-in-right 0.6s ease-out forwards; /* Longer for visual effect */
    }

    .animate-fade-in-left {
      animation: fade-in-left 0.6s ease-out forwards;
    }

    /* To ensure animations trigger correctly, using a simple .in-view approach or JS for more complex scenarios is needed.
    For this pure HTML example, they will run on load. */
  </style>

  <!-- Adding Google Fonts for Art Deco feel (optional, but good for demo) -->
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</div>