Как создать данный компонент?

Для создания компонента шапки с различными вариантами, который можно использовать в различных разделах, можно использовать подход на основе пропсов или вариантов рендеринга в зависимости от контекста. Я приведу пример на React, так как он является одним из популярных инструментов для создания пользовательских интерфейсов.

Вот пример компонента `Header`, который может отображать различные версии в зависимости от пропса `type`:

```jsx
import React from 'react';

const variants = {
  variant1: (props) => (
    <div>
      {/* Контент шапки для первого варианта */}
      <h1>{props.title}</h1>
      {/* Остальная разметка для этого варианта */}
    </div>
  ),
  variant2: (props) => (
    <div>
      {/* Контент шапки для второго варианта */}
      <h2>{props.title}</h2>
      {/* Остальная разметка для этого варианта */}
    </div>
  ),
  variant3: (props) => (
    <div>
      {/* Контент шапки для третьего варианта */}
      <h3>{props.subtitle}</h3>
      {/* Остальная разметка для этого варианта */}
    </div>
  ),
};

const Header = (props) => {
  // Получаем нужный вариант на основе пропса type или используем вариант1 по умолчанию
  const VariantComponent = variants[props.type] || variants.variant1;

  // Рендерим выбранный вариант компонента, передавая ему все пропсы
  return <VariantComponent {...props} />;
};

export default Header;
```

Теперь, чтобы использовать этот компонент `Header` в различных разделах:

```jsx
import Header from './Header';

const SectionOne = () => (
  <div>
    <Header type="variant1" title="Главная" />
    {/* Остальной контент для раздела one */}
  </div>
);

const SectionTwo = () => (
  <div>
    <Header type="variant2" title="Статьи" />
    {/* Остальной контент для раздела two */}
  </div>
);

const SectionThree = () => (
  <div>
    <Header type="variant3" subtitle="Контакты" />
    {/* Остальной контент для раздела three */}
  </div>
);
```

Данный подход позволяет легко расширять и изменять шапку без дублирования кода. Вы просто создаете вариант для каждого уникального дизайна шапки и затем используете компонент `Header` с требуемым типом там, где это необходимо.

Для более глобального контекста, можно также использовать контекст React (React Context) для управления состояниями шапки, если данный компонент должен отображать разную информацию или варианты в зависимости от глобального состояния приложения.