Feature Sections

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl lg:mx-0">
          <h2 class="text-base font-semibold leading-7 text-pink-500">Key highlights</h2>
          <p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Discover the core features</p>
        </div>
        <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mx-0 lg:max-w-none">
          <dl class="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3">
            <div class="flex flex-col">
              <dt class="text-xl font-medium text-gray-900">
                <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
                  <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M14 10C14 9.44771 13.5523 9 13 9H12.5C9.46243 9 7 11.4624 7 14.5C7 17.5376 9.46243 20 12.5 20H17.5C20.5376 20 23 17.5376 23 14.5C23 12.0091 21.3441 9.90488 19.073 9.22823C18.5098 9.06042 18 9.52887 18 10.1166V10.1683C18 10.6659 18.3745 11.0735 18.8345 11.2634C20.1055 11.788 21 13.0395 21 14.5C21 16.433 19.433 18 17.5 18H12.5C10.567 18 9 16.433 9 14.5C9 12.567 10.567 11 12.5 11H13C13.5523 11 14 10.5523 14 10Z" fill="currentColor" />
                    <path d="M11.5 4C14.5376 4 17 6.46243 17 9.5C17 12.5376 14.5376 15 11.5 15H11C10.4477 15 10 14.5523 10 14C10 13.4477 10.4477 13 11 13H11.5C13.433 13 15 11.433 15 9.5C15 7.567 13.433 6 11.5 6H6.5C4.567 6 3 7.567 3 9.5C3 10.9605 3.89451 12.212 5.16553 12.7366C5.62548 12.9264 6 13.3341 6 13.8317V13.8834C6 14.4711 5.49024 14.9396 4.92699 14.7718C2.65592 14.0951 1 11.9909 1 9.5C1 6.46243 3.46243 4 6.5 4H11.5Z" fill="currentColor" />
                  </svg>
                </div>
                Effortless Integration
              </dt>
              <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto">Easily connect with the tools you already use and love. Our platform is designed for seamless integration with a variety of third-party applications.</p>
                <p class="mt-10">
                  <a href="#" class="inline-flex items-center gap-x-1 text-base font-semibold text-pink-500">
                    Learn more
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </a>
                </p>
              </dd>
            </div>
            <div class="flex flex-col">
              <dt class="text-xl font-medium text-gray-900">
                <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
                  <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M2 12.8799V11.1199C2 10.0799 2.85 9.21994 3.9 9.21994C5.71 9.21994 6.45 7.93994 5.54 6.36994C5.02 5.46994 5.33 4.29994 6.24 3.77994L7.97 2.78994C8.76 2.31994 9.78 2.59994 10.25 3.38994L10.36 3.57994C11.26 5.14994 12.74 5.14994 13.65 3.57994L13.76 3.38994C14.23 2.59994 15.25 2.31994 16.04 2.78994L17.77 3.77994C18.68 4.29994 18.99 5.46994 18.47 6.36994C17.56 7.93994 18.3 9.21994 20.11 9.21994C21.15 9.21994 22.01 10.0699 22.01 11.1199V12.8799C22.01 13.9199 21.16 14.7799 20.11 14.7799C18.3 14.7799 17.56 16.0599 18.47 17.6299C18.99 18.5399 18.68 19.6999 17.77 20.2199L16.04 21.2099C15.25 21.6799 14.23 21.3999 13.76 20.6099L13.65 20.4199C12.75 18.8499 11.27 18.8499 10.36 20.4199L10.25 20.6099C9.78 21.3999 8.76 21.6799 7.97 21.2099L6.24 20.2199C5.33 19.6999 5.02 18.5299 5.54 17.6299C6.45 16.0599 5.71 14.7799 3.9 14.7799C2.85 14.7799 2 13.9199 2 12.8799Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </div>
                Advanced Customization
              </dt>
              <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto">Adapt the platform to suit your specific business needs. With our extensive customization options, you can modify features, adjust settings, and personalize your experience.</p>
                <p class="mt-10">
                  <a href="#" class="inline-flex items-center gap-x-1 text-base font-semibold text-pink-500">
                    Learn more
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </a>
                </p>
              </dd>
            </div>
            <div class="flex flex-col">
              <dt class="text-xl font-medium text-gray-900">
                <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
                  <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M20.91 11.12C20.91 16.01 17.36 20.59 12.51 21.93C12.18 22.02 11.82 22.02 11.49 21.93C6.63996 20.59 3.08997 16.01 3.08997 11.12V6.72997C3.08997 5.90997 3.70998 4.97998 4.47998 4.66998L10.05 2.39001C11.3 1.88001 12.71 1.88001 13.96 2.39001L19.53 4.66998C20.29 4.97998 20.92 5.90997 20.92 6.72997L20.91 11.12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </div>
                Enhanced Security
              </dt>
              <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto">Protect your data with our state-of-the-art security features. Our SaaS platform is built with advanced encryption and compliance tools to safeguard your information.</p>
                <p class="mt-10">
                  <a href="#" class="inline-flex items-center gap-x-1 text-base font-semibold text-pink-500">
                    Learn more
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </a>
                </p>
              </dd>
            </div>
          </dl>
        </div>
      </div>
    </div>

<div class="relative isolate bg-white py-24 sm:py-32">
      <div aria-hidden="true" class="absolute left-1/2 top-72 -z-30 h-[40rem] w-[40rem] -translate-x-1/2 rounded-full bg-gradient-to-b from-pink-400 to-amber-300/40 opacity-50 blur-[8rem]"></div>
      <div aria-hidden="true" class="absolute left-1/2 top-60 -z-20 h-80 w-80 rounded-full bg-gradient-to-b from-pink-500 to-amber-400/40 opacity-50 blur-3xl"></div>
      <div aria-hidden="true" class="absolute left-1/2 top-28 -z-10 h-[40rem] w-[40rem] -translate-x-1/2 rounded-full bg-feature-grid bg-[length:40px_40px] opacity-20 mask-image-radial-gradient"></div>
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl lg:text-center">
          <h2 class="text-base font-semibold leading-7 text-pink-500">Features</h2>
          <p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Discover the core features</p>
          <p class="mt-6 text-lg leading-8 text-gray-600">Discover a suite of tools designed to boost productivity, enhance security, and provide seamless integration, all tailored to your needs.</p>
        </div>
        <div class="mx-auto mt-12 max-w-2xl lg:mx-0 lg:max-w-none">
          <dl class="grid grid-cols-1 gap-6 lg:grid-cols-3">
            <div class="flex flex-col rounded bg-white/60 p-6 ring-1 ring-inset ring-gray-900/10 backdrop-blur-[0.75px] sm:px-8 sm:py-10">
              <dt class="flex flex-col gap-x-6 gap-y-3.5 text-xl font-semibold text-gray-900 sm:flex-row sm:items-center">
                <div class="flex h-12 w-12 flex-none items-center justify-center rounded bg-white ring-1 ring-inset ring-gray-900/10">
                  <svg class="h-7 w-7 text-gray-900" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M14 10C14 9.44771 13.5523 9 13 9H12.5C9.46243 9 7 11.4624 7 14.5C7 17.5376 9.46243 20 12.5 20H17.5C20.5376 20 23 17.5376 23 14.5C23 12.0091 21.3441 9.90488 19.073 9.22823C18.5098 9.06042 18 9.52887 18 10.1166V10.1683C18 10.6659 18.3745 11.0735 18.8345 11.2634C20.1055 11.788 21 13.0395 21 14.5C21 16.433 19.433 18 17.5 18H12.5C10.567 18 9 16.433 9 14.5C9 12.567 10.567 11 12.5 11H13C13.5523 11 14 10.5523 14 10Z" fill="currentColor" />
                    <path d="M11.5 4C14.5376 4 17 6.46243 17 9.5C17 12.5376 14.5376 15 11.5 15H11C10.4477 15 10 14.5523 10 14C10 13.4477 10.4477 13 11 13H11.5C13.433 13 15 11.433 15 9.5C15 7.567 13.433 6 11.5 6H6.5C4.567 6 3 7.567 3 9.5C3 10.9605 3.89451 12.212 5.16553 12.7366C5.62548 12.9264 6 13.3341 6 13.8317V13.8834C6 14.4711 5.49024 14.9396 4.92699 14.7718C2.65592 14.0951 1 11.9909 1 9.5C1 6.46243 3.46243 4 6.5 4H11.5Z" fill="currentColor" />
                  </svg>
                </div>
                Seamless Integration
              </dt>
              <dd class="mt-6 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto">Easily connect with your existing tools to streamline workflows without any disruptions.</p>
              </dd>
            </div>
            <div class="flex flex-col rounded bg-white/60 p-6 ring-1 ring-inset ring-gray-900/10 backdrop-blur-[0.75px] sm:px-8 sm:py-10">
              <dt class="flex flex-col gap-x-6 gap-y-3.5 text-xl font-semibold text-gray-900 sm:flex-row sm:items-center">
                <div class="flex h-12 w-12 flex-none items-center justify-center rounded bg-white ring-1 ring-inset ring-gray-900/10">
                  <svg class="h-5 w-7 text-gray-900" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M1.547 0.309 C 1.258 0.384,1.016 0.529,0.773 0.773 C 0.524 1.022,0.416 1.198,0.316 1.520 L 0.253 1.720 0.253 8.000 L 0.253 14.280 0.316 14.480 C 0.416 14.802,0.524 14.978,0.773 15.227 C 1.022 15.476,1.198 15.584,1.520 15.684 L 1.720 15.747 8.000 15.747 L 14.280 15.747 14.480 15.684 C 14.802 15.584,14.978 15.476,15.227 15.227 C 15.476 14.978,15.584 14.802,15.684 14.480 L 15.747 14.280 15.747 8.000 L 15.747 1.720 15.684 1.520 C 15.584 1.198,15.476 1.022,15.227 0.773 C 14.980 0.525,14.739 0.382,14.441 0.307 C 14.207 0.248,1.774 0.249,1.547 0.309 M14.170 1.830 L 14.240 1.901 14.240 3.324 L 14.240 4.747 8.000 4.747 L 1.760 4.747 1.760 3.324 L 1.760 1.901 1.830 1.830 L 1.901 1.760 8.000 1.760 L 14.099 1.760 14.170 1.830 M4.747 10.267 L 4.747 14.267 3.403 14.267 C 2.665 14.267,2.023 14.259,1.977 14.250 C 1.931 14.241,1.864 14.203,1.827 14.166 L 1.760 14.099 1.760 10.183 L 1.760 6.267 3.253 6.267 L 4.747 6.267 4.747 10.267 M14.240 10.183 L 14.240 14.099 14.173 14.166 C 14.136 14.203,14.069 14.241,14.023 14.250 C 13.977 14.259,12.214 14.267,10.103 14.267 L 6.267 14.267 6.267 10.267 L 6.267 6.267 10.253 6.267 L 14.240 6.267 14.240 10.183 " stroke="none" fill-rule="evenodd" fill="currentColor"></path>
                  </svg>
                </div>
                Custom Dashboards
              </dt>
              <dd class="mt-6 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto">Personalize your workspace with customizable dashboards for quick access to key metrics.</p>
              </dd>
            </div>
            <div class="flex flex-col rounded bg-white/60 p-6 ring-1 ring-inset ring-gray-900/10 backdrop-blur-[0.75px] sm:px-8 sm:py-10">
              <dt class="flex flex-col gap-x-6 gap-y-3.5 text-xl font-semibold text-gray-900 sm:flex-row sm:items-center">
                <div class="flex h-12 w-12 flex-none items-center justify-center rounded bg-white ring-1 ring-inset ring-gray-900/10">
                  <svg class="h-7 w-7 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M21 21H4.6C4.03995 21 3.75992 21 3.54601 20.891C3.35785 20.7951 3.20487 20.6422 3.10899 20.454C3 20.2401 3 19.9601 3 19.4V3M20 8L16.0811 12.1827C15.9326 12.3412 15.8584 12.4204 15.7688 12.4614C15.6897 12.4976 15.6026 12.5125 15.516 12.5047C15.4179 12.4958 15.3215 12.4458 15.1287 12.3457L11.8713 10.6543C11.6785 10.5542 11.5821 10.5042 11.484 10.4953C11.3974 10.4875 11.3103 10.5024 11.2312 10.5386C11.1416 10.5796 11.0674 10.6588 10.9189 10.8173L7 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </div>
                Real-Time Analytics
              </dt>
              <dd class="mt-6 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto">Gain instant insights with real-time data analytics to make informed decisions faster.</p>
              </dd>
            </div>
            <div class="flex flex-col rounded bg-white/60 p-6 ring-1 ring-inset ring-gray-900/10 backdrop-blur-[0.75px] sm:px-8 sm:py-10">
              <dt class="flex flex-col gap-x-6 gap-y-3.5 text-xl font-semibold text-gray-900 sm:flex-row sm:items-center">
                <div class="flex h-12 w-12 flex-none items-center justify-center rounded bg-white ring-1 ring-inset ring-gray-900/10">
                  <svg class="h-7 w-7 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 21V11M12 11L9 14M12 11L15 14M7 16.8184C4.69636 16.2074 3 14.1246 3 11.6493C3 9.20008 4.8 6.9375 7.5 6.5C8.34694 4.48637 10.3514 3 12.6893 3C15.684 3 18.1317 5.32251 18.3 8.25C19.8893 8.94488 21 10.6503 21 12.4969C21 14.8148 19.25 16.7236 17 16.9725" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </div>
                Automated Backups
              </dt>
              <dd class="mt-6 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto">Protect your data with automated backups, ensuring you never lose important information.</p>
              </dd>
            </div>
            <div class="flex flex-col rounded bg-white/60 p-6 ring-1 ring-inset ring-gray-900/10 backdrop-blur-[0.75px] sm:px-8 sm:py-10">
              <dt class="flex flex-col gap-x-6 gap-y-3.5 text-xl font-semibold text-gray-900 sm:flex-row sm:items-center">
                <div class="flex h-12 w-12 flex-none items-center justify-center rounded bg-white ring-1 ring-inset ring-gray-900/10">
                  <svg class="h-7 w-7 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 14.5V16.5M7 10.0288C7.47142 10 8.05259 10 8.8 10H15.2C15.9474 10 16.5286 10 17 10.0288M7 10.0288C6.41168 10.0647 5.99429 10.1455 5.63803 10.327C5.07354 10.6146 4.6146 11.0735 4.32698 11.638C4 12.2798 4 13.1198 4 14.8V16.2C4 17.8802 4 18.7202 4.32698 19.362C4.6146 19.9265 5.07354 20.3854 5.63803 20.673C6.27976 21 7.11984 21 8.8 21H15.2C16.8802 21 17.7202 21 18.362 20.673C18.9265 20.3854 19.3854 19.9265 19.673 19.362C20 18.7202 20 17.8802 20 16.2V14.8C20 13.1198 20 12.2798 19.673 11.638C19.3854 11.0735 18.9265 10.6146 18.362 10.327C18.0057 10.1455 17.5883 10.0647 17 10.0288M7 10.0288V8C7 5.23858 9.23858 3 12 3C14.7614 3 17 5.23858 17 8V10.0288" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </div>
                Advanced Security
              </dt>
              <dd class="mt-6 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto">Keep your data safe with state-of-the-art encryption and comprehensive compliance features.</p>
              </dd>
            </div>
            <div class="flex flex-col rounded bg-white/60 p-6 ring-1 ring-inset ring-gray-900/10 backdrop-blur-[0.75px] sm:px-8 sm:py-10">
              <dt class="flex flex-col gap-x-6 gap-y-3.5 text-xl font-semibold text-gray-900 sm:flex-row sm:items-center">
                <div class="flex h-12 w-12 flex-none items-center justify-center rounded bg-white ring-1 ring-inset ring-gray-900/10">
                  <svg class="h-7 w-7 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M4.97883 9.68508C2.99294 8.89073 2 8.49355 2 8C2 7.50645 2.99294 7.10927 4.97883 6.31492L7.7873 5.19153C9.77318 4.39718 10.7661 4 12 4C13.2339 4 14.2268 4.39718 16.2127 5.19153L19.0212 6.31492C21.0071 7.10927 22 7.50645 22 8C22 8.49355 21.0071 8.89073 19.0212 9.68508L16.2127 10.8085C14.2268 11.6028 13.2339 12 12 12C10.7661 12 9.77318 11.6028 7.7873 10.8085L4.97883 9.68508Z" stroke="currentColor" stroke-width="1.75" />
                    <path d="M22 12C22 12 21.0071 12.8907 19.0212 13.6851L16.2127 14.8085C14.2268 15.6028 13.2339 16 12 16C10.7661 16 9.77318 15.6028 7.7873 14.8085L4.97883 13.6851C2.99294 12.8907 2 12 2 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
                    <path d="M22 16C22 16 21.0071 16.8907 19.0212 17.6851L16.2127 18.8085C14.2268 19.6028 13.2339 20 12 20C10.7661 20 9.77318 19.6028 7.7873 18.8085L4.97883 17.6851C2.99294 16.8907 2 16 2 16" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
                  </svg>
                </div>
                Scalable Solutions
              </dt>
              <dd class="mt-6 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto">Easily scale as your business grows with our flexible and robust platform and service options.</p>
              </dd>
            </div>
          </dl>
        </div>
      </div>
    </div>

