<section class="mx-auto grid w-full justify-center">
      <h2 class="my-20 text-center text-5xl font-bold text-black dark:text-white">Why us</h2>
      <div
        class="grid grid-cols-[repeat(auto-fit,minmax(18rem,1fr))] justify-center gap-6 lg:w-full lg:max-w-screen-xl lg:grid-cols-[repeat(auto-fit,minmax(0,22rem))] max-lg:[&>*]:mx-4">
        <div
          class="group grid content-start gap-3.5 rounded-lg bg-white bg-gradient-to-tr px-5 py-6 text-black hover:ring-1 hover:ring-zinc-400 dark:from-zinc-950 dark:to-zinc-950 dark:text-white dark:hover:from-zinc-900 dark:hover:to-zinc-950 dark:hover:ring-zinc-600">
          <!-- prettier-ignore -->
          <span class="p-2.5 group-hover:ring-1 ring-zinc-200/70 w-fit h-fit group-hover:ring-zinc-300 transition-colors  rounded-md dark:ring-zinc-800   dark:group-hover:ring-zinc-700" ><svg class="w-6 aspect-square" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-12z" /> <path d="M3 13h18" /> <path d="M8 21h8" /> <path d="M10 17l-.5 4" /> <path d="M14 17l.5 4" /> </svg> </span>
          <div class="space-y-3">
            <h3 class="origin-left text-2xl font-semibold">UI/UX Design</h3>
            <p class="text-sm/6 font-medium opacity-70 transition-opacity group-hover:opacity-90 dark:opacity-60">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia beatae imppisicing elit. Quia beatae imppisicing elit. Quia beatae
            </p>
          </div>
        </div>
        <div
          class="group grid content-start gap-3.5 rounded-lg bg-white bg-gradient-to-tr px-5 py-6 text-black hover:ring-1 hover:ring-zinc-400 dark:from-zinc-950 dark:to-zinc-950 dark:text-white dark:hover:from-zinc-900 dark:hover:to-zinc-950 dark:hover:ring-zinc-600">
          <!-- prettier-ignore -->
          <span class="p-2.5 group-hover:ring-1 ring-zinc-200/70 w-fit h-fit group-hover:ring-zinc-300 transition-colors  rounded-md dark:ring-zinc-800   dark:group-hover:ring-zinc-700" ><svg class="w-6 aspect-square" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-12z" /> <path d="M3 13h18" /> <path d="M8 21h8" /> <path d="M10 17l-.5 4" /> <path d="M14 17l.5 4" /> </svg> </span>
          <div class="space-y-3">
            <h3 class="origin-left text-2xl font-semibold">Backend Services</h3>
            <p class="text-sm/6 font-medium opacity-70 transition-opacity group-hover:opacity-90 dark:opacity-60">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia beatae imppisicing elit. Quia beatae imppisicing elit. Quia beatae
            </p>
          </div>
        </div>
        <div
          class="group grid content-start gap-3.5 rounded-lg bg-white bg-gradient-to-tr px-5 py-6 text-black hover:ring-1 hover:ring-zinc-400 dark:from-zinc-950 dark:to-zinc-950 dark:text-white dark:hover:from-zinc-900 dark:hover:to-zinc-950 dark:hover:ring-zinc-600">
          <!-- prettier-ignore -->
          <span class="p-2.5 group-hover:ring-1 ring-zinc-200/70 w-fit h-fit group-hover:ring-zinc-300 transition-colors  rounded-md dark:ring-zinc-800   dark:group-hover:ring-zinc-700" ><svg class="w-6 aspect-square" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-12z" /> <path d="M3 13h18" /> <path d="M8 21h8" /> <path d="M10 17l-.5 4" /> <path d="M14 17l.5 4" /> </svg> </span>
          <div class="space-y-3">
            <h3 class="origin-left text-2xl font-semibold">SEO</h3>
            <p class="text-sm/6 font-medium opacity-70 transition-opacity group-hover:opacity-90 dark:opacity-60">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia beatae imppisicing elit. Quia beatae imppisicing elit. Quia beatae
            </p>
          </div>
        </div>
        <div
          class="group grid content-start gap-3.5 rounded-lg bg-white bg-gradient-to-tr px-5 py-6 text-black hover:ring-1 hover:ring-zinc-400 dark:from-zinc-950 dark:to-zinc-950 dark:text-white dark:hover:from-zinc-900 dark:hover:to-zinc-950 dark:hover:ring-zinc-600">
          <!-- prettier-ignore -->
          <span class="p-2.5 group-hover:ring-1 ring-zinc-200/70 w-fit h-fit group-hover:ring-zinc-300 transition-colors  rounded-md dark:ring-zinc-800   dark:group-hover:ring-zinc-700" ><svg class="w-6 aspect-square" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-12z" /> <path d="M3 13h18" /> <path d="M8 21h8" /> <path d="M10 17l-.5 4" /> <path d="M14 17l.5 4" /> </svg> </span>
          <div class="space-y-3">
            <h3 class="origin-left text-2xl font-semibold">Accessibility</h3>
            <p class="text-sm/6 font-medium opacity-70 transition-opacity group-hover:opacity-90 dark:opacity-60">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia beatae imppisicing elit. Quia beatae imppisicing elit. Quia beatae
            </p>
          </div>
        </div>
        <div
          class="group grid content-start gap-3.5 rounded-lg bg-white bg-gradient-to-tr px-5 py-6 text-black hover:ring-1 hover:ring-zinc-400 dark:from-zinc-950 dark:to-zinc-950 dark:text-white dark:hover:from-zinc-900 dark:hover:to-zinc-950 dark:hover:ring-zinc-600">
          <!-- prettier-ignore -->
          <span class="p-2.5 group-hover:ring-1 ring-zinc-200/70 w-fit h-fit group-hover:ring-zinc-300 transition-colors  rounded-md dark:ring-zinc-800   dark:group-hover:ring-zinc-700" ><svg class="w-6 aspect-square" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-12z" /> <path d="M3 13h18" /> <path d="M8 21h8" /> <path d="M10 17l-.5 4" /> <path d="M14 17l.5 4" /> </svg> </span>
          <div class="space-y-3">
            <h3 class="origin-left text-2xl font-semibold">Website development</h3>
            <p class="text-sm/6 font-medium opacity-70 transition-opacity group-hover:opacity-90 dark:opacity-60">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia beatae imppisicing elit. Quia beatae imppisicing elit. Quia beatae
            </p>
          </div>
        </div>
        <div
          class="group grid content-start gap-3.5 rounded-lg bg-white bg-gradient-to-tr px-5 py-6 text-black hover:ring-1 hover:ring-zinc-400 dark:from-zinc-950 dark:to-zinc-950 dark:text-white dark:hover:from-zinc-900 dark:hover:to-zinc-950 dark:hover:ring-zinc-600">
          <!-- prettier-ignore -->
          <span class="p-2.5 group-hover:ring-1 ring-zinc-200/70 w-fit h-fit group-hover:ring-zinc-300 transition-colors  rounded-md dark:ring-zinc-800   dark:group-hover:ring-zinc-700" ><svg class="w-6 aspect-square" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-12z" /> <path d="M3 13h18" /> <path d="M8 21h8" /> <path d="M10 17l-.5 4" /> <path d="M14 17l.5 4" /> </svg> </span>
          <div class="space-y-3">
            <h3 class="origin-left text-2xl font-semibold">SaaS</h3>
            <p class="text-sm/6 font-medium opacity-70 transition-opacity group-hover:opacity-90 dark:opacity-60">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia beatae imppisicing elit. Quia beatae imppisicing elit. Quia beatae
            </p>
          </div>
        </div>
      </div>
    </section>

