Two-Column Feature Section with Images and CTA

<section class="sm:py-32 overflow-hidden font-geist bg-white py-24 relative">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">

    <!-- Row 1: Image Left, Text Right -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-12 gap-y-16 items-center">
      <!-- Vertical Image Container -->
      <div class="relative w-full max-w-xl lg:max-w-none mx-auto animate-on-scroll"
        style="animation: fadeSlideIn 1s ease-out 0.2s both;">
        <div
          class="relative aspect-[3/4] overflow-hidden rounded-[2.5rem] bg-gray-100 shadow-2xl ring-1 ring-gray-900/10">
          <img src="https://images.unsplash.com/photo-1640906152676-dace6710d24b?w=2160&amp;q=80" alt="Intelligent Learning AI" class="absolute inset-0 h-full w-full object-cover">
          <!-- Subtle overlay for better integration -->
          <div class="absolute inset-0 bg-gradient-to-tr from-indigo-500/10 to-transparent mix-blend-multiply"></div>
        </div>
        <!-- Decorative blob behind -->
        <div class="absolute -top-12 -left-12 -z-10 h-[300px] w-[300px] bg-blue-50/50 rounded-full blur-3xl"></div>
      </div>

      <!-- Text Content -->
      <div class="lg:pl-10 animate-on-scroll" style="animation: fadeSlideIn 1s ease-out 0.4s both;">
        <h2 class="text-base font-semibold leading-7 text-indigo-600 tracking-tight">Individuelle Förderung</h2>
        <p class="mt-2 text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Lernpfade, so einzigartig wie
          Ihre Teilnehmer</p>
        <p class="mt-6 text-lg leading-8 text-gray-600">
          Unser KI-Tutor analysiert den Wissensstand jedes Einzelnen und passt die Lerninhalte dynamisch an. Statt
          starrer Kurse erleben Ihre Nutzer eine maßgeschneiderte Bildungsreise, die Lücken schließt und Stärken fördert
          – vollautomatisch und rund um die Uhr verfügbar.
        </p>
        <div class="mt-8 flex flex-col sm:flex-row gap-4">
          <div class="flex items-center gap-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600/10">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-zap text-indigo-600">
                <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" class=""></polygon>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-900">Adaptive Inhalte</span>
          </div>
          <div class="flex items-center gap-3">
            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600/10">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="lucide lucide-globe text-indigo-600">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <line x1="2" x2="22" y1="12" y2="12" class=""></line>
                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
                  class=""></path>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-900">Mehrsprachig</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Row 2: Text Left, Image Right -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-12 gap-y-16 items-center mt-24 sm:mt-32">
      <!-- Text Content (Order changes on mobile to keep text flowing naturally, but structurally placed here) -->
      <div class="lg:pr-10 lg:order-1 order-2 animate-on-scroll" style="animation: fadeSlideIn 1s ease-out 0.2s both;">
        <h2 class="text-base font-semibold leading-7 text-indigo-600 tracking-tight">Nahtlose Integration</h2>
        <p class="mt-2 text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Direkt in Ihrer Moodle Umgebung
        </p>
        <p class="mt-6 text-lg leading-8 text-gray-600">
          Keine externe Software, keine Medienbrüche. Der KI-Tutor lebt dort, wo das Lernen stattfindet. Mit unserem
          Plugin integrieren Sie die Intelligenz direkt in Ihre bestehenden Kurse. Datenschutzkonform, sicher und ohne
          komplexe IT-Projekte sofort einsatzbereit.
        </p>
        <div class="mt-10">
          <button type="button" class="inline-flex items-center gap-2 rounded-full bg-gray-900 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 transition-all duration-200">
            Plugin Dokumentation
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
          </button>
        </div>
      </div>

      <!-- Vertical Image Container -->
      <div class="relative w-full max-w-xl lg:max-w-none mx-auto lg:order-2 order-1 animate-on-scroll"
        style="animation: fadeSlideIn 1s ease-out 0.4s both;">
        <div
          class="relative aspect-[3/4] overflow-hidden rounded-[2.5rem] bg-gray-100 shadow-2xl ring-1 ring-gray-900/10">
          <img src="https://images.unsplash.com/photo-1629946832022-c327f74956e0?w=2160&amp;q=80" alt="Seamless Moodle Integration" class="absolute inset-0 h-full w-full object-cover">
          <!-- Subtle overlay -->
          <div class="absolute inset-0 bg-gradient-to-bl from-purple-500/10 to-transparent mix-blend-multiply"></div>
        </div>
        <!-- Decorative blob behind -->
        <div class="absolute -bottom-12 -right-12 -z-10 h-[300px] w-[300px] bg-indigo-50/50 rounded-full blur-3xl">
        </div>
      </div>
    </div>

  </div>
</section>