<div class="overflow-clip bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:max-w-none lg:grid-cols-2">
          <div class="lg:pr-8 lg:pt-4">
            <div class="lg:max-w-lg">
              <h2 class="text-base font-semibold leading-7 text-pink-500">Features</h2>
              <p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Streamline workflow</p>
              <p class="mt-6 text-lg leading-8 text-gray-600">Our SaaS platform is designed to transform the way you manage your business. Discover the tools that make our platform a must-have for any forward-thinking organization.</p>
              <dl class="mt-10 max-w-xl space-y-8 text-base leading-7 text-gray-600 lg:max-w-none">
                <div class="relative pl-9">
                  <dt class="font-semibold text-gray-900">
                    <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 -4 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g transform="translate(-466.000000, -1144.000000)" fill="currentColor">
                          <path d="M488.718,1157.61 C488.325,1158 487.688,1158 487.295,1157.61 L483,1153.34 L483,1162.99 C483,1163.54 482.553,1163.99 482,1163.99 C481.447,1163.99 481,1163.54 481,1162.99 L481,1153.37 L476.736,1157.61 C476.344,1158 475.707,1158 475.313,1157.61 C474.921,1157.22 474.921,1156.59 475.313,1156.19 L481.254,1150.28 C481.464,1150.07 481.741,1149.98 482.016,1150 C482.29,1149.98 482.568,1150.07 482.777,1150.28 L488.718,1156.19 C489.11,1156.59 489.11,1157.22 488.718,1157.61 L488.718,1157.61 Z M489.067,1149.03 C487.599,1146.05 484.543,1144 481,1144 C476.251,1144 472.37,1147.68 472.033,1152.34 C468.542,1153.34 466,1156.39 466,1160 C466,1164.26 469.54,1167.73 474,1167.98 L491,1168 C494.437,1166.51 498,1162.35 498,1158.5 C498,1153.45 494.049,1149.32 489.067,1149.03 L489.067,1149.03 Z"></path>
                        </g>
                      </g>
                    </svg>
                    Streamlined Deployment
                  </dt>
                  <dd>Deploy new updates and features effortlessly with our streamlined deployment process.</dd>
                </div>
                <div class="relative pl-9">
                  <dt class="font-semibold text-gray-900">
                    <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <path d="M17,9V7c0-2.8-2.2-5-5-5S7,4.2,7,7v2c-1.7,0-3,1.3-3,3v7c0,1.7,1.3,3,3,3h10c1.7,0,3-1.3,3-3v-7C20,10.3,18.7,9,17,9z M9,7c0-1.7,1.3-3,3-3s3,1.3,3,3v2H9V7z M13.1,15.5c0,0-0.1,0.1-0.1,0.1V17c0,0.6-0.4,1-1,1s-1-0.4-1-1v-1.4c-0.6-0.6-0.7-1.5-0.1-2.1c0.6-0.6,1.5-0.7,2.1-0.1C13.6,13.9,13.7,14.9,13.1,15.5z"></path>
                    </svg>
                    Built-in Security
                  </dt>
                  <dd>Safeguard your data with our built-in security measures, including automatic SSL certificates and real-time monitoring.</dd>
                </div>
                <div class="relative pl-9">
                  <dt class="font-semibold text-gray-900">
                    <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M2.58579 3.58579C2 4.17157 2 5.11438 2 7C2 8.88562 2 9.82843 2.58579 10.4142C3.17157 11 4.11438 11 6 11H18C19.8856 11 20.8284 11 21.4142 10.4142C22 9.82843 22 8.88562 22 7C22 5.11438 22 4.17157 21.4142 3.58579C20.8284 3 19.8856 3 18 3H6C4.11438 3 3.17157 3 2.58579 3.58579ZM9 8.75C8.58579 8.75 8.25 8.41421 8.25 8V6C8.25 5.58579 8.58579 5.25 9 5.25C9.41421 5.25 9.75 5.58579 9.75 6V8C9.75 8.41421 9.41421 8.75 9 8.75ZM13.5 6.25C13.0858 6.25 12.75 6.58579 12.75 7C12.75 7.41421 13.0858 7.75 13.5 7.75H18C18.4142 7.75 18.75 7.41421 18.75 7C18.75 6.58579 18.4142 6.25 18 6.25H13.5ZM6 8.75C5.58579 8.75 5.25 8.41421 5.25 8L5.25 6C5.25 5.58579 5.58579 5.25 6 5.25C6.41421 5.25 6.75 5.58579 6.75 6V8C6.75 8.41421 6.41421 8.75 6 8.75Z" fill="currentColor" />
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M2.58579 13.5858C2 14.1716 2 15.1144 2 17C2 18.8856 2 19.8284 2.58579 20.4142C3.17157 21 4.11438 21 6 21H18C19.8856 21 20.8284 21 21.4142 20.4142C22 19.8284 22 18.8856 22 17C22 15.1144 22 14.1716 21.4142 13.5858C20.8284 13 19.8856 13 18 13H6C4.11438 13 3.17157 13 2.58579 13.5858ZM12.75 17C12.75 16.5858 13.0858 16.25 13.5 16.25H18C18.4142 16.25 18.75 16.5858 18.75 17C18.75 17.4142 18.4142 17.75 18 17.75H13.5C13.0858 17.75 12.75 17.4142 12.75 17ZM5.25 18C5.25 18.4142 5.58579 18.75 6 18.75C6.41421 18.75 6.75 18.4142 6.75 18V16C6.75 15.5858 6.41421 15.25 6 15.25C5.58579 15.25 5.25 15.5858 5.25 16L5.25 18ZM9 18.75C8.58579 18.75 8.25 18.4142 8.25 18V16C8.25 15.5858 8.58579 15.25 9 15.25C9.41421 15.25 9.75 15.5858 9.75 16V18C9.75 18.4142 9.41421 18.75 9 18.75Z" fill="currentColor" />
                    </svg>
                    Automatic Data Backups
                  </dt>
                  <dd>Ensure your data is never lost with our automatic backup system. Our platform regularly backs up your data.</dd>
                </div>
              </dl>
              <p class="mt-10">
                <a href="#" class="inline-flex items-center gap-x-1 text-base font-semibold text-pink-500">
                  Learn more
                  <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
              </p>
            </div>
          </div>
          <img width="1920" height="1139" class="w-[48rem] max-w-none rounded-xl bg-gray-900/5 shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem] md:-ml-4 lg:ml-0" src="https://htmlwind.com/assets/images/dark-dashboard-screenshot.webp" alt="dashboard screenshot" />
        </div>
      </div>
    </div>

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl lg:text-center">
          <h2 class="text-base font-semibold leading-7 text-pink-500">Key highlights</h2>
          <p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Discover the core features</p>
          <p class="mt-6 text-lg leading-8 text-gray-600">Experience the power of our SaaS platform with features designed to enhance your workflows, customize your experience, and secure your data.</p>
        </div>
        <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mx-0 lg:mt-24 lg:max-w-none">
          <dl class="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3">
            <div class="flex flex-col">
              <dt class="flex gap-x-3 text-xl font-medium text-gray-900">
                <div class="flex-none">
                  <svg class="h-7 w-7 text-pink-500" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M14 10C14 9.44771 13.5523 9 13 9H12.5C9.46243 9 7 11.4624 7 14.5C7 17.5376 9.46243 20 12.5 20H17.5C20.5376 20 23 17.5376 23 14.5C23 12.0091 21.3441 9.90488 19.073 9.22823C18.5098 9.06042 18 9.52887 18 10.1166V10.1683C18 10.6659 18.3745 11.0735 18.8345 11.2634C20.1055 11.788 21 13.0395 21 14.5C21 16.433 19.433 18 17.5 18H12.5C10.567 18 9 16.433 9 14.5C9 12.567 10.567 11 12.5 11H13C13.5523 11 14 10.5523 14 10Z" fill="currentColor" />
                    <path d="M11.5 4C14.5376 4 17 6.46243 17 9.5C17 12.5376 14.5376 15 11.5 15H11C10.4477 15 10 14.5523 10 14C10 13.4477 10.4477 13 11 13H11.5C13.433 13 15 11.433 15 9.5C15 7.567 13.433 6 11.5 6H6.5C4.567 6 3 7.567 3 9.5C3 10.9605 3.89451 12.212 5.16553 12.7366C5.62548 12.9264 6 13.3341 6 13.8317V13.8834C6 14.4711 5.49024 14.9396 4.92699 14.7718C2.65592 14.0951 1 11.9909 1 9.5C1 6.46243 3.46243 4 6.5 4H11.5Z" fill="currentColor" />
                  </svg>
                </div>
                Effortless Integration
              </dt>
              <dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto">Easily connect with the tools you already use and love. Our platform is designed for seamless integration with a variety of third-party applications.</p>
                <p class="mt-10">
                  <a href="#" class="inline-flex items-center gap-x-1 text-base font-semibold text-pink-500">
                    Learn more
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </a>
                </p>
              </dd>
            </div>
            <div class="flex flex-col">
              <dt class="flex gap-x-3 text-xl font-medium text-gray-900">
                <div class="flex-none">
                  <svg class="h-7 w-7 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M2 12.8799V11.1199C2 10.0799 2.85 9.21994 3.9 9.21994C5.71 9.21994 6.45 7.93994 5.54 6.36994C5.02 5.46994 5.33 4.29994 6.24 3.77994L7.97 2.78994C8.76 2.31994 9.78 2.59994 10.25 3.38994L10.36 3.57994C11.26 5.14994 12.74 5.14994 13.65 3.57994L13.76 3.38994C14.23 2.59994 15.25 2.31994 16.04 2.78994L17.77 3.77994C18.68 4.29994 18.99 5.46994 18.47 6.36994C17.56 7.93994 18.3 9.21994 20.11 9.21994C21.15 9.21994 22.01 10.0699 22.01 11.1199V12.8799C22.01 13.9199 21.16 14.7799 20.11 14.7799C18.3 14.7799 17.56 16.0599 18.47 17.6299C18.99 18.5399 18.68 19.6999 17.77 20.2199L16.04 21.2099C15.25 21.6799 14.23 21.3999 13.76 20.6099L13.65 20.4199C12.75 18.8499 11.27 18.8499 10.36 20.4199L10.25 20.6099C9.78 21.3999 8.76 21.6799 7.97 21.2099L6.24 20.2199C5.33 19.6999 5.02 18.5299 5.54 17.6299C6.45 16.0599 5.71 14.7799 3.9 14.7799C2.85 14.7799 2 13.9199 2 12.8799Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </div>
                Advanced Customization
              </dt>
              <dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto">Adapt the platform to suit your specific business needs. With our extensive customization options, you can modify features, adjust settings, and personalize your experience.</p>
                <p class="mt-10">
                  <a href="#" class="inline-flex items-center gap-x-1 text-base font-semibold text-pink-500">
                    Learn more
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </a>
                </p>
              </dd>
            </div>
            <div class="flex flex-col">
              <dt class="flex gap-x-3 text-xl font-medium text-gray-900">
                <div class="flex-none">
                  <svg class="h-7 w-7 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M20.91 11.12C20.91 16.01 17.36 20.59 12.51 21.93C12.18 22.02 11.82 22.02 11.49 21.93C6.63996 20.59 3.08997 16.01 3.08997 11.12V6.72997C3.08997 5.90997 3.70998 4.97998 4.47998 4.66998L10.05 2.39001C11.3 1.88001 12.71 1.88001 13.96 2.39001L19.53 4.66998C20.29 4.97998 20.92 5.90997 20.92 6.72997L20.91 11.12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </div>
                Enhanced Security
              </dt>
              <dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto">Protect your data with our state-of-the-art security features. Our SaaS platform is built with advanced encryption and compliance tools to safeguard your information.</p>
                <p class="mt-10">
                  <a href="#" class="inline-flex items-center gap-x-1 text-base font-semibold text-pink-500">
                    Learn more
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </a>
                </p>
              </dd>
            </div>
          </dl>
        </div>
      </div>
    </div>

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl lg:text-center">
          <h2 class="text-base font-semibold leading-7 text-pink-500">Key highlights</h2>
          <p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Secure and simple payments</p>
          <p class="mt-6 text-lg leading-8 text-gray-600">Streamline your payment processes with features designed to enhance security, improve efficiency, and provide flexibility for all your transactions.</p>
        </div>
        <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mx-0 lg:max-w-none">
          <dl class="">
            <div class="overflow-clip rounded-2xl bg-gray-400/5 px-6 py-8 ring-1 ring-gray-900/10 sm:p-12 lg:flex lg:gap-x-20">
              <div class="lg:flex lg:w-1/2 lg:flex-col">
                <dt class="text-xl font-medium text-gray-900">
                  <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
                    <svg class="h-6 w-6 text-white" version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" aria-hidden="true">
                      <path
                        fill="currentColor"
                        d="M32,0C15.776,0,2.381,12.077,0.292,27.729c-0.002,0.016-0.004,0.031-0.006,0.047 c-0.056,0.421-0.106,0.843-0.146,1.269c-0.019,0.197-0.029,0.396-0.045,0.594c-0.021,0.28-0.044,0.56-0.058,0.842 C0.014,30.983,0,31.49,0,32c0,17.673,14.327,32,32,32s32-14.327,32-32S49.673,0,32,0z M33.362,58.502 c-0.72,0.787-1.901,1.414-2.675,0.67c-0.653-0.644-0.099-1.44,0-2.353c0.125-1.065-0.362-2.345,0.666-2.676 c0.837-0.259,1.468,0.322,2.009,1.012C34.187,56.175,34.239,57.526,33.362,58.502z M43.446,49.87 c-1.18,0.608-2.006,0.494-3.323,0.673c-2.454,0.309-4.394,1.52-6.333,0c-0.867-0.695-0.978-1.451-1.65-2.341 c-1.084-1.364-1.355-3.879-3.01-3.322c-1.058,0.356-1.026,1.415-1.654,2.335c-0.81,1.156-0.607,2.793-2.005,2.993 c-0.974,0.138-1.499-0.458-2.321-1c-0.922-0.614-1.104-1.348-2.002-1.993c-0.934-0.689-1.69-0.693-2.654-1.334 c-0.694-0.463-0.842-1.304-1.673-1.334c-0.751-0.022-1.289,0.346-1.664,0.996c-0.701,1.214-0.942,4.793-2.988,4.665 c-1.516-0.103-4.758-3.509-5.994-4.327c-0.405-0.273-0.78-0.551-1.158-0.763c-1.829-3.756-2.891-7.952-2.997-12.385 c0.614-0.515,1.239-0.769,1.819-1.493c0.927-1.13,0.481-2.507,1.673-3.335c0.886-0.604,1.602-0.507,2.669-0.658 c1.529-0.222,2.491-0.422,3.988,0c1.459,0.409,2.016,1.246,3.326,1.992c1.415,0.81,2.052,1.766,3.66,2.001 c1.166,0.165,1.966-0.901,2.988-0.337c0.824,0.458,1.406,1.066,1.341,2.001c-0.1,1.218-2.522,0.444-2.659,1.662 c-0.183,1.558,2.512-0.194,3.992,0.33c0.974,0.355,2.241,0.294,2.325,1.334c0.081,1.156-1.608,0.837-2.657,1.335 c-1.162,0.541-1.771,0.996-3.004,1.329c-1.125,0.298-2.312-0.628-2.987,0.329c-0.53,0.742-0.343,1.489,0,2.335 c0.787,1.931,3.349,1.352,5.322,0.657c1.383-0.488,1.641-1.726,2.997-2.329c1.438-0.641,2.554-1.335,3.981-0.663 c1.178,0.556,0.849,2.05,2.006,2.663c1.253,0.668,2.432-0.729,3.663,0c0.957,0.569,0.887,1.521,1.655,2.327 c0.894,0.942,1.41,1.702,2.668,2c1.286,0.299,2.072-1.071,3.327-0.671c0.965,0.315,1.755,0.68,1.987,1.672 C46.465,48.634,44.744,49.198,43.446,49.87z M45.839,33.841c-1.154,1.16-2.156,1.539-3.771,1.893c-1.433,0.315-3.443,1.438-3.772,0 c-0.251-1.148,1.029-1.558,1.893-2.359c0.959-0.895,1.854-0.983,2.826-1.892c0.87-0.802,0.756-2.031,1.893-2.359 c1.109-0.32,2.182-0.019,2.825,0.947C48.652,31.438,47.006,32.681,45.839,33.841z M59.989,29.319 c-0.492,0.508-0.462,1.044-0.965,1.542c-0.557,0.539-1.331,0.307-1.738,0.968c-0.358,0.577-0.13,1.057-0.194,1.735 c-0.041,0.387-1.924,1.256-2.313,0.385c-0.214-0.481,0.281-0.907,0-1.353c-0.263-0.401-0.555-0.195-0.899,0.181 c-0.359,0.388-0.772,0.958-1.221,1.172c-0.589,0.273-0.196-2.25-0.395-3.088c-0.146-0.663,0.01-1.08,0.198-1.736 c0.25-0.91,0.938-1.206,1.155-2.125c0.194-0.806,0.033-1.295,0-2.123c-0.039-0.906-0.015-1.427-0.188-2.314 c-0.192-0.937-0.252-1.525-0.771-2.316c-0.418-0.624-0.694-1.001-1.354-1.352c-0.16-0.088-0.31-0.146-0.452-0.191 c-0.34-0.113-0.659-0.128-1.098-0.193c-0.888-0.132-1.522,0.432-2.314,0c-0.462-0.255-0.606-0.575-0.96-0.967 c-0.404-0.434-0.511-0.789-0.967-1.158c-0.341-0.276-0.552-0.437-0.965-0.581c-0.79-0.263-1.342-0.082-2.126,0.196 c-0.77,0.268-1.058,0.707-1.739,1.155c-0.522,0.303-0.893,0.371-1.348,0.774c-0.276,0.242-1.59,1.177-2.127,1.155 c-0.544-0.021-0.851-0.343-1.338-0.382c-0.065-0.008-0.13-0.008-0.204,0c0,0,0,0-0.005,0c-0.473,0.036-0.696,0.269-1.146,0.382 c-1.107,0.276-1.812-0.115-2.905,0.197c-0.712,0.2-0.993,0.766-1.73,0.771c-0.841,0.005-1.125-0.743-1.932-0.968 c-0.442-0.118-0.702-0.129-1.157-0.19c-0.749-0.108-1.178-0.119-1.926-0.191H24.86c-0.016,0.006-0.591,0.058-0.688,0 c-0.422-0.286-0.722-0.521-1.244-0.773c-0.575-0.283-0.919-0.428-1.547-0.584l0.026-0.381c0,0,0-0.847-0.121-1.207 c-0.115-0.361-0.24-0.361,0-1.086c0.248-0.722,0.679-1.182,0.679-1.182c0.297-0.228,0.516-0.305,0.769-0.58 c0.51-0.539,0.717-0.998,0.774-1.739c0.067-0.972-1.205-1.367-0.97-2.316c0.209-0.826,0.904-0.98,1.547-1.543 c0.779-0.67,1.468-0.758,2.12-1.542c0.501-0.593,0.911-0.965,0.97-1.738c0.053-0.657-0.23-1.068-0.57-1.538 C28.356,2.175,30.157,2,32,2c14.919,0,27.29,10.893,29.605,25.158c-0.203,0.352-0.001,0.796-0.27,1.193 C60.979,28.894,60.436,28.85,59.989,29.319z"
                      />
                    </svg>
                  </div>
                  Efficient Global Transactions
                </dt>
                <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
                  <p class="flex-auto">Boost your international sales by optimizing payment methods and reducing transaction friction across various regions.</p>
                  <p class="mt-10">
                    <a href="#" class="inline-flex items-center gap-x-1 text-base font-semibold text-pink-500">
                      Learn more
                      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </a>
                  </p>
                </dd>
              </div>
              <div class="relative mt-16 h-72 w-full sm:h-80 lg:mt-0 lg:w-1/2 lg:pt-4">
                <img width="862" height="1130" class="absolute left-0 top-0 w-[36rem] max-w-none rounded-xl bg-gray-900/5 shadow-xl ring-1 ring-gray-900/10 sm:static sm:w-full sm:max-w-full" src="https://htmlwind.com/assets/images/checkout.png" alt="" />
              </div>
            </div>
            <div class="mt-8 grid grid-cols-1 divide-x-0 divide-y-[1.5px] divide-gray-900/10 rounded-2xl bg-gray-400/5 ring-1 ring-gray-900/10 lg:grid-cols-3 lg:divide-x-[1.5px] lg:divide-y-0">
              <div class="px-6 py-8 sm:px-10 sm:py-12">
                <dt class="text-xl font-medium text-gray-900">
                  <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
                    <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <path d="M21 21H4.6C4.03995 21 3.75992 21 3.54601 20.891C3.35785 20.7951 3.20487 20.6422 3.10899 20.454C3 20.2401 3 19.9601 3 19.4V3M20 8L16.0811 12.1827C15.9326 12.3412 15.8584 12.4204 15.7688 12.4614C15.6897 12.4976 15.6026 12.5125 15.516 12.5047C15.4179 12.4958 15.3215 12.4458 15.1287 12.3457L11.8713 10.6543C11.6785 10.5542 11.5821 10.5042 11.484 10.4953C11.3974 10.4875 11.3103 10.5024 11.2312 10.5386C11.1416 10.5796 11.0674 10.6588 10.9189 10.8173L7 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  Profit Margins
                </dt>
                <dd class="mt-3 text-base leading-7 text-gray-600">Reduce operational costs with streamlined payment processes and automated currency conversions, maximizing revenue retention.</dd>
              </div>
              <div class="px-6 py-8 sm:px-10 sm:py-12">
                <dt class="text-xl font-medium text-gray-900">
                  <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
                    <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g>
                        <path d="m19.56 6.29a17.94 17.94 0 0 0 0 35.87h.8v-14.22c0-1.06.81-2.42 1.88-2.42h15.2c0-.59.06-1 .06-1.32a18 18 0 0 0 -17.94-17.91zm14.32 16.4h-4.62a26.74 26.74 0 0 0 -2.54-10.76 14.52 14.52 0 0 1 7.16 10.76zm-16.37-11.79v11.79h-4.1c.31-5.62 2.08-10.06 4.1-11.79zm0 14.86v11.78c-2-1.73-3.79-6.15-4.1-11.78zm4.1-3.07v-11.79c2 1.73 3.8 6.17 4.1 11.79zm-9.22-10.76a27.62 27.62 0 0 0 -2.53 10.76h-4.65a14.48 14.48 0 0 1 7.18-10.76zm-7.17 14.34h4.65a26.74 26.74 0 0 0 2.52 10.73 14.5 14.5 0 0 1 -7.17-10.73z" fill-rule="evenodd" />
                        <path d="m47.5 28.56h-21.77a2.5 2.5 0 0 0 -2.5 2.5v12.15a2.5 2.5 0 0 0 2.5 2.5h21.77a2.5 2.5 0 0 0 2.5-2.5v-12.15a2.5 2.5 0 0 0 -2.5-2.5zm-18.84 14.65a2.92 2.92 0 0 0 -2.84-3h-.08v-6.21a2.93 2.93 0 0 0 3-2.84v-.07h15.81a2.91 2.91 0 0 0 2.87 2.91h.08v6.25a2.93 2.93 0 0 0 -3 2.86v.09z" fill-rule="evenodd" />
                        <circle cx="36.61" cy="36.92" r="4.2" />
                      </g>
                    </svg>
                  </div>
                  Diverse Payment Systems
                </dt>
                <dd class="mt-3 text-base leading-7 text-gray-600">Easily incorporate a variety of local payment methods into your platform, ensuring a smooth experience for global customers.</dd>
              </div>
              <div class="px-6 py-8 sm:px-10 sm:py-12">
                <dt class="text-xl font-medium text-gray-900">
                  <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
                    <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <path d="M14 10C14 9.44771 13.5523 9 13 9H12.5C9.46243 9 7 11.4624 7 14.5C7 17.5376 9.46243 20 12.5 20H17.5C20.5376 20 23 17.5376 23 14.5C23 12.0091 21.3441 9.90488 19.073 9.22823C18.5098 9.06042 18 9.52887 18 10.1166V10.1683C18 10.6659 18.3745 11.0735 18.8345 11.2634C20.1055 11.788 21 13.0395 21 14.5C21 16.433 19.433 18 17.5 18H12.5C10.567 18 9 16.433 9 14.5C9 12.567 10.567 11 12.5 11H13C13.5523 11 14 10.5523 14 10Z" fill="currentColor"></path>
                      <path d="M11.5 4C14.5376 4 17 6.46243 17 9.5C17 12.5376 14.5376 15 11.5 15H11C10.4477 15 10 14.5523 10 14C10 13.4477 10.4477 13 11 13H11.5C13.433 13 15 11.433 15 9.5C15 7.567 13.433 6 11.5 6H6.5C4.567 6 3 7.567 3 9.5C3 10.9605 3.89451 12.212 5.16553 12.7366C5.62548 12.9264 6 13.3341 6 13.8317V13.8834C6 14.4711 5.49024 14.9396 4.92699 14.7718C2.65592 14.0951 1 11.9909 1 9.5C1 6.46243 3.46243 4 6.5 4H11.5Z" fill="currentColor"></path>
                    </svg>
                  </div>
                  Unified Transaction Management
                </dt>
                <dd class="mt-3 text-base leading-7 text-gray-600">Create a seamless payment environment across multiple channels to enhance customer satisfaction and loyalty.</dd>
              </div>
            </div>
          </dl>
        </div>
      </div>
    </div>

