AI Portfolio Showcase Section

<section class="relative sm:pt-24 md:pt-28 pb-20">
  <!-- Ambient portfolio glow -->
  <div class="pointer-events-none absolute inset-0 -z-10">
    <div
      class="absolute left-1/2 -translate-x-1/2 -top-20 w-[48rem] h-[48rem] rounded-full bg-[radial-gradient(ellipse_at_center,rgba(99,102,241,0.22)_0%,transparent_60%)] blur-3xl">
    </div>
    <div
      class="absolute right-0 bottom-0 w-[36rem] h-[36rem] rounded-full bg-[radial-gradient(ellipse_at_bottom_right,rgba(168,85,247,0.18)_0%,transparent_60%)] blur-3xl">
    </div>
  </div>

  <div class="max-w-7xl mr-auto ml-auto pr-6 pl-6">
    <!-- Header -->
    <div class="text-center">
      <div
        class="inline-flex gap-2 shadow-indigo-500/20 bg-white/5 border-white/10 border rounded-full mr-auto ml-auto pt-1.5 pr-4 pb-1.5 pl-1.5 shadow-sm items-center">
        <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-indigo-600 ring-1 ring-white/20">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
        </span>
        <span class="text-xs font-medium text-white/80 font-sans">AI Portfolio</span>
      </div>
      <h2 class="mt-6 text-4xl sm:text-6xl md:text-7xl leading-[1.06] tracking-tighter font-manrope font-semibold">
        Intelligent Solutions
        <span class="text-white/80">Delivered with Precision.</span>
      </h2>
      <p class="mx-auto mt-4 max-w-2xl text-base sm:text-lg text-white/70 font-sans">
        Our AI-powered projects showcase how applied intelligence transforms businesses, delivering measurable results
        and breakthrough innovations.
      </p>
      <div class="mt-8">
        <a href="#"
          class="hidden sm:inline-flex items-center gap-2 hover:from-indigo-500 hover:to-indigo-700 transition-colors shadow-cyan-500/25 text-sm font-medium text-white bg-gradient-to-l from-indigo-600 to-indigo-800 rounded-full pt-2 pr-4 pb-2 pl-4 shadow-md">View
          AI Solutions<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="arrow-right" class="lucide lucide-arrow-right w-4 h-4">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg></a>
      </div>
    </div>

    <!-- Row 1 -->
    <div
      class="grid grid-cols-1 lg:grid-cols-4 gap-4 bg-[#000000] border-slate-50/10 border rounded-3xl mt-10 pt-4 pr-4 pb-4 pl-4">
      <!-- Info card -->
      <div
        class="group relative overflow-hidden sm:p-6 hover:bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] hover:from-indigo-400/30 hover:to-indigo-400/0 hover:border-slate-50/20 transition-all duration-300 bg-white/5 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5">
        <div class="pointer-events-none absolute inset-0 opacity-[0.07]"
          style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.9) 1px, transparent 1px); background-size: 14px 14px;">
        </div>
        <div class="flex items-center gap-3">
          <span class="inline-flex items-center justify-center rounded-full bg-white/5 ring-1 ring-white/15 px-2.5 py-1 text-xs text-white/80">2024</span>
          <p class="text-sm text-white/70 font-sans">FluxCommerce</p>
        </div>
        <h3 class="mt-3 text-xl sm:text-2xl font-semibold tracking-tight font-manrope">Smart E-Commerce Platform</h3>
        <ul class="mt-4 grid grid-cols-1 gap-2">
          <li class="inline-flex items-center gap-2 text-sm text-white/80">
            <span class="inline-flex w-5 h-5 items-center justify-center ring-1 ring-indigo-300/20 bg-indigo-500/10 rounded-full">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-[14px] h-[14px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-icon-replaced="true" style="width: 14px; height: 14px; color: rgb(165, 180, 252);"><path d="m20 6-11 11-5-5" class=""></path></svg>
            </span>
            AI Product Recommendations
          </li>
          <li class="inline-flex items-center gap-2 text-sm text-white/80">
            <span class="inline-flex w-5 h-5 items-center justify-center ring-1 ring-indigo-300/20 bg-indigo-500/10 rounded-full">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-indigo-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5" class=""></path></svg>
            </span>
            Dynamic Pricing
          </li>
          <li class="inline-flex items-center gap-2 text-sm text-white/80">
            <span class="inline-flex w-5 h-5 items-center justify-center ring-1 ring-indigo-300/20 bg-indigo-500/10 rounded-full">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-[14px] h-[14px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-icon-replaced="true" style="width: 14px; height: 14px; color: rgb(165, 180, 252);"><path d="m20 6-11 11-5-5" class=""></path></svg>
            </span>
            Predictive Analytics
          </li>
        </ul>
        <div class="mt-4 flex flex-wrap gap-2">
          <span class="inline-flex items-center gap-1 rounded-full bg-white/5 px-2.5 py-1 text-xs text-white/70 ring-1 ring-white/10">Machine Learning</span>
          <span class="inline-flex items-center gap-1 rounded-full bg-white/5 px-2.5 py-1 text-xs text-white/70 ring-1 ring-white/10">E-Commerce</span>
        </div>
      </div>
      <!-- Gallery -->
      <div class="lg:col-span-3 grid grid-cols-2 md:grid-cols-3 gap-4">
        <div class="relative overflow-hidden bg-white/5 border-white/10 border rounded-2xl">
          <img alt="AI Dashboard Analytics" class="w-full h-full opacity-90 hover:opacity-100 transition object-cover grayscale" src="https://cdn.midjourney.com/97f0525e-4b5b-46e1-a1ed-8ceb2043154b/0_0.png?w=800&amp;q=80">
        </div>
        <div class="relative overflow-hidden bg-white/5 border-white/10 border rounded-2xl">
          <img alt="Data Visualization Charts" class="w-full h-full opacity-90 hover:opacity-100 transition object-cover grayscale" src="https://cdn.midjourney.com/35fb956a-cd8d-47f0-bc6e-414eedfef338/0_0.png?w=800&amp;q=80">
        </div>
        <div class="relative overflow-hidden bg-white/5 border-white/10 border rounded-2xl">
          <img alt="Smart Shopping Interface" class="w-full h-full opacity-90 hover:opacity-100 transition object-cover grayscale" src="https://cdn.midjourney.com/700e1a9e-8f1b-4d83-b511-21677612b8a6/0_0.png?w=800&amp;q=80">
        </div>
      </div>
    </div>

    

    <!-- Row 3 -->
    <div
      class="grid grid-cols-1 lg:grid-cols-4 gap-4 bg-[#000000] border-slate-50/10 border rounded-3xl mt-10 pt-4 pr-4 pb-4 pl-4">
      <!-- Info card -->
      <div
        class="group relative overflow-hidden sm:p-6 hover:bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] hover:from-indigo-400/30 hover:to-indigo-400/0 hover:border-slate-50/20 transition-all duration-300 bg-white/5 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5">
        <div class="pointer-events-none absolute inset-0 opacity-[0.07]"
          style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.9) 1px, transparent 1px); background-size: 14px 14px;">
        </div>
        <div class="flex items-center gap-3">
          <span class="inline-flex items-center justify-center rounded-full bg-white/5 ring-1 ring-white/15 px-2.5 py-1 text-xs text-white/80">2024</span>
          <p class="text-sm text-white/70 font-sans">FinanceAI Pro</p>
        </div>
        <h3 class="sm:text-2xl text-xl font-semibold tracking-tight font-manrope mt-3">Intelligent Trading Bot</h3>
        <ul class="mt-4 grid grid-cols-1 gap-2">
          <li class="inline-flex items-center gap-2 text-sm text-white/80">
            <span class="inline-flex w-5 h-5 items-center justify-center ring-1 ring-indigo-300/20 bg-indigo-500/10 rounded-full">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-indigo-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5" class=""></path></svg>
            </span>
            Algorithmic Trading
          </li>
          <li class="inline-flex items-center gap-2 text-sm text-white/80">
            <span class="inline-flex w-5 h-5 items-center justify-center ring-1 ring-indigo-300/20 bg-indigo-500/10 rounded-full">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-indigo-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5" class=""></path></svg>
            </span>
            Risk Management
          </li>
          <li class="inline-flex items-center gap-2 text-sm text-white/80">
            <span class="inline-flex w-5 h-5 items-center justify-center ring-1 ring-indigo-300/20 bg-indigo-500/10 rounded-full">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-indigo-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5" class=""></path></svg>
            </span>
            Real-time Analysis
          </li>
        </ul>
        <div class="mt-4 flex flex-wrap gap-2">
          <span class="inline-flex items-center gap-1 rounded-full bg-white/5 px-2.5 py-1 text-xs text-white/70 ring-1 ring-white/10">FinTech</span>
          <span class="inline-flex items-center gap-1 rounded-full bg-white/5 px-2.5 py-1 text-xs text-white/70 ring-1 ring-white/10">Automation</span>
        </div>
      </div>
      <!-- Gallery -->
      <div class="lg:col-span-3 grid grid-cols-2 md:grid-cols-3 gap-4">
        <div class="relative overflow-hidden md:col-span-2 bg-white/5 border-white/10 border rounded-2xl">
          <img alt="Trading Dashboard" class="w-full h-full opacity-90 hover:opacity-100 transition object-cover grayscale" style="" src="https://cdn.midjourney.com/05ee647a-401b-40dd-985c-f81f5fcc0ac4/0_0.png?w=800&amp;q=80">
        </div>
        <div class="relative overflow-hidden bg-white/5 border-white/10 border rounded-2xl">
          <img alt="Smart Shopping Interface" class="w-full h-full opacity-90 hover:opacity-100 transition object-cover grayscale" src="https://cdn.midjourney.com/7519434b-08d7-48f3-baf1-6ee3ec8ab7b0/0_0.png?w=800&amp;q=80">
        </div>
      </div>
    </div>
  </div>
</section>