Features Grid

<!--
  Day 32: Features grid

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Features Grid -->
<div
  class="relative mx-auto flex max-w-7xl flex-col gap-12 px-4 py-16 lg:px-8 lg:py-32"
>
  <div class="text-center">
    <h2 class="text-3xl font-extrabold text-gray-950 sm:text-4xl">
      Boost SEO with our solution.
    </h2>
    <h3 class="mt-2 text-lg font-medium text-gray-700">
      Unlock the power of search engine optimization and dominate your market.
    </h3>
  </div>
  <div class="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
    <!-- Keyword Research -->
    <div class="rounded-lg bg-white p-6 ring-8 ring-gray-900/5">
      <div
        class="mb-4 flex size-12 items-center justify-center rounded-xl bg-blue-100"
      >
        <svg
          class="inline-block size-6 text-blue-600"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
          ></path>
        </svg>
      </div>
      <h4 class="mb-2 font-bold text-gray-950">Keyword Research</h4>
      <p class="text-sm/relaxed text-gray-600">
        Discover high-performing keywords to target and improve your search
        rankings.
      </p>
    </div>
    <!-- END Keyword Research -->

    <!-- On-Page Optimization -->
    <div class="rounded-lg bg-white p-6 ring-8 ring-gray-900/5">
      <div
        class="mb-4 flex size-12 items-center justify-center rounded-xl bg-green-100"
      >
        <svg
          class="inline-block size-6 text-green-600"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
          ></path>
        </svg>
      </div>
      <h4 class="mb-2 font-bold text-gray-950">On-Page Optimization</h4>
      <p class="text-sm/relaxed text-gray-600">
        Optimize your content, meta tags, and HTML structure for better search
        engine visibility.
      </p>
    </div>
    <!-- END On-Page Optimization -->

    <!-- Backlink Analysis -->
    <div class="rounded-lg bg-white p-6 ring-8 ring-gray-900/5">
      <div
        class="mb-4 flex size-12 items-center justify-center rounded-xl bg-purple-100"
      >
        <svg
          class="inline-block size-6 text-purple-600"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
          ></path>
        </svg>
      </div>
      <h4 class="mb-2 font-bold text-gray-950">Backlink Analysis</h4>
      <p class="text-sm/relaxed text-gray-600">
        Monitor and analyze your backlink profile to improve your site's
        authority and rankings.
      </p>
    </div>
    <!-- END Backlink Analysis -->

    <!-- Site Speed Optimization -->
    <div class="rounded-lg bg-white p-6 ring-8 ring-gray-900/5">
      <div
        class="mb-4 flex size-12 items-center justify-center rounded-xl bg-yellow-100"
      >
        <svg
          class="inline-block size-6 text-yellow-600"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M13 10V3L4 14h7v7l9-11h-7z"
          ></path>
        </svg>
      </div>
      <h4 class="mb-2 font-bold text-gray-950">Site Speed Optimization</h4>
      <p class="text-sm/relaxed text-gray-600">
        Improve your website's loading speed for better user experience and
        search rankings.
      </p>
    </div>
    <!-- END Site Speed Optimization -->

    <!-- Competitor Analysis -->
    <div class="rounded-lg bg-white p-6 ring-8 ring-gray-900/5">
      <div
        class="mb-4 flex size-12 items-center justify-center rounded-xl bg-red-100"
      >
        <svg
          class="inline-block size-6 text-red-600"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
          ></path>
        </svg>
      </div>
      <h4 class="mb-2 font-bold text-gray-950">Competitor Analysis</h4>
      <p class="text-sm/relaxed text-gray-600">
        Gain insights into your competitors' strategies and find opportunities
        to outrank them.
      </p>
    </div>
    <!-- END Competitor Analysis -->

    <!-- SEO Reporting -->
    <div class="rounded-lg bg-white p-6 ring-8 ring-gray-900/5">
      <div
        class="mb-4 flex size-12 items-center justify-center rounded-xl bg-indigo-100"
      >
        <svg
          class="inline-block size-6 text-indigo-600"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
          ></path>
        </svg>
      </div>
      <h4 class="mb-2 font-bold text-gray-950">SEO Reporting</h4>
      <p class="text-sm/relaxed text-gray-600">
        Generate comprehensive reports to track your SEO progress and
        demonstrate ROI.
      </p>
    </div>
    <!-- END SEO Reporting -->
  </div>
</div>
<!-- END Features Grid -->