Steps SaaS Brutalist

                <!--
@type: Steps
@industry: SaaS
@style: Brutalist
@category: Page Section, Sale
@framework: Tailwind
@license: Free
-->

<style>
  .brutalist-shadow {
    box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 1);
  }
  .brutalist-shadow-sm {
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
  }
</style>

<section id="process" class="bg-white py-24 px-6 font-mono border-t-8 border-black relative">
  <div
    class="absolute top-0 left-0 w-full h-full opacity-[0.03] pointer-events-none select-none overflow-hidden font-black text-[20vw] leading-none uppercase">
    PROCESS PROCESS PROCESS PROCESS
  </div>

  <div class="max-w-7xl mx-auto relative z-10">

    <div class="mb-20 text-center">
      <h2 class="text-6xl md:text-8xl font-black uppercase tracking-tighter leading-none mb-4">
        3 Steps to <br />
        <span class="bg-cyan-400 border-4 border-black px-6 brutalist-shadow">Deployment</span>
      </h2>
      <p class="text-2xl font-bold uppercase italic mt-8">No bureaucracy. Just execution.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-0 border-4 border-black brutalist-shadow bg-black">

      <div
        class="bg-white p-10 flex flex-col border-b-4 lg:border-b-0 lg:border-r-4 border-black group hover:bg-neutral-50 transition-colors">
        <div class="text-8xl font-black text-cyan-400 mb-6 group-hover:-translate-y-2 transition-transform">01</div>
        <div class="mb-6">
          <span class="bg-black text-white px-3 py-1 font-black uppercase tracking-widest text-sm">Initialize</span>
        </div>
        <h3 class="text-3xl font-black uppercase mb-4">Link Your Repository</h3>
        <p class="text-xl font-bold uppercase leading-tight">
          Connect your GitHub or GitLab. We scan your manifest and auto-configure the environment variables.
        </p>
      </div>

      <div
        class="bg-white p-10 flex flex-col border-b-4 lg:border-b-0 lg:border-r-4 border-black group hover:bg-cyan-50 transition-colors">
        <div class="text-8xl font-black text-neutral-900 mb-6 group-hover:-translate-y-2 transition-transform">02</div>
        <div class="mb-6">
          <span
            class="bg-cyan-400 border-2 border-black text-black px-3 py-1 font-black uppercase tracking-widest text-sm">Optimize</span>
        </div>
        <h3 class="text-3xl font-black uppercase mb-4">Strip The Bloat</h3>
        <p class="text-xl font-bold uppercase leading-tight">
          Select your "Architect" profile. We prune unnecessary dependencies and harden the container at the kernel
          level.
        </p>
      </div>

      <div class="bg-white p-10 flex flex-col group hover:bg-neutral-900 hover:text-white transition-colors">
        <div class="text-8xl font-black text-cyan-400 mb-6 group-hover:-translate-y-2 transition-transform">03</div>
        <div class="mb-6">
          <span
            class="bg-neutral-900 text-white border-2 border-white lg:border-black group-hover:border-white px-3 py-1 font-black uppercase tracking-widest text-sm">Push</span>
        </div>
        <h3 class="text-3xl font-black uppercase mb-4">Global Propagation</h3>
        <p class="text-xl font-bold uppercase leading-tight">
          Hit deploy. Your app is mirrored across 40 nodes in 12 seconds. Sub-millisecond routing starts immediately.
        </p>
      </div>

    </div>

    <div class="mt-20 border-4 border-black h-12 bg-neutral-200 relative overflow-hidden brutalist-shadow-sm">
      <div
        class="absolute top-0 left-0 h-full bg-cyan-400 border-r-4 border-black w-2/3 flex items-center justify-end px-4">
        <span class="font-black uppercase italic tracking-tighter">System Ready_</span>
      </div>
    </div>

  </div>
</section>