import React from "react";

const Dashboard = () => {
  return (
    <div className="bg-[var(--color-naviBlue)] relative  overflow-hidden px-4 md:px-0 ">
      <div className=" max-w-5xl mx-auto p-5 mt-4 flex items-center flex-col gap-4 justify-between w-full">
        <div className="flex md:mb-7 justify-center items-center flex-col gap-3">
          <h1 className="italic uppercase text-center font-extrabold text-base md:text-3xl ">
            easy, modern dashboard
          </h1>
          <p className="max-w-[350px] text-[#54657E] leading-7 text-cener font-medium text-sm md:text-lg 2xl:text-2xl">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et.
          </p>
          <button className="bg-[#4D4CFE] text-xs md:text-base transistion-all duration-300 hover:bg-[var(--color-hoverBlue)] md:mt-6 w-fit font-onest font-medium px-3 md:px-4 2xl:px-6 py-2.5 2xl:py-3">
            <span className="mr-1">Dashboard</span> &gt;
          </button>
        </div>
        <div className="flex relative flex-col items-center">
          <div className="absolute bottom-17 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[150px] md:w-[470px] h-[200px] md:h-[250px] bg-[var(--color-blue)] blur-3xl rounded-full opacity-50"></div>

          <img
            src="/images/affliate/dashboard.svg"
            className="z-20 -mb-10"
            alt=""
          />
        </div>
      </div>
    </div>
  );
};

export default Dashboard;
