import React from "react";

function SolidBackgrondIcon() {
  return (
    <>
      {/* Icon Blocks */}
      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-2">
          {/* Icon Block */}
          <a
            className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
            href="#"
          >
            <div className="flex justify-center items-center size-12 bg-primary rounded-xl">
              <svg
                className="flex-shrink-0 size-6 text-white"
                xmlns="http://www.w3.org/2000/svg"
                width={24}
                height={24}
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={2}
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <rect width={10} height={14} x={3} y={8} rx={2} />
                <path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4" />
                <path d="M8 18h.01" />
              </svg>
            </div>
            <div className="mt-5">
              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
                Stripe Payments
              </h3>
              <p className="mt-1 text-base-content ">
                We have built stripe payments for 1 off and reoccuring payments
              </p>
            </div>
          </a>
          {/* End Icon Block */}
          {/* Icon Block */}
          <a
            className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
            href="#"
          >
            <div className="flex justify-center items-center size-12 bg-primary rounded-xl">
              <svg
                className="flex-shrink-0 size-6 text-white"
                xmlns="http://www.w3.org/2000/svg"
                width={24}
                height={24}
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={2}
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M20 7h-9" />
                <path d="M14 17H5" />
                <circle cx={17} cy={17} r={3} />
                <circle cx={7} cy={7} r={3} />
              </svg>
            </div>
            <div className="mt-5">
              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
                Theming
              </h3>
              <p className="mt-1 text-base-content ">
                All our components include intuative theming with a js utility
                class that uses your themes colors programmatically
              </p>
            </div>
          </a>
          {/* End Icon Block */}
          {/* Icon Block */}
          <a
            className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
            href="#"
          >
            <div className="flex justify-center items-center size-12 bg-primary rounded-xl">
              <svg
                className="flex-shrink-0 size-6 text-white"
                xmlns="http://www.w3.org/2000/svg"
                width={24}
                height={24}
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={2}
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
              </svg>
            </div>
            <div className="mt-5">
              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
                Documentation
              </h3>
              <p className="mt-1 text-base-content ">
                Every component and plugin is well documented
              </p>
            </div>
          </a>
          {/* End Icon Block */}
        </div>
      </div>
      {/* End Icon Blocks */}
    </>
  );
}

export default SolidBackgrondIcon;