<section class="relative py-16 lg:py-32">
  <div class="container">
    <div class="grid gap-12 items-center">
      <div>
        <div class="max-w-3xl mx-auto text-center">
          <div>
            <h2 class="text-3xl/tight font-bold tracking-tight md:text-4xl/tight">Why Choose Us</h2>
            <p class="mt-4 text-lg/8 text-muted-foreground">
              Sed eu quam id quam tristique pharetra a at tortor veil dolarto.
              <br class="max-md:hidden" />
              Suspendisse lorem odio sit amet libero facilisis.
            </p>
          </div>
        </div>
      </div>
      <div>
        <div class="grid lg:grid-cols-2 gap-8">
          <div class="card card-muted">
            <div class="card-content">
              <div class="flex gap-6">
                <div class="inline-flex items-center justify-center size-11 rounded-md [&>svg]:size-5 border bg-background shadow-xs shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>
                </div>
                <div>
                  <h3 class="text-lg font-semibold tracking-tight">Lightning Fast</h3>
                  <p class="text-sm/6 text-muted-foreground mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed lorem eiusmod temporos incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam exercitation.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="card card-muted">
            <div class="card-content">
              <div class="flex gap-6">
                <div class="inline-flex items-center justify-center size-11 rounded-md [&>svg]:size-5 border bg-background shadow-xs shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg>
                </div>
                <div>
                  <h3 class="text-lg font-semibold tracking-tight">Secure by Default</h3>
                  <p class="text-sm/6 text-muted-foreground mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed lorem eiusmod temporos incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam exercitation.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="card card-muted">
            <div class="card-content">
              <div class="flex gap-6">
                <div class="inline-flex items-center justify-center size-11 rounded-md [&>svg]:size-5 border bg-background shadow-xs shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket" aria-hidden="true">
                    <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path>
                    <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path>
                    <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
                    <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
                  </svg>
                </div>
                <div>
                  <h3 class="text-lg font-semibold tracking-tight">Easy to Scale</h3>
                  <p class="text-sm/6 text-muted-foreground mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed lorem eiusmod temporos incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam exercitation.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="card card-muted">
            <div class="card-content">
              <div class="flex gap-6">
                <div class="inline-flex items-center justify-center size-11 rounded-md [&>svg]:size-5 border bg-background shadow-xs shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe" aria-hidden="true">
                    <circle cx="12" cy="12" r="10"></circle>
                    <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
                    <path d="M2 12h20"></path>
                  </svg>
                </div>
                <div>
                  <h3 class="text-lg font-semibold tracking-tight">Global CDN</h3>
                  <p class="text-sm/6 text-muted-foreground mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed lorem eiusmod temporos incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam exercitation.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>