Zeitleisten-Komponente

<div class="font-sans antialiased text-gray-800 bg-gradient-to-br from-pink-100 via-purple-100 to-indigo-100 dark:from-gray-900 dark:via-purple-950 dark:to-pink-950 py-12 sm:py-16 lg:py-20">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-16
               bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-600 to-indigo-600
               dark:from-pink-400 dark:via-purple-500 dark:to-indigo-400">
      Our Journey
    </h2>

    <div class="relative before:absolute before:inset-0 before:top-2 before:bottom-2 before:w-1 before:bg-gradient-to-b before:from-pink-400 before:via-purple-500 before:to-indigo-500 before:left-1/2 before:-translate-x-1/2 before:rounded-full dark:before:from-pink-600 dark:before:via-purple-700 dark:before:to-indigo-700">

      <!-- Timeline Item 1 -->
      <div class="timeline-item flex items-center w-full my-8 md:my-12">
        <div class="order-1 w-full md:w-1/2 flex justify-end md:pr-12">
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-lg
                      border border-transparent hover:border-pink-300 dark:hover:border-purple-600
                      transform transition-all duration-300 hover:scale-105
                      bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 dark:from-gray-700 dark:via-purple-900 dark:to-indigo-900
                      text-gray-800 dark:text-gray-200">
            <h3 class="font-bold text-2xl sm:text-3xl mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-600 dark:from-pink-400 dark:to-purple-500">Project Alpha Launch</h3>
            <p class="mb-4 text-md sm:text-lg">Successfully launched our flagship product, revolutionizing the industry with its innovative features and user-centric design.</p>
            <img src="https://picsum.photos/600/400?random=1" alt="Project Alpha screenshots" class="rounded-lg shadow-md mb-4 w-full h-auto object-cover">
            <span class="text-sm text-pink-600 dark:text-pink-400 font-semibold">October 2023</span>
          </div>
        </div>
        <div class="z-10 flex items-center order-1 w-10 h-10 rounded-full shadow-xl absolute left-1/2 -translate-x-1/2
                    bg-gradient-to-br from-pink-400 to-purple-500 dark:from-pink-600 dark:to-purple-700
                    border-4 border-white dark:border-gray-900">
          <svg class="mx-auto text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="timeline-item flex items-center w-full my-8 md:my-12 flex-row-reverse">
        <div class="order-1 w-full md:w-1/2 flex justify-start md:pl-12">
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-lg
                      border border-transparent hover:border-purple-300 dark:hover:border-indigo-600
                      transform transition-all duration-300 hover:scale-105
                      bg-gradient-to-br from-purple-50 via-indigo-50 to-pink-50 dark:from-gray-700 dark:via-indigo-900 dark:to-purple-900
                      text-gray-800 dark:text-gray-200">
            <h3 class="font-bold text-2xl sm:text-3xl mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-500 dark:to-indigo-400">Partnership Expansion</h3>
            <p class="mb-4 text-md sm:text-lg">Forged strategic alliances with key industry leaders, expanding our reach and service capabilities globally.</p>
            <img src="https://picsum.photos/600/400?random=2" alt="Partnership handshake" class="rounded-lg shadow-md mb-4 w-full h-auto object-cover">
            <span class="text-sm text-purple-600 dark:text-purple-400 font-semibold">December 2023</span>
          </div>
        </div>
        <div class="z-10 flex items-center order-1 w-10 h-10 rounded-full shadow-xl absolute left-1/2 -translate-x-1/2
                    bg-gradient-to-br from-purple-500 to-indigo-500 dark:from-purple-700 dark:to-indigo-700
                    border-4 border-white dark:border-gray-900">
          <svg class="mx-auto text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 9a1 1 0 100-2 1 1 0 000 2zM5 8a2 2 0 100 4h10a2 2 0 100-4H5z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="timeline-item flex items-center w-full my-8 md:my-12">
        <div class="order-1 w-full md:w-1/2 flex justify-end md:pr-12">
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-lg
                      border border-transparent hover:border-indigo-300 dark:hover:border-pink-600
                      transform transition-all duration-300 hover:scale-105
                      bg-gradient-to-br from-indigo-50 via-pink-50 to-purple-50 dark:from-gray-700 dark:via-pink-900 dark:to-indigo-900
                      text-gray-800 dark:text-gray-200">
            <h3 class="font-bold text-2xl sm:text-3xl mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-pink-600 dark:from-indigo-400 dark:to-pink-500">Community Growth</h3>
            <p class="mb-4 text-md sm:text-lg">Our user community grew by 500%, fostering a vibrant ecosystem of engagement and feedback.</p>
            <img src="https://picsum.photos/600/400?random=3" alt="Group of people smiling" class="rounded-lg shadow-md mb-4 w-full h-auto object-cover">
            <span class="text-sm text-indigo-600 dark:text-indigo-400 font-semibold">February 2024</span>
          </div>
        </div>
        <div class="z-10 flex items-center order-1 w-10 h-10 rounded-full shadow-xl absolute left-1/2 -translate-x-1/2
                    bg-gradient-to-br from-indigo-500 to-pink-500 dark:from-indigo-700 dark:to-pink-700
                    border-4 border-white dark:border-gray-900">
          <svg class="mx-auto text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zm-6 9A.75.75 0 015.25 15h-.5a.75.75 0 01-.75-.75v-1.5a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75v1.5a.75.75 0 01-.75.75H13zm5.75-2.75a.75.75 0 00-.75-.75h-10.5c-.414 0-.75.336-.75.75v3.5A.75.75 0 005 17h10a.75.75 0 00.75-.75v-3.5z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Timeline Item 4 -->
      <div class="timeline-item flex items-center w-full my-8 md:my-12 flex-row-reverse">
        <div class="order-1 w-full md:w-1/2 flex justify-start md:pl-12">
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-lg
                      border border-transparent hover:border-pink-300 dark:hover:border-purple-600
                      transform transition-all duration-300 hover:scale-105
                      bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 dark:from-gray-700 dark:via-purple-900 dark:to-indigo-900
                      text-gray-800 dark:text-gray-200">
            <h3 class="font-bold text-2xl sm:text-3xl mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-600 dark:from-pink-400 dark:to-purple-500">Future Endeavors</h3>
            <p class="mb-4 text-md sm:text-lg">Exploring new technologies and markets to bring even more value to our users and stakeholders.</p>
            <img src="https://picsum.photos/600/400?random=4" alt="Future looking abstract image" class="rounded-lg shadow-md mb-4 w-full h-auto object-cover">
            <span class="text-sm text-pink-600 dark:text-pink-400 font-semibold">Present & Beyond</span>
          </div>
        </div>
        <div class="z-10 flex items-center order-1 w-10 h-10 rounded-full shadow-xl absolute left-1/2 -translate-x-1/2
                    bg-gradient-to-br from-pink-400 to-purple-500 dark:from-pink-600 dark:to-purple-700
                    border-4 border-white dark:border-gray-900">
          <svg class="mx-auto text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.75 3c-.966 0-1.895.143-2.75.405V6a.75.75 0 001.5 0V4.604c.59-.224 1.23-.365 1.9-.365 2.87 0 5.1-.88 5.1-2h-.057c-.126-1.58-1.543-2.83-3.268-2.909a.75.75 0 00-.734.708l.334 3.344a.75.75 0 001.492-.149l-.21-2.09c.654.148 1.15.54 1.488 1.05v.23a.75.75 0 001.5 0v-1c0-.496-.345-.92-.81-1.096A6.25 6.25 0 0010.75 3v13c.966 0 1.895-.143 2.75-.405V14a.75.75 0 00-1.5 0v1.396c-.59.224-1.23.365-1.9.365-2.87 0-5.1.88-5.1 2h.057c.126 1.58 1.543 2.83 3.268 2.909a.75.75 0 00.734-.708l-.334-3.344a.75.75 0 00-1.492.149l.21 2.09c-.654-.148-1.15-.54-1.488-1.05v-.23a.75.75 0 00-1.5 0v1c0 .496.345.92.81 1.096A6.25 6.25 0 0010.75 17z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
      </div>

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