Features Grid 2

<!--
  Day 55: Features grid 2

  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 2 -->
<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">
    <div
      class="mb-2 inline-flex items-center rounded-full bg-purple-50 px-3 py-1 text-sm font-medium text-purple-700 ring-1 ring-purple-700/20 ring-inset"
    >
      <svg
        class="mr-1.5 size-4"
        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>
      New AI Features
    </div>
    <h2 class="text-3xl font-extrabold text-zinc-950 sm:text-4xl">
      Build stunning websites with AI.
    </h2>
    <p class="mt-2 text-lg font-medium text-zinc-700">
      Create professional websites in minutes with our intelligent website
      builder.
    </p>
  </div>
  <div
    class="grid grid-cols-1 gap-12 rounded-lg bg-white p-6 ring-8 ring-zinc-900/5 md:grid-cols-2 md:p-12 lg:grid-cols-3"
  >
    <!-- AI Design Generation -->
    <div>
      <div
        class="mb-5 flex size-16 items-center justify-center rounded-tr-3xl rounded-bl-lg bg-purple-100 text-purple-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-component inline-block size-8"
        >
          <path
            d="M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z"
          />
          <path
            d="M2.297 11.293a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0z"
          />
          <path
            d="M8.916 17.912a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0z"
          />
          <path
            d="M8.916 4.674a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z"
          />
        </svg>
      </div>
      <h4 class="mb-2 font-bold text-zinc-950">AI Design Generation</h4>
      <p class="text-sm/relaxed text-zinc-600">
        Describe your vision and watch as AI creates beautiful, custom designs
        tailored to your brand.
      </p>
    </div>
    <!-- END AI Design Generation -->

    <!-- Smart Content Creation -->
    <div>
      <div
        class="mb-5 flex size-16 items-center justify-center rounded-tr-3xl rounded-bl-lg bg-purple-100 text-purple-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-pencil-line inline-block size-8"
        >
          <path d="M12 20h9" />
          <path
            d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"
          />
          <path d="m15 5 3 3" />
        </svg>
      </div>
      <h4 class="mb-2 font-bold text-zinc-950">Smart Content Creation</h4>
      <p class="text-sm/relaxed text-zinc-600">
        Generate engaging copy, headlines, and product descriptions with our AI
        writing assistant.
      </p>
    </div>
    <!-- END Smart Content Creation -->

    <!-- Intelligent Layout Optimization -->
    <div>
      <div
        class="mb-5 flex size-16 items-center justify-center rounded-tr-3xl rounded-bl-lg bg-purple-100 text-purple-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-layout-panel-left inline-block size-8"
        >
          <rect width="7" height="18" x="3" y="3" rx="1" />
          <rect width="7" height="7" x="14" y="3" rx="1" />
          <rect width="7" height="7" x="14" y="14" rx="1" />
        </svg>
      </div>
      <h4 class="mb-2 font-bold text-zinc-950">
        Intelligent Layout Optimization
      </h4>
      <p class="text-sm/relaxed text-zinc-600">
        Our AI automatically arranges your content for maximum visual appeal and
        conversion rates.
      </p>
    </div>
    <!-- END Intelligent Layout Optimization -->

    <!-- Performance Optimization -->
    <div>
      <div
        class="mb-5 flex size-16 items-center justify-center rounded-tr-3xl rounded-bl-lg bg-purple-100 text-purple-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-atom inline-block size-8"
        >
          <circle cx="12" cy="12" r="1" />
          <path
            d="M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z"
          />
          <path
            d="M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z"
          />
        </svg>
      </div>
      <h4 class="mb-2 font-bold text-zinc-950">Performance Optimization</h4>
      <p class="text-sm/relaxed text-zinc-600">
        AI-powered speed enhancements ensure your website loads instantly on all
        devices and connections.
      </p>
    </div>
    <!-- END Performance Optimization -->

    <!-- Conversion Intelligence -->
    <div>
      <div
        class="mb-5 flex size-16 items-center justify-center rounded-tr-3xl rounded-bl-lg bg-purple-100 text-purple-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-user-check inline-block size-8"
        >
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
          <circle cx="9" cy="7" r="4" />
          <polyline points="16 11 18 13 22 9" />
        </svg>
      </div>
      <h4 class="mb-2 font-bold text-zinc-950">Conversion Intelligence</h4>
      <p class="text-sm/relaxed text-zinc-600">
        Smart analytics and suggestions to optimize your site for higher
        conversion rates and engagement.
      </p>
    </div>
    <!-- END Conversion Intelligence -->

    <!-- Adaptive SEO -->
    <div>
      <div
        class="mb-5 flex size-16 items-center justify-center rounded-tr-3xl rounded-bl-lg bg-purple-100 text-purple-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-radar inline-block size-8"
        >
          <path d="M19.07 4.93A10 10 0 0 0 6.99 3.34" />
          <path d="M4 6h.01" />
          <path d="M2.29 9.62A10 10 0 1 0 21.31 8.35" />
          <path d="M16.24 7.76A6 6 0 1 0 8.23 16.67" />
          <path d="M12 18h.01" />
          <path d="M17.99 11.66A6 6 0 0 1 15.77 16.67" />
          <circle cx="12" cy="12" r="2" />
          <path d="m13.41 10.59 5.66-5.66" />
        </svg>
      </div>
      <h4 class="mb-2 font-bold text-zinc-950">Adaptive SEO</h4>
      <p class="text-sm/relaxed text-zinc-600">
        AI continuously optimizes your content for search engines, adapting to
        algorithm changes automatically.
      </p>
    </div>
    <!-- END Adaptive SEO -->

    <!-- Multilingual Support -->
    <div>
      <div
        class="mb-5 flex size-16 items-center justify-center rounded-tr-3xl rounded-bl-lg bg-purple-100 text-purple-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-globe inline-block size-8"
        >
          <circle cx="12" cy="12" r="10" />
          <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
          <path d="M2 12h20" />
        </svg>
      </div>
      <h4 class="mb-2 font-bold text-zinc-950">Multilingual Support</h4>
      <p class="text-sm/relaxed text-zinc-600">
        AI-powered translation and localization to reach global audiences with
        perfectly adapted content and interfaces.
      </p>
    </div>
    <!-- END Multilingual Support -->

    <!-- Personalization Engine -->
    <div>
      <div
        class="mb-5 flex size-16 items-center justify-center rounded-tr-3xl rounded-bl-lg bg-purple-100 text-purple-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-wand-sparkles inline-block size-8"
        >
          <path
            d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"
          />
          <path d="m14 7 3 3" />
          <path d="M5 6v4" />
          <path d="M19 14v4" />
          <path d="M10 2v2" />
          <path d="M7 8H3" />
          <path d="M21 16h-4" />
          <path d="M11 3H9" />
        </svg>
      </div>
      <h4 class="mb-2 font-bold text-zinc-950">Personalization Engine</h4>
      <p class="text-sm/relaxed text-zinc-600">
        Deliver tailored experiences to each visitor with AI that learns
        preferences and adapts content in real-time.
      </p>
    </div>
    <!-- END Personalization Engine -->

    <!-- Voice Interface Integration -->
    <div>
      <div
        class="mb-5 flex size-16 items-center justify-center rounded-tr-3xl rounded-bl-lg bg-purple-100 text-purple-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
          class="lucide lucide-audio-lines inline-block size-8"
        >
          <path d="M2 10v3" />
          <path d="M6 6v11" />
          <path d="M10 3v18" />
          <path d="M14 8v7" />
          <path d="M18 5v13" />
          <path d="M22 10v3" />
        </svg>
      </div>
      <h4 class="mb-2 font-bold text-zinc-950">Voice Interface Integration</h4>
      <p class="text-sm/relaxed text-zinc-600">
        Enable natural voice interactions with your website through AI-powered
        speech recognition and response systems.
      </p>
    </div>
    <!-- END Voice Interface Integration -->
  </div>
</div>
<!-- END Features Grid 2 -->