export function CreativeAppMockupWithFeatures() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-4 lg:px-5 xl:px-8">
        <div className="mb-16 text-center">
          <span className="mb-6 block text-center text-sm font-medium text-gray-500">
            OUR 500+ STRATEGY OPTIONS
          </span>
          <h2 className="mx-auto max-w-lg text-center text-4xl leading-[3.25rem] font-bold text-gray-900">
            We have helpful resources to build best portfolio
          </h2>
        </div>
        <div className="flex flex-col items-center justify-center gap-20 lg:flex-row lg:justify-between lg:gap-2">
          <div className="w-full lg:max-w-lg">
            <div className="mx-auto grid max-w-md grid-cols-1 gap-8 md:max-w-xl lg:max-w-full lg:gap-11">
              <div className="flex flex-col justify-center gap-4 lg:flex-row lg:justify-start lg:gap-6">
                <div className="relative flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-full bg-sky-50 xl:h-20 xl:w-20">
                  {/* SVG removed */}
                </div>
                <div className="block max-w-full lg:max-w-sm xl:max-w-md">
                  <h4 className="mb-2 text-xl font-medium text-gray-900">
                    Specific Tools
                  </h4>
                  <p className="text-sm leading-6 font-normal text-gray-500">
                    Act quickly and effectively thanks to ready made tools the
                    key tools and methods of the lean management concept{" "}
                  </p>
                </div>
              </div>
              <div className="flex flex-col justify-center gap-4 lg:flex-row lg:justify-start lg:gap-6">
                <div className="relative flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-full bg-indigo-100 xl:h-20 xl:w-20">
                  {/* SVG removed */}
                </div>
                <div className="block max-w-full lg:max-w-sm xl:max-w-md">
                  <h4 className="mb-2 text-xl font-medium text-gray-900">
                    Practical Knowledge
                  </h4>
                  <p className="text-sm leading-6 font-normal text-gray-500">
                    Applying knowledge in practice will translate into real
                    benefits a process approach and creating{" "}
                  </p>
                </div>
              </div>
              <div className="flex flex-col justify-center gap-4 lg:flex-row lg:justify-start lg:gap-6">
                <div className="relative flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-full bg-pink-100 xl:h-20 xl:w-20">
                  {/* SVG removed */}
                </div>
                <div className="block max-w-full lg:max-w-sm xl:max-w-md">
                  <h4 className="mb-2 text-xl font-medium text-gray-900">
                    Exchange of Experiences
                  </h4>
                  <p className="text-sm leading-6 font-normal text-gray-500">
                    Join the real specialists community become a certified
                    auditor and gain practical knowledge{" "}
                  </p>
                </div>
              </div>
              <div className="flex flex-col justify-center gap-4 lg:flex-row lg:justify-start lg:gap-6">
                <div className="relative flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-full bg-orange-100 xl:h-20 xl:w-20">
                  {/* SVG removed */}
                </div>
                <div className="block max-w-full lg:max-w-sm xl:max-w-md">
                  <h4 className="mb-2 text-xl font-medium text-gray-900">
                    Implementation Examples{" "}
                  </h4>
                  <p className="text-sm leading-6 font-normal text-gray-500">
                    Real examples will accelerate successful implementation we
                    are passionate about good and smart work{" "}
                  </p>
                </div>
              </div>
              <div className="flex flex-col justify-center gap-4 lg:flex-row lg:justify-start lg:gap-6">
                <div className="relative flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-full bg-green-100 xl:h-20 xl:w-20">
                  {/* SVG removed */}
                </div>
                <div className="block max-w-full lg:max-w-sm xl:max-w-md">
                  <h4 className="mb-2 text-xl font-medium text-gray-900">
                    Lifetime Access{" "}
                  </h4>
                  <p className="text-sm leading-6 font-normal text-gray-500">
                    We do this for everyone who wants to be better tomorrow than
                    it is today
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div className="after:content-[' '] relative flex w-full justify-center after:absolute after:inset-0 after:-z-10 after:m-auto after:h-[400px] after:rounded-2xl after:bg-indigo-100 md:after:w-[490px] lg:max-w-lg">
            <img
              src="https://pagedone.io/asset/uploads/1696229127.png"
              alt="portfolio image"
              className="rounded-3xl object-cover"
            />
          </div>
        </div>
      </div>
    </section>
  )
}