Responsive Portfolio Projects Showcase Section

<section class="sm:py-24 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll pt-16 pb-16 px-8"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(1) &gt; section:nth-of-type(2)" id="work">
  <div class="mb-12">
    <p class="text-xs uppercase text-neutral-500 tracking-widest mb-2 font-geist">
      Selected Work
    </p>
    <h2 class="text-3xl sm:text-4xl lg:text-5xl text-neutral-900 font-geist tracking-tighter font-medium" style="">
      Recent Projects
    </h2>
  </div>

  <div class="grid gap-8 lg:gap-12">
    <article
      class="group relative overflow-hidden rounded-3xl bg-white ring-1 ring-neutral-200 hover:shadow-xl transition-all duration-500 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
      <div class="grid lg:grid-cols-2 gap-6 lg:gap-8 p-6 sm:p-8 lg:p-12">
        <div class="flex flex-col justify-center">
          <div
            class="inline-flex items-center gap-2 rounded-full bg-blue-50 text-blue-700 ring-1 ring-blue-200 px-3 py-1 text-xs font-medium mb-4 w-fit font-geist">
            Mobile App
          </div>
          <h3 class="text-2xl sm:text-3xl mb-4 font-geist tracking-tighter font-medium" style="">
            FinanceFlow
          </h3>
          <p class="text-neutral-600 mb-6 leading-relaxed font-geist">
            A comprehensive financial management app that simplifies
            budgeting and expense tracking with intuitive visualizations
            and smart insights.
          </p>
          <div class="flex flex-wrap gap-2 mb-6">
            <span class="px-3 py-1 rounded-full bg-neutral-100 text-neutral-700 text-xs font-geist">
                    UI Design
                  </span>
            <span class="px-3 py-1 rounded-full bg-neutral-100 text-neutral-700 text-xs font-geist">
                    Mobile
                  </span>
            <span class="px-3 py-1 rounded-full bg-neutral-100 text-neutral-700 text-xs font-geist">
                    iOS/Android
                  </span>
          </div>
          <a href="#"
            class="inline-flex items-center gap-2 text-neutral-900 font-medium group-hover:gap-3 transition-all font-geist">
            View case study
            <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="w-4 h-4">
              <path d="M5 12h14" class=""></path>
              <path d="m12 5 7 7-7 7" class=""></path>
            </svg>
          </a>
        </div>
        <div
          class="relative overflow-hidden rounded-2xl aspect-[4/3] bg-gradient-to-br from-blue-100 to-blue-50 ring-1 ring-neutral-200">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/75780764-3e6d-44ae-83f0-f5d7783019f5_1600w.webp" alt="Minimal Smartphone Mockup on Pastel Gradient" class="w-full h-full object-cover">
        </div>
      </div>
    </article>

    <article
      class="group relative overflow-hidden rounded-3xl bg-white ring-1 ring-neutral-200 hover:shadow-xl transition-all duration-500 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
      <div class="grid lg:grid-cols-2 gap-6 lg:gap-8 p-6 sm:p-8 lg:p-12">
        <div
          class="order-2 lg:order-1 relative overflow-hidden rounded-2xl aspect-[4/3] bg-gradient-to-br from-orange-100 to-rose-50 ring-1 ring-neutral-200">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/10af7b89-4823-42f7-82ac-eecf56ee5d0a_1600w.webp" alt="3D stack of colorful credit cards" class="w-full h-full object-cover">
        </div>
        <div class="flex flex-col justify-center order-1 lg:order-2">
          <div
            class="inline-flex items-center gap-2 rounded-full bg-purple-50 text-purple-700 ring-1 ring-purple-200 px-3 py-1 text-xs font-medium mb-4 w-fit font-geist">
            Web Platform
          </div>
          <h3 class="text-2xl sm:text-3xl mb-4 font-geist tracking-tighter font-medium" style="">
            PayStream
          </h3>
          <p class="text-neutral-600 mb-6 leading-relaxed font-geist">
            Modern payment platform designed for seamless transactions
            with enhanced security features and real-time analytics
            dashboard.
          </p>
          <div class="flex flex-wrap gap-2 mb-6">
            <span class="px-3 py-1 rounded-full bg-neutral-100 text-neutral-700 text-xs font-geist">
                    Web Design
                  </span>
            <span class="px-3 py-1 rounded-full bg-neutral-100 text-neutral-700 text-xs font-geist">
                    Dashboard
                  </span>
            <span class="px-3 py-1 rounded-full bg-neutral-100 text-neutral-700 text-xs font-geist">
                    FinTech
                  </span>
          </div>
          <a href="#"
            class="inline-flex items-center gap-2 text-neutral-900 font-medium group-hover:gap-3 transition-all font-geist">
            View case study
            <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="w-4 h-4">
              <path d="M5 12h14" class=""></path>
              <path d="m12 5 7 7-7 7" class=""></path>
            </svg>
          </a>
        </div>
      </div>
    </article>
  </div>
</section>