export function HowItWorksInDarkMode() {
  return (
    <section className="relative bg-slate-900 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-white">
              How It’s Work
            </h2>
            <p className="max-w-4xl text-center text-base leading-relaxed font-normal text-gray-200">
              Delving into the intricacies of everything from technology and
              nature to societal structures, this book offers readers a
              comprehensive understanding of how things function.
            </p>
          </div>
          <div className="grid w-full grid-cols-1 flex-col items-start justify-start gap-8 lg:grid-cols-2">
            <div className="group inline-flex h-full w-full flex-col items-start justify-start rounded-xl bg-slate-800 p-5 transition-all duration-700 ease-in-out hover:bg-slate-700">
              <div className="flex flex-col items-start justify-start gap-5">
                <div className="inline-flex items-center justify-start gap-5">
                  <div className="flex h-[50px] w-[50px] items-center justify-center gap-1 rounded-full border border-teal-200 px-3 py-1.5 transition-all duration-700 ease-in-out group-hover:border-teal-400">
                    <span className="font-manrope text-center text-2xl leading-9 font-semibold text-white">
                      1
                    </span>
                  </div>
                  <h3 className="font-manrope text-2xl leading-9 font-bold text-white">
                    Create your account
                  </h3>
                </div>
                <p className="text-base leading-relaxed font-normal text-gray-400">
                  Create Your Account" is your step-by-step guide to
                  establishing a personalized online presence tailored to your
                  needs. This comprehensive handbook walks you through the
                  process of setting.
                </p>
              </div>
            </div>
            <div className="group inline-flex h-full w-full flex-col items-start justify-start rounded-xl bg-slate-800 p-5 transition-all duration-700 ease-in-out hover:bg-slate-700">
              <div className="flex flex-col items-start justify-start gap-5">
                <div className="inline-flex items-center justify-start gap-5">
                  <div className="flex h-[50px] w-[50px] items-center justify-center gap-1 rounded-full border border-teal-200 px-3 py-1.5 transition-all duration-700 ease-in-out group-hover:border-teal-400">
                    <span className="font-manrope text-center text-2xl leading-9 font-semibold text-white">
                      2
                    </span>
                  </div>
                  <h3 className="font-manrope text-2xl leading-9 font-bold text-white">
                    Select an upcoming mission
                  </h3>
                </div>
                <p className="text-base leading-relaxed font-normal text-gray-400">
                  The Europa Clipper mission, planned by NASA, is set to explore
                  Jupiter's moon Europa, which is considered one of the most
                  promising places to search for signs of life beyond Earth.
                </p>
              </div>
            </div>
            <div className="group inline-flex h-full w-full flex-col items-start justify-start rounded-xl bg-slate-800 p-5 transition-all duration-700 ease-in-out hover:bg-slate-700">
              <div className="flex flex-col items-start justify-start gap-5">
                <div className="inline-flex items-center justify-start gap-5">
                  <div className="flex h-[50px] w-[50px] items-center justify-center gap-1 rounded-full border border-teal-200 px-3 py-1.5 transition-all duration-700 ease-in-out group-hover:border-teal-400">
                    <span className="font-manrope text-center text-2xl leading-9 font-semibold text-white">
                      3
                    </span>
                  </div>
                  <h3 className="font-manrope text-2xl leading-9 font-bold text-white">
                    Purchase your tickets
                  </h3>
                </div>
                <p className="text-base leading-relaxed font-normal text-gray-400">
                  {" "}
                  Are you looking to purchase tickets for a specific event, such
                  as a concert, a movie, a sports game, or perhaps a travel
                  ticket like a flight or a train journey?
                </p>
              </div>
            </div>
            <div className="group inline-flex h-full w-full flex-col items-start justify-start rounded-xl bg-slate-800 p-5 transition-all duration-700 ease-in-out hover:bg-slate-700">
              <div className="flex flex-col items-start justify-start gap-5">
                <div className="inline-flex items-center justify-start gap-5">
                  <div className="flex h-[50px] w-[50px] items-center justify-center gap-1 rounded-full border border-teal-200 px-3 py-1.5 transition-all duration-700 ease-in-out group-hover:border-teal-400">
                    <span className="font-manrope text-center text-2xl leading-9 font-semibold text-white">
                      4
                    </span>
                  </div>
                  <h3 className="font-manrope text-2xl leading-9 font-bold text-white">
                    Bookyour training retreat
                  </h3>
                </div>
                <p className="text-base leading-relaxed font-normal text-gray-400">
                  Determine what you hope to achieve from the retreat. Are you
                  looking to improve your physical fitness, learn new skills,
                  relax and recharge, or all of the above?
                </p>
              </div>
            </div>
            <div className="group inline-flex h-full w-full flex-col items-start justify-start rounded-xl bg-slate-800 p-5 transition-all duration-700 ease-in-out hover:bg-slate-700">
              <div className="flex flex-col items-start justify-start gap-5">
                <div className="inline-flex items-center justify-start gap-5">
                  <div className="flex h-[50px] w-[50px] items-center justify-center gap-1 rounded-full border border-teal-200 px-3 py-1.5 transition-all duration-700 ease-in-out group-hover:border-teal-400">
                    <span className="font-manrope text-center text-2xl leading-9 font-semibold text-white">
                      5
                    </span>
                  </div>
                  <h3 className="font-manrope text-2xl leading-9 font-bold text-white">
                    Complete your documents
                  </h3>
                </div>
                <p className="text-base leading-relaxed font-normal text-gray-400">
                  Collect all the information and materials required to complete
                  your documents. This may include personal details,
                  identification documents, references,
                </p>
              </div>
            </div>
            <div className="group inline-flex h-full w-full flex-col items-start justify-start rounded-xl bg-slate-800 p-5 transition-all duration-700 ease-in-out hover:bg-slate-700">
              <div className="flex flex-col items-start justify-start gap-5">
                <div className="inline-flex items-center justify-start gap-5">
                  <div className="flex h-[50px] w-[50px] items-center justify-center gap-1 rounded-full border border-teal-200 px-3 py-1.5 transition-all duration-700 ease-in-out group-hover:border-teal-400">
                    <span className="font-manrope text-center text-2xl leading-9 font-semibold text-white">
                      6
                    </span>
                  </div>
                  <h3 className="font-manrope text-2xl leading-9 font-bold text-white">
                    Liftoff
                  </h3>
                </div>
                <p className="text-base leading-relaxed font-normal text-gray-400">
                  Liftoff marks the thrilling beginning of a space mission,
                  where a rocket propels itself and its payload beyond the
                  Earth's atmosphere and into space. Here's a step-by-step
                  description of a typical liftoff:
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}