export function FeatureBlockCardsWithGraphImages() {
  return (
    <section className="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-center justify-start gap-10 lg:gap-12">
          <h2 className="font-manrope w-full text-center text-4xl leading-normal font-bold text-gray-900 lg:max-w-3xl">
            Harness Powerful Features to Skyrocket Your Productivity
          </h2>
          <div className="flex w-full flex-col items-start justify-start gap-8">
            <div className="grid w-full grid-cols-1 items-center justify-start gap-5 md:grid-cols-2 xl:gap-8">
              <div className="inline-flex h-full w-full flex-col items-center justify-start rounded-xl border border-gray-100 bg-gray-50 p-6 transition-all duration-700 ease-in-out hover:border-gray-300 lg:p-8 xl:p-10">
                <div className="flex flex-col items-center justify-start gap-4">
                  <a href="#">
                    <img
                      className="rounded-2xl object-cover"
                      src="https://pagedone.io/asset/uploads/1720515559.png"
                      alt="Manage Your Workforce Feature Graph image"
                    />
                  </a>
                  <div className="flex flex-col items-center justify-start gap-2">
                    <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                      Manage Your Workforce
                    </h5>
                    <p className="text-center text-sm leading-normal font-normal text-gray-500">
                      Streamline your employee management process with our
                      comprehensive solution. From tracking attendance.
                    </p>
                  </div>
                </div>
              </div>
              <div className="inline-flex h-full w-full flex-col items-center justify-start rounded-xl border border-gray-100 bg-gray-50 p-6 transition-all duration-700 ease-in-out hover:border-gray-300 lg:p-8 xl:p-10">
                <div className="flex flex-col items-center justify-start gap-4">
                  <a href="#">
                    <img
                      className="rounded-2xl object-cover"
                      src="https://pagedone.io/asset/uploads/1720515612.png"
                      alt="Optimize Your Team's Output Graph image"
                    />
                  </a>
                  <div className="flex flex-col items-center justify-start gap-2">
                    <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                      Optimize Your Team's Output
                    </h5>
                    <p className="w-full text-center text-sm leading-normal font-normal text-gray-500 lg:max-w-md">
                      Maximize productivity by evaluating and improving your
                      team's performance.
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div className="grid w-full grid-cols-1 items-center justify-start gap-5 md:grid-cols-3 xl:gap-8">
              <div className="flex h-full w-full items-start justify-start rounded-xl border border-transparent bg-gray-50 p-4 transition-all duration-700 ease-in-out hover:border-gray-300 lg:p-8 xl:p-10">
                <div className="inline-flex w-full flex-col items-start justify-start gap-4">
                  <a className="w-full">
                    <img
                      className="mx-auto rounded-2xl object-cover"
                      src="https://pagedone.io/asset/uploads/1720515649.png"
                      alt="Attendance Tracker Graph image"
                    />
                  </a>
                  <div className="flex w-full flex-col items-center justify-start gap-2">
                    <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                      Attendance Tracker
                    </h5>
                    <p className="text-center text-sm leading-normal font-normal text-gray-500">
                      Track attendance in real-time, generate insightful
                      reports, and streamline.
                    </p>
                  </div>
                </div>
              </div>
              <div className="flex h-full w-full items-start justify-start rounded-xl border border-transparent bg-gray-50 p-4 transition-all duration-700 ease-in-out hover:border-gray-300 lg:p-8 xl:p-10">
                <div className="inline-flex w-full flex-col items-start justify-start gap-4">
                  <a className="w-full">
                    <img
                      className="mx-auto rounded-2xl object-cover"
                      src="https://pagedone.io/asset/uploads/1720515688.png"
                      alt="Emaployee Salary Trackers Graph image"
                    />
                  </a>
                  <div className="flex w-full flex-col items-center justify-start gap-2">
                    <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                      Emaployee Salary Trackers
                    </h5>
                    <p className="text-center text-sm leading-normal font-normal text-gray-500">
                      Our Employee Salary Tracker is a comprehensive tool
                      designed.
                    </p>
                  </div>
                </div>
              </div>
              <div className="flex h-full w-full items-start justify-start rounded-xl border border-transparent bg-gray-50 p-4 transition-all duration-700 ease-in-out hover:border-gray-300 lg:p-8 xl:p-10">
                <div className="inline-flex w-full flex-col items-start justify-start gap-4">
                  <a className="w-full">
                    <img
                      className="mx-auto rounded-2xl object-cover"
                      src="https://pagedone.io/asset/uploads/1720515733.png"
                      alt="Company Cash Flow Graph image"
                    />
                  </a>
                  <div className="flex w-full flex-col items-center justify-start gap-2">
                    <h5 className="text-center text-lg leading-relaxed font-medium text-gray-900">
                      Company Cash Flow
                    </h5>
                    <p className="text-center text-sm leading-normal font-normal text-gray-500">
                      Managing cash flow is essential for any company's
                      financial health, and our Company{" "}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}