export function CenterAlignTailwindPricingCards() {
  return (
    <section className="bg-zinc-900 py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="inline-flex w-full flex-col items-start justify-start gap-10 lg:gap-12">
          <div className="mx-auto flex w-full flex-col items-center justify-start gap-3 sm:w-96 lg:w-full lg:gap-4">
            <h2 className="font-manrope text-center text-4xl leading-snug font-bold text-white lg:text-4xl lg:leading-normal">
              Our Pricing Plan Provides
            </h2>
            <p className="w-full text-center text-base leading-relaxed font-normal text-gray-200 lg:max-w-4xl">
              Our pricing plans are meticulously crafted to offer unparalleled
              value and flexibility, catering to thperse needs of every
              investor. With our comprehensive packages, you gain access
            </p>
          </div>
          <div className="grid w-full grid-cols-1 items-center justify-start gap-6 lg:grid-cols-3 xl:gap-8">
            <div className="group mx-auto flex h-full w-full items-start justify-center rounded-2xl border border-gray-800 bg-transparent p-8 transition-all duration-700 ease-in-out hover:border-transparent hover:bg-white sm:w-96 lg:w-full">
              <div className="container inline-flex w-full flex-col items-center justify-start gap-8">
                <div className="flex w-full flex-col items-center justify-start gap-8">
                  <div className="flex w-full flex-col items-center justify-start gap-8 border-b border-gray-800 pb-8 transition-all duration-700 ease-in-out group-hover:border-gray-100">
                    <div className="flex flex-col items-center justify-start gap-1.5">
                      <h3 className="font-manrope text-center text-2xl leading-9 font-medium text-white transition-all duration-700 ease-in-out group-hover:text-black">
                        Free
                      </h3>
                      <h6 className="text-center text-base leading-relaxed font-normal text-white transition-all duration-700 ease-in-out group-hover:text-black">
                        Individual Plan
                      </h6>
                    </div>
                    <div className="flex flex-col items-center justify-start gap-8">
                      <div className="inline-flex items-end justify-center">
                        <h2 className="font-manrope text-center text-6xl leading-[88px] font-bold text-white transition-all duration-700 ease-in-out group-hover:text-black">
                          $0
                        </h2>
                        <h3 className="font-manrope text-2xl leading-9 font-medium text-white transition-all duration-700 ease-in-out group-hover:text-black">
                          /Mo
                        </h3>
                      </div>
                    </div>
                  </div>
                  <h6 className="text-center text-base leading-relaxed font-medium text-white transition-all duration-700 ease-in-out group-hover:text-gray-700">
                    Try how it works-create your first 5 stories for free
                  </h6>
                </div>
                <button
                  id="cube"
                  className="flex w-full items-center justify-center rounded-xl border border-white px-5 py-2.5 text-white shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-200 ease-in-out group-hover:border-black group-hover:text-black"
                >
                  <span
                    id="text"
                    className="text px-2 text-base leading-relaxed font-semibold whitespace-nowrap transition-all duration-700 ease-in-out"
                  >
                    Purchase Plan
                  </span>
                </button>
              </div>
            </div>
            <div className="group mx-auto flex h-full w-full items-start justify-center rounded-2xl border border-gray-800 bg-transparent p-8 transition-all duration-700 ease-in-out hover:border-transparent hover:bg-white sm:w-96 lg:w-full">
              <div className="container inline-flex w-full flex-col items-center justify-start gap-8">
                <div className="flex w-full flex-col items-center justify-start gap-8">
                  <div className="flex w-full flex-col items-center justify-start gap-8 border-b border-gray-800 pb-8 transition-all duration-700 ease-in-out group-hover:border-gray-100">
                    <div className="flex flex-col items-center justify-start gap-1.5">
                      <h3 className="font-manrope text-center text-2xl leading-9 font-medium text-white transition-all duration-700 ease-in-out group-hover:text-black">
                        Popular
                      </h3>
                      <h6 className="text-center text-base leading-relaxed font-normal text-white transition-all duration-700 ease-in-out group-hover:text-black">
                        Business Plan
                      </h6>
                    </div>
                    <div className="flex flex-col items-center justify-start gap-8">
                      <div className="inline-flex items-end justify-center">
                        <h2 className="font-manrope text-center text-6xl leading-[88px] font-bold text-white transition-all duration-700 ease-in-out group-hover:text-black">
                          $100
                        </h2>
                        <h3 className="font-manrope text-2xl leading-9 font-medium text-white transition-all duration-700 ease-in-out group-hover:text-black">
                          /Mo
                        </h3>
                      </div>
                    </div>
                  </div>
                  <h6 className="text-center text-base leading-relaxed font-medium text-white transition-all duration-700 ease-in-out group-hover:text-gray-700">
                    Receive 25 fascinating stories about your Chiki every month
                  </h6>
                </div>
                <button
                  id="cube"
                  className="flex w-full items-center justify-center rounded-xl border border-white px-5 py-2.5 text-white shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-200 ease-in-out group-hover:border-black group-hover:text-black"
                >
                  <span
                    id="text"
                    className="text px-2 text-base leading-relaxed font-semibold whitespace-nowrap transition-all duration-700 ease-in-out"
                  >
                    Purchase Plan
                  </span>
                </button>
              </div>
            </div>
            <div className="group mx-auto flex h-full w-full items-start justify-center rounded-2xl border border-gray-800 bg-transparent p-8 transition-all duration-700 ease-in-out hover:border-transparent hover:bg-white sm:w-96 lg:w-full">
              <div className="container inline-flex w-full flex-col items-center justify-start gap-8">
                <div className="flex w-full flex-col items-center justify-start gap-8">
                  <div className="flex w-full flex-col items-center justify-start gap-8 border-b border-gray-800 pb-8 transition-all duration-700 ease-in-out group-hover:border-gray-100">
                    <div className="flex flex-col items-center justify-start gap-1.5">
                      <h3 className="font-manrope text-center text-2xl leading-9 font-medium text-white transition-all duration-700 ease-in-out group-hover:text-black">
                        Advanced
                      </h3>
                      <h6 className="text-center text-base leading-relaxed font-normal text-white transition-all duration-700 ease-in-out group-hover:text-black">
                        Enterprise Plan
                      </h6>
                    </div>
                    <div className="flex flex-col items-center justify-start gap-8">
                      <div className="inline-flex items-end justify-center">
                        <h2 className="font-manrope text-center text-6xl leading-[88px] font-bold text-white transition-all duration-700 ease-in-out group-hover:text-black">
                          $200
                        </h2>
                        <h3 className="font-manrope text-2xl leading-9 font-medium text-white transition-all duration-700 ease-in-out group-hover:text-black">
                          /Mo
                        </h3>
                      </div>
                    </div>
                  </div>
                  <h6 className="text-center text-base leading-relaxed font-medium text-white transition-all duration-700 ease-in-out group-hover:text-gray-700">
                    Get a new magical story about your child for just
                  </h6>
                </div>
                <button
                  id="cube"
                  className="flex w-full items-center justify-center rounded-xl border border-white px-5 py-2.5 text-white shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-200 ease-in-out group-hover:border-black group-hover:text-black"
                >
                  <span
                    id="text"
                    className="text px-2 text-base leading-relaxed font-semibold whitespace-nowrap transition-all duration-700 ease-in-out"
                  >
                    Purchase Plan
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}