import React from 'react'

const Home = () => {
  return (
    <>

               <div className="flex mt-5 md:mt-1 justify-center lg:mt-[-4rem]">
        <div className="flex items-end gap-2 sm:justify-center flex-wrap sm:gap-5">
          <div className="lg:border-r-2 border-[#CCCCCC] sm:pr-5">
            <div
              style={{ boxShadow: "rgba(149, 157, 165, 0.2) 0px 8px 24px" }}
              className="bg-[#C1272D] px-4 py-2 rounded-3xl "
            >
              <div className="flex justify-end">
                <img src="/eye-icon.png" alt="" />
              </div>
              <p className="aileron-semibold text-[1.3rem] text-white">
                Annonces en  ligne
                {/* Total adverts across <br /> website */}
              </p>
              <p className="aileron-heavy text-[3.3rem] text-white leading-none">
                0
                {/* 7 */}
              </p>
            </div>
          </div>
          <div className="lg:w-[232px]">
            <div
              style={{ boxShadow: "rgba(149, 157, 165, 0.2) 0px 8px 24px" }}
              className="bg-[#009245] px-4 py-2 rounded-3xl"
            >
              <div className="flex items-center gap-5 justify-between">
                <div>
                  <p className="aileron-semibold text-[1rem] text-white">
                     Impressions totales
                    {/* Total impressions */}
                  </p>
                  <p className="aileron-heavy text-[1.9rem] text-white leading-none ">
                    0
                    {/* 1098 */}
                  </p>
                </div>
                <div>
                  {" "}
                  <img src="/eye-icon.png" alt="" />
                </div>
              </div>
            </div>
          </div>
          <div
            style={{ boxShadow: "rgba(149, 157, 165, 0.2) 0px 8px 24px" }}
            className="bg-[#F15A24] px-6 py-2 sm:px-4 rounded-3xl lg:w-[232px]"
          >
            <div className="flex items-center justify-between gap-[4rem]">
              <div>
                <p className="aileron-semibold text-[1rem] text-white">
                  Clics totaux
                  {/* Total clicks */}
                </p>
                <p className="aileron-heavy text-[1.9rem] text-white leading-none ">
                  0
                  {/* 60 */}
                </p>
              </div>
              <div>
                {" "}
                <img src="/click-icon.png" alt="" />
              </div>
            </div>
          </div>
          <div
            style={{ boxShadow: "rgba(149, 157, 165, 0.2) 0px 8px 24px" }}
            className="bg-[#0071bc] px-4 py-2 rounded-3xl lg:w-[242px]"
          >
            <div className="flex items-center justify-between gap-1">
              <div>
                <p className="aileron-semibold text-[1rem] text-white">
                  Taux de clics
                  {/* Click through rate CTR */}
                </p>
                <p className="aileron-heavy text-[1.9rem] text-white leading-none ">
                  0
                  {/* 6,5 */}
                </p>
              </div>
              <div>
                {" "}
                <img src="/percentage-icon.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div> 
    </>
  )
}

export default Home