<div class="overflow-clip bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:max-w-none lg:grid-cols-2">
          <div class="lg:ml-auto lg:pl-8 lg:pt-4">
            <div class="lg:max-w-lg">
              <h2 class="text-base font-semibold leading-7 text-pink-500">Features</h2>
              <p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Streamline workflow</p>
              <p class="mt-6 text-lg leading-8 text-gray-600">Our SaaS platform is designed to transform the way you manage your business. Discover the tools that make our platform a must-have for any forward-thinking organization.</p>
              <dl class="mt-10 max-w-xl space-y-8 text-base leading-7 text-gray-600 lg:max-w-none">
                <div class="relative pl-9">
                  <dt class="font-semibold text-gray-900">
                    <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 -4 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g transform="translate(-466.000000, -1144.000000)" fill="currentColor">
                          <path d="M488.718,1157.61 C488.325,1158 487.688,1158 487.295,1157.61 L483,1153.34 L483,1162.99 C483,1163.54 482.553,1163.99 482,1163.99 C481.447,1163.99 481,1163.54 481,1162.99 L481,1153.37 L476.736,1157.61 C476.344,1158 475.707,1158 475.313,1157.61 C474.921,1157.22 474.921,1156.59 475.313,1156.19 L481.254,1150.28 C481.464,1150.07 481.741,1149.98 482.016,1150 C482.29,1149.98 482.568,1150.07 482.777,1150.28 L488.718,1156.19 C489.11,1156.59 489.11,1157.22 488.718,1157.61 L488.718,1157.61 Z M489.067,1149.03 C487.599,1146.05 484.543,1144 481,1144 C476.251,1144 472.37,1147.68 472.033,1152.34 C468.542,1153.34 466,1156.39 466,1160 C466,1164.26 469.54,1167.73 474,1167.98 L491,1168 C494.437,1166.51 498,1162.35 498,1158.5 C498,1153.45 494.049,1149.32 489.067,1149.03 L489.067,1149.03 Z"></path>
                        </g>
                      </g>
                    </svg>
                    Streamlined Deployment
                  </dt>
                  <dd>Deploy new updates and features effortlessly with our streamlined deployment process.</dd>
                </div>
                <div class="relative pl-9">
                  <dt class="font-semibold text-gray-900">
                    <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <path d="M17,9V7c0-2.8-2.2-5-5-5S7,4.2,7,7v2c-1.7,0-3,1.3-3,3v7c0,1.7,1.3,3,3,3h10c1.7,0,3-1.3,3-3v-7C20,10.3,18.7,9,17,9z M9,7c0-1.7,1.3-3,3-3s3,1.3,3,3v2H9V7z M13.1,15.5c0,0-0.1,0.1-0.1,0.1V17c0,0.6-0.4,1-1,1s-1-0.4-1-1v-1.4c-0.6-0.6-0.7-1.5-0.1-2.1c0.6-0.6,1.5-0.7,2.1-0.1C13.6,13.9,13.7,14.9,13.1,15.5z"></path>
                    </svg>
                    Built-in Security
                  </dt>
                  <dd>Safeguard your data with our built-in security measures, including automatic SSL certificates and real-time monitoring.</dd>
                </div>
                <div class="relative pl-9">
                  <dt class="font-semibold text-gray-900">
                    <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M2.58579 3.58579C2 4.17157 2 5.11438 2 7C2 8.88562 2 9.82843 2.58579 10.4142C3.17157 11 4.11438 11 6 11H18C19.8856 11 20.8284 11 21.4142 10.4142C22 9.82843 22 8.88562 22 7C22 5.11438 22 4.17157 21.4142 3.58579C20.8284 3 19.8856 3 18 3H6C4.11438 3 3.17157 3 2.58579 3.58579ZM9 8.75C8.58579 8.75 8.25 8.41421 8.25 8V6C8.25 5.58579 8.58579 5.25 9 5.25C9.41421 5.25 9.75 5.58579 9.75 6V8C9.75 8.41421 9.41421 8.75 9 8.75ZM13.5 6.25C13.0858 6.25 12.75 6.58579 12.75 7C12.75 7.41421 13.0858 7.75 13.5 7.75H18C18.4142 7.75 18.75 7.41421 18.75 7C18.75 6.58579 18.4142 6.25 18 6.25H13.5ZM6 8.75C5.58579 8.75 5.25 8.41421 5.25 8L5.25 6C5.25 5.58579 5.58579 5.25 6 5.25C6.41421 5.25 6.75 5.58579 6.75 6V8C6.75 8.41421 6.41421 8.75 6 8.75Z" fill="currentColor" />
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M2.58579 13.5858C2 14.1716 2 15.1144 2 17C2 18.8856 2 19.8284 2.58579 20.4142C3.17157 21 4.11438 21 6 21H18C19.8856 21 20.8284 21 21.4142 20.4142C22 19.8284 22 18.8856 22 17C22 15.1144 22 14.1716 21.4142 13.5858C20.8284 13 19.8856 13 18 13H6C4.11438 13 3.17157 13 2.58579 13.5858ZM12.75 17C12.75 16.5858 13.0858 16.25 13.5 16.25H18C18.4142 16.25 18.75 16.5858 18.75 17C18.75 17.4142 18.4142 17.75 18 17.75H13.5C13.0858 17.75 12.75 17.4142 12.75 17ZM5.25 18C5.25 18.4142 5.58579 18.75 6 18.75C6.41421 18.75 6.75 18.4142 6.75 18V16C6.75 15.5858 6.41421 15.25 6 15.25C5.58579 15.25 5.25 15.5858 5.25 16L5.25 18ZM9 18.75C8.58579 18.75 8.25 18.4142 8.25 18V16C8.25 15.5858 8.58579 15.25 9 15.25C9.41421 15.25 9.75 15.5858 9.75 16V18C9.75 18.4142 9.41421 18.75 9 18.75Z" fill="currentColor" />
                    </svg>
                    Automatic Data Backups
                  </dt>
                  <dd>Ensure your data is never lost with our automatic backup system. Our platform regularly backs up your data.</dd>
                </div>
              </dl>
              <p class="mt-10">
                <a href="#" class="inline-flex items-center gap-x-1 text-base font-semibold text-pink-500">
                  Learn more
                  <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
              </p>
            </div>
          </div>
          <div class="flex items-start justify-end lg:-order-last">
            <img width="1920" height="1139" class="w-[48rem] max-w-none rounded-xl bg-gray-900/5 shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem]" src="https://htmlwind.com/assets/images/dark-dashboard-screenshot.webp" alt="dashboard screenshot" />
          </div>
        </div>
      </div>
    </div>

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl text-center">
          <h2 class="text-base font-semibold leading-7 text-pink-500">Features</h2>
          <p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Transform performance</p>
          <p class="mt-6 text-lg leading-8 text-gray-600">Explore advanced features that simplify your workflow, enhance security, and provide real-time insights for smarter business decisions.</p>
        </div>
        <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mx-0 lg:max-w-none">
          <dl class="grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2 lg:grid-cols-4">
            <div class="flex flex-col">
              <dt class="flex flex-col items-center gap-y-6 text-xl font-semibold text-gray-900">
                <div class="flex h-16 w-16 flex-none items-center justify-center rounded-xl bg-pink-500/10">
                  <svg class="h-7 w-7 text-pink-500" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M14 10C14 9.44771 13.5523 9 13 9H12.5C9.46243 9 7 11.4624 7 14.5C7 17.5376 9.46243 20 12.5 20H17.5C20.5376 20 23 17.5376 23 14.5C23 12.0091 21.3441 9.90488 19.073 9.22823C18.5098 9.06042 18 9.52887 18 10.1166V10.1683C18 10.6659 18.3745 11.0735 18.8345 11.2634C20.1055 11.788 21 13.0395 21 14.5C21 16.433 19.433 18 17.5 18H12.5C10.567 18 9 16.433 9 14.5C9 12.567 10.567 11 12.5 11H13C13.5523 11 14 10.5523 14 10Z" fill="currentColor" />
                    <path d="M11.5 4C14.5376 4 17 6.46243 17 9.5C17 12.5376 14.5376 15 11.5 15H11C10.4477 15 10 14.5523 10 14C10 13.4477 10.4477 13 11 13H11.5C13.433 13 15 11.433 15 9.5C15 7.567 13.433 6 11.5 6H6.5C4.567 6 3 7.567 3 9.5C3 10.9605 3.89451 12.212 5.16553 12.7366C5.62548 12.9264 6 13.3341 6 13.8317V13.8834C6 14.4711 5.49024 14.9396 4.92699 14.7718C2.65592 14.0951 1 11.9909 1 9.5C1 6.46243 3.46243 4 6.5 4H11.5Z" fill="currentColor" />
                  </svg>
                </div>
                Effortless Integration
              </dt>
              <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto text-center">Connect seamlessly with the tools and apps you already use.</p>
              </dd>
            </div>
            <div class="flex flex-col">
              <dt class="flex flex-col items-center gap-y-6 text-xl font-semibold text-gray-900">
                <div class="flex h-16 w-16 flex-none items-center justify-center rounded-xl bg-emerald-500/10">
                  <svg class="h-7 w-7 text-emerald-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M21 21H4.6C4.03995 21 3.75992 21 3.54601 20.891C3.35785 20.7951 3.20487 20.6422 3.10899 20.454C3 20.2401 3 19.9601 3 19.4V3M20 8L16.0811 12.1827C15.9326 12.3412 15.8584 12.4204 15.7688 12.4614C15.6897 12.4976 15.6026 12.5125 15.516 12.5047C15.4179 12.4958 15.3215 12.4458 15.1287 12.3457L11.8713 10.6543C11.6785 10.5542 11.5821 10.5042 11.484 10.4953C11.3974 10.4875 11.3103 10.5024 11.2312 10.5386C11.1416 10.5796 11.0674 10.6588 10.9189 10.8173L7 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </div>
                Custom Analytics
              </dt>
              <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto text-center">Tailor data views to track key metrics relevant to your goals.</p>
              </dd>
            </div>
            <div class="flex flex-col">
              <dt class="flex flex-col items-center gap-y-6 text-xl font-semibold text-gray-900">
                <div class="flex h-16 w-16 flex-none items-center justify-center rounded-xl bg-orange-500/10">
                  <svg class="h-7 w-7 text-orange-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 14.5V16.5M7 10.0288C7.47142 10 8.05259 10 8.8 10H15.2C15.9474 10 16.5286 10 17 10.0288M7 10.0288C6.41168 10.0647 5.99429 10.1455 5.63803 10.327C5.07354 10.6146 4.6146 11.0735 4.32698 11.638C4 12.2798 4 13.1198 4 14.8V16.2C4 17.8802 4 18.7202 4.32698 19.362C4.6146 19.9265 5.07354 20.3854 5.63803 20.673C6.27976 21 7.11984 21 8.8 21H15.2C16.8802 21 17.7202 21 18.362 20.673C18.9265 20.3854 19.3854 19.9265 19.673 19.362C20 18.7202 20 17.8802 20 16.2V14.8C20 13.1198 20 12.2798 19.673 11.638C19.3854 11.0735 18.9265 10.6146 18.362 10.327C18.0057 10.1455 17.5883 10.0647 17 10.0288M7 10.0288V8C7 5.23858 9.23858 3 12 3C14.7614 3 17 5.23858 17 8V10.0288" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </div>
                Enhanced Security
              </dt>
              <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto text-center">Keep your data safe with comprehensive security protocols.</p>
              </dd>
            </div>
            <div class="flex flex-col">
              <dt class="flex flex-col items-center gap-y-6 text-xl font-semibold text-gray-900">
                <div class="flex h-16 w-16 flex-none items-center justify-center rounded-xl bg-indigo-500/10">
                  <svg class="h-7 w-7 text-indigo-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M4.97883 9.68508C2.99294 8.89073 2 8.49355 2 8C2 7.50645 2.99294 7.10927 4.97883 6.31492L7.7873 5.19153C9.77318 4.39718 10.7661 4 12 4C13.2339 4 14.2268 4.39718 16.2127 5.19153L19.0212 6.31492C21.0071 7.10927 22 7.50645 22 8C22 8.49355 21.0071 8.89073 19.0212 9.68508L16.2127 10.8085C14.2268 11.6028 13.2339 12 12 12C10.7661 12 9.77318 11.6028 7.7873 10.8085L4.97883 9.68508Z" stroke="currentColor" stroke-width="1.75" />
                    <path d="M22 12C22 12 21.0071 12.8907 19.0212 13.6851L16.2127 14.8085C14.2268 15.6028 13.2339 16 12 16C10.7661 16 9.77318 15.6028 7.7873 14.8085L4.97883 13.6851C2.99294 12.8907 2 12 2 12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
                    <path d="M22 16C22 16 21.0071 16.8907 19.0212 17.6851L16.2127 18.8085C14.2268 19.6028 13.2339 20 12 20C10.7661 20 9.77318 19.6028 7.7873 18.8085L4.97883 17.6851C2.99294 16.8907 2 16 2 16" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
                  </svg>
                </div>
                Scalable Solutions
              </dt>
              <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto text-center">Easily expand your capabilities as your business grows.</p>
              </dd>
            </div>
          </dl>
        </div>
      </div>
    </div>

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl lg:text-center">
          <h2 class="text-base font-semibold leading-7 text-pink-500">Key highlights</h2>
          <p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Discover the core features</p>
          <p class="mt-6 text-lg leading-8 text-gray-600">Experience the power of our SaaS platform with features designed to enhance your workflows, customize your experience, and secure your data.</p>
        </div>
        <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mx-0 lg:mt-24 lg:flex lg:max-w-none lg:items-start lg:gap-x-24">
          <div class="rounded-2xl bg-gray-50 py-10 ring-1 ring-inset ring-gray-900/5 lg:w-4/12">
            <div class="mx-auto max-w-xs px-8 text-center">
              <h3 class="text-lg font-medium text-gray-900">Grow faster with pro's help</h3>
              <p class="mt-3 text-base leading-7 text-gray-600">Experience top-notch features with our services</p>
              <a href="#" class="mt-10 inline-block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
            </div>
          </div>
          <dl class="mt-16 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2 lg:mt-0 lg:w-8/12 lg:pt-4">
            <div class="relative flex flex-col pl-14">
              <dt class="text-xl font-medium text-gray-900">
                <div class="flex-none">
                  <svg class="absolute left-0 top-0 h-8 w-8 text-pink-500" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M45.6,18.7,41,14.9V7.5a1,1,0,0,0-.6-.9L30.5,2.1h-.4l-.6.2L24,5.9,18.5,2.2,17.9,2h-.4L7.6,6.6a1,1,0,0,0-.6.9v7.4L2.4,18.7a.8.8,0,0,0-.4.8v9H2a.8.8,0,0,0,.4.8L7,33.1v7.4a1,1,0,0,0,.6.9l9.9,4.5h.4l.6-.2L24,42.1l5.5,3.7.6.2h.4l9.9-4.5a1,1,0,0,0,.6-.9V33.1l4.6-3.8a.8.8,0,0,0,.4-.7V19.4h0A.8.8,0,0,0,45.6,18.7Zm-5.1,6.8H42v1.6l-3.5,2.8-.4.3-.4-.2a1.4,1.4,0,0,0-2,.7,1.5,1.5,0,0,0,.6,2l.7.3h0v5.4l-6.6,3.1-4.2-2.8-.7-.5V25.5H27a1.5,1.5,0,0,0,0-3H25.5V9.7l.7-.5,4.2-2.8L37,9.5v5.4h0l-.7.3a1.5,1.5,0,0,0-.6,2,1.4,1.4,0,0,0,1.3.9l.7-.2.4-.2.4.3L42,20.9v1.6H40.5a1.5,1.5,0,0,0,0,3ZM21,25.5h1.5V38.3l-.7.5-4.2,2.8L11,38.5V33.1h0l.7-.3a1.5,1.5,0,0,0,.6-2,1.4,1.4,0,0,0-2-.7l-.4.2-.4-.3L6,27.1V25.5H7.5a1.5,1.5,0,0,0,0-3H6V20.9l3.5-2.8.4-.3.4.2.7.2a1.4,1.4,0,0,0,1.3-.9,1.5,1.5,0,0,0-.6-2L11,15h0V9.5l6.6-3.1,4.2,2.8.7.5V22.5H21a1.5,1.5,0,0,0,0,3Z" fill="currentColor" />
                    <path d="M13.9,9.9a1.8,1.8,0,0,0,0,2.2l2.6,2.5v2.8l-4,4v5.2l4,4v2.8l-2.6,2.5a1.8,1.8,0,0,0,0,2.2,1.5,1.5,0,0,0,1.1.4,1.5,1.5,0,0,0,1.1-.4l3.4-3.5V29.4l-4-4V22.6l4-4V13.4L16.1,9.9A1.8,1.8,0,0,0,13.9,9.9Z" fill="currentColor" />
                    <path d="M31.5,14.6l2.6-2.5a1.8,1.8,0,0,0,0-2.2,1.8,1.8,0,0,0-2.2,0l-3.4,3.5v5.2l4,4v2.8l-4,4v5.2l3.4,3.5a1.7,1.7,0,0,0,2.2,0,1.8,1.8,0,0,0,0-2.2l-2.6-2.5V30.6l4-4V21.4l-4-4Z" fill="currentColor" />
                  </svg>
                </div>
                AI Assistance
              </dt>
              <dd class="mt-3 flex-auto text-base leading-7 text-gray-600">
                <p class="flex-auto">Leverage artificial intelligence to automate tasks and boost productivity.</p>
              </dd>
            </div>
            <div class="relative flex flex-col pl-14">
              <dt class="text-xl font-medium text-gray-900">
                <div class="flex-none">
                  <svg class="absolute left-0 top-0 h-8 w-8 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M7 7L5.5 5.5M15 7L16.5 5.5M5.5 16.5L7 15M11 5L11 3M5 11L3 11M17.1603 16.9887L21.0519 15.4659C21.4758 15.3001 21.4756 14.7003 21.0517 14.5346L11.6992 10.8799C11.2933 10.7213 10.8929 11.1217 11.0515 11.5276L14.7062 20.8801C14.8719 21.304 15.4717 21.3042 15.6375 20.8803L17.1603 16.9887Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </div>
                One-Click Setup
              </dt>
              <dd class="mt-3 flex-auto text-base leading-7 text-gray-600">
                <p class="flex-auto">Quickly configure your platform with a single click to save time.</p>
              </dd>
            </div>
            <div class="relative flex flex-col pl-14">
              <dt class="text-xl font-medium text-gray-900">
                <div class="flex-none">
                  <svg class="absolute left-0 top-0 h-8 w-8 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.3121 23.3511C17.4463 23.0228 16.7081 22.5979 16.1266 22.1995C14.8513 22.7159 13.4578 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 14.2788 22.306 16.3983 21.1179 18.1551C21.0425 19.6077 21.8054 20.9202 22.5972 22.0816C23.2907 23.0987 23.1167 23.9184 21.8236 23.9917C21.244 24.0245 19.9903 23.9874 18.3121 23.3511ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 13.9503 20.3808 15.7531 19.328 17.2262C18.8622 17.8782 19.1018 19.0998 19.2616 19.8011C19.4167 20.4818 19.7532 21.2051 20.0856 21.8123C19.7674 21.7356 19.4111 21.6288 19.0212 21.481C18.1239 21.1407 17.3824 20.6624 16.8594 20.261C16.5626 20.0332 16.1635 19.9902 15.825 20.1494C14.6654 20.6947 13.3697 21 12 21C7.02944 21 3 16.9706 3 12ZM7 13.5C7.82843 13.5 8.5 12.8284 8.5 12C8.5 11.1716 7.82843 10.5 7 10.5C6.17157 10.5 5.5 11.1716 5.5 12C5.5 12.8284 6.17157 13.5 7 13.5ZM13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12ZM17 13.5C17.8284 13.5 18.5 12.8284 18.5 12C18.5 11.1716 17.8284 10.5 17 10.5C16.1716 10.5 15.5 11.1716 15.5 12C15.5 12.8284 16.1716 13.5 17 13.5Z" fill="currentColor" />
                  </svg>
                </div>
                Team Collaboration
              </dt>
              <dd class="mt-3 flex-auto text-base leading-7 text-gray-600">
                <p class="flex-auto">Enhance teamwork with shared workspaces and communication tools.</p>
              </dd>
            </div>
            <div class="relative flex flex-col pl-14">
              <dt class="text-xl font-medium text-gray-900">
                <div class="flex-none">
                  <svg class="absolute left-0 top-0 h-8 w-8 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 2V4.5M12 2C6.47715 2 2 6.47715 2 12M12 2C17.5228 2 22 6.47715 22 12M12 19.5V22M12 22C17.5228 22 22 17.5228 22 12M12 22C6.47715 22 2 17.5228 2 12M4.5 12H2M22 12H19.5M19.0784 19.0784L17.3047 17.3047M4.92163 19.0784L6.69715 17.3029M4.92163 5L6.65808 6.73645M19.0784 5L13.4999 10.5M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </div>
                Resource Monitoring
              </dt>
              <dd class="mt-3 flex-auto text-base leading-7 text-gray-600">
                <p class="flex-auto">Keep track of your resource usage to optimize performance.</p>
              </dd>
            </div>
          </dl>
        </div>
      </div>
    </div>

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
          <h2 class="text-base font-semibold leading-7 text-pink-500">Key highlights</h2>
          <div class="mt-2 lg:flex lg:gap-x-8">
            <div class="lg:w-1/2">
              <p class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Streamline your payment operations with efficiency and reliability</p>
            </div>
            <div class="mt-6 lg:mt-0 lg:w-1/2">
              <p class="text-lg leading-8 text-gray-600">Enhance every transaction with our secure, fast, and adaptable payment processing tools tailored to your business needs.</p>
              <a href="#" class="mt-6 inline-block rounded-md bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
            </div>
          </div>
          <div class="mt-16 sm:mt-20 lg:mt-24">
            <dl class="grid grid-cols-1 gap-6 lg:grid-cols-12">
              <div class="flex flex-col rounded-3xl bg-white p-4 shadow-sm ring-1 ring-inset ring-gray-900/10 lg:col-span-5">
                <dt class="px-1.5 pt-2 text-xl font-semibold text-gray-900">Invoice Management</dt>
                <dd class="mt-3 flex-auto px-1.5 text-base leading-7 text-gray-600">Easily create and send invoices without code, streamlining payment collection.</dd>
                <div class="relative isolate mt-5 h-64 overflow-hidden rounded-xl p-6 ring-1 ring-gray-900/10 sm:h-80 sm:py-8">
                  <div aria-hidden="true" class="absolute inset-0 -z-10 h-full w-full bg-gray-50 bg-small-dots bg-[size:8px_8px]"></div>
                  <img width="642" height="524" class="absolute left-1/2 top-1/2 w-64 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-gray-200 shadow-sm ring-1 ring-gray-900/5 sm:w-80 sm:rounded-2xl" src="https://htmlwind.com/assets/images/invoice-paid.png" alt="" />
                </div>
              </div>
              <div class="flex flex-col rounded-3xl bg-white p-4 shadow-sm ring-1 ring-inset ring-gray-900/10 lg:col-span-7">
                <dt class="px-1.5 pt-2 text-xl font-semibold text-gray-900">Payment Link</dt>
                <dd class="mt-3 flex-auto px-1.5 text-base leading-7 text-gray-600">Create payment links easily to sell online without needing a website. Share full payment pages with customers in just a few clicks.</dd>
                <div class="relative isolate mt-5 h-64 overflow-hidden rounded-xl p-6 ring-1 ring-gray-900/10 sm:h-80 sm:py-8">
                  <div aria-hidden="true" class="absolute inset-0 -z-10 h-full w-full bg-gray-50 bg-small-dots bg-[size:8px_8px]"></div>
                  <div class="absolute left-1/2 flex w-96 -translate-x-1/2 items-start justify-center gap-x-6 sm:w-[30rem] sm:gap-x-8">
                    <img width="625" height="873" class="w-7/12 rounded-lg bg-gray-200 shadow-sm ring-1 ring-gray-900/5 sm:rounded-2xl" src="https://htmlwind.com/assets/images/payment-link.png" alt="" />
                    <img width="625" height="580" class="mt-16 w-5/12 rounded-lg bg-gray-200 shadow-sm ring-1 ring-gray-900/5 sm:mt-20 sm:rounded-xl" src="https://htmlwind.com/assets/images/payment-chat.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="flex flex-col rounded-3xl bg-white p-4 shadow-sm ring-1 ring-inset ring-gray-900/10 lg:col-span-7">
                <dt class="px-1.5 pt-2 text-xl font-semibold text-gray-900">Checkout</dt>
                <dd class="mt-3 flex-auto px-1.5 text-base leading-7 text-gray-600">Seamlessly integrate checkout options into your website or direct customers to a secure page to handle one-time payments or subscriptions effortlessly.</dd>
                <div class="relative isolate mt-5 h-64 overflow-hidden rounded-xl p-6 ring-1 ring-gray-900/10 sm:h-80 sm:py-8">
                  <div aria-hidden="true" class="absolute inset-0 -z-10 h-full w-full bg-gray-50 bg-small-dots bg-[size:8px_8px]"></div>
                  <div class="absolute left-1/2 flex w-96 -translate-x-1/2 items-start justify-center gap-x-6 sm:w-[30rem] sm:gap-x-8">
                    <img width="642" height="967" class="mt-16 w-5/12 rounded-lg bg-gray-200 shadow-sm ring-1 ring-gray-900/5 sm:rounded-2xl" src="https://htmlwind.com/assets/images/payment-successful.png" alt="" />
                    <img width="642" height="738" class="w-7/12 rounded-lg bg-gray-200 shadow-sm ring-1 ring-gray-900/5 sm:rounded-2xl" src="https://htmlwind.com/assets/images/order-summary.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="flex flex-col rounded-3xl bg-white p-4 shadow-sm ring-1 ring-inset ring-gray-900/10 lg:col-span-5">
                <dt class="px-1.5 pt-2 text-xl font-semibold text-gray-900">Recurring Billing</dt>
                <dd class="mt-3 flex-auto px-1.5 text-base leading-7 text-gray-600">Boost revenue with automated billing and simplified management for easy, consistent payment collection.</dd>
                <div class="relative isolate mt-5 h-64 overflow-hidden rounded-xl p-6 ring-1 ring-gray-900/10 sm:h-80 sm:py-8">
                  <div aria-hidden="true" class="absolute inset-0 -z-10 h-full w-full bg-gray-50 bg-small-dots bg-[size:8px_8px]"></div>
                  <img width="642" height="659" class="absolute left-1/2 top-1/2 w-56 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-gray-200 shadow-sm ring-1 ring-gray-900/5 sm:w-64 sm:rounded-2xl" src="https://htmlwind.com/assets/images/billing-plan.png" alt="" />
                </div>
              </div>
            </dl>
          </div>
        </div>
      </div>
    </div>

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl lg:text-center">
          <h2 class="text-base font-semibold leading-7 text-pink-500">Key highlights</h2>
          <p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Discover the core features</p>
          <p class="mt-6 text-lg leading-8 text-gray-600">Experience the power of our SaaS platform with features designed to enhance your workflows, customize your experience, and secure your data.</p>
        </div>
        <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mx-0 lg:max-w-none">
          <dl class="grid grid-cols-1 gap-x-8 gap-y-12 lg:grid-cols-3">
            <div class="flex flex-col rounded-3xl px-6 py-8 ring-1 ring-inset ring-gray-900/10 sm:px-10 sm:py-8">
              <dt class="text-xl font-medium text-gray-900">
                <div class="mb-6">
                  <svg class="h-10 w-10 text-pink-500" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M14 10C14 9.44771 13.5523 9 13 9H12.5C9.46243 9 7 11.4624 7 14.5C7 17.5376 9.46243 20 12.5 20H17.5C20.5376 20 23 17.5376 23 14.5C23 12.0091 21.3441 9.90488 19.073 9.22823C18.5098 9.06042 18 9.52887 18 10.1166V10.1683C18 10.6659 18.3745 11.0735 18.8345 11.2634C20.1055 11.788 21 13.0395 21 14.5C21 16.433 19.433 18 17.5 18H12.5C10.567 18 9 16.433 9 14.5C9 12.567 10.567 11 12.5 11H13C13.5523 11 14 10.5523 14 10Z" fill="currentColor"></path>
                    <path d="M11.5 4C14.5376 4 17 6.46243 17 9.5C17 12.5376 14.5376 15 11.5 15H11C10.4477 15 10 14.5523 10 14C10 13.4477 10.4477 13 11 13H11.5C13.433 13 15 11.433 15 9.5C15 7.567 13.433 6 11.5 6H6.5C4.567 6 3 7.567 3 9.5C3 10.9605 3.89451 12.212 5.16553 12.7366C5.62548 12.9264 6 13.3341 6 13.8317V13.8834C6 14.4711 5.49024 14.9396 4.92699 14.7718C2.65592 14.0951 1 11.9909 1 9.5C1 6.46243 3.46243 4 6.5 4H11.5Z" fill="currentColor"></path>
                  </svg>
                </div>
                Effortless Integration
              </dt>
              <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto">Effortlessly connect with your favorite tools through seamless integration with third-party apps.</p>
                <p class="mt-8">
                  <a href="#" class="text-base font-medium text-pink-500">Learn more</a>
                </p>
              </dd>
            </div>
            <div class="flex flex-col rounded-3xl px-6 py-8 ring-1 ring-inset ring-gray-900/10 sm:px-10 sm:py-8">
              <dt class="text-xl font-medium text-gray-900">
                <div class="mb-6">
                  <svg class="h-10 w-10 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M2 12.8799V11.1199C2 10.0799 2.85 9.21994 3.9 9.21994C5.71 9.21994 6.45 7.93994 5.54 6.36994C5.02 5.46994 5.33 4.29994 6.24 3.77994L7.97 2.78994C8.76 2.31994 9.78 2.59994 10.25 3.38994L10.36 3.57994C11.26 5.14994 12.74 5.14994 13.65 3.57994L13.76 3.38994C14.23 2.59994 15.25 2.31994 16.04 2.78994L17.77 3.77994C18.68 4.29994 18.99 5.46994 18.47 6.36994C17.56 7.93994 18.3 9.21994 20.11 9.21994C21.15 9.21994 22.01 10.0699 22.01 11.1199V12.8799C22.01 13.9199 21.16 14.7799 20.11 14.7799C18.3 14.7799 17.56 16.0599 18.47 17.6299C18.99 18.5399 18.68 19.6999 17.77 20.2199L16.04 21.2099C15.25 21.6799 14.23 21.3999 13.76 20.6099L13.65 20.4199C12.75 18.8499 11.27 18.8499 10.36 20.4199L10.25 20.6099C9.78 21.3999 8.76 21.6799 7.97 21.2099L6.24 20.2199C5.33 19.6999 5.02 18.5299 5.54 17.6299C6.45 16.0599 5.71 14.7799 3.9 14.7799C2.85 14.7799 2 13.9199 2 12.8799Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                Advanced Customization
              </dt>
              <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto">Customize the platform to fit your needs with extensive options for features, settings, and personalization.</p>
                <p class="mt-8">
                  <a href="#" class="text-base font-medium text-pink-500">Learn more</a>
                </p>
              </dd>
            </div>
            <div class="flex flex-col rounded-3xl px-6 py-8 ring-1 ring-inset ring-gray-900/10 sm:px-10 sm:py-8">
              <dt class="text-xl font-medium text-gray-900">
                <div class="mb-6">
                  <svg class="h-10 w-10 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M20.91 11.12C20.91 16.01 17.36 20.59 12.51 21.93C12.18 22.02 11.82 22.02 11.49 21.93C6.63996 20.59 3.08997 16.01 3.08997 11.12V6.72997C3.08997 5.90997 3.70998 4.97998 4.47998 4.66998L10.05 2.39001C11.3 1.88001 12.71 1.88001 13.96 2.39001L19.53 4.66998C20.29 4.97998 20.92 5.90997 20.92 6.72997L20.91 11.12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                Enhanced Security
              </dt>
              <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
                <p class="flex-auto">Protect your data with advanced encryption and compliance tools in our secure SaaS platform.</p>
                <p class="mt-8">
                  <a href="#" class="text-base font-medium text-pink-500">Learn more</a>
                </p>
              </dd>
            </div>
          </dl>
        </div>
        <div class="mt-12 flex justify-center">
          <a href="#" class="rounded-full bg-pink-500 px-3.5 py-2.5 text-center text-sm font-semibold tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Explore more</a>
        </div>
      </div>
    </div>

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl lg:mx-0 lg:flex lg:max-w-none lg:gap-x-8">
          <div class="lg:w-1/3">
            <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
              Build websites easily,
              <br />
              No code needed
            </h2>
          </div>
          <div class="mt-16 sm:mt-20 lg:mt-0 lg:w-2/3">
            <dl class="grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2">
              <div>
                <dt class="text-xl font-medium text-gray-900">
                  <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
                    <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <path d="M21 9.5V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H9.5M17.3862 17.7113L15.6879 20.8653C15.4103 21.3808 15.2715 21.6386 15.1023 21.7059C14.9555 21.7643 14.7896 21.7498 14.6551 21.6668C14.5001 21.5712 14.4081 21.2933 14.2241 20.7375L11.5004 12.5113C11.3392 12.0245 11.2586 11.7812 11.3166 11.6191C11.367 11.478 11.478 11.367 11.6191 11.3166C11.7812 11.2586 12.0245 11.3392 12.5113 11.5004L20.7374 14.2241C21.2933 14.4082 21.5712 14.5002 21.6668 14.6551C21.7498 14.7897 21.7642 14.9555 21.7058 15.1024C21.6386 15.2715 21.3808 15.4103 20.8652 15.6879L17.7113 17.3862C17.6328 17.4285 17.5935 17.4497 17.5591 17.4768C17.5286 17.501 17.501 17.5286 17.4768 17.5591C17.4497 17.5935 17.4285 17.6328 17.3862 17.7113Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </div>
                  Drag-and-Drop
                </dt>
                <dd class="mt-3 text-base leading-7 text-gray-600">Design your website by simply dragging and dropping elements into place. Customize layouts, images, and text effortlessly without any coding knowledge.</dd>
              </div>
              <div>
                <dt class="text-xl font-medium text-gray-900">
                  <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
                    <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <path d="M6 7.5002V7.2002C6 6.08009 6 5.51962 6.21799 5.0918C6.40973 4.71547 6.71547 4.40973 7.0918 4.21799C7.51962 4 8.08009 4 9.2002 4H17.8002C18.9203 4 19.4796 4 19.9074 4.21799C20.2837 4.40973 20.5905 4.71547 20.7822 5.0918C21 5.5192 21 6.07899 21 7.19691V13.8031C21 14.921 21 15.48 20.7822 15.9074C20.5905 16.2837 20.2839 16.5905 19.9076 16.7822C19.4802 17 18.921 17 17.8031 17H10.5M3 16.8002V11.2002C3 10.0801 3 9.51962 3.21799 9.0918C3.40973 8.71547 3.71547 8.40973 4.0918 8.21799C4.51962 8 5.08009 8 6.2002 8H6.80019C7.9203 8 8.47957 8 8.9074 8.21799C9.28372 8.40973 9.59048 8.71547 9.78223 9.0918C10 9.5192 10 10.079 10 11.1969V16.8031C10 17.921 10 18.48 9.78223 18.9074C9.59048 19.2837 9.28372 19.5905 8.9074 19.7822C8.47999 20 7.921 20 6.80309 20H6.19691C5.07899 20 4.5192 20 4.0918 19.7822C3.71547 19.5905 3.40973 19.2837 3.21799 18.9074C3 18.4796 3 17.9203 3 16.8002Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </div>
                  Responsive Design
                </dt>
                <dd class="mt-3 text-base leading-7 text-gray-600">Ensure your website looks perfect on all devices, from desktops to smartphones. Automatically adapt your content to provide an optimal viewing experience for every visitor.</dd>
              </div>
              <div>
                <dt class="text-xl font-medium text-gray-900">
                  <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
                    <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                      <path d="M4 11h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1zm1-6h4v4H5V5zm15-2h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-1 6h-4V5h4v4zm-9 12a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6zm-5-6h4v4H5v-4zm13-1h-2v2h-2v2h2v2h2v-2h2v-2h-2z" />
                    </svg>
                  </div>
                  Customizable Templates
                </dt>
                <dd class="mt-3 text-base leading-7 text-gray-600">Choose from a wide range of professionally designed templates to kickstart your project. Easily personalize every aspect to align with your brand’s unique identity and vision.</dd>
              </div>
              <div>
                <dt class="text-xl font-medium text-gray-900">
                  <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
                    <svg class="h-6 w-6 text-white" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve" aria-hidden="true">
                      <g>
                        <circle cx="12" cy="7.9" r="2" />
                      </g>
                      <g>
                        <path d="M4.7,24c-0.3,0-0.5-0.1-0.8-0.2C3.3,23.5,3,22.9,3,22.2v-3.6c0-1.3,0.4-2.3,1.1-3l2-2.1C6,12.4,6,11.2,6,10 c0-7.8,5.4-9.8,5.7-9.9L12,0l0.3,0.1c0.2,0.1,5.7,2,5.7,9.9c0,1.2,0,2.4-0.1,3.5l2,2.1c0.7,0.7,1.1,1.7,1.1,3v3.6 c0,0.7-0.3,1.2-0.8,1.5C19.6,24,19,24,18.4,23.6L16,21.8l-1.4,2.1H9.5l-1.4-2l-2.4,1.8C5.4,23.9,5,24,4.7,24z M10.5,21.9h2.9 l0.7-1H9.8L10.5,21.9z M12,2.1c-1,0.5-4,2.4-4,7.8c0,1.3,0.1,2.6,0.2,3.8v0.5L5.5,17C5.1,17.4,5,17.9,5,18.6v3.1l2.3-1.8 c0.2-0.1,0.3-0.2,0.4-0.2c0.5-0.4,1.2-0.8,2-0.8h4.6c0.9,0,1.6,0.5,2.2,0.9l0.2,0.1l2.3,1.7v-3c0-0.7-0.2-1.2-0.5-1.6l0,0 l-2.7-2.8v-0.5c0.1-1.2,0.2-2.5,0.2-3.8C16,4.5,13,2.6,12,2.1z" />
                      </g>
                    </svg>
                  </div>
                  Instant Publishing
                </dt>
                <dd class="mt-3 text-base leading-7 text-gray-600">Go live with your website in just one click and make changes whenever needed. Your updates are published instantly, allowing you to keep your audience engaged with fresh content.</dd>
              </div>
            </dl>
          </div>
        </div>
      </div>
    </div>

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl lg:mx-0">
          <h2 class="text-base font-semibold leading-7 text-pink-500">Key highlights</h2>
          <p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Discover the core features</p>
        </div>
        <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mx-0 lg:max-w-none">
          <dl class="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3">
            <div>
              <dt class="text-xl font-medium text-gray-900">Intelligent Automation</dt>
              <dd class="mt-3 text-base leading-7 text-gray-600">Automate repetitive tasks with AI-powered workflows. Increase efficiency and free up time for strategic initiatives.</dd>
            </div>
            <div>
              <dt class="text-xl font-medium text-gray-900">Predictive Analytics</dt>
              <dd class="mt-3 text-base leading-7 text-gray-600">Leverage AI to forecast trends and make data-driven decisions. Stay ahead of the competition with actionable insights.</dd>
            </div>
            <div>
              <dt class="text-xl font-medium text-gray-900">Natural Language Processing</dt>
              <dd class="mt-3 text-base leading-7 text-gray-600">Understand and interact with customer queries naturally. Enhance user experience with advanced AI-driven communication.</dd>
            </div>
            <div>
              <dt class="text-xl font-medium text-gray-900">Custom AI Models</dt>
              <dd class="mt-3 text-base leading-7 text-gray-600">Build and deploy AI models tailored to your specific business needs. Customize algorithms to optimize performance.</dd>
            </div>
            <div>
              <dt class="text-xl font-medium text-gray-900">Seamless Integration</dt>
              <dd class="mt-3 text-base leading-7 text-gray-600">Easily connect with existing tools and systems. Our platform integrates smoothly with your current tech stack.</dd>
            </div>
            <div>
              <dt class="text-xl font-medium text-gray-900">Continuous Learning</dt>
              <dd class="mt-3 text-base leading-7 text-gray-600">Utilize AI that adapts and improves over time. Keep your business agile with self-learning systems that evolve with your needs.</dd>
            </div>
          </dl>
        </div>
      </div>
    </div>

