Features Tool Grid

<section class="ws-features py-20">
  <div class="mx-auto max-w-4xl px-6">
    <!-- Header -->
    <header class="mb-12">
      <div class="mb-6 flex items-center gap-3">
        <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-3 py-1 text-sm font-medium text-emerald-600">
          <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/></svg>
          Free Tools
        </span>
        <span class="text-sm text-[var(--ws-features-text-muted)]">No signup required</span>
      </div>
      <h1 class="text-4xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-5xl">
        Free <span class="text-[var(--ws-features-icon-color)]">Developer Tools</span>
      </h1>
      <p class="mt-4 max-w-2xl text-lg leading-relaxed text-[var(--ws-features-text-soft)]">
        Analyze, test, and optimize in minutes. The same tools we use for our own projects.
      </p>
      <div class="mt-8">
        <a href="#" class="inline-flex items-center rounded-lg bg-[var(--ws-features-icon-color)] px-6 py-3 text-base font-medium text-white transition hover:opacity-90">
          Most popular tool →
        </a>
      </div>
    </header>

    <!-- Tool Grid -->
    <div class="grid gap-6 md:grid-cols-2">
      <!-- Tool Card 1 -->
      <a href="#" class="group block rounded-xl border-2 border-[var(--ws-features-border)] p-6 transition-all hover:border-[var(--ws-features-icon-color)]">
        <div class="mb-4 text-emerald-600">
          <svg class="h-9 w-9" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
        </div>
        <h3 class="text-xl font-bold text-[var(--ws-features-text)] transition group-hover:text-[var(--ws-features-icon-color)]">Readability Checker</h3>
        <p class="mt-2 text-[var(--ws-features-text-soft)]">Analyze how well your content reads for both humans and machines. Score from 0 to 100 with suggestions.</p>
        <div class="mt-4 flex flex-wrap gap-2">
          <span class="rounded bg-[var(--ws-features-bg)]/60 px-2 py-0.5 text-xs text-[var(--ws-features-text-muted)]">Schema.org</span>
          <span class="rounded bg-[var(--ws-features-bg)]/60 px-2 py-0.5 text-xs text-[var(--ws-features-text-muted)]">Semantic HTML</span>
          <span class="rounded bg-[var(--ws-features-bg)]/60 px-2 py-0.5 text-xs text-[var(--ws-features-text-muted)]">SSR Check</span>
        </div>
        <span class="mt-4 inline-block text-sm font-medium text-[var(--ws-features-icon-color)]">Run check →</span>
      </a>

      <!-- Tool Card 2 -->
      <a href="#" class="group block rounded-xl border-2 border-[var(--ws-features-border)] p-6 transition-all hover:border-[var(--ws-features-icon-color)]">
        <div class="mb-4 text-blue-600">
          <svg class="h-9 w-9" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
        </div>
        <h3 class="text-xl font-bold text-[var(--ws-features-text)] transition group-hover:text-[var(--ws-features-icon-color)]">Config Generator</h3>
        <p class="mt-2 text-[var(--ws-features-text-soft)]">Generate optimized configuration files with guided input and live preview. Download ready to use.</p>
        <div class="mt-4 flex flex-wrap gap-2">
          <span class="rounded bg-[var(--ws-features-bg)]/60 px-2 py-0.5 text-xs text-[var(--ws-features-text-muted)]">Guided Input</span>
          <span class="rounded bg-[var(--ws-features-bg)]/60 px-2 py-0.5 text-xs text-[var(--ws-features-text-muted)]">Download</span>
        </div>
        <span class="mt-4 inline-block text-sm font-medium text-[var(--ws-features-icon-color)]">Generate →</span>
      </a>

      <!-- Tool Card 3 -->
      <a href="#" class="group block rounded-xl border-2 border-[var(--ws-features-border)] p-6 transition-all hover:border-[var(--ws-features-icon-color)]">
        <div class="mb-4 text-amber-500">
          <svg class="h-9 w-9" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
        </div>
        <h3 class="text-xl font-bold text-[var(--ws-features-text)] transition group-hover:text-[var(--ws-features-icon-color)]">Performance Analyzer</h3>
        <p class="mt-2 text-[var(--ws-features-text-soft)]">Test loading speed, rendering mode, and Core Web Vitals. Get actionable improvement tips.</p>
        <div class="mt-4 flex flex-wrap gap-2">
          <span class="rounded bg-[var(--ws-features-bg)]/60 px-2 py-0.5 text-xs text-[var(--ws-features-text-muted)]">Speed Score</span>
          <span class="rounded bg-[var(--ws-features-bg)]/60 px-2 py-0.5 text-xs text-[var(--ws-features-text-muted)]">Lighthouse</span>
        </div>
        <span class="mt-4 inline-block text-sm font-medium text-[var(--ws-features-icon-color)]">Analyze →</span>
      </a>

      <!-- Tool Card 4 -->
      <a href="#" class="group block rounded-xl border-2 border-[var(--ws-features-border)] p-6 transition-all hover:border-[var(--ws-features-icon-color)]">
        <div class="mb-4 text-purple-600">
          <svg class="h-9 w-9" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"/></svg>
        </div>
        <h3 class="text-xl font-bold text-[var(--ws-features-text)] transition group-hover:text-[var(--ws-features-icon-color)]">Security Scanner</h3>
        <p class="mt-2 text-[var(--ws-features-text-soft)]">Check headers, CORS, CSP policies, and common vulnerabilities. Quick security overview.</p>
        <div class="mt-4 flex flex-wrap gap-2">
          <span class="rounded bg-[var(--ws-features-bg)]/60 px-2 py-0.5 text-xs text-[var(--ws-features-text-muted)]">Headers</span>
          <span class="rounded bg-[var(--ws-features-bg)]/60 px-2 py-0.5 text-xs text-[var(--ws-features-text-muted)]">CORS</span>
          <span class="rounded bg-[var(--ws-features-bg)]/60 px-2 py-0.5 text-xs text-[var(--ws-features-text-muted)]">CSP</span>
        </div>
        <span class="mt-4 inline-block text-sm font-medium text-[var(--ws-features-icon-color)]">Scan →</span>
      </a>
    </div>

    <!-- Premium Section -->
    <div class="mt-12 rounded-2xl bg-[var(--ws-features-text)] p-8 text-white md:p-12">
      <div class="mb-6">
        <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-400/10 px-3 py-1 text-sm font-medium text-emerald-400">
          <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"/></svg>
          Deep Analysis
        </span>
      </div>
      <h2 class="text-2xl font-bold">Need a comprehensive audit?</h2>
      <p class="mt-3 max-w-xl text-white/70">Get a detailed report covering all aspects with prioritized recommendations and implementation guide.</p>
      <a href="#" class="mt-6 inline-flex items-center rounded-lg bg-white px-6 py-3 font-medium text-gray-900 transition hover:bg-white/90"><!-- ws-ok -->
        Request audit →
      </a>
    </div>
  </div>
</section>