<section class="mx-auto grid w-full justify-center">
  
  <h2 class="my-20 text-center text-5xl font-bold text-black dark:text-white">Features</h2>
  <div
    class="grid grid-cols-[repeat(auto-fit,minmax(18rem,1fr))] justify-center gap-6 lg:w-full lg:max-w-screen-xl lg:grid-cols-[repeat(auto-fit,minmax(0,23rem))] max-lg:[&>*]:mx-4">
    
    <div
      class="group grid content-start gap-3.5 rounded-lg border border-zinc-300 bg-white px-5 py-6 text-black hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-900 dark:text-white dark:hover:border-zinc-700">
      <div class="flex items-center gap-4">
        <span class="p-2 bg-zinc-100 group-hover:bg-zinc-200/80 transition-colors  rounded-md dark:bg-zinc-950/50   dark:group-hover:bg-zinc-950" ><svg class="w-5 aspect-square" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-12z" /> <path d="M3 13h18" /> <path d="M8 21h8" /> <path d="M10 17l-.5 4" /> <path d="M14 17l.5 4" /> </svg> </span>
        <span class="origin-left text-xl font-semibold transition-transform group-hover:scale-110">Feature-0</span>
      </div>
      <div class="max-w-[90%] text-sm/6 font-medium opacity-70 transition-opacity group-hover:opacity-100 dark:opacity-60">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia beatae imppisicing elit. Quia beatae imppisicing elit. Quia beatae
      </div>
    </div>
    
    <div
      class="group grid content-start gap-3.5 rounded-lg border border-zinc-300 bg-white px-5 py-6 text-black hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-900 dark:text-white dark:hover:border-zinc-700">
      <div class="flex items-center gap-4">
        <span class="p-2 bg-zinc-100 group-hover:bg-zinc-200/80 transition-colors  rounded-md dark:bg-zinc-950/50   dark:group-hover:bg-zinc-950" ><svg class="w-5 aspect-square" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-12z" /> <path d="M3 13h18" /> <path d="M8 21h8" /> <path d="M10 17l-.5 4" /> <path d="M14 17l.5 4" /> </svg> </span>
        <span class="origin-left text-xl font-semibold transition-transform group-hover:scale-110">Feature-1</span>
      </div>
      <div class="max-w-[90%] text-sm/6 font-medium opacity-70 transition-opacity group-hover:opacity-100 dark:opacity-60">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia beatae impedit sapiente consequatur at consequuntur itaque architecto
      </div>
    </div>
    
    <div
      class="group grid content-start gap-3.5 rounded-lg border border-zinc-300 bg-white px-5 py-6 text-black hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-900 dark:text-white dark:hover:border-zinc-700">
      <div class="flex items-center gap-4">
        <span class="p-2 bg-zinc-100 group-hover:bg-zinc-200/80 transition-colors  rounded-md dark:bg-zinc-950/50   dark:group-hover:bg-zinc-950" ><svg class="w-5 aspect-square" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-12z" /> <path d="M3 13h18" /> <path d="M8 21h8" /> <path d="M10 17l-.5 4" /> <path d="M14 17l.5 4" /> </svg> </span>
        <span class="origin-left text-xl font-semibold transition-transform group-hover:scale-110">Feature-2</span>
      </div>
      <div class="max-w-[90%] text-sm/6 font-medium opacity-70 transition-opacity group-hover:opacity-100 dark:opacity-60">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia beatae impedit sapiente consequatur at consequuntur itaque architecto
      </div>
    </div>
    
    <div
      class="group grid content-start gap-3.5 rounded-lg border border-zinc-300 bg-white px-5 py-6 text-black hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-900 dark:text-white dark:hover:border-zinc-700">
      <div class="flex items-center gap-4">
        <span class="p-2 bg-zinc-100 group-hover:bg-zinc-200/80 transition-colors  rounded-md dark:bg-zinc-950/50   dark:group-hover:bg-zinc-950" ><svg class="w-5 aspect-square" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-12z" /> <path d="M3 13h18" /> <path d="M8 21h8" /> <path d="M10 17l-.5 4" /> <path d="M14 17l.5 4" /> </svg> </span>
        <span class="origin-left text-xl font-semibold transition-transform group-hover:scale-110">Feature-3</span>
      </div>
      <div class="max-w-[90%] text-sm/6 font-medium opacity-70 transition-opacity group-hover:opacity-100 dark:opacity-60">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia beatae impedit sapiente consequatur at consequuntur itaque architecto
      </div>
    </div>
    
    <div
      class="group grid content-start gap-3.5 rounded-lg border border-zinc-300 bg-white px-5 py-6 text-black hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-900 dark:text-white dark:hover:border-zinc-700">
      <div class="flex items-center gap-4">
        <span class="p-2 bg-zinc-100 group-hover:bg-zinc-200/80 transition-colors  rounded-md dark:bg-zinc-950/50   dark:group-hover:bg-zinc-950" ><svg class="w-5 aspect-square" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-12z" /> <path d="M3 13h18" /> <path d="M8 21h8" /> <path d="M10 17l-.5 4" /> <path d="M14 17l.5 4" /> </svg> </span>
        <span class="origin-left text-xl font-semibold transition-transform group-hover:scale-110">Feature-4</span>
      </div>
      <div class="max-w-[90%] text-sm/6 font-medium opacity-70 transition-opacity group-hover:opacity-100 dark:opacity-60">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia beatae impedit sapiente consequatur at consequuntur itaque architecto
      </div>
    </div>
    
    <div
      class="group grid content-start gap-3.5 rounded-lg border border-zinc-300 bg-white px-5 py-6 text-black hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-900 dark:text-white dark:hover:border-zinc-700">
      <div class="flex items-center gap-4">
        <span class="p-2 bg-zinc-100 group-hover:bg-zinc-200/80 transition-colors  rounded-md dark:bg-zinc-950/50   dark:group-hover:bg-zinc-950" ><svg class="w-5 aspect-square" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-12z" /> <path d="M3 13h18" /> <path d="M8 21h8" /> <path d="M10 17l-.5 4" /> <path d="M14 17l.5 4" /> </svg> </span>
        <span class="origin-left text-xl font-semibold transition-transform group-hover:scale-110">Feature-5</span>
      </div>
      <div class="max-w-[90%] text-sm/6 font-medium opacity-70 transition-opacity group-hover:opacity-100 dark:opacity-60">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia beatae impedit sapiente consequatur at consequuntur itaque architecto
      </div>
    </div>
  </div>
  
</section>