<div class="bg-white py-24 sm:py-32">
      <div class="px-6 lg:px-8">
        <div class="mx-auto max-w-2xl sm:text-center">
          <h2 class="text-base font-semibold leading-7 text-pink-500">Key highlights</h2>
          <p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Effortless serverless hosting</p>
          <p class="mt-6 text-lg leading-8 text-gray-600">Simplify your infrastructure management with our serverless hosting. Enjoy auto-scaling, reduced costs, and enhanced performance.</p>
        </div>
      </div>
      <div class="overflow-hidden pt-16">
        <div class="relative mx-auto max-w-7xl px-6 lg:px-8">
          <img width="1920" height="1139" class="mb-[-5%] aspect-video w-full rounded-xl bg-gray-900/5 object-cover object-top shadow-2xl ring-1 ring-gray-900/10 sm:mb-[-10%]" src="https://htmlwind.com/assets/images/dashboard-screenshot.webp" alt="dashboard screenshot" />
          <div aria-hidden="true" class="relative">
            <div class="absolute -left-20 -right-20 bottom-0 bg-gradient-to-b from-white/0 to-white pt-[10%]"></div>
          </div>
        </div>
      </div>
      <div class="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
        <dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base leading-7 text-gray-600 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
          <div class="relative pl-9">
            <dt class="font-semibold text-gray-900">
              <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 -4 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g transform="translate(-466.000000, -1144.000000)" fill="currentColor">
                    <path d="M488.718,1157.61 C488.325,1158 487.688,1158 487.295,1157.61 L483,1153.34 L483,1162.99 C483,1163.54 482.553,1163.99 482,1163.99 C481.447,1163.99 481,1163.54 481,1162.99 L481,1153.37 L476.736,1157.61 C476.344,1158 475.707,1158 475.313,1157.61 C474.921,1157.22 474.921,1156.59 475.313,1156.19 L481.254,1150.28 C481.464,1150.07 481.741,1149.98 482.016,1150 C482.29,1149.98 482.568,1150.07 482.777,1150.28 L488.718,1156.19 C489.11,1156.59 489.11,1157.22 488.718,1157.61 L488.718,1157.61 Z M489.067,1149.03 C487.599,1146.05 484.543,1144 481,1144 C476.251,1144 472.37,1147.68 472.033,1152.34 C468.542,1153.34 466,1156.39 466,1160 C466,1164.26 469.54,1167.73 474,1167.98 L491,1168 C494.437,1166.51 498,1162.35 498,1158.5 C498,1153.45 494.049,1149.32 489.067,1149.03 L489.067,1149.03 Z"></path>
                  </g>
                </g>
              </svg>
              Auto Scaling
            </dt>
            <dd>Scale automatically to handle traffic spikes and reduce costs during low traffic, ensuring optimal performance.</dd>
          </div>
          <div class="relative pl-9">
            <dt class="font-semibold text-gray-900">
              <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12.75 6C12.75 5.58579 12.4142 5.25 12 5.25C11.5858 5.25 11.25 5.58579 11.25 6V6.31673C9.61957 6.60867 8.25 7.83361 8.25 9.5C8.25 11.4172 10.0628 12.75 12 12.75C13.3765 12.75 14.25 13.6557 14.25 14.5C14.25 15.3443 13.3765 16.25 12 16.25C10.6235 16.25 9.75 15.3443 9.75 14.5C9.75 14.0858 9.41421 13.75 9 13.75C8.58579 13.75 8.25 14.0858 8.25 14.5C8.25 16.1664 9.61957 17.3913 11.25 17.6833V18C11.25 18.4142 11.5858 18.75 12 18.75C12.4142 18.75 12.75 18.4142 12.75 18V17.6833C14.3804 17.3913 15.75 16.1664 15.75 14.5C15.75 12.5828 13.9372 11.25 12 11.25C10.6235 11.25 9.75 10.3443 9.75 9.5C9.75 8.65573 10.6235 7.75 12 7.75C13.3765 7.75 14.25 8.65573 14.25 9.5C14.25 9.91421 14.5858 10.25 15 10.25C15.4142 10.25 15.75 9.91421 15.75 9.5C15.75 7.83361 14.3804 6.60867 12.75 6.31673V6Z" fill="currentColor" />
              </svg>
              Pay-as-You-Go
            </dt>
            <dd>Pay only for what you use, avoiding upfront costs and saving money by matching costs to actual usage.</dd>
          </div>
          <div class="relative pl-9">
            <dt class="font-semibold text-gray-900">
              <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" aria-hidden="true">
                <path
                  fill="currentColor"
                  d="M32,0C15.776,0,2.381,12.077,0.292,27.729c-0.002,0.016-0.004,0.031-0.006,0.047 c-0.056,0.421-0.106,0.843-0.146,1.269c-0.019,0.197-0.029,0.396-0.045,0.594c-0.021,0.28-0.044,0.56-0.058,0.842 C0.014,30.983,0,31.49,0,32c0,17.673,14.327,32,32,32s32-14.327,32-32S49.673,0,32,0z M33.362,58.502 c-0.72,0.787-1.901,1.414-2.675,0.67c-0.653-0.644-0.099-1.44,0-2.353c0.125-1.065-0.362-2.345,0.666-2.676 c0.837-0.259,1.468,0.322,2.009,1.012C34.187,56.175,34.239,57.526,33.362,58.502z M43.446,49.87 c-1.18,0.608-2.006,0.494-3.323,0.673c-2.454,0.309-4.394,1.52-6.333,0c-0.867-0.695-0.978-1.451-1.65-2.341 c-1.084-1.364-1.355-3.879-3.01-3.322c-1.058,0.356-1.026,1.415-1.654,2.335c-0.81,1.156-0.607,2.793-2.005,2.993 c-0.974,0.138-1.499-0.458-2.321-1c-0.922-0.614-1.104-1.348-2.002-1.993c-0.934-0.689-1.69-0.693-2.654-1.334 c-0.694-0.463-0.842-1.304-1.673-1.334c-0.751-0.022-1.289,0.346-1.664,0.996c-0.701,1.214-0.942,4.793-2.988,4.665 c-1.516-0.103-4.758-3.509-5.994-4.327c-0.405-0.273-0.78-0.551-1.158-0.763c-1.829-3.756-2.891-7.952-2.997-12.385 c0.614-0.515,1.239-0.769,1.819-1.493c0.927-1.13,0.481-2.507,1.673-3.335c0.886-0.604,1.602-0.507,2.669-0.658 c1.529-0.222,2.491-0.422,3.988,0c1.459,0.409,2.016,1.246,3.326,1.992c1.415,0.81,2.052,1.766,3.66,2.001 c1.166,0.165,1.966-0.901,2.988-0.337c0.824,0.458,1.406,1.066,1.341,2.001c-0.1,1.218-2.522,0.444-2.659,1.662 c-0.183,1.558,2.512-0.194,3.992,0.33c0.974,0.355,2.241,0.294,2.325,1.334c0.081,1.156-1.608,0.837-2.657,1.335 c-1.162,0.541-1.771,0.996-3.004,1.329c-1.125,0.298-2.312-0.628-2.987,0.329c-0.53,0.742-0.343,1.489,0,2.335 c0.787,1.931,3.349,1.352,5.322,0.657c1.383-0.488,1.641-1.726,2.997-2.329c1.438-0.641,2.554-1.335,3.981-0.663 c1.178,0.556,0.849,2.05,2.006,2.663c1.253,0.668,2.432-0.729,3.663,0c0.957,0.569,0.887,1.521,1.655,2.327 c0.894,0.942,1.41,1.702,2.668,2c1.286,0.299,2.072-1.071,3.327-0.671c0.965,0.315,1.755,0.68,1.987,1.672 C46.465,48.634,44.744,49.198,43.446,49.87z M45.839,33.841c-1.154,1.16-2.156,1.539-3.771,1.893c-1.433,0.315-3.443,1.438-3.772,0 c-0.251-1.148,1.029-1.558,1.893-2.359c0.959-0.895,1.854-0.983,2.826-1.892c0.87-0.802,0.756-2.031,1.893-2.359 c1.109-0.32,2.182-0.019,2.825,0.947C48.652,31.438,47.006,32.681,45.839,33.841z M59.989,29.319 c-0.492,0.508-0.462,1.044-0.965,1.542c-0.557,0.539-1.331,0.307-1.738,0.968c-0.358,0.577-0.13,1.057-0.194,1.735 c-0.041,0.387-1.924,1.256-2.313,0.385c-0.214-0.481,0.281-0.907,0-1.353c-0.263-0.401-0.555-0.195-0.899,0.181 c-0.359,0.388-0.772,0.958-1.221,1.172c-0.589,0.273-0.196-2.25-0.395-3.088c-0.146-0.663,0.01-1.08,0.198-1.736 c0.25-0.91,0.938-1.206,1.155-2.125c0.194-0.806,0.033-1.295,0-2.123c-0.039-0.906-0.015-1.427-0.188-2.314 c-0.192-0.937-0.252-1.525-0.771-2.316c-0.418-0.624-0.694-1.001-1.354-1.352c-0.16-0.088-0.31-0.146-0.452-0.191 c-0.34-0.113-0.659-0.128-1.098-0.193c-0.888-0.132-1.522,0.432-2.314,0c-0.462-0.255-0.606-0.575-0.96-0.967 c-0.404-0.434-0.511-0.789-0.967-1.158c-0.341-0.276-0.552-0.437-0.965-0.581c-0.79-0.263-1.342-0.082-2.126,0.196 c-0.77,0.268-1.058,0.707-1.739,1.155c-0.522,0.303-0.893,0.371-1.348,0.774c-0.276,0.242-1.59,1.177-2.127,1.155 c-0.544-0.021-0.851-0.343-1.338-0.382c-0.065-0.008-0.13-0.008-0.204,0c0,0,0,0-0.005,0c-0.473,0.036-0.696,0.269-1.146,0.382 c-1.107,0.276-1.812-0.115-2.905,0.197c-0.712,0.2-0.993,0.766-1.73,0.771c-0.841,0.005-1.125-0.743-1.932-0.968 c-0.442-0.118-0.702-0.129-1.157-0.19c-0.749-0.108-1.178-0.119-1.926-0.191H24.86c-0.016,0.006-0.591,0.058-0.688,0 c-0.422-0.286-0.722-0.521-1.244-0.773c-0.575-0.283-0.919-0.428-1.547-0.584l0.026-0.381c0,0,0-0.847-0.121-1.207 c-0.115-0.361-0.24-0.361,0-1.086c0.248-0.722,0.679-1.182,0.679-1.182c0.297-0.228,0.516-0.305,0.769-0.58 c0.51-0.539,0.717-0.998,0.774-1.739c0.067-0.972-1.205-1.367-0.97-2.316c0.209-0.826,0.904-0.98,1.547-1.543 c0.779-0.67,1.468-0.758,2.12-1.542c0.501-0.593,0.911-0.965,0.97-1.738c0.053-0.657-0.23-1.068-0.57-1.538 C28.356,2.175,30.157,2,32,2c14.919,0,27.29,10.893,29.605,25.158c-0.203,0.352-0.001,0.796-0.27,1.193 C60.979,28.894,60.436,28.85,59.989,29.319z"
                ></path>
              </svg>
              Global Availability
            </dt>
            <dd>Deploy closer to your users for reduced latency and better performance, with a global network at your fingertips.</dd>
          </div>
          <div class="relative pl-9">
            <dt class="font-semibold text-gray-900">
              <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M17,9V7c0-2.8-2.2-5-5-5S7,4.2,7,7v2c-1.7,0-3,1.3-3,3v7c0,1.7,1.3,3,3,3h10c1.7,0,3-1.3,3-3v-7C20,10.3,18.7,9,17,9z M9,7c0-1.7,1.3-3,3-3s3,1.3,3,3v2H9V7z M13.1,15.5c0,0-0.1,0.1-0.1,0.1V17c0,0.6-0.4,1-1,1s-1-0.4-1-1v-1.4c-0.6-0.6-0.7-1.5-0.1-2.1c0.6-0.6,1.5-0.7,2.1-0.1C13.6,13.9,13.7,14.9,13.1,15.5z"></path>
              </svg>
              Built-in Security
            </dt>
            <dd>Protect your applications with features like DDoS protection and data encryption, all managed automatically.</dd>
          </div>
          <div class="relative pl-9">
            <dt class="font-semibold text-gray-900">
              <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M9.03429 5.96305L6.49114 8.49856C6.02369 8.9646 5.59488 9.3921 5.25624 9.77856C5.03877 10.0267 4.82145 10.2984 4.63737 10.5985L4.61259 10.5738C4.56555 10.5269 4.54201 10.5034 4.51839 10.4805C4.07636 10.0516 3.55641 9.71062 2.98636 9.47575C2.9559 9.4632 2.92498 9.45095 2.86314 9.42645L2.48449 9.27641C1.97153 9.07315 1.83482 8.41279 2.22514 8.02365C3.34535 6.90684 4.69032 5.56594 5.33941 5.29662C5.91185 5.05911 6.53023 4.98008 7.12664 5.06822C7.67311 5.14898 8.19006 5.42968 9.03429 5.96305Z" fill="currentColor" />
                <path d="M13.3767 19.3132C13.5816 19.5212 13.7177 19.6681 13.8408 19.8251C14.0031 20.0322 14.1483 20.2523 14.2748 20.4829C14.4172 20.7426 14.5278 21.02 14.749 21.5748C14.929 22.0265 15.5272 22.1459 15.8746 21.7995L15.9586 21.7157C17.0788 20.5988 18.4237 19.2579 18.6938 18.6108C18.9321 18.04 19.0113 17.4235 18.9229 16.8289C18.8419 16.2841 18.5605 15.7688 18.0256 14.9273L15.474 17.4713C14.9959 17.9479 14.5576 18.385 14.1612 18.7273C13.9236 18.9325 13.6637 19.1376 13.3767 19.3132Z" fill="currentColor" />
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.4467 16.3769L20.2935 10.5476C21.1356 9.70811 21.5566 9.28836 21.7783 8.75458C22.0001 8.22081 22.0001 7.62719 22.0001 6.43996V5.87277C22.0001 4.04713 22.0001 3.13431 21.4312 2.56715C20.8624 2 19.9468 2 18.1157 2H17.5468C16.356 2 15.7606 2 15.2252 2.2211C14.6898 2.4422 14.2688 2.86195 13.4268 3.70146L7.57991 9.53078C6.59599 10.5117 5.98591 11.12 5.74966 11.7075C5.67502 11.8931 5.6377 12.0767 5.6377 12.2692C5.6377 13.0713 6.2851 13.7168 7.57991 15.0077L7.75393 15.1812L9.79245 13.1123C10.0832 12.8172 10.558 12.8137 10.8531 13.1044C11.1481 13.3951 11.1516 13.87 10.8609 14.1651L8.8162 16.2403L8.95326 16.3769C10.2481 17.6679 10.8955 18.3133 11.7 18.3133C11.8777 18.3133 12.0478 18.2818 12.2189 18.2188C12.8222 17.9966 13.438 17.3826 14.4467 16.3769ZM17.1935 9.5312C16.435 10.2874 15.2053 10.2874 14.4468 9.5312C13.6883 8.775 13.6883 7.54895 14.4468 6.79274C15.2053 6.03653 16.435 6.03653 17.1935 6.79274C17.952 7.54895 17.952 8.775 17.1935 9.5312Z" fill="currentColor" />
              </svg>
              Fast Deployment
            </dt>
            <dd>Quickly launch apps and updates with our easy deployment processes, helping you move faster.</dd>
          </div>
          <div class="relative pl-9">
            <dt class="font-semibold text-gray-900">
              <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M16.4481 1.50023C14.844 1.4862 13.3007 2.10727 12.15 3.22645L12.1351 3.24107L11.6464 3.7298C11.2559 4.12032 11.2559 4.75349 11.6464 5.14401L12.3535 5.85112C12.7441 6.24164 13.3772 6.24164 13.7677 5.85112L14.2484 5.37048C14.834 4.80437 15.6142 4.49305 16.4218 4.50012C17.2326 4.50721 18.0103 4.83463 18.5868 5.41517C19.1637 5.99606 19.4927 6.78402 19.4998 7.60991C19.5069 8.43176 19.1946 9.22174 18.633 9.81182L15.5209 12.9432C15.2056 13.2609 14.8269 13.5058 14.4107 13.6622C13.9945 13.8185 13.5501 13.8828 13.1076 13.8509C12.6651 13.8189 12.2341 13.6915 11.8438 13.4768C11.7456 13.4228 11.6504 13.3635 11.5588 13.2993C11.1066 12.9823 10.4859 12.8717 10.0425 13.201L9.23978 13.7973C8.79642 14.1266 8.69902 14.7603 9.09601 15.1443C9.48444 15.52 9.9219 15.8435 10.3977 16.1053C11.1664 16.5282 12.0171 16.78 12.8918 16.8431C13.7666 16.9062 14.6444 16.779 15.4656 16.4706C16.2868 16.1621 17.0317 15.6797 17.65 15.0568L20.7712 11.9162L20.7898 11.8971C21.9007 10.7389 22.5136 9.18987 22.4997 7.58402C22.4859 5.97817 21.8463 4.43996 20.7155 3.30127C19.5844 2.16225 18.0521 1.51427 16.4481 1.50023Z" fill="currentColor" />
                <path d="M11.1082 7.15685C10.2334 7.09376 9.35555 7.22089 8.53436 7.52937C7.71347 7.83773 6.96821 8.32053 6.34994 8.94317L3.22873 12.0838L3.21011 12.1029C2.09928 13.261 1.48637 14.8101 1.50023 16.416C1.51409 18.0218 2.15365 19.56 3.28441 20.6987C4.41551 21.8377 5.94781 22.4857 7.55185 22.4997C9.15591 22.5138 10.6993 21.8927 11.85 20.7735L11.8648 20.7589L12.3536 20.2701C12.7441 19.8796 12.7441 19.2465 12.3536 18.8559L11.6464 18.1488C11.2559 17.7583 10.6228 17.7583 10.2322 18.1488L9.75155 18.6295C9.16598 19.1956 8.38576 19.5069 7.5781 19.4999C6.76732 19.4928 5.98963 19.1653 5.41313 18.5848C4.83629 18.0039 4.50725 17.216 4.50012 16.3901C4.49303 15.5682 4.80532 14.7782 5.36694 14.1881L8.47904 11.0567C8.79434 10.7391 9.1731 10.4941 9.58932 10.3378C10.0055 10.1814 10.4498 10.1172 10.8924 10.1491C11.3349 10.181 11.7659 10.3084 12.1561 10.5231C12.2544 10.5772 12.3495 10.6365 12.4411 10.7007C12.8934 11.0177 13.5141 11.1282 13.9574 10.7989L14.7602 10.2026C15.2036 9.87328 15.301 9.23958 14.904 8.85563C14.5155 8.47995 14.0781 8.15644 13.6022 7.89464C12.8335 7.47172 11.9829 7.21993 11.1082 7.15685Z" fill="currentColor" />
              </svg>
              Seamless Integration
            </dt>
            <dd>Integrate effortlessly with your favorite tools and CI/CD pipelines to boost productivity and streamline workflows.</dd>
          </div>
        </dl>
      </div>
    </div>

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl lg:mx-0 lg:flex lg:max-w-none lg:gap-x-8">
          <div class="lg:w-5/12">
            <h2 class="text-base font-semibold leading-7 text-pink-500">Key highlights</h2>
            <p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
              Streamline your
              <br />
              payments with ease
            </p>
          </div>
          <div class="mt-6 lg:mt-0 lg:w-7/12">
            <p class="text-lg leading-8 text-gray-600">Enhance your payment processing with our comprehensive features designed to improve security, speed, and flexibility. Maximize efficiency and provide a seamless experience for both you and your customers, no matter where they are.</p>
            <ul class="mt-12 grid grid-cols-1 gap-x-8 gap-y-3 text-base font-semibold leading-7 text-gray-900 sm:grid-cols-2">
              <li class="relative pl-9">
                <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M7.29417 12.9577L10.5048 16.1681L17.6729 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
                </svg>
                Multi-Currency Support
              </li>
              <li class="relative pl-9">
                <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M7.29417 12.9577L10.5048 16.1681L17.6729 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
                </svg>
                Instant Transaction Approval
              </li>
              <li class="relative pl-9">
                <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M7.29417 12.9577L10.5048 16.1681L17.6729 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
                </svg>
                Custom Payment Plans
              </li>
              <li class="relative pl-9">
                <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M7.29417 12.9577L10.5048 16.1681L17.6729 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
                </svg>
                Fraud Detection Tools
              </li>
              <li class="relative pl-9">
                <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M7.29417 12.9577L10.5048 16.1681L17.6729 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
                </svg>
                Automated Billing Reminders
              </li>
              <li class="relative pl-9">
                <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M7.29417 12.9577L10.5048 16.1681L17.6729 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
                </svg>
                Recurring Payment Options
              </li>
              <li class="relative pl-9">
                <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M7.29417 12.9577L10.5048 16.1681L17.6729 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
                </svg>
                Real-Time Analytics
              </li>
              <li class="relative pl-9">
                <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M7.29417 12.9577L10.5048 16.1681L17.6729 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
                </svg>
                PCI Compliance Security
              </li>
              <li class="relative pl-9">
                <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M7.29417 12.9577L10.5048 16.1681L17.6729 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
                </svg>
                Seamless API Integration
              </li>
              <li class="relative pl-9">
                <svg class="absolute left-1 top-1 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M7.29417 12.9577L10.5048 16.1681L17.6729 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
                </svg>
                Mobile Payment Compatibility
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

