Tony

У RHF есть control его используйте

import { useForm, Controller } from "react-hook-form";
import { IMaskInput } from "react-imask";

type FormValues = {
  phone: string;
};

export default function InputPhone() {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    defaultValues: { phone: "" },
  });

  const onSubmit = (data: FormValues) => {
    const clean = data.phone.replace(/\D/g, "");
    console.log(clean);
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="phone"
        control={control}
        rules={{
          required: "Введите номер",
          validate: (v) =>
            v.replace(/\D/g, "").length === 11 || "Номер неполный",
        }}
        render={({ field }) => (
          <IMaskInput
            {...field}
            mask="+{7} (000) 000-00-00"
            unmask={false}
            inputMode="tel"
            className="border-2"
            onAccept={(value) => field.onChange(value)}
            placeholder="+7 (___) ___-__-__"
          />
        )}
      />

      {errors.phone?.message && (
        <p className="text-sm text-red-700">{errors.phone.message}</p>
      )}

      <button type="submit">Отправить</button>
    </form>
  );
}

Добавьте в блок с классом background три элемента

<div class="background">
    <div class="block block_red">Text 1</div>
    <div class="block block_blue">Text 2</div>
    <div class="block block_green">Text 3</div>
</div>

и добавьте стили

.background {
    width: 1500px;
    height: 1000px;
    background-color: aquamarine;
    margin: 50px auto;
  
    display: flex;
    gap: 50px;
    padding: 20px;
}

.background .block {
  text-align: center;
  height: auto;
  font-size: 20px;
  padding: 20px;
}

.background .block.block_red {
  background: red;
}

.background .block.block_blue {
  background: blue;
}

.background .block.block_green {
  background: green;
}

Вставьте картинку желательно .svg и желательно используя спрайты

<div class="player">
     <img src="https://icons.veryicon.com/png/o/internet--web/truckhome/play-47.png" alt="Play video">
</div>

после чего добавьте стили

.player {
  height: 100%;
  display: grid;
  place-items: center;
}

.player img {
  height: 40px;
  width: 40px;
}

Добрый день, там в js все есть.
Для такого эффекта используется библиотека gsap метод scrolltrigger

Если карусель пишете сами, то вот вам .css
Регулируйте свойством flex: 0 0 40%
Где flex: flex-grow flex-shrink flex-basis

body {
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 30px;
}

.latest__cards {
  display: flex;
  gap: 30px;
}

.latest__cards img {
  flex: 0 0 40%;
  max-height: 400px;
  object-fit: cover;
}

А если не сами, то возьмите сразу готовый слайдер т.к. swiper или splide

У swiper'а есть свойство speed, оно вам поможет!

var menu = ['Slide 1', 'Slide 2', 'Slide 3']
var mySwiper = new Swiper ('.swiper-container', {
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
			clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (menu[index]) + '</span>';
        },
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
	
    speed: 0,
  })