export function FeatureListWithPricingPlan() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mb-14 text-center">
          <h2 className="font-manrope mb-4 text-4xl font-bold text-gray-900">
            Our suitable packages
          </h2>
          <p className="text-lg text-gray-500">
            7 Days free trial. No credit card required.
          </p>
        </div>
        {/*Slider Indicator*/}
        <div className="swiper mySwiper">
          <div className="swiper-wrapper">
            <div className="swiper-slide">
              <div className="mx-auto flex w-full max-w-xl flex-col justify-between gap-8 rounded-3xl border border-solid border-gray-300 px-6 py-6 lg:max-w-3xl lg:flex-row lg:px-12 lg:py-12 xl:max-w-4xl">
                <div className="block w-full lg:w-1/2">
                  <div className="mb-7 flex items-center justify-center lg:justify-start">
                    <span className="font-manrope text-3xl font-bold text-indigo-600">
                      $80.00
                    </span>
                    <span className="ml-2 text-gray-500">/ Month</span>
                  </div>
                  <h4 className="font-manrope mb-3 text-center text-2xl font-bold text-gray-900 lg:text-left">
                    Basic plan
                  </h4>
                  <p className="text-center text-sm text-gray-500 lg:text-left">
                    Best plan for the fresher individuals.
                  </p>
                  <a
                    href="javascript:;"
                    className="mx-auto mt-12 block w-fit rounded-full bg-indigo-50 px-7 py-3.5 text-center font-semibold text-indigo-600 shadow-sm transition-all duration-500 hover:bg-indigo-100 lg:mx-0"
                  >
                    Purchase Plan
                  </a>
                </div>
                <div className="w-full rounded-2xl bg-gray-50 p-8 lg:w-1/2">
                  <ul className="space-y-5 text-left text-gray-800 group-hover:text-white">
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>AI Advisor</span>
                    </li>
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>Unlimited auto tracking</span>
                    </li>
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>1 Day transaction clearing </span>
                    </li>
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>Priority customer support </span>
                    </li>
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>All Widget Access </span>
                    </li>
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>Admin tools</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div className="swiper-slide">
              <div className="mx-auto flex w-full max-w-xl flex-col justify-between gap-8 rounded-3xl border border-solid border-gray-300 px-6 py-6 lg:max-w-3xl lg:flex-row lg:px-12 lg:py-12 xl:max-w-4xl">
                <div className="block w-full lg:w-1/2">
                  <div className="mb-7 flex items-center justify-center lg:justify-start">
                    <span className="font-manrope text-3xl font-bold text-indigo-600">
                      $150.00
                    </span>
                    <span className="ml-2 text-gray-500">/ Month</span>
                  </div>
                  <h4 className="font-manrope mb-3 text-center text-2xl font-bold text-gray-900 lg:text-left">
                    Pro plan
                  </h4>
                  <p className="text-center text-sm text-gray-500 lg:text-left">
                    Best plan for the fresher individuals.
                  </p>
                  <a
                    href="javascript:;"
                    className="mx-auto mt-12 block w-fit rounded-full bg-indigo-50 px-7 py-3.5 text-center font-semibold text-indigo-600 shadow-sm transition-all duration-500 hover:bg-indigo-100 lg:mx-0"
                  >
                    Purchase Plan
                  </a>
                </div>
                <div className="w-full rounded-2xl bg-gray-50 p-8 lg:w-1/2">
                  <ul className="space-y-5 text-left text-gray-800 group-hover:text-white">
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>AI Advisor</span>
                    </li>
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>Unlimited auto tracking</span>
                    </li>
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>1 Day transaction clearing </span>
                    </li>
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>Priority customer support </span>
                    </li>
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>All Widget Access </span>
                    </li>
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>Admin tools</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div className="swiper-slide">
              <div className="mx-auto flex w-full max-w-xl flex-col justify-between gap-8 rounded-3xl border border-solid border-gray-300 px-6 py-6 lg:max-w-3xl lg:flex-row lg:px-12 lg:py-12 xl:max-w-4xl">
                <div className="block w-full lg:w-1/2">
                  <div className="mb-7 flex items-center justify-center lg:justify-start">
                    <span className="font-manrope text-3xl font-bold text-indigo-600">
                      $180.00
                    </span>
                    <span className="ml-2 text-gray-500">/ Month</span>
                  </div>
                  <h4 className="font-manrope mb-3 text-center text-2xl font-bold text-gray-900 lg:text-left">
                    Advanced plan
                  </h4>
                  <p className="text-center text-sm text-gray-500 lg:text-left">
                    Best plan for the fresher individuals.
                  </p>
                  <a
                    href="javascript:;"
                    className="mx-auto mt-12 block w-fit rounded-full bg-indigo-50 px-7 py-3.5 text-center font-semibold text-indigo-600 shadow-sm transition-all duration-500 hover:bg-indigo-100 lg:mx-0"
                  >
                    Purchase Plan
                  </a>
                </div>
                <div className="w-full rounded-2xl bg-gray-50 p-8 lg:w-1/2">
                  <ul className="space-y-5 text-left text-gray-800 group-hover:text-white">
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>AI Advisor</span>
                    </li>
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>Unlimited auto tracking</span>
                    </li>
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>1 Day transaction clearing </span>
                    </li>
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>Priority customer support </span>
                    </li>
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>All Widget Access </span>
                    </li>
                    <li className="flex items-center space-x-4">
                      {/* Icon */}
                      {/* SVG removed */}
                      <span>Admin tools</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <button
            id="slider-button-left"
            className="swiper-button-prev group hidden h-16 w-16 items-center justify-center rounded-full border border-solid border-indigo-200 p-2 transition-all duration-500 hover:bg-indigo-600 lg:flex"
            data-carousel-prev
          >
            {/* SVG removed */}
          </button>
          <button
            id="slider-button-right"
            className="swiper-button-next group hidden h-16 w-16 items-center justify-center rounded-full border border-solid border-indigo-200 p-2 transition-all duration-500 hover:bg-indigo-600 lg:flex"
            data-carousel-next
          >
            {/* SVG removed */}
          </button>
          <div className="swiper-pagination" />
        </div>
      </div>
    </section>
  )
}