profesor08

Когда использовать Bootstrap/FlexBox/CSS Grid?

Когда хочешь. Я серьезно, используй что больше нравится.

Фоновая картинка и текст живую отдельно друг от другая. При свайпе текста, он трансформируется наклоняясь. На первой половине пути, у текущего слайда постепенно уменьшается border-radius до 0, а начиная с середины пути, у следующего он увеличивается, до нужного значения. Далее надо будет сместить слайды так, что не было видно дыр на краях сверху и снизу, причем смещать надо будет постепенно на длину изгиба. Потом придется играться с z-index таким образом, чтоб он переключался в нужный момент так, чтоб на переднем плане был тот слайд, у которого border-radius > 0. Собственно на css больше ничего не сделать. Решение довольно хреновое, результат тоже будет хреновый. Так как подобные слайды делаются не на свайпере и ему подобных, а на THREE.js и glsl, потому что только тогда результат будет именно таким, какой он на видео, такой-же плавный, такой-же четкий, без гличей и невтемных левых вылезающих пикселей.

Для картинок задай max-width: 100% max-height: 100%

Не мигает. Попробуй убрать фильтр.

https://www.google.com/search?q=wp+carousel

Ну тут да, только на SVG или Canvas если силенок хватит. Тебе надо определять крайние точки этих зон, и по ним строить кривые. Внутренняя и внешняя кривые должны описывать часть круга. Как строить круг из кривых погугли. Это тебе поможет. Готовых решений под такую диаграму не знаю, есть просто круговые, попробуй что-то из них состряпать, изменив отображение зон.

Используй Styled Components и хватит себя мучить.

Div блоки bootstrap 3 — одинаковой высоты. Как это реализовать?

В bootstrap 3 - никак. Используй bootstrap 4. Либо не используй bootstrap вообще.

Ну, наверно надо сначала импортировать файл в imdex.js, а потом смотреть что пишется в ошибках, там все подробно будет написано.

Переписывать начали, а стили складываются все в те же два файла.

Уже на этом этапе что-то пошло не так.

Раз начали переписывать, ну так переписывайте. Как писать стили к компонентам реакта думаю известно. Если это не подходит, то думаю известно как подключить scss со стилями к проекту.

hsl поможет

:root {
  --link-color-h: 211;
  --link-color-s: 100%;
  --link-color-l: 50%;
  --link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l);

  --link-color: hsl(var(--link-color-hsl));
  --link-color-10: hsla(var(--link-color-hsl), .1);
  --link-color-20: hsla(var(--link-color-hsl), .2);
  --link-color-30: hsla(var(--link-color-hsl), .3);
  --link-color-40: hsla(var(--link-color-hsl), .4);
  --link-color-50: hsla(var(--link-color-hsl), .5);
  --link-color-60: hsla(var(--link-color-hsl), .6);
  --link-color-70: hsla(var(--link-color-hsl), .7);
  --link-color-80: hsla(var(--link-color-hsl), .8);
  --link-color-90: hsla(var(--link-color-hsl), .9);

  --link-color-warm: hsl(calc(var(--link-color-h) + 80), var(--link-color-s), var(--link-color-l));
  --link-color-cold: hsl(calc(var(--link-color-h) - 80), var(--link-color-s), var(--link-color-l));

  --link-color-low: hsl(var(--link-color-h), calc(var(--link-color-s) / 2), var(--link-color-l));
  --link-color-lowest: hsl(var(--link-color-h), calc(var(--link-color-s) / 4), var(--link-color-l));

  --link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9));
  --link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9));
}