Animated AI Landing Hero with CTA & Glass Orbit Effects

<section class="overflow-hidden grid-corners relative"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(1)">
  <div class="grid-corners-bottom"></div>
  <div class="sm:px-6 lg:px-8 sm:pt-24 sm:pb-12 max-w-7xl mr-auto ml-auto pt-24 pr-4 pb-12 pl-4 relative">
    <div class="text-center">
      <h1
        class="text-[clamp(2.2rem,6vw,4.5rem)] leading-[1.03] font-semibold tracking-tight max-w-5xl mr-auto ml-auto animate-line-rise karaoke-container is-visible"
        data-karaoke-wrapped="true" data-karaoke-animated="true">
        <span class="karaoke-word"></span>
        <span class="karaoke-word">Build</span>
        <span class="karaoke-word">faster</span>
        <span class="karaoke-word">with</span>
        <span class="karaoke-word">AI</span>
        <span class="karaoke-word">development</span>
        <span class="karaoke-word"></span>
      </h1>
      <p class="stagger-delay-1 mx-auto mt-5 max-w-2xl text-base sm:text-lg text-neutral-300 animate-subtitle-rise karaoke-container is-visible"
        data-karaoke-wrapped="true" data-karaoke-animated="true">
        <span class="karaoke-word"></span>
        <span class="karaoke-word">Transform</span>
        <span class="karaoke-word">ideas</span>
        <span class="karaoke-word">into</span>
        <span class="karaoke-word">production‑ready</span>
        <span class="karaoke-word">applications</span>
        <span class="karaoke-word">with</span>
        <span class="karaoke-word">intelligent</span>
        <span class="karaoke-word">automation</span>
        <span class="karaoke-word">and</span>
        <span class="karaoke-word">modern</span>
        <span class="karaoke-word">workflows.</span>
        <span class="karaoke-word"></span>
      </p>

      <div
        class="animate-in stagger-delay-2 flex flex-col sm:flex-row is-visible mt-8 gap-x-4 gap-y-4 items-center justify-center">
        <button class="animated-button" style="padding: 12px 36px;">
              <svg viewBox="0 0 24 24" class="arr-2" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z" class=""></path>
              </svg>
              <span class="text">Start Building</span>
              <span class="circle"></span>
              <svg viewBox="0 0 24 24" class="arr-1" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z" class=""></path>
              </svg>
            </button>

        <button class="group relative overflow-hidden cursor-pointer leading-none hover:shadow-2xl text-white bg-white/10 border-white/10 border shadow-sm backdrop-blur" style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.2); padding: 16px 32px; min-height: 56px; min-width: 160px; border-radius: 9999px; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);">
              <span class="z-0 -translate-x-full group-hover:translate-x-0 transition-transform duration-300 ease-out bg-white/5 absolute top-0 right-0 bottom-0 left-0"></span>

              <div class="flex relative overflow-hidden font-semibold items-center justify-center" style="gap: 8px;">
                <div class="flex items-center justify-center z-10">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                    <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path>
                  </svg>
                </div>
                <span class="inline-block transition-colors duration-300 relative z-10 group-hover:text-white font-semibold text-white" style="font-size: 16px;">
                  View Demo
                </span>
              </div>
            </button>
      </div>
    </div>

    <!-- Floating Glass Orbit UI Element (Right Top) -->
    <div class="absolute top-50 right-2 z-20 animate-in stagger-delay-3 is-visible"
      style="animation: float 6s ease-in-out infinite;">
      <div class="relative" style="width: 140px; height: 140px;">
        <!-- Orbiting ring -->
        <div class="absolute inset-0 rounded-full border border-white/20 backdrop-blur-md"
          style="background: rgba(255, 255, 255, 0.03); animation: rotate 20s linear infinite;"></div>

        <!-- Center glass sphere -->
        <div class="flex absolute top-0 right-0 bottom-0 left-0 items-center justify-center">
          <div class="w-20 h-20 rounded-full border border-lime-300/30 backdrop-blur-xl relative overflow-hidden"
            style="background: linear-gradient(135deg, rgba(163, 230, 53, 0.15) 0%, rgba(163, 230, 53, 0.05) 100%); box-shadow: 0 8px 32px rgba(163, 230, 53, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.3);">
            <div class="absolute inset-0 bg-gradient-to-br from-white/20 via-transparent to-transparent"></div>
            <div class="absolute inset-0 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="text-lime-300" style="filter: drop-shadow(0 2px 8px rgba(163, 230, 53, 0.5));">
                <path d="M12 8V4H8" class=""></path>
                <rect width="16" height="12" x="4" y="8" rx="2" class=""></rect>
                <path d="M2 14h2" class=""></path>
                <path d="M20 14h2" class=""></path>
                <path d="M15 13v2" class=""></path>
                <path d="M9 13v2" class=""></path>
              </svg>
            </div>
          </div>
        </div>

        <!-- Orbiting particles -->
        <div class="absolute w-3 h-3 rounded-full bg-lime-400/60 backdrop-blur-sm ring-1 ring-lime-300/40"
          style="top: 10px; left: 50%; transform: translateX(-50%); box-shadow: 0 0 12px rgba(163, 230, 53, 0.6); animation: orbit1 8s linear infinite;">
        </div>
        <div class="absolute w-2.5 h-2.5 rounded-full bg-white/40 backdrop-blur-sm ring-1 ring-white/30"
          style="top: 50%; right: 10px; transform: translateY(-50%); box-shadow: 0 0 8px rgba(255, 255, 255, 0.4); animation: orbit2 10s linear infinite;">
        </div>
        <div class="absolute w-2 h-2 rounded-full bg-lime-300/50 backdrop-blur-sm ring-1 ring-lime-300/30"
          style="bottom: 10px; left: 50%; transform: translateX(-50%); box-shadow: 0 0 10px rgba(163, 230, 53, 0.5); animation: orbit3 12s linear infinite;">
        </div>
      </div>

      <!-- Glass info card -->
    </div>

    <!-- Floating Glass Orbit UI Element (Left Bottom) -->
    <div class="absolute bottom-20 left-2 z-20 animate-in stagger-delay-4 is-visible"
      style="animation: float 6s ease-in-out infinite 1s;">
      <div class="relative" style="width: 140px; height: 140px;">
        <!-- Orbiting ring -->
        <div class="absolute inset-0 rounded-full border border-white/20 backdrop-blur-md"
          style="background: rgba(255, 255, 255, 0.03); animation: rotate 20s linear infinite reverse;"></div>

        <!-- Center glass sphere -->
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="w-20 h-20 rounded-full border border-lime-300/30 backdrop-blur-xl relative overflow-hidden"
            style="background: linear-gradient(135deg, rgba(163, 230, 53, 0.15) 0%, rgba(163, 230, 53, 0.05) 100%); box-shadow: 0 8px 32px rgba(163, 230, 53, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.3);">
            <div class="absolute inset-0 bg-gradient-to-br from-white/20 via-transparent to-transparent"></div>
            <div class="absolute inset-0 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="text-lime-300" style="filter: drop-shadow(0 2px 8px rgba(163, 230, 53, 0.5));">
                <path
                  d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
                  class=""></path>
              </svg>
            </div>
          </div>
        </div>

        <!-- Orbiting particles -->
        <div class="absolute w-3 h-3 rounded-full bg-lime-400/60 backdrop-blur-sm ring-1 ring-lime-300/40"
          style="top: 10px; left: 50%; transform: translateX(-50%); box-shadow: 0 0 12px rgba(163, 230, 53, 0.6); animation: orbit1 8s linear infinite 0.5s;">
        </div>
        <div class="absolute w-2.5 h-2.5 rounded-full bg-white/40 backdrop-blur-sm ring-1 ring-white/30"
          style="top: 50%; right: 10px; transform: translateY(-50%); box-shadow: 0 0 8px rgba(255, 255, 255, 0.4); animation: orbit2 10s linear infinite 0.5s;">
        </div>
        <div class="absolute w-2 h-2 rounded-full bg-lime-300/50 backdrop-blur-sm ring-1 ring-lime-300/30"
          style="bottom: 10px; left: 50%; transform: translateX(-50%); box-shadow: 0 0 10px rgba(163, 230, 53, 0.5); animation: orbit3 12s linear infinite 0.5s;">
        </div>
      </div>

      <!-- Glass info card -->
      <div class="mt-4 rounded-xl border border-white/10 backdrop-blur-md px-3 py-2 text-xs"
        style="background: rgba(0, 0, 0, 0.3); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 rounded-full bg-lime-400 animate-pulse"></div>
          <span class="text-neutral-300">Code Generation</span>
        </div>
      </div>
    </div>

    <style>
      @keyframes float {

        0%,
        100% {
          transform: translateY(0px);
        }

        50% {
          transform: translateY(-20px);
        }
      }

      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }

      @keyframes orbit1 {
        0% {
          transform: translateX(-50%) rotate(0deg) translateX(70px) rotate(0deg);
        }

        100% {
          transform: translateX(-50%) rotate(360deg) translateX(70px) rotate(-360deg);
        }
      }

      @keyframes orbit2 {
        0% {
          transform: translateY(-50%) rotate(120deg) translateX(70px) rotate(-120deg);
        }

        100% {
          transform: translateY(-50%) rotate(480deg) translateX(70px) rotate(-480deg);
        }
      }

      @keyframes orbit3 {
        0% {
          transform: translateX(-50%) rotate(240deg) translateX(70px) rotate(-240deg);
        }

        100% {
          transform: translateX(-50%) rotate(600deg) translateX(70px) rotate(-600deg);
        }
      }

      .invisible {
        visibility: hidden !important;
      }

      .animated-button {
        position: relative;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 16px 36px;
        border: 4px solid;
        border-color: transparent;
        font-size: 16px;
        background-color: inherit;
        border-radius: 100px;
        font-weight: 600;
        color: greenyellow;
        box-shadow: 0 0 0 2px greenyellow;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
      }

      .animated-button svg {
        position: absolute;
        width: 24px;
        fill: greenyellow;
        z-index: 9;
        transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
      }

      .animated-button .arr-1 {
        right: 16px;
      }

      .animated-button .arr-2 {
        left: -25%;
      }

      .animated-button .circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        background-color: greenyellow;
        border-radius: 10%;
        opacity: 0;
        transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
      }

      .animated-button .text {
        position: relative;
        z-index: 1;
        transform: translateX(-12px);
        transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
      }

      .animated-button:hover {
        box-shadow: 0 0 0 12px transparent;
        color: #212121;
        border-radius: 12px;
      }

      .animated-button:hover .arr-1 {
        right: -25%;
      }

      .animated-button:hover .arr-2 {
        left: 16px;
      }

      .animated-button:hover .text {
        transform: translateX(12px);
      }

      .animated-button:hover svg {
        fill: #212121;
      }

      .animated-button:active {
        scale: 0.95;
        box-shadow: 0 0 0 4px greenyellow;
      }

      .animated-button:hover .circle {
        width: 220px;
        height: 220px;
        opacity: 1;
      }

      .border-gradient {
        position: relative;
      }

      .border-gradient::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 10px;
        padding: 1px;
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        background: linear-gradient(225deg,
            rgba(255, 255, 255, 0.0) 0%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.0) 100%);
        pointer-events: none;
      }

      .grid-corners::before,
      .grid-corners::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .grid-corners::before {
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
      }

      .grid-corners::after {
        top: 0;
        right: 0;
        width: 80px;
        height: 80px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
      }

      .grid-corners-bottom::before,
      .grid-corners-bottom::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .grid-corners-bottom::before {
        bottom: 0;
        left: 0;
        width: 80px;
        height: 80px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
      }

      .grid-corners-bottom::after {
        bottom: 0;
        right: 0;
        width: 80px;
        height: 80px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
      }

      /* Animation classes */
      .animate-in {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(10px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out, filter 0.8s ease-out;
      }

      .animate-in.is-visible {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }

      .animate-slide-left {
        opacity: 0;
        transform: translateX(-40px);
        filter: blur(8px);
        transition: opacity 0.9s ease-out, transform 0.9s ease-out, filter 0.9s ease-out;
      }

      .animate-slide-left.is-visible {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
      }

      .animate-slide-right {
        opacity: 0;
        transform: translateX(40px);
        filter: blur(8px);
        transition: opacity 0.9s ease-out, transform 0.9s ease-out, filter 0.9s ease-out;
      }

      .animate-slide-right.is-visible {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
      }

      .animate-scale {
        opacity: 0;
        transform: scale(0.9);
        filter: blur(8px);
        transition: opacity 0.7s ease-out, transform 0.7s ease-out, filter 0.7s ease-out;
      }

      .animate-scale.is-visible {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
      }

      .stagger-delay-1 {
        transition-delay: 0.1s;
      }

      .stagger-delay-2 {
        transition-delay: 0.2s;
      }

      .stagger-delay-3 {
        transition-delay: 0.3s;
      }

      .stagger-delay-4 {
        transition-delay: 0.4s;
      }

      .stagger-delay-5 {
        transition-delay: 0.5s;
      }

      .stagger-delay-6 {
        transition-delay: 0.6s;
      }

      .animate-line-rise {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(4px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.6s ease-out;
      }

      .animate-line-rise.is-visible {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }

      .animate-line-rise.delay-1 {
        transition-delay: 0.06s;
      }

      .animate-line-rise.delay-2 {
        transition-delay: 0.12s;
      }

      .animate-line-rise.delay-3 {
        transition-delay: 0.18s;
      }

      .animate-line-rise.delay-4 {
        transition-delay: 0.24s;
      }

      .animate-subtitle-rise {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(3px);
        transition: opacity 0.5s ease-out 0.3s, transform 0.5s ease-out 0.3s, filter 0.5s ease-out 0.3s;
      }

      .animate-subtitle-rise.is-visible {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }

      @media (max-width: 768px) {
        .animated-button {
          padding: 12px 24px;
          font-size: 14px;
        }

        .grid-corners::before,
        .grid-corners::after,
        .grid-corners-bottom::before,
        .grid-corners-bottom::after {
          width: 40px;
          height: 40px;
        }
      }

      @media (max-width: 640px) {
        .border-gradient::before {
          border-radius: 8px;
        }
      }
    </style>
    <style id="aura-editor-visibility-style">
      .invisible {
        visibility: hidden !important;
      }
    </style>

    <style id="karaoke-effect-styles">
      .karaoke-word {
        display: inline-block;
        opacity: 0.3;
        transition: opacity 0.3s ease, color 0.3s ease;
      }

      .karaoke-word.is-active {
        opacity: 1;
        color: rgba(163, 230, 53, 1);
      }

      .karaoke-word.is-completed {
        opacity: 1;
        color: inherit;
      }

      .karaoke-container.is-animating .karaoke-word {
        opacity: 0.3;
      }
    </style>

    <!-- Hero mockup -->
    <div class="animate-in stagger-delay-3 sm:mt-20 is-visible mt-20">
      <div class="border-white/10 border rounded-2xl pt-1 pr-1 pb-1 pl-1 relative"
        style="background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);">
        <div class="sm:p-6 ring-white/10 ring-1 rounded-xl pt-4 pr-4 pb-4 pl-4"
          style="background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);">
          <div class="grid grid-cols-1 lg:grid-cols-2 max-w-full gap-x-6 gap-y-6">
            <div class="aspect-[16/10] overflow-hidden rounded-xl ring-white/10 ring-1 relative w-full">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/95b3125e-9329-4d1e-a44f-a163a91e2ed6_1600w.webp" alt="3D render" class="w-full h-full object-cover">
              <div
                class="bg-gradient-to-tr from-lime-400/10 via-transparent to-transparent w-full absolute top-0 right-0 bottom-0 left-0">
              </div>
              <div
                class="absolute left-4 top-4 inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs ring-1 ring-white/10"
                style="background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  data-lucide="sparkles" class="lucide lucide-sparkles h-4 w-4 text-lime-300">
                  <path
                    d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
                    class=""></path>
                  <path d="M20 2v4" class=""></path>
                  <path d="M22 4h-4" class=""></path>
                  <circle cx="4" cy="20" r="2" class=""></circle>
                </svg>
                AI Generation
              </div>

              <div
                class="absolute bottom-2 left-1/2 -translate-x-1/2 flex flex-wrap gap-1 sm:gap-2 z-10 justify-center px-2 w-full max-w-full">
                <div
                  class="rounded-lg border border-white/20 backdrop-blur-xl px-2 sm:px-3 py-1.5 sm:py-2 text-[10px] sm:text-xs"
                  style="background: rgba(0, 0, 0, 0.4); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);">
                  <div class="flex items-center gap-1.5 sm:gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="text-lime-300 sm:w-3.5 sm:h-3.5">
                      <circle cx="12" cy="12" r="10" class=""></circle>
                      <path d="m9 12 2 2 4-4" class=""></path>
                    </svg>
                    <span class="text-white font-medium whitespace-nowrap">24 Tasks</span>
                  </div>
                </div>

                <div
                  class="text-[10px] sm:text-xs border-white/20 border rounded-lg pt-1.5 pr-2 pb-1.5 pl-2 sm:pt-2 sm:pr-3 sm:pb-2 sm:pl-3 backdrop-blur-xl"
                  style="background: rgba(0, 0, 0, 0.4); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);">
                  <div class="flex items-center gap-1.5 sm:gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="text-lime-300 sm:w-3.5 sm:h-3.5">
                      <path
                        d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
                        class=""></path>
                    </svg>
                    <span class="text-white font-medium whitespace-nowrap">98% Uptime</span>
                  </div>
                </div>

                <div
                  class="rounded-lg border border-white/20 backdrop-blur-xl px-2 sm:px-3 py-1.5 sm:py-2 text-[10px] sm:text-xs"
                  style="background: rgba(0, 0, 0, 0.4); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);">
                  <div class="flex items-center gap-1.5 sm:gap-2">
                    <div class="w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full bg-lime-400"></div>
                    <span class="text-white font-medium whitespace-nowrap">Live</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex flex-col w-full">
              <h3 class="text-xl font-semibold tracking-tight animate-line-rise karaoke-container is-visible"
                data-karaoke-wrapped="true" data-karaoke-animated="true">
                <span class="karaoke-word"></span>
                <span class="karaoke-word">Deploy</span>
                <span class="karaoke-word">5x</span>
                <span class="karaoke-word">faster</span>
                <span class="karaoke-word"></span>
              </h3>
              <p class="mt-2 text-sm text-neutral-300 animate-subtitle-rise karaoke-container is-visible"
                data-karaoke-wrapped="true" data-karaoke-animated="true">
                <span class="karaoke-word"></span>
                <span class="karaoke-word">Generate</span>
                <span class="karaoke-word">production‑ready</span>
                <span class="karaoke-word">code,</span>
                <span class="karaoke-word">infrastructure,</span>
                <span class="karaoke-word">and</span>
                <span class="karaoke-word">workflows</span>
                <span class="karaoke-word">with</span>
                <span class="karaoke-word">intelligent</span>
                <span class="karaoke-word">automation.</span>
                <span class="karaoke-word"></span>
              </p>

              <div class="sm:p-4 w-full border-white/10 border rounded-xl mt-5 pt-3 pr-3 pb-3 pl-3"
                style="background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);">
                <div class="flex items-center justify-between flex-wrap gap-2">
                  <div class="min-w-0">
                    <p class="text-xs sm:text-sm text-neutral-300 karaoke-container" data-karaoke-wrapped="true"
                      data-karaoke-animated="true">
                      <span class="karaoke-word"></span>
                      <span class="karaoke-word">Development</span>
                      <span class="karaoke-word">Speed</span>
                      <span class="karaoke-word"></span>
                    </p>
                    <p class="text-base sm:text-lg font-semibold tracking-tight karaoke-container"
                      data-karaoke-wrapped="true" data-karaoke-animated="true">
                      <span class="karaoke-word"></span>
                      <span class="karaoke-word">Time</span>
                      <span class="karaoke-word">to</span>
                      <span class="karaoke-word">Production</span>
                      <span class="karaoke-word"></span>
                    </p>
                  </div>
                  <span class="inline-flex items-center gap-1 rounded-full bg-lime-400/15 px-2 py-1 text-xs text-lime-300 ring-1 ring-lime-300/20 whitespace-nowrap">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up h-3.5 w-3.5"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
                +387%
              </span>
                </div>
                <div class="mt-3 w-full">
                  <div class="h-28 sm:h-36 w-full overflow-hidden rounded-lg ring-1 ring-white/10"
                    style="background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);">
                    <div class="p-2 h-full">
                      <div class="relative h-full w-full">
                        <canvas id="velocityChart"
                          style="display: block; width: 517px; height: 128px; box-sizing: border-box;" width="1034"
                          height="256" class=""></canvas>
                      </div>
                    </div>
                  </div>
                  <p class="mt-2 text-[10px] sm:text-[11px] text-neutral-400 karaoke-container"
                    data-karaoke-wrapped="true" data-karaoke-animated="true">
                    <span class="karaoke-word"></span>
                    <span class="karaoke-word">Comparison</span>
                    <span class="karaoke-word">with</span>
                    <span class="karaoke-word">traditional</span>
                    <span class="karaoke-word">development</span>
                    <span class="karaoke-word">over</span>
                    <span class="karaoke-word">8</span>
                    <span class="karaoke-word">weeks.</span>
                    <span class="karaoke-word"></span>
                  </p>
                </div>
              </div>

              <div class="mt-5 flex flex-wrap gap-2"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>