konstant1n13

svg + css + html
1. ::first-letter
2. https://codepen.io/phpcodertech/pen/ZEQYBgQ
3. ::afer
4. https://css-tricks.com/snippets/svg/curved-text-al...
5. ::after, ::before и иже с ними

Вообще, вариантов реализации каждого вопроса более 1. Рекомендую как всегда курить спецификации - mdn хотя бы. Ответы взял не из головы, а из гугла - если там не забанили, можно посмотреть)

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

const COMPONENTS = {
    enterProfile: EnterProfile,
    personalArea: PersonalArea,
    // ...
}

и выводить в нужном месте

return COMPONENTS[activeItem];

еще вашу задачу решает библиотека react-router, если делаете сложное приложение, есть смысл взглянуть.

ну как бы от того что ты их поменял - они не перестали загружаться в браузере. ты по сути даже хуже сделал. у тебя сначала грузятся jpg/png, а потом в добавок webp.

let [name] = 'assets/img/case/case-1.png'.split('/').reverse();

Зачем конвертировать, когда можно использовать svg`шный clip-path прямо в css
https://developer.mozilla.org/en-US/docs/Web/CSS/c...
А если очень хочется, то можешь воспользоваться вот этим генератором https://css-doodle.com/
Упрощенная формула твоей фигуры

@grid: 1 / 90%;

background: radial-gradient(
  yellow, #E91F63, #fff
);

clip-path: @shape(
  split: 180;
  r: cos(14t)*0.07 + 0.93;
);

Вы хотите сделать маску на картинку? Оберните в svg <path> в <clipPath> и задайте в css clip-path для него.

https://codepen.io/Snowsides/pen/QWdgOvZ

На сколько я понимаю, при переходе к якорю браузер скролит страницу так, что бы элемент с якорем был в верхнем левом углу. Ведь существуют и горизонтальные сайты, а не только вертикальные.
В данном случае вы не понтяно зачем делаете так, что бы форма выходила за пределы окна. И тем более смещаете блок с якорем с помощью марджина. И хотя вы обрезаете с помощью {overflow-x: hidden !important;} обзор пользователю, браузер все равно знает, что вы накостыляли. В этом случае и происходит то, что происходит.
Что бы это пофиксить советую сделать так.
Блоку .footer-form вместо margin-left: 20%; дать padding-left: 20%;
Далее у формы .footer-form .formубрать max-width: 90%;.
В таком случае форма не будет выходить за пределы екрана и будет тянутся на всю ширину.
Ну и дальше уже дописываете стили формы, что бы подогнать по дизайну.

И еще. На большом мониторе инпуты в форме становятся больше и бордер инпута становится кривым. Картинка бордера слишком маленькая.

Потому-что скролл это скролл, а то что ты делаешь, это resize

Для Chrome; для Firefox.