export function ArrowSlideButton() {
  return (
    <div className="bg-[#FAFAF8] p-12 grid place-items-center">
      <button
        type="button"
        className="group relative overflow-hidden inline-flex items-center gap-3 px-6 py-3 bg-[#111111] text-[#FAFAF8] text-[14px] font-medium rounded-md"
      >
        <span className="absolute inset-0 -translate-x-full group-hover:translate-x-0 transition-transform duration-500 bg-[#2A3D2F]" />
        <span className="relative flex items-center gap-3">
          <span
            aria-hidden
            className="-translate-x-3 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300"
          >
            →
          </span>
          Open the studio
        </span>
      </button>
    </div>
  );
}
Arrow Slide Button
