import React from "react";

const TopBanner = () => {
  return (
    <div className="h-12 bg-gradient-to-r from-[#96724f] to-[#AC8C6B] flex items-center text-white">
      <marquee
        behavior=""
        direction=""
        className="w-full flex items-center"
      >
        <div className="flex items-center space-x-2">
          <svg
            width="18"
            height="18"
            viewBox="0 0 18 18"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12.4999 1.66699L11.2499 2.91699L12.4999 4.16699L13.7499 2.91699L12.4999 1.66699ZM9.16658 2.50033C8.33325 7.50033 14.1666 8.33366 16.6666 5.00033L14.9999 3.75033C14.1666 5.00033 10.8333 6.66699 9.16658 2.50033ZM7.49992 5.83366C5.83325 5.83366 3.74992 7.08366 3.74992 7.08366L4.99992 9.16699C5.83325 8.33366 7.49992 7.91699 8.33325 8.33366C9.99992 9.16699 7.49992 10.8337 5.83325 10.0003V12.917C8.33325 11.667 9.99992 13.3337 9.16658 14.5837C6.66658 18.3337 2.49992 13.3337 2.49992 10.8337C0.833251 15.8337 4.99992 18.3337 7.49992 18.3337C9.99992 18.3337 11.6666 16.667 10.4166 12.5003H11.6666C10.4166 16.2503 14.9999 20.0003 17.4999 15.0003C18.3333 13.3337 18.3333 7.91699 14.1666 7.91699C10.8333 7.91699 11.6666 12.5003 8.74992 11.2503C11.6666 8.33366 9.99992 5.83366 7.49992 5.83366ZM15.8333 10.0003C18.3333 12.5003 12.4999 17.5003 12.4999 12.5003C12.4999 10.8337 14.1666 8.75033 15.8333 10.0003Z"
              fill="white"
            ></path>
          </svg>
          <span>Place your order by September 26th to receive your items in Navaratri</span>
        </div>
      </marquee>
    </div>
  );
};

export default TopBanner;