.home {
    width: 100%;
    height: 100%;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .cover-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  
  .cover {
    width: 100%;
    height: 100%;
  
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .text-line {
    position: absolute;
    color: #fff;
    font-size: clamp(3rem, 6vw, 8rem);
    font-weight: bold;
    opacity: 0;
    animation-fill-mode: forwards;
  
    &.line1 {
      top: 30%;
      left: 5%;
      font-size: clamp(3rem, 6vw, 8rem);
      animation: fadeInUp 1s 0.5s ease forwards;
    }
  
    &.line4 {
      top: 45%;
      left: 5%;
      font-size: clamp(1rem, 2vw, 1.5rem);
      line-height: 1.5;
      animation: fadeInUp 1s 4s ease forwards;
    }
  
    &.line2 {
      bottom: 20%;
      right: 5%;
      animation: fadeInUp 1s 1.5s ease forwards;
    }
  
    &.line3 {
      bottom: 10%;
      left: 5%;
      animation: fadeInUp 1s 2s ease forwards;
    }
  }
  
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
  
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Информация о клубе */
  .info-container {
    width: 90%;
    margin: 50px auto 20px;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    padding-left: 5%;
    padding-right: 5%;
  }
  
  .info-block {
    margin-bottom: 15px;
  
    p {
      line-height: 1.5;
      color: #333;
    }
  }
  
  .first-text-block p {
    font-size: clamp(2rem, 3vw, 3.5rem);
  }
  
  .second-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  
  .second-text-block {
    width: 60%;
    margin-right: 5%;
  
    p {
      font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    }
  }
  
  .square-block {
    width: 38%;
    display: flex;
    justify-content: flex-end;
  }
  
  /* Мобильные устройства (меньше 768px) */
  @media (max-width: 767px) {
    .info-container {
      padding-left: 5%;
      padding-right: 5%;
    }
  
    .first-text-block p {
      font-size: clamp(1.2rem, 4vw, 1.5rem);
    }
  
    .second-row {
      flex-direction: column;
    }
  
    .second-text-block {
      width: 100%;
      margin-right: 0;
    }
  
    .second-text-block p {
      font-size: clamp(0.9rem, 3vw, 1.2rem);
    }
  
    .square-block {
      width: 100%;
      margin-top: 10px;
      justify-content: center;
    }
  }
  
  /* Планшеты (768px - 1199px) */
  @media (min-width: 768px) and (max-width: 1300px) {
    .info-container {
      width: 90%;
      padding-left: 5%;
      padding-right: 5%;
    }
  
    .first-text-block {
      margin-bottom: 20px;
    }
  
    .first-text-block p {
      font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    }
  
    .second-row {
      flex-direction: row;
    }
  
    .second-text-block {
      width: 65%;
      margin-right: 2%;
    }
  
    .second-text-block p {
      font-size: clamp(1rem, 2vw, 1.4rem);
    }
  
    .square-block {
      width: 33%;
    }
  }
  
  /* Большие экраны (1200px и больше) */
  @media (min-width: 1301px) {
    .info-container {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      width: 90%; /* Ширина уже задана выше */
      margin: 100px auto 20px;
      padding-left: 5%; /* Соответствует изменениям выше */
      padding-right: 5%;
    }
  
    .first-text-block,
    .second-text-block,
    .square-block {
      width: 30%;
    }
  
    .first-text-block p {
      font-size: clamp(2rem, 2vw, 3rem);
    }
  
    .second-row {
      width: 65%;
      justify-content: space-between;
      align-items: flex-start;
    }
  
    .second-text-block {
      width: 60%;
      margin-right: 1%;
    }
  
    .second-text-block p {
      font-size: clamp(1rem, 1vw, 1.5rem);
    }
  
    .square-block {
      width: 39%;
    }
  }
  .bottom-spacer {
    height: 100px;
  }
  .learning-community {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 50px auto;
    width: 90%;
  
    .image-container,
    .text-container {
      width: 90%;
    }
  
    .image-container {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
  
      img {
        width: 100%;
        max-width: 100%;
        height: auto;
      }
    }
  
    .text-container {
      text-align: center;
  
      .heading {
        font-size: clamp(2rem, 5vw, 4rem);
        margin-bottom: 20px;
      }
  
      .programs {
        font-size: clamp(1.5rem, 3vw, 2.5rem);
        font-weight: bold;
        margin-bottom: 15px;
      }
  
      .description {
        font-size: clamp(1rem, 2vw, 1.5rem);
        line-height: 1.6;
        margin-bottom: 10px;
      }
    }
  
    /* Стили для экранов шире 1100px */
    @media (min-width: 1100px) {
      flex-wrap: nowrap;
      align-items: center;
  
      .image-container,
      .text-container {
        width: 45%;
      }
  
      .image-container {
        margin-bottom: 0;
      }
  
      .text-container {
        text-align: left;
        margin-left: 5%;
  
        .heading {
          font-size: clamp(2rem, 3.5vw, 4.5rem);
        }
  
        .programs {
          font-size: clamp(1.25rem, 2.5vw, 2.5rem);
        }
  
        .description {
          font-size: clamp(1rem, 1.7vw, 1.5rem);
        }
      }
    }
  }
  .gift-certificate-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px auto;
    width: 90%;
    padding: 20px 0;
  
    @media (min-width: 900px) {
      flex-direction: row;
      justify-content: space-between;
      width: 90%;
      margin: 50px auto;
      padding: 20px 0;
    }
  
    .gift-text {
      width: 100%;
      margin-bottom: 20px;
      text-align: center;
  
      @media (min-width: 900px) {
        width: 45%;
        margin-bottom: 0;
        text-align: left;
      }
  
      h2 {
        font-size: clamp(1.8rem, 2.5vw, 3rem);
        margin-bottom: 10px;
      }
  
      h3 {
        font-size: clamp(1.5rem, 2vw, 2.5rem);
        margin-bottom: 15px;
      }
  
      p {
        font-size: clamp(1rem, 1.5vw, 1.5rem);
        line-height: 1.6;
        margin-bottom: 10px;
      }
  
      .gift-button {
        margin-top: 20px;
        padding: 10px 20px;
        font-size: clamp(1rem, 1.5vw, 1.5rem);
        background-color: #000; /* Цвет кнопки */
        color: #fff;
        border: none;
        cursor: pointer;
      }
    }
  
    .gift-image {
      width: 100%;
      display: flex;
      justify-content: center;
  
      @media (min-width: 900px) {
        width: 45%;
      }
  
      img {
        width: 100%;
        max-width: 100%;
        height: auto;
      }
    }
  }
  /* Первый контейнер */
.first-container {
    width: 100%;
    padding: 50px 0;
    position: relative;
    text-align: center;
  
    h1 {
      font-size: clamp(2rem, 6vw, 6rem);
      margin: 0;
      font-weight: bold;
    }
  
    .line1 {
      position: relative;
      left: -15%; // Слегка левее центра
    }
  
    .line2 {
      position: relative;
      left: 15%; // Слегка правее центра
    }
  }
  
  /* Второй контейнер: Слайдер изображений */
  .image-slider {
    position: relative;
    width: 90%;
    margin: 0 auto;
    padding: 50px 0;
  
    .slider-container {
      position: relative;
      width: 100%;
      overflow: hidden;
        
      .slider-track {
        display: flex;
        transition: transform 0.5s ease-in-out;
        // Это свойство задаёт плавную анимацию при изменении transform
      }
  

      img {
        width: 100%;
        height: auto;
        object-fit: cover;
      }
  
      .nav-arrows {
        position: absolute;
        top: 50%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        transform: translateY(-50%);
  
        .prev,
        .next {
          cursor: pointer;
          font-size: 2rem;
          color: #ffffff;
          background-color: rgba(255, 255, 255, 0.2);
          padding: 10px;
          user-select: none;
        }
      }
  
      .nav-dots {
        position: relative;
        bottom: 0;
        margin-top: 20px;
        display: flex;
        justify-content: center;
      
        span {
          display: inline-block;
          width: 10px;
          height: 10px;
          margin: 0 5px;
          background-color: gray;
          border-radius: 50%;
          cursor: pointer;
        }
      
        .active {
          background-color: black;
        }
      }
    }
  }
  
  /* Третий контейнер */
  .ambassadors-container {
    text-align: center;
    padding: 50px 0;
  
    h1 {
      font-size: clamp(2rem, 6vw, 6rem);
      font-weight: bold;
      margin: 0;
    }
  }
  
  /* Четвертый контейнер */
  .info-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 50px auto;
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
  
    .text-block {
      width: 100%;
      margin-bottom: 20px;
  
      p {
        font-size: clamp(1rem, 2vw, 1.5rem);
        line-height: 1.6;
      }
    }
  
    .square-block {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  
    /* От 768px до 1200px */
    @media (min-width: 768px) and (max-width: 1199px) {
      .text-block {
        width: 45%;
      }
  
      .square-block {
        width: 100%;
        margin-top: 20px;
      }
    }
  
    /* От 1200px и выше */
    @media (min-width: 1200px) {
      .text-block {
        width: 30%;
      }
  
      .square-block {
        width: 30%;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
Это home.component.scss
<div class="home">
  <div class="cover-container">
    <div class="cover">
      <img src="assets/images/cover.jpg" alt="Cover Image" />
    </div>
    <div class="overlay">
      <h1 class="text-line line1">дай слово</h1>
      <p class="text-line line4">
        видеоролик <br />
        вместо этого <br />
        фото(16:9 пожалуйста)
      </p>
      <h1 class="text-line line2">и я</h1>
      <h1 class="text-line line3">вставлю</h1>
    </div>
  </div>
  <div class="bottom-spacer"></div>
  <div class="info-container">
    <div class="info-block first-text-block">
      <p>
        Orator Club был создан в мае 2011 года как школа, где обучают красивой и
        правильной речи.
      </p>
    </div>

    <div class="info-block second-row">
      <div class="second-text-block">
        <p>
          Слово «клуб» всегда значилось в названии проекта, и неслучайно: это
          именно клуб — по интересам, не для всех. Вам предстоит личное
          собеседование, в ходе которого мы вместе поймем, с какого именно курса
          вам стоит начать занятия. Все обучение тоже будет направлено
          индивидуально на вас. Вам понравится наш подход к обучению.
        </p>
      </div>

      <div class="square-block">
        <app-square-redirect
          [pageName]="'О КЛУБЕ'"
          [route]="'/about'"
        ></app-square-redirect>
      </div>
    </div>
  </div>
  <div class="bottom-spacer"></div>
  <div class="learning-community">
    <div class="image-container">
      <img src="assets/images/presentation.png" alt="Presentation Image" />
    </div>
    <div class="text-container">
      <h2 class="heading">Сила обучения в сообществе</h2>
      <p class="programs">14 программ</p>
      <p class="description">
        Искусство коммуникации: программы по ораторскому искусству, публичным
        выступлениям, технике речи.
      </p>
      <p class="description">
        А также — стратегический нетворкинг, актерское мастерство, невербальные
        формы статусного поведения, профайлинг личности. Авторские программы,
        интенсивы и мастер-классы.
      </p>
    </div>
  </div>
  <div class="bottom-spacer"></div>
  <div class="gift-certificate-container">
    <div class="gift-text">
      <h2>Подарочный сертификат</h2>
      <h3>Подари слово.</h3>
      <p>Вы можете подарить обучение в Клубе Ораторов вашим близким.</p>
      <p>Минимальная сумма номинала 50.000</p>
      <button class="gift-button">ОСТАВИТЬ ЗАЯВКУ</button>
    </div>
    <div class="gift-image">
      <img src="assets/images/diplom.jpg" alt="Подарочный сертификат" />
    </div>
  </div>
  <!-- Первый контейнер -->
  <div class="first-container">
    <h1 class="line1">(пространство</h1>
    <h1 class="line2">клуба)</h1>
  </div>

  <!-- Второй контейнер: Слайдер изображений -->
  <div class="image-slider">
    <div class="slider-container">
      <div class="slider-track" [style.transform]="transform">
        <img
          *ngFor="let image of images; let i = index"
          [src]="image"
          [alt]="'Place Image ' + (i + 1)"
          class="slide"
        />
      </div>
      <div class="nav-arrows">
        <span class="prev" (click)="prevImage()">&lt;</span>
        <span class="next" (click)="nextImage()">&gt;</span>
      </div>
      <div class="nav-dots">
        <span
          *ngFor="let image of images; let i = index"
          [class.active]="i === currentIndex"
          (click)="goToImage(i)"
        ></span>
      </div>
    </div>
  </div>

  <!-- Третий контейнер -->
  <div class="ambassadors-container">
    <h1>амбассадоры</h1>
  </div>

  <!-- Четвертый контейнер -->
  <div class="info-section">
    <div class="text-block first-text">
      <p>
        Официальные лица Orator Club из числа выпускников программ и участников
        закрытого сообщества members.

        <br /><br />

        Никто лучше самих участников Клуба не расскажет вам о том, что такое
        Orator Club и как он может поменять жизнь тех, кто приходит сюда
        учиться.
      </p>
    </div>
    <div class="text-block second-text">
      <p>
        Aмбассадоры транслируют ценности клуба, строят вокруг себя сообщество,
        участвуют в съемках рекламных кампаний Orator Club. Каждый год на премии
        Speaker Award Клуб выбирает новых Амбассадоров: тех, кто будет делиться
        опытом, создавать проекты и объединять людей.
      </p>
    </div>
    <div class="square-block">
      <app-square-redirect
        [pageName]="'О КЛУБЕ'"
        [route]="'/about'"
      ></app-square-redirect>
    </div>
  </div>

  <div class="bottom-spacer"></div>
</div>
Это home.component.html
import { Component, OnInit, OnDestroy, Inject, PLATFORM_ID, NgZone } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { SquareRedirectComponent } from '../components/square-redirect/square-redirect.component';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, SquareRedirectComponent],
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit, OnDestroy {
    images = [
      'assets/images/place1.jpg',
      'assets/images/place2.jpg',
      'assets/images/place3.jpg',
      'assets/images/place4.jpg',
    ];
    currentIndex = 0;
    slideInterval: any;
    transform: string = '';
  
    constructor(
      @Inject(PLATFORM_ID) private platformId: Object,
      private ngZone: NgZone
    ) {}
  
    ngOnInit() {
      this.updateTransform();
      if (isPlatformBrowser(this.platformId)) {
        this.ngZone.runOutsideAngular(() => this.startAutoSlide());
      }
    }
  
    ngOnDestroy() {
      if (isPlatformBrowser(this.platformId)) {
        if (this.slideInterval) {
          clearInterval(this.slideInterval);
        }
      }
    }
  
    startAutoSlide() {
      this.slideInterval = setInterval(() => {
        this.ngZone.run(() => this.nextImage());
      }, 20000);
    }
  
    prevImage() {
      if (this.currentIndex === 0) {
        this.currentIndex = this.images.length - 1;
      } else {
        this.currentIndex--;
      }
      this.updateTransform();
    }
  
    nextImage() {
      if (this.currentIndex === this.images.length - 1) {
        this.currentIndex = 0;
      } else {
        this.currentIndex++;
      }
      this.updateTransform();
    }
  
    goToImage(index: number) {
      this.currentIndex = index;
      this.updateTransform();
    }
  
    updateTransform() {
      this.transform = `translateX(-${this.currentIndex * 100}%)`;
    }
  }
Это home.component.ts
Я бы хотел добавить новый контейнер
При ширине 1200+ он содержит 4 фотографии, при ширине 1020px - 1199px он содержит 3 фото. При ширине 769px - 1019px 2 фото. При ширине до 768px 1 фото, каждое фото в своем контейнере, для которого можно сделать даже отдельный компонент - сверху фото, под фото тескт с margin-left 0 в 4 строки: 1)Имя, 2)Фамилия, 3)в клубе с 2020 года, 4)амбассадор с 2023 года. У меня 6 фото с названиями photo1 - photo6 .jpeg
С фото разобрались, теперь к контейнеру - он должен под собой содержать точки для навигации - у меня такое уже есть в коде, здесь нужно что-то похожее, но количество точек должно быть равно 6 - количество фото на экране(меняется в зависимости от ширины) + 1, точка с номером i соответствует отображению photo i-j - photo i на экране, где j - количество фото исходя из размера экрана - 1, при этом раз в 5 секунд все должно пролистываться само вправо, нужны динамичные анимации горизонтального прокручивания фото в обе стороны. И точки должны находиться под контейнерами с фото и текстом