Как сделать автоматический скроллинг секций сайта + возврат к началу при достижении футера?

1. Я бы смотрел в сторону реализации каруселей, которые прокручивают контент вертикально (как пример https://splidejs.com)
2. В вашем найденном решении скролл происходит плавный, так как он считает от вершины и до конца всей страницы.
Вам необходимо получить массив секций с их вершинами и через равные интервал выполнять scrollTo(вершина секции), если достигнута вершина секции футер, то выполнять скролл к вершине первой секции

грубо говоря

let sections = document.querySelectorAll(".elementToSlider");
let scrollTimer = setInterval(
 () => {
    scrollToElement(sections);
 }
, 5000);

let scrollToElement = (sections) => {
 for (let i = 0; i < sections.length; i++) {
  sections[i].scrollIntoView();
  i++;
 }
}

не забудьте про проверку (в данном решении только до конца страницы)

Как правильно интегрировать PDF.js в проект на Typescript?

WbICHA, из примера здесь либо здесь

говоря другим языком:

import * as React from "react";
 import * as pdfjsLib from "pdfjs-dist";
 // declare var pdfjsLib: any;   - меняли на такое объявление, результат один и тот же. pdfjsLib is undefined

 export class PDFViewer extends React.Component(<any, any>) {
  private state: any;

  constuctor(props) {
   super(props);
   this.state = {};
  }
  
 componentDidMount(): void {
  let task = pdfjsLib.getDocument(this.props.filepath);
   task.promise.then((doc: any) => {
    console.log('Success");
    doc.getPage(1).then((page: any) => {
      this.setState((prevState: any) => {
        return {
          ...prevState,
          page: page
        }
      })
    })
  })
 }

  render(): JSX.Element {
    let {page} = this.state;
    return (
      <div>
        <canvas src={page}/>
      </div>
    )
  }

  и тд
 }

Как правильно сверстать данную секцию?

.cards {
 display: flex;
 justify-content: flex-start;
 flex-wrap: wrap;
}
.cards__item {
 width: 20%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-start;
}

Семантика без изменений.

<div class="cards">
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
 <div class="cards__item">
   <img src="https://via.placeholder.com/160x160.png" class="cards__pic" alt="">
   <h3 class="cards__title">Интерливинг</h3>
   <p class="cards__description">Изучайте несколько навыков одновременно, они обогащают друг друга.</p>
 </div>
<div>

Расположение картинки и заголовка карточки по центру

.cards__pic {
 display: flex;
 justify-content: center;
 align-items: center;
}
.cards__tile {
 text-align: center;
}

сделать отступ у текста

.cards__description {
 text-indent: 20px; // отступ в 20 пикселей первой строки
}

либо, если нужно по центру

.cards__description {
 text-align: center;
}