Animated Hero/About Section with Image & Cards

<div class="grid gap-8 lg:gap-10 xl:gap-16 lg:grid-cols-2 gap-x-8 gap-y-8 items-center">
      <div class="order-2 lg:order-1">
        <div class="relative overflow-hidden shadow-black/50 bg-white/5 border-white/10 border rounded-2xl sm:rounded-3xl shadow-2xl slide-in-left" style="transform: perspective(1000px) rotateX(0deg); transition: transform 1s ease-out; animation-play-state: running;">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/44cd4dc8-e179-4757-ab22-93db367d24e3_3840w.jpg" alt="Team collaborating in modern studio" class="h-[30vh] sm:h-[40vh] md:h-[50vh] lg:h-[62vh] w-full max-h-full object-cover saturate-50" style="">
          <div class="pointer-events-none absolute inset-0 rounded-2xl sm:rounded-3xl bg-gradient-to-r from-violet-600/10 via-transparent to-fuchsia-600/10 mix-blend-overlay"></div>
          <div class="pointer-events-none absolute inset-0 rounded-2xl sm:rounded-3xl" style="box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 0 2px rgba(124,58,237,0.15), inset 0 40px 120px rgba(0,0,0,0.35);"></div>
        </div>
      </div>

      <div class="relative order-1 lg:order-2 h-full max-h-full">
        <div class="inline-flex slide-in-right overflow-hidden text-xs text-white/80 bg-[#000000]/5 border-white/10 border rounded-full mb-4 pt-2 pr-3 pb-2 pl-3 backdrop-blur gap-x-2 gap-y-2 items-center" style="animation-play-state: running;">
          <span class="inline-flex items-center justify-center text-violet-400 bg-violet-600/20 w-6 h-6 rounded-full">
            <!-- Subtle purple gradient line -->
    <div aria-hidden="true" class="pointer-events-none absolute top-0 left-0 right-0" style="height: 1px; background: linear-gradient(90deg, rgba(124,58,237,0) 0%, rgba(167,139,250,0.9) 50%, rgba(124,58,237,0) 100%); border-top-left-radius: 9999px; border-top-right-radius: 9999px; opacity: 0.7; filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.35));"></div>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><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>
          </span>
          About NovaForge
        </div>

        <h2 class="text-3xl sm:text-4xl lg:text-5xl xl:text-6xl font-light tracking-tight mt-4 slide-in-right animate-delay-200" style="animation-play-state: running;">
          Shaping Tomorrow
          <span class="block bg-clip-text font-light text-transparent bg-neutral-50/60">With Bold Software</span>
        </h2>
        <p class="mt-4 max-w-xl text-base leading-relaxed text-white/70 slide-in-right animate-delay-400" style="animation-play-state: running;">
          NovaForge is a next‑gen product studio for visionaries, researchers, and builders crafting the future of intelligent experiences.
        </p>

        <div class="relative overflow-hidden h-60 sm:h-72 md:h-80 max-h-full border-white/10 rounded-2xl sm:rounded-3xl mt-6 sm:mt-8 shadow-lg backdrop-blur-sm slide-in-right animate-delay-600" style="animation-play-state: running;">
          <div class="absolute top-0 left-0 right-0 h-8 bg-gradient-to-b from-[#0b0b0f] to-transparent z-10 pointer-events-none"></div>
          <div class="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-[#0b0b0f] to-transparent z-10 pointer-events-none"></div>
          
          <div class="animate-scroll-up pt-6 sm:pt-8 pr-4 sm:pr-6 pb-6 sm:pb-8 pl-4 sm:pl-6 space-y-4" style="animation: scrollUp 12s linear infinite;">
  <div class="bg-gradient-to-br from-white/[0.08] to-white/[0.03] border border-white/10 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg opacity-0 translate-y-4" style="border-top: 1px solid rgb(255 255 255 / 0.4); box-shadow: 0 -2px 8px rgba(255, 255, 255, 0.15), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); animation: fadeInUp 0.8s ease-out 0.2s forwards;">
    <div class="flex items-start justify-between">
      <div class="inline-flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-lg sm:rounded-xl bg-white/10 text-white border border-white/20">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 sm:h-5 sm:w-5"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
      </div>
      <span class="rounded-full border border-white/20 bg-white/10 px-2 sm:px-3 py-1 text-xs text-white">Strategy</span>
    </div>
    <h3 class="mt-3 sm:mt-4 text-base sm:text-lg font-semibold tracking-tight">Full‑Stack Product Development</h3>
    <p class="mt-1 sm:mt-2 text-xs sm:text-sm text-white/70">
      From concept to launch, we handle strategy, design, and engineering. Our end‑to‑end approach ensures seamless user experiences and scalable technical foundations.
    </p>
  </div>

  <div class="bg-gradient-to-br from-white/[0.08] to-white/[0.03] border border-white/10 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg opacity-0 translate-y-4" style="border-top: 1px solid rgb(255 255 255 / 0.4); box-shadow: 0 -2px 8px rgba(255, 255, 255, 0.15), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); animation: fadeInUp 0.8s ease-out 0.4s forwards;">
    <div class="flex items-start justify-between">
      <div class="inline-flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-lg sm:rounded-xl bg-white/10 text-white border border-white/20">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 sm:h-5 sm:w-5"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" class=""></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" class=""></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" class=""></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" class=""></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" class=""></circle></svg>
      </div>
      <span class="rounded-full border border-white/20 bg-white/10 px-2 sm:px-3 py-1 text-xs text-white">Design</span>
    </div>
    <h3 class="mt-3 sm:mt-4 text-base sm:text-lg font-semibold tracking-tight">User‑Centered Design Excellence</h3>
    <p class="mt-1 sm:mt-2 text-xs sm:text-sm text-white/70">
      Beautiful, intuitive interfaces backed by research and testing. We craft experiences that users love and that drive business results through thoughtful design systems.
    </p>
  </div>

  <div class="bg-gradient-to-br from-white/[0.08] to-white/[0.03] border border-white/10 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg opacity-0 translate-y-4" style="border-top: 1px solid rgb(255 255 255 / 0.4); box-shadow: 0 -2px 8px rgba(255, 255, 255, 0.15), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); animation: fadeInUp 0.8s ease-out 0.6s forwards;">
    <div class="flex items-start justify-between">
      <div class="inline-flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-lg sm:rounded-xl bg-white/10 text-white border border-white/20">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 sm:h-5 sm:w-5"><path d="m16 18 6-6-6-6" class=""></path><path d="m8 6-6 6 6 6" class=""></path></svg>
      </div>
      <span class="rounded-full border border-white/20 bg-white/10 px-2 sm:px-3 py-1 text-xs text-white">Engineering</span>
    </div>
    <h3 class="mt-3 sm:mt-4 text-base sm:text-lg font-semibold tracking-tight">Scalable Technical Architecture</h3>
    <p class="mt-1 sm:mt-2 text-xs sm:text-sm text-white/70">
      Modern, maintainable codebases built for growth. We use proven technologies and best practices to deliver reliable, performant applications that stand the test of time.
    </p>
  </div>

  <!-- Duplicate for seamless scroll -->
  <div class="bg-gradient-to-br from-white/[0.08] to-white/[0.03] border border-white/10 rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-lg" style="border-top: 1px solid rgb(255 255 255 / 0.4); box-shadow: 0 -2px 8px rgba(255, 255, 255, 0.15), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);">
    <div class="flex items-start justify-between">
      <div class="inline-flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-lg sm:rounded-xl bg-white/10 text-white border border-white/20">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 sm:h-5 sm:w-5"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
      </div>
      <span class="rounded-full border border-white/20 bg-white/10 px-2 sm:px-3 py-1 text-xs text-white">Strategy</span>
    </div>
    <h3 class="mt-3 sm:mt-4 text-base sm:text-lg font-semibold tracking-tight">Full‑Stack Product Development</h3>
    <p class="mt-1 sm:mt-2 text-xs sm:text-sm text-white/70">
      From concept to launch, we handle strategy, design, and engineering. Our end‑to‑end approach ensures seamless user experiences and scalable technical foundations.
    </p>
  </div>
</div>
        </div>

        <style>
          @keyframes fadeInUp {
            from {
              opacity: 0;
              transform: translateY(16px);
            }
            to {
              opacity: 1;
              transform: translateY(0);
            }
          }

          @keyframes scrollUp {
            0% {
              transform: translateY(0);
            }
            100% {
              transform: translateY(-25%);
            }
          }

          .animate-scroll-up:hover {
            animation-play-state: paused;
          }
        </style>
      </div>
    </div>