<div class="bg-white py-24 sm:py-32">
      <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl lg:text-center">
          <h2 class="text-base font-semibold leading-7 text-pink-500">Key highlights</h2>
          <p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Discover powerful features</p>
          <p class="mt-6 text-lg leading-8 text-gray-600">Easily connect with a wide range of tools and platforms you already use, ensuring a seamless workflow.</p>
        </div>
        <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
          <dl class="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-2">
            <div class="relative flex flex-col sm:pl-16">
              <dt class="text-xl font-medium text-gray-900">
                <div class="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-pink-500 shadow-sm sm:absolute sm:-top-1 sm:left-0 sm:mb-0">
                  <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M14 10C14 9.44771 13.5523 9 13 9H12.5C9.46243 9 7 11.4624 7 14.5C7 17.5376 9.46243 20 12.5 20H17.5C20.5376 20 23 17.5376 23 14.5C23 12.0091 21.3441 9.90488 19.073 9.22823C18.5098 9.06042 18 9.52887 18 10.1166V10.1683C18 10.6659 18.3745 11.0735 18.8345 11.2634C20.1055 11.788 21 13.0395 21 14.5C21 16.433 19.433 18 17.5 18H12.5C10.567 18 9 16.433 9 14.5C9 12.567 10.567 11 12.5 11H13C13.5523 11 14 10.5523 14 10Z" fill="currentColor" />
                    <path d="M11.5 4C14.5376 4 17 6.46243 17 9.5C17 12.5376 14.5376 15 11.5 15H11C10.4477 15 10 14.5523 10 14C10 13.4477 10.4477 13 11 13H11.5C13.433 13 15 11.433 15 9.5C15 7.567 13.433 6 11.5 6H6.5C4.567 6 3 7.567 3 9.5C3 10.9605 3.89451 12.212 5.16553 12.7366C5.62548 12.9264 6 13.3341 6 13.8317V13.8834C6 14.4711 5.49024 14.9396 4.92699 14.7718C2.65592 14.0951 1 11.9909 1 9.5C1 6.46243 3.46243 4 6.5 4H11.5Z" fill="currentColor" />
                  </svg>
                </div>
                Effortless Integration
              </dt>
              <dd class="mt-3 text-base leading-7 text-gray-600">Customize every aspect of the platform to align with your unique business needs, providing a truly personalized experience.</dd>
            </div>
            <div class="relative flex flex-col sm:pl-16">
              <dt class="text-xl font-medium text-gray-900">
                <div class="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-pink-500 shadow-sm sm:absolute sm:-top-1 sm:left-0 sm:mb-0">
                  <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M2 12.8799V11.1199C2 10.0799 2.85 9.21994 3.9 9.21994C5.71 9.21994 6.45 7.93994 5.54 6.36994C5.02 5.46994 5.33 4.29994 6.24 3.77994L7.97 2.78994C8.76 2.31994 9.78 2.59994 10.25 3.38994L10.36 3.57994C11.26 5.14994 12.74 5.14994 13.65 3.57994L13.76 3.38994C14.23 2.59994 15.25 2.31994 16.04 2.78994L17.77 3.77994C18.68 4.29994 18.99 5.46994 18.47 6.36994C17.56 7.93994 18.3 9.21994 20.11 9.21994C21.15 9.21994 22.01 10.0699 22.01 11.1199V12.8799C22.01 13.9199 21.16 14.7799 20.11 14.7799C18.3 14.7799 17.56 16.0599 18.47 17.6299C18.99 18.5399 18.68 19.6999 17.77 20.2199L16.04 21.2099C15.25 21.6799 14.23 21.3999 13.76 20.6099L13.65 20.4199C12.75 18.8499 11.27 18.8499 10.36 20.4199L10.25 20.6099C9.78 21.3999 8.76 21.6799 7.97 21.2099L6.24 20.2199C5.33 19.6999 5.02 18.5299 5.54 17.6299C6.45 16.0599 5.71 14.7799 3.9 14.7799C2.85 14.7799 2 13.9199 2 12.8799Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </div>
                Advanced Customization
              </dt>
              <dd class="mt-3 text-base leading-7 text-gray-600">Keep your data safe with top-tier security protocols, ensuring complete protection against threats.</dd>
            </div>
            <div class="relative flex flex-col sm:pl-16">
              <dt class="text-xl font-medium text-gray-900">
                <div class="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-pink-500 shadow-sm sm:absolute sm:-top-1 sm:left-0 sm:mb-0">
                  <svg class="h-6 w-6 text-white" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true">
                    <g fill="currentColor">
                      <path d="M12 2a1 1 0 011 1v10a1 1 0 11-2 0V3a1 1 0 011-1zM8 6a1 1 0 011 1v6a1 1 0 11-2 0V7a1 1 0 011-1zM5 10a1 1 0 00-2 0v3a1 1 0 102 0v-3z" />
                    </g>
                  </svg>
                </div>
                Scalable Solutions
              </dt>
              <dd class="mt-3 text-base leading-7 text-gray-600">Protect your data with our state-of-the-art security features. Protect your data with our state-of-the-art security features.</dd>
            </div>
            <div class="relative flex flex-col sm:pl-16">
              <dt class="text-xl font-medium text-gray-900">
                <div class="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-pink-500 shadow-sm sm:absolute sm:-top-1 sm:left-0 sm:mb-0">
                  <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M20.91 11.12C20.91 16.01 17.36 20.59 12.51 21.93C12.18 22.02 11.82 22.02 11.49 21.93C6.63996 20.59 3.08997 16.01 3.08997 11.12V6.72997C3.08997 5.90997 3.70998 4.97998 4.47998 4.66998L10.05 2.39001C11.3 1.88001 12.71 1.88001 13.96 2.39001L19.53 4.66998C20.29 4.97998 20.92 5.90997 20.92 6.72997L20.91 11.12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </div>
                Enhanced Security
              </dt>
              <dd class="mt-3 text-base leading-7 text-gray-600">Grow your business without limitations, thanks to a platform that scales seamlessly with your needs.</dd>
            </div>
          </dl>
        </div>
      </div>
    </div>