export default function Hero() {
  return (
    <div className="bg-white ">
      <div className=" container mx-auto w-full py-10 md:px-5">
        <div className=" flex flex-auto justify-around">
          <div className=" flex items-center">
            <svg
              width="116.59"
              height="34.97"
              x="227.841"
              y="282.185"
              data-layer-type="text"
              viewBox="1.44 18.71 116.59 34.97"
              className="w-28"
              color="#5D515D"
            >
              <path
                fill="#5D515D"
                d="M34.51 19.41q1.28.25 1.91.86.64.62.64 1.44 0 1.35-.76 1.97-.76.62-2.4.49-3.69-.28-5.77-.39-2.07-.1-5.43-.14-1.52 7.55-2.8 15.18-.45 2.79-.94 6.47-.49 3.67-.66 5.93-.08 1.19-.98 1.82-.9.64-2.18.64-1.35 0-2.09-.66-.74-.65-.74-1.72 0-.98.31-3.26t.72-4.78q.45-2.51.7-4.35.45-3.12 1.02-6.2.58-3.08 1.15-5.83.12-.61.29-1.41.16-.8.37-1.79-4.02.12-6.32.66-2.3.53-3.27 1.49-.96.97-.96 2.49 0 1.39.82 2.67.17.28.17.61 0 .78-.93 1.46-.92.68-1.91.68-.69 0-1.15-.42-.82-.69-1.35-1.99-.53-1.29-.53-2.93 0-3.49 2.27-5.6 2.28-2.12 6.94-3.1 4.66-.99 11.96-.99 4.52 0 7.21.17 2.68.16 4.69.53Zm-2.25 34.27q-1.56 0-2.2-1.64-.63-1.64-.63-5.25 0-5.34 1.51-10.14.37-1.19 1.22-1.75.84-.55 2.35-.55.83 0 1.15.21.33.2.33.78 0 .65-.61 2.95-.41 1.64-.66 2.87-.25 1.23-.41 3.04 1.35-3.53 3.04-5.75 1.68-2.21 3.3-3.16 1.62-.94 2.98-.94 2.66 0 2.66 2.67 0 .53-.37 2.58-.32 1.65-.32 2.06 0 1.43 1.02 1.43 1.15 0 2.96-1.8.53-.54 1.1-.54.54 0 .85.48.3.47.3 1.25 0 1.52-.82 2.38-1.15 1.19-2.68 2.03-1.54.84-3.27.84-2.17 0-3.3-1.11t-1.13-2.99q0-.62.12-1.24.09-.82.09-1.1 0-.66-.46-.66-.61 0-1.62 1.37-1 1.38-1.99 3.64-.98 2.25-1.6 4.76-.45 1.93-1.04 2.6-.6.68-1.87.68Zm34.06-9.36q.53 0 .84.5.31.49.31 1.35 0 1.64-.78 2.54-1.52 1.85-4.29 3.41t-5.93 1.56q-4.31 0-6.69-2.34-2.38-2.34-2.38-6.4 0-2.83 1.19-5.27 1.19-2.45 3.31-3.88 2.11-1.44 4.78-1.44 2.38 0 3.81 1.42 1.44 1.41 1.44 3.83 0 2.84-2.03 4.87-2.03 2.03-6.88 3.22 1.03 1.89 3.9 1.89 1.85 0 4.21-1.3 2.36-1.29 4.08-3.38.5-.58 1.11-.58Zm-10.34-5.95q-1.52 0-2.57 1.77-1.04 1.76-1.04 4.27v.08q2.42-.58 3.81-1.73 1.4-1.15 1.4-2.66 0-.78-.43-1.26-.43-.47-1.17-.47Zm31.85 5.95q.53 0 .84.5.31.49.31 1.35 0 1.64-.78 2.54-1.81 2.14-3.96 3.55-2.16 1.42-4.87 1.42-2.09 0-3.71-.78t-2.57-2.22q-2.34 2.96-5.54 2.96-2.25 0-3.57-1.31-1.31-1.32-1.31-3.49 0-2.05.94-3.33.95-1.27 2.67-1.27 1.48 0 1.48 1.11 0 .29-.08 1.03-.13 1.47-.13 1.68 0 1.23 1.07 1.23.78 0 1.5-.92.72-.93 1.19-2.53.47-1.6.47-3.53 0-1.47-.37-2.48t-.9-1.01q-.45 0-.66.23-.2.23-.41.76-.25.66-.66 1.05-.41.39-1.43.39-.91 0-1.44-.64-.53-.64-.53-1.95 0-2.09 1.27-3.28t3.28-1.19q1.73 0 3.12.84 1.4.84 2.14 2.44 1.23-1.64 2.77-2.46 1.54-.82 3.01-.82 1.6 0 2.44.74.85.73.85 2.38 0 1.84-.7 2.89t-1.68 1.05q-.91 0-1.24-.37-.32-.37-.49-1.07-.08-.49-.24-.74-.17-.25-.58-.25-.49 0-1.05.93-.55.92-.94 2.44-.39 1.52-.39 3.16 0 1.93.92 2.98.93 1.04 2.53 1.04 1.6 0 3.01-1.09 1.42-1.08 3.31-3.38.49-.58 1.11-.58Zm2.01 9.36q-1.85 0-3.02-1.7-1.17-1.71-1.17-4.25 0-3.08.41-5.64.41-2.57 1.36-5.44.41-1.23 1.15-1.77.73-.53 2.33-.53.91 0 1.26.29t.35.86q0 .33-.46 2.22-.41 1.51-.65 2.75-.82 4.31-.82 5.74 0 .86.2 1.21.21.35.66.35.61 0 1.54-1.23.92-1.23 1.97-3.73 1.04-2.51 2.03-6.16.33-1.23 1-1.77.68-.53 2.04-.53.94 0 1.31.23.37.22.37.84 0 1.02-1.03 5.62-1.15 5.25-1.15 6.48 0 .78.33 1.22.33.43.86.43.82 0 1.95-1.01 1.13-1 3.02-3.26.49-.58 1.11-.58.53 0 .84.5.31.49.31 1.35 0 1.64-.78 2.54-1.77 2.18-3.8 3.58-2.03 1.39-4.62 1.39-1.97 0-2.89-1.52-.92-1.52-.92-4.27-.7 2.79-2.1 4.29-1.39 1.5-2.99 1.5Zm20.15-22.04q-1.73 0-2.59-.8-.86-.8-.86-2.23 0-1.44 1.13-2.41 1.13-.96 2.81-.96 1.52 0 2.46.74.95.74.95 2.09 0 1.64-1.07 2.61-1.07.96-2.83.96Zm-.33 22.04q-2.67 0-3.88-1.89-1.21-1.88-1.21-5 0-1.85.47-4.74.47-2.9 1.21-5.4.37-1.31.99-1.81.61-.49 1.97-.49 2.09 0 2.09 1.4 0 1.02-.78 4.76-.98 4.51-.98 6.11 0 1.23.33 1.89.32.66 1.1.66.74 0 1.85-1.03t2.95-3.24q.5-.58 1.11-.58.54 0 .84.5.31.49.31 1.35 0 1.64-.78 2.54-4.06 4.97-7.59 4.97Z"
                data-horizontal-grow="left"
                data-vertical-center="false"
              ></path>
            </svg>
          </div>
          <div className=" hidden flex-grow  items-center justify-center gap-5 text-xs font-bold text-[#5D5C57] md:flex ">
            {["Features", "Pricing", "About", "Blog", "Contact"].map(
              (item, index) => {
                return (
                  <span className=" cursor-pointer hover:opacity-75">
                    {item}
                  </span>
                );
              },
            )}
          </div>
          <button className="  flex items-center gap-1 rounded-xl bg-[#5D515D] px-10 py-4 text-sm text-white transition-all duration-300 ease-in-out hover:opacity-90 active:opacity-75 active:bg-blend-darken  ">
            Get started <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="w-3 h-3">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
            </svg>

          </button>
        </div>
        <div className="grid px-3  md:grid-cols-2 md:px-0">
          <div className="py-28 ">
            <div className=" text-5xl  font-bold text-[#35332E] md:text-7xl">
              Manage all contacts across platforms
            </div>
            <div className=" mt-10 text-[#979895]">
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s, when an unknown printer took a galley.
            </div>
            <button className=" flex items-center gap-1 mt-10 rounded-xl bg-[#5D515D] px-10 py-4 text-sm text-white transition-all duration-300 ease-in-out hover:opacity-90 active:opacity-75 active:bg-blend-darken  ">
              Get started <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="w-3 h-3">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
              </svg>

            </button>
          </div>
          <div className=" hidden justify-end md:flex">
            <img
              src="https://res.cloudinary.com/dtnflhf3t/image/upload/v1691363850/trexui/342_q8qica.png"
              className=" w-[80%] object-contain"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  );
}