Можно попробовать так

div {
  border-radius: 32px;
  height: 515px;
  max-width: 1228px;
  width: 100%;
  background: radial-gradient(circle at bottom left, 
    rgb(80, 71, 64), 
    rgb(92, 67, 89) 16.363%, 
    rgb(56, 43, 63) 42.194%, 
    rgb(23, 23, 23) 100%);
  /* Градиент начинается от нижнего левого угла и идет к правому верхнему углу */
}

radial-gradient позволяет указать начальную точку градиента. В вашем случае circle at bottom left, чтобы установить начало в нижнем левом углу

Я бы предложила небольшой рефакторинг, чтоб сделать код более читаемым

// объект с путями к изображениям для нормального и hover состояний чтоб не засорять основной код ссылками
// предполагаю, что в сумме у вас их 6, по 2 на каждый элемент motionPlitka
const imageSources = {
  preim1: {
    normal: "https://i.ibb.co/ZdHgXTm/green.png",
    hover: "https://i.ibb.co/g6mNxm8/white.png"
  },
  preim2: {
    normal: "https://i.postimg.cc/6pKDm5Lq/green2.png",
    hover: "https://i.postimg.cc/2SPBDMy1/white2.png"
  },
  preim3: {
    normal: "https://ltdfoto.ru/images/2024/06/13/green3.png",
    hover: "https://ltdfoto.ru/images/2024/06/13/white3.png"
  }
};

// выносим функцию изменения картинки в зависимости от состояния (normal или hover)
const setImageSrc = (element, state) => {
  // находим элемент <img> внутри элемента motionPlitka, на котором у нас курсор
  const img = element.querySelector("img"); 

  // извлекаем список классов элемента и ищем класс, который есть в imageSources
  // в вашем случае preim1, preim2 или preim3
  const className = [...element.classList].find(cls => imageSources[cls]); 

  // меняем src элемента <img> на значение из объекта imageSources для нужного класса и состояния
  img.src = imageSources[className][state];
};

// получаем все элементы .motionPlitka и добавляем обработчики
document.querySelectorAll(".motionPlitka").forEach(elem => {
  // при наведении мыши вызываем setImageSrc с состоянием hover
  elem.addEventListener('mouseenter', () => setImageSrc(elem, 'hover'));
  // при уходе мыши вызываем setImageSrc с состоянием normal
  elem.addEventListener('mouseleave', () => setImageSrc(elem, 'normal'));
});

Здесь mouseenter и mouseleave срабатывают один раз при входе и выходе мыши из родительского элемента motionPlitka. В вашем варианте обработчики срабатывали на действия с дочерними элемементами тоже

Вы в index используете Object.assign для создания объекта, но не севсем правильно оборачиваете результат в map.
Я бы, честно говоря, заменила на reduce, семантически он там логичнее:

} else if (Array.isArray(value)) {
  return value.reduce((acc, key) => {
    acc[key] = indexs[key];
    return acc;
  }, {});
}

И вначале, где indexs создаете, можно тоже через reduce и c константой

const indexs = index.reduce((acc, key, i) => {
  acc[key] = arr[i];
  return acc;
}, {});

Еще я бы предложила отказаться от let arrs и indexs, вы их не переиспользуете, почему бы не сразу const