Responsive Feature Highlights Grid Section

<section id="features" class="md:mt-28 mt-20">
  <div class="mx-auto max-w-7xl px-6 md:px-8">
    <div class="max-w-2xl">
      <h2 class="text-3xl sm:text-4xl font-semibold tracking-tight text-slate-50">Everything you need to ship faster
      </h2>
      <p class="mt-3 text-slate-400">From idea to production, Axiom gives you a scalable foundation that gets out of the
        way.</p>
    </div>
    <div class="mt-10 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
      <!-- Feature -->
      <div
        class="group rounded-xl border border-white/10 bg-white/[0.02] p-5 hover:bg-white/[0.04] hover:border-white/20 transition-colors">
        <div class="flex items-center gap-3">
          <div class="h-9 w-9 rounded-lg bg-sky-500/15 ring-1 ring-sky-400/20 grid place-items-center text-sky-300">
            <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" data-lucide="bolt"
              class="lucide lucide-bolt w-4.5 h-4.5">
              <path
                d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
                class=""></path>
              <circle cx="12" cy="12" r="4" class=""></circle>
            </svg>
          </div>
          <h3 class="text-base font-semibold tracking-tight text-slate-100">Blazing performance</h3>
        </div>
        <p class="mt-3 text-sm text-slate-400">Edge-first architecture with smart caching means pages and APIs respond
          in milliseconds.</p>
        <div class="mt-4 text-xs text-sky-300 inline-flex items-center gap-1 group-hover:gap-1.5 transition-all">
          Learn more <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"
            data-lucide="arrow-right" class="lucide lucide-arrow-right w-3.5 h-3.5">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg>
        </div>
      </div>
      <div
        class="group rounded-xl border border-white/10 bg-white/[0.02] p-5 hover:bg-white/[0.04] hover:border-white/20 transition-colors">
        <div class="flex items-center gap-3">
          <div
            class="h-9 w-9 rounded-lg bg-emerald-500/15 ring-1 ring-emerald-400/20 grid place-items-center text-emerald-300">
            <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" data-lucide="lock"
              class="lucide lucide-lock w-4.5 h-4.5">
              <rect width="18" height="11" x="3" y="11" rx="2" ry="2" class=""></rect>
              <path d="M7 11V7a5 5 0 0 1 10 0v4" class=""></path>
            </svg>
          </div>
          <h3 class="text-base font-semibold tracking-tight text-slate-100">Enterprise security</h3>
        </div>
        <p class="mt-3 text-sm text-slate-400">Automatic encryption, audit logs, SSO/SAML, and role-based access control
          out of the box.</p>
        <div class="mt-4 text-xs text-emerald-300 inline-flex items-center gap-1 group-hover:gap-1.5 transition-all">
          Learn more <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"
            data-lucide="arrow-right" class="lucide lucide-arrow-right w-3.5 h-3.5">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg>
        </div>
      </div>
      <div
        class="group rounded-xl border border-white/10 bg-white/[0.02] p-5 hover:bg-white/[0.04] hover:border-white/20 transition-colors">
        <div class="flex items-center gap-3">
          <div
            class="h-9 w-9 rounded-lg bg-violet-500/15 ring-1 ring-violet-400/20 grid place-items-center text-violet-300">
            <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"
              data-lucide="swatch-book" class="lucide lucide-swatch-book w-4.5 h-4.5">
              <path d="M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z" class=""></path>
              <path d="M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7" class=""></path>
              <path d="M 7 17h.01" class=""></path>
              <path d="m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8" class="">
              </path>
            </svg>
          </div>
          <h3 class="text-base font-semibold tracking-tight text-slate-100">Design system</h3>
        </div>
        <p class="mt-3 text-sm text-slate-400">Polished components and theming primitives help you ship a cohesive,
          accessible UI.</p>
        <div class="mt-4 text-xs text-violet-300 inline-flex items-center gap-1 group-hover:gap-1.5 transition-all">
          Learn more <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"
            data-lucide="arrow-right" class="lucide lucide-arrow-right w-3.5 h-3.5">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg>
        </div>
      </div>
      <div
        class="group rounded-xl border border-white/10 bg-white/[0.02] p-5 hover:bg-white/[0.04] hover:border-white/20 transition-colors">
        <div class="flex items-center gap-3">
          <div
            class="h-9 w-9 rounded-lg bg-amber-500/15 ring-1 ring-amber-400/20 grid place-items-center text-amber-300">
            <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"
              data-lucide="database" class="lucide lucide-database w-4.5 h-4.5">
              <ellipse cx="12" cy="5" rx="9" ry="3" class=""></ellipse>
              <path d="M3 5V19A9 3 0 0 0 21 19V5" class=""></path>
              <path d="M3 12A9 3 0 0 0 21 12" class=""></path>
            </svg>
          </div>
          <h3 class="text-base font-semibold tracking-tight text-slate-100">Serverless data</h3>
        </div>
        <p class="mt-3 text-sm text-slate-400">Fully managed store with real-time subscriptions, migrations, and
          point-in-time recovery.</p>
        <div class="mt-4 text-xs text-amber-300 inline-flex items-center gap-1 group-hover:gap-1.5 transition-all">
          Learn more <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"
            data-lucide="arrow-right" class="lucide lucide-arrow-right w-3.5 h-3.5">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg>
        </div>
      </div>
      <div
        class="group rounded-xl border border-white/10 bg-white/[0.02] p-5 hover:bg-white/[0.04] hover:border-white/20 transition-colors">
        <div class="flex items-center gap-3">
          <div
            class="h-9 w-9 rounded-lg bg-fuchsia-500/15 ring-1 ring-fuchsia-400/20 grid place-items-center text-fuchsia-300">
            <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"
              data-lucide="workflow" class="lucide lucide-workflow w-4.5 h-4.5">
              <rect width="8" height="8" x="3" y="3" rx="2" class=""></rect>
              <path d="M7 11v4a2 2 0 0 0 2 2h4" class=""></path>
              <rect width="8" height="8" x="13" y="13" rx="2" class=""></rect>
            </svg>
          </div>
          <h3 class="text-base font-semibold tracking-tight text-slate-100">CI/CD built-in</h3>
        </div>
        <p class="mt-3 text-sm text-slate-400">Automatic previews, checks, and canary deploys keep velocity high and
          risk low.</p>
        <div class="mt-4 text-xs text-fuchsia-300 inline-flex items-center gap-1 group-hover:gap-1.5 transition-all">
          Learn more <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"
            data-lucide="arrow-right" class="lucide lucide-arrow-right w-3.5 h-3.5">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg>
        </div>
      </div>
      <div
        class="group rounded-xl border border-white/10 bg-white/[0.02] p-5 hover:bg-white/[0.04] hover:border-white/20 transition-colors">
        <div class="flex items-center gap-3">
          <div class="h-9 w-9 rounded-lg bg-cyan-500/15 ring-1 ring-cyan-400/20 grid place-items-center text-cyan-300">
            <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"
              data-lucide="headphones" class="lucide lucide-headphones w-4.5 h-4.5">
              <path
                d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3"
                class=""></path>
            </svg>
          </div>
          <h3 class="text-base font-semibold tracking-tight text-slate-100">World-class support</h3>
        </div>
        <p class="mt-3 text-sm text-slate-400">Priority channels, expert architects, and a thriving community by your
          side.</p>
        <div class="mt-4 text-xs text-cyan-300 inline-flex items-center gap-1 group-hover:gap-1.5 transition-all">
          Learn more <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"
            data-lucide="arrow-right" class="lucide lucide-arrow-right w-3.5 h-3.5">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</section>