sewaca

const data = [ /* Array with JSON data */ ];
document.body.innerHTML = data.map((item)=>`
  <i class="fa fa-user-circle" aria-hidden="true"></i> ${item.name} 
  <i class="fa fa-envelope" aria-hidden="true"></i> ${item.email}
  `)
  .join(" ");

В data пишите свой массив
Если надо менять не весь контент на странице, а только в каком-то месте, то вместо document.body пишите селектор на этот элемент

Как сейчас реализована анимация:
У вас есть 50 срендереных картинок анимации вроде этой и каждые n милисекунд меняется номер картинки

В таком виде реализации вы ограничены по плавности анимации именно количеством таких кадров и в целом больше ничем

Как можно сделать лучше:
Вариант 1.
Анимация станет плавнее, если просто будете вопроизводить ее в 60 fps.
То есть просто поменяете код для смены аттрибута src на что-то такое:

let i = 0;
let a = setInterval(()=>{
    document.querySelector("body > div.page > div.places > div > div > div > div.places-map-wrap > div > div > img").src= "/assets/images/home_sequence/" + i + ".webp";
    i = (i + 1) % 49;
}, 1000/60) // 1000 / 60 означает что вы хотите вопроизводить 60 кадров в секунду

Минусы: из-зи увеличения fps таким способом увеличится и скорости анимации

Вариант 2.
Cделать не 50 типовых картинок, а 100 и менять их способом из варианта 1 c фпс в два раза выше чем сейчас
Тогда удастся сохранить и скорость анимации и сделать плавнее
Минусы: много работы (придется переделывать раскадровку всей анимации) + упадет скорость сайта из-за того что придется загружать в два раза больше картинок

Вариант 3.
ВОЗМОЖНО самый удачный, но ТОЧНО самый сложный и требующий много сил. Используйте вместо картинок вида

canvas и библиотеку three.js (тут уже как-то самому придется разбираться, советов дать не могу, потому что сам недостаточно работал с этой библиотекой
Минусы: вполне вероятно, что из-за того что на сайт добавится +1 библиотека, а также 3д модельки скорость сайта будет не сильно отличаться от второго варианта.
Плюс по сравнению с вариантом № 2: Вы получите полную свободу в управлении этой анимацией. Сможете когда надо замедлить, когда надо ускорить без лишней работы
В целом скорость сайта не должна стать большой проблемой, потому что это не первый экран и даже не самое важное в карте. Соответственно можно что-то подгрузить попозже, что-то пораньше, что-то вообще не подгружать если слабый инет
Иными словами, загружать эту анимацию только после того как загрузили все остальное

В общем я постарался понятно расписать минусы и плюсы. Плюс многое зависит от того, как сделана эта штука у ваших дизайнеров
Если что-то непонятно объяснил - спрашивайте

JS выполняется на стороне клиента. Он не меняет файлы на сервере (потому что насколько я понял из вашего вопроса, вам нужно именно это)
Если хотите менять классы в самом html файле то в vs code выделите слово element, нажпмите shift+ctrl+l вроде и напишите новый класс
Ну либо используйте сборщики + шаблонизаторы, чтобы сильно не страдать когда надо что-то поменять в коде

Если используется grid то пропишите для контейнера gap: 5px и padding 5px
Если используете table, то пропишите для контейнера border-spacing: 5px

Если честно, я бы лишний раз не шаманил и просто сделал бы рамочку с помощью before и background-image (экспортнуть рамочку в svg)
Вариант Mors Clamor с polygon в целом правильнее, но конкретно в случае border'a, насколько я помню, он просто обрежет рамку. В общем попробуйте сначала его вариант.
Если не получится, можете использовать мой вариант :)

// ... предыдущий код
btnSwap.addEventListener('click', function() {
    btnSwap.dataset.storage = (btnSwap.dataset.storage === 'local' ? 'api' : 'local');
    console.log(btnSwap.dataset.storage);
    console.log(btnSwap.dataset);
  })
// ... следующий код

В чем проблема
На самом деле проблема (скорее особенность) внутри плагина, который вы используете для загрузки видео с ютуба.
При загрузке видео ваша ссылка меняется на ссылку вида: //www.youtube.com/...
Первые две черточки перед www (//) говорят о том, что нужно сохранить протокол общения таким, каким он был у вашей страницы.
То есть если вы открыли страницу по http, то и запрос получится http://www.youtube.com/..., а если открыли локально (file://) то и запрос получается file://www.youtube.com/...

Решения:
Плохое: лезть в код плагина и менять // на https://
Хорошее:
использовать live server или его аналоги для запуска проекта. Тогда страница откроется на адресе, к примеру, http://localhost:3000/ и проблем не будет

Надеюсь смог помочь

Чтобы не прописывать !important - увеличьте вложенность стилей для активного a
В вашем случае, надо прописывать правила для
.facilities-block .sidebar li.clicked a