Вадим

Вот вроде основные:
GSAP,
TweenMax js
ScrollMagic js
barba js
swiper js
lottie

Возможно есть аналоги на js или jquer

Они все на js. Хотя jQuery у них к сайту тоже подключается.

Не сделан тут Header и первый блок одной картинкой. Просто у header нет фона и он спозиционирован поверх блока с фоном, например, через position: fixed, либо располагается внутри него:

.hero background-image: url()
  header

P.s. hero screen - паттерн, когда первый экран на весь экран, и, как правило, вместе с шапкой.

Судя по всему ему не вертикальный шифт не нравится, а горизонтальный. По обновляйте свою страницу быстро несколько раз. Сначала один элемент первый, а потом другой.

Если это происходит из-за инициализации слайдера, то можно попробовать её отложить.

Вообще тут Ваш код должен был быть, с Вашей попыткой реализации..

google: chevron css

const openPopUp = document.getElementById('open_pop_up');

- id должен быть уникальным в рамках страницы. Не должно быть более одного элемента, с повторяющимся id. В итоге тут будет найден только первый в разметке элемент с таким id. То есть только первая кнопка "заказать" будет работать.

const closePopUp = document.getElementById('pop_up_close');

- не существует элемента с таким id. Есть с class.

const popUp = document.getElementById('pop_up'); - аналогично предыдущему.

<a class="table_box_button" href="#" class="open_pop_up">Заказать</a>

Это где Вы научились два раза один и тот же атрибут объявлять на элементе? Объединить в один.

Проблема в шапке таблицы, где вложенные объекты раскрываются в другую таблицу

Всё верно. Проблема именно в этом. Что у Вас получается 2 несогласованные таблицы. Не понято зачем.

<table>
  <thead>
    <tr>
      <th rowspan="3">Наименование</th>
      <th colspan="3">Компания</th>
      <th rowspan="3">Цена</th>
      <th rowspan="3">Валюта</th>
    </tr>
    <tr>
      <th rowspan="2">Название</th>
      <th colspan="2">Страна</th>
    </tr>
    <tr>
      <th>Название</th>
      <th>Морсокй морт</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>lorem</td>
      <td>lorem</td>
      <td>lorem</td>
      <td>lorem</td>
      <td>lorem</td>
      <td>lorem</td>
    </tr>
  </tbody>
</table>

он возвращает дату в формате
MM-DD-YYYY - месяц день год

Нет, не возвращает.
Возвращает в формате YYYY-MM-DD.

как-то можно без библиотек поменять на
DD-MM-YYYY

Можно. Все библиотеки для JS работают на JS.

var d = document.querySelector('input[type="date"]')

d.addEventListener('change', function(){
  console.log(this.value) // YYYY-MM-DD
  const [y, m, d] = this.value.split('-')
  console.log(`${d}-${m}-${y}`) // DD-MM-YYYY
})

добавить паддинг справа

Не совсем.
1) Не все скринридеры посчитают title существенным для озвучивания (пруфов на руках нет).
2) Есть степень специфичности, на основе которой решается что озвучить пользователю.
aria-label приоритетнее чем title.
title наименее приоритетный, насколько я помню. Его перебьёт всё что угодно, и если совсем ничего нет, даже content, только тогда на него обратят внимание.
title - нет на мобильных девайсах. По крайней мере визуально (voiceover`ом не проверял)

Вот скрин кнопки "подписаться" под Вашим вопросом из дерева доступности в десктопном гугл хром:

Как видно - по итогу пользователю зачитается "Подписаться1", потому что aria-labelledby и aria-label не заданы, а content приоритетнее чем атрибут title.

А в приведённом Вами примере, если опустить aria-label, то, на вскидку, должен зачитать: "изображение" + значение атрибута alt + "ссылка", так как контент есть.
А вот если бы в ссылке не было вообще ничего и картинка рисовалась на css, скажем, фоном. Вот тогда, НАВЕРНОЕ, можно было бы сказать что aria-label и title равны. Но только при условии что скринридер вообще считает title за семантический атрибут.

https://yablyk.com/128244-chrome-link-to-text-fragment/
1. Откройте браузер Google Chrome и перейдите на необходимую веб-страницу.
2. Выделите нужный фрагмент текста, на который вы хотите создать ссылку. Это может быть как одно слово, так и целый абзац. Нажмите правую кнопку мыши.
3. Выберите в контекстном меню пункт Копировать ссылку на выделенный текст.

Зависит от того, что у Вас на клиенте.
Как выводятся данные, как генерируется разметка.

Если разметка генерируется через js, то когда создаётся инстанс карточки,
const card = document.createElement('div')
ничего не мешает назначить своё кастомное свойство, например:
card.personAge = 20.
Или, более распространённая практика - задать соответствующий data-атрибут.

Если с бэка разметка приходит, то data-атрибут
<div class="card" data-person-age="20">...</div>

@media/orientation

В grid-template-areas указываются не классы элементов, а значения grid-area, которое задано элементам.

Например:

.ac {
  grid-area: ac
}

...

.buttons {
    display: grid;
    grid-template-areas:
    "ac plus-minus percent division"
    "seven eight nine multi"
    "four five six minus"
    "one two three plus"
    "zero zero dot equal";
}

Ну и сетку тоже нужно определить. А то грид указали, а какие колонки\строки не указали.

Да и еще вопрос, если через режим адаптивности смотреть на сайт в блоке Режимы работы опять таки блоки стоят в 2 столбика, а на телефоне этот же блок стоит в 1 столбик.

На ПК тоже если перейти в эмуляцию и перезагрузить страницу - будет в один столбик.
Отдаётся разная разметка.
И картинки, соответственно, тоже отдаются разные.

А разметка разная отдаётся потому что, полагаю, разные страницы открываются :-)
Сравните урл на пк и на мобилке. Где-то редирект.

background-image: linear-gradient(to right, tomato 70%, transparent 70%)

https://brm.io/jquery-match-height/
(уверен есть вариация без jQuery)

Либо фиксировать размеры отдельных элементов карточки по высотам.

CSS не умеет так как Вам надо в динамике.
Одинаковая высота может быть только в рамках одного родителя через display: flex или grid.
А Вам нужна одинаковая высота между разными элементами, у которых общий родитель не ближайший вверх по дереву.

Единственное что можно сделать, это задать margin-top: auto первому блоку после описания Товара, тогда это прижмёт к низу все последующие блоки, что может создавать пустоту в отдельных случаях между описанием товара и остальными блоками (хотя такое будет и с решением на js)
Как-то так:

Набросал на коленке.
Не идеально, но бесплатно и без вашего кода(что вообще то не приветствуется правилами сервиса):

Возможно ли в css выбрать родительский элемент, если у ребенка есть определенный атрибут

https://developer.mozilla.org/en-US/docs/Web/CSS/:has
main:has(a[aria-expanded="true"]) {}

Но поддержка так себе:
https://caniuse.com/css-has

Иначе только js.