export function HorizontalHowItWorksSteps() {
  return (
    <section className="relative py-24">
      <div className="mx-auto w-full max-w-7xl px-4 md:px-5 lg:px-5">
        <div className="inline-flex w-full flex-col items-start justify-start gap-12">
          <div className="flex w-full flex-col items-center justify-start gap-3">
            <h2 className="font-manrope w-full text-center text-4xl leading-normal font-bold text-gray-900">
              Empowering Your Business for Effortless Success
            </h2>
            <p className="max-w-4xl text-center text-base leading-relaxed font-normal text-gray-400">
              Streamlining your operations, enhancing efficiency, and maximizing
              productivity - we're dedicated to making every facet of your
              business effortlessly manageable.
            </p>
          </div>
          <div className="w-full flex-col items-center justify-center">
            <ol className="flex w-full flex-col items-start justify-between gap-8 sm:flex-row sm:gap-0">
              <li className="group relative mr-0 flex w-full justify-start after:absolute after:top-6 after:left-14 after:inline-block after:h-0.5 after:w-[-webkit-fill-available] after:border-dashed after:content-[''] sm:mr-4 sm:after:border sm:after:bg-indigo-400 md:mr-8 md:after:top-8 md:after:left-20">
                <div className="z-10 block flex w-full flex-col items-center justify-start gap-4 sm:items-start md:gap-8">
                  <div className="mr-0 inline-flex flex-col items-center justify-center gap-2.5 rounded-full bg-indigo-100 px-6 py-2 transition-all duration-700 ease-in-out group-hover:bg-indigo-200 sm:mr-2 sm:px-4 sm:py-0.5 md:mr-6 md:px-6 md:py-2">
                    <span className="font-manrope text-center text-3xl leading-normal font-bold text-indigo-500">
                      1
                    </span>
                  </div>
                  <h4 className="text-xl leading-8 font-medium text-gray-900 sm:text-base sm:font-normal md:text-xl md:font-medium">
                    A complete UI kit for building your business
                  </h4>
                </div>
              </li>
              <li className="group relative mr-0 flex w-full justify-start after:absolute after:top-6 after:left-14 after:inline-block after:h-0.5 after:w-[-webkit-fill-available] after:border-dashed after:content-[''] sm:mr-4 sm:after:border sm:after:bg-indigo-400 md:mr-8 md:after:top-8 md:after:left-20">
                <div className="z-10 block flex w-full flex-col items-center justify-start gap-4 sm:items-start md:gap-8">
                  <div className="mr-0 inline-flex flex-col items-center justify-center gap-2.5 rounded-full bg-indigo-100 px-6 py-2 transition-all duration-700 ease-in-out group-hover:bg-indigo-200 sm:mr-2 sm:px-4 sm:py-0.5 md:mr-6 md:px-6 md:py-2">
                    <span className="font-manrope text-center text-3xl leading-normal font-bold text-indigo-500">
                      2
                    </span>
                  </div>
                  <h4 className="text-xl leading-8 font-medium text-gray-900 sm:text-base sm:font-normal md:text-xl md:font-medium">
                    Risus nulla nunc ultrices volutpat
                  </h4>
                </div>
              </li>
              <li className="group relative mr-0 flex w-full justify-start after:absolute after:top-6 after:left-14 after:inline-block after:h-0.5 after:w-[-webkit-fill-available] after:border-dashed after:content-[''] sm:mr-4 sm:after:border sm:after:bg-indigo-400 md:mr-8 md:after:top-8 md:after:left-20">
                <div className="z-10 block flex w-full flex-col items-center justify-start gap-4 sm:items-start md:gap-8">
                  <div className="mr-0 inline-flex flex-col items-center justify-center gap-2.5 rounded-full bg-indigo-100 px-6 py-2 transition-all duration-700 ease-in-out group-hover:bg-indigo-200 sm:mr-2 sm:px-4 sm:py-0.5 md:mr-6 md:px-6 md:py-2">
                    <span className="font-manrope text-center text-3xl leading-normal font-bold text-indigo-500">
                      3
                    </span>
                  </div>
                  <h4 className="text-xl leading-8 font-medium text-gray-900 sm:text-base sm:font-normal md:text-xl md:font-medium">
                    Rhoncus donec lectus quis enim nibh blandit{" "}
                  </h4>
                </div>
              </li>
              <li className="group relative mr-0 flex w-full justify-start after:absolute after:top-6 after:left-14 after:inline-block after:h-0.5 after:w-[-webkit-fill-available] after:border-dashed after:content-[''] sm:mr-4 sm:after:border sm:after:bg-indigo-400 md:mr-8 md:after:top-8 md:after:left-20">
                <div className="z-10 block flex w-full flex-col items-center justify-start gap-4 sm:items-start md:gap-8">
                  <div className="mr-0 inline-flex flex-col items-center justify-center gap-2.5 rounded-full bg-indigo-100 px-6 py-2 transition-all duration-700 ease-in-out group-hover:bg-indigo-200 sm:mr-2 sm:px-4 sm:py-0.5 md:mr-6 md:px-6 md:py-2">
                    <span className="font-manrope text-center text-3xl leading-normal font-bold text-indigo-500">
                      4
                    </span>
                  </div>
                  <h4 className="text-xl leading-8 font-medium text-gray-900 sm:text-base sm:font-normal md:text-xl md:font-medium">
                    Egestas hac tellus pretium faucibus.
                  </h4>
                </div>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </section>
  )
}