import React from "react";

const PricingHero = () => {
  return (
    <div className="min-h-[100vh]">
      <div className="flex justify-center lg:pt-[150px] xs:pt-[100px] xs:ml-5 lg:ml-0">
        <div className=" ml-1 ">
          <h1
            className={`font-black text-white lg:text-[100px] sm:text-[70px] xs:text-[60px] text-[40px] mb-0  `}
          >
            Pricing
          </h1>
        </div>
      </div>
      <div className="grid lg:flex lg:justify-center xs:px-10 lg:px-[120px] mt-20">
        <div className="p-5 text-center lg:mx-10">
          <p className="mb-0  text-white text-[30px] font-thin bg-primary-300 w-fit mx-auto px-4 rounded-full">
            per Month
          </p>

          <p className="mb-0 text-[100px] font-bold text-white mt-10">46 €</p>
        </div>

        <div className="p-5 text-center lg:mx-10">
          <p className="mb-0  text-white text-[30px] font-thin bg-primary-300 w-fit mx-auto px-4 rounded-full">
            3 Months
          </p>
          <div className="flex justify-center">
            <del className="mb-0  text-[30px]  text-white  absolute mt-[15px]">
              138 €
            </del>
          </div>
          <p className="mb-0 text-[100px] font-bold text-white mt-10">110 €</p>
        </div>

        <div className="p-5 text-center lg:mx-10">
          <p className="mb-0  text-white text-[30px] font-thin bg-primary-300 w-fit mx-auto px-4 rounded-full">
            6 Months
          </p>
          <div className="flex justify-center">
            <del className="mb-0  text-[30px]  text-white  absolute mt-[15px]">
              552 €
            </del>
          </div>
          <p className="mb-0 text-[100px] font-bold text-white mt-10">390 €</p>
        </div>
      </div>
    </div>
  );
};

export default PricingHero;