Container

<Container>
  <TitleDescriptionBox
      title="Интернет"
      description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
      align="center"
  />
  <ButtonLinkBox buttonTitle="Кнопка" buttonUrl="#" align="center" />
</Container>

<Container>
  <TitleDescriptionBox
      title="Интернет"
      description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
      align="center"
  />
  <BenefitsIcons
      items={benefitsIconsContent}
      iconPosition="center-top"
  />
</Container>

<Container>
  <TabsBox>
      <TabBox title="Таб 1">
          <BenefitsPictures items={threeItemsBenefitsPictures} />
      </TabBox>
      <TabBox title="Таб 2">
          <BenefitsIcons items={benefitsIconsContent} iconPosition="center-top" />
          <AccordionBox title="Accordion title" hCenterAlignWide>
              <Paragraph>
                  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit dolore quam deserunt magni
                  consequuntur veniam! Enim doloremque error expedita nisi nobis architecto aliquid. Iste dolores
                  cupiditate earum vero, at quis.
              </Paragraph>
          </AccordionBox>
      </TabBox>
  </TabsBox>
  <ButtonLinkBox buttonTitle="Кнопка" buttonUrl="#" align="center" />
</Container>

<Container backgroundColor="gray">
  <TitleDescriptionBox
      title="Интернет"
      description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
      align="center"
  />
</Container>

<Container backgroundColor="light-gray">
  <TitleDescriptionBox
      title="Интернет"
      description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
      align="center"
  />
</Container>

<Container backgroundColor="green">
  <TitleDescriptionBox
      title="Интернет"
      description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
      align="center"
  />
</Container>

<Container backgroundColor="purple">
  <TitleDescriptionBox
      title="Интернет"
      description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
      align="center"
      textColor="white"
  />
</Container>

<Container disablePaddingBottom>
  <VideoBanner
      imageMobile={images.imageMobile.src}
      imageTablet={images.imageTablet.src}
      imageDesktop={images.imageDesktop.src}
      imageDesktopWide={images.imageDesktopWide.src}
      bottomShadow
  />
</Container>

<Container>
  <TitleDescriptionBox
      title="Интернет"
      description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
      align="center"
  />
  <ButtonLinkBox buttonTitle="Кнопка" buttonUrl="#" align="center" />
</Container>
<Container>
  <TitleDescriptionBox
      title="Интернет"
      description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
      align="center"
  />
  <BenefitsIcons items={benefitsIconsContent} iconPosition="center-top" />
</Container>

<Container>
  <TitleDescriptionBox
      title="Интернет"
      description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
      align="center"
  />
  <ButtonLinkBox buttonTitle="Кнопка" buttonUrl="#" align="center" />
</Container>
<Container backgroundColor="gray">
  <TitleDescriptionBox
      title="Интернет"
      description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
      align="center"
  />
  <BenefitsIcons items={benefitsIconsContent} iconPosition="center-top" />
</Container>

<Container disablePaddingTop={true} disablePaddingBottom={true}>
  <TitleDescriptionBox
      title="Интернет"
      description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
      align="center"
  />
  <ButtonLinkBox buttonTitle="Кнопка" buttonUrl="#" align="center" />
</Container>
<Container>
  <TitleDescriptionBox
      title="Интернет"
      description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
      align="center"
  />
  <BenefitsIcons items={benefitsIconsContent} iconPosition="center-top" />
</Container>

<Container preventMarginTopCollapse backgroundColor="light-gray">
      <BannerBox hasMarginTop>
          <DemoSlide>1</DemoSlide>
          <DemoSlide>2</DemoSlide>
          <DemoSlide>3</DemoSlide>
          <DemoSlide>4</DemoSlide>
          <DemoSlide>5</DemoSlide>
      </BannerBox>
  </Container>

<Container>
  <VideoBanner
      videoType="video"
      videoSrc={videoBannerVideo}
      imageMobile={videoBannerImage.src}
      imageTablet={videoBannerImage.src}
  />
</Container>
<Container>
  <TitleDescriptionBox
      title="Интернет"
      description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
      align="center"
  />
  <PromoCards
      background="shadow"
      items={[
          {
              title: 'Абонемент на связь',
              subtitle: 'Скидка на абонентскую плату при оплате на несколько месяцев вперёд',
              link: { title: 'Подробнее', href: '/' },
              image: { src: promoCardsImage.src, alt: 'Alt' },
              logo: { src: promoCardsLogo.src, alt: 'Logo Alt' }
          },
          {
              title: 'Абонемент на связь',
              subtitle: 'Скидка на абонентскую плату',
              link: { title: 'Подробнее', href: '/' },
              image: { src: promoCardsImage.src, alt: 'Alt' },
              logo: { src: promoCardsLogo.src, alt: 'Logo Alt' }
          },
          {
              title: 'Абонемент на связь',
              subtitle: 'Скидка на абонентскую плату',
              link: { title: 'Подробнее', href: '/' },
              image: { src: promoCardsImage.src, alt: 'Alt' },
              logo: { src: promoCardsLogo.src, alt: 'Logo Alt' }
          }
      ]}
  />
  <BenefitsIcons items={benefitsIconsContent} iconPosition="center-top" />
  <BenefitsPictures items={threeItemsBenefitsPictures} />
  <CardsBox>
      <Card
          title={{ text: 'Сеть стоматологий', align: 'center' }}
          price={{ oldValue: '560 ₽', value: '340 ₽', period: 'в месяц' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'center' }}
          price={{ oldValue: '560 ₽', value: '340 ₽', period: 'в месяц' }}
      />
  </CardsBox>
  <CarouselBox>
      <Card
          title={{ text: 'Сеть стоматологий', align: 'center' }}
          price={{ oldValue: '560 ₽', value: '340 ₽', period: 'в месяц' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'center' }}
          price={{ oldValue: '560 ₽', value: '340 ₽', period: 'в месяц' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'center' }}
          price={{ oldValue: '560 ₽', value: '340 ₽', period: 'в месяц' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'center' }}
          price={{ oldValue: '560 ₽', value: '340 ₽', period: 'в месяц' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'center' }}
          price={{ oldValue: '560 ₽', value: '340 ₽', period: 'в месяц' }}
      />
      <Card
          title={{ text: 'Сеть стоматологий', align: 'center' }}
          price={{ oldValue: '560 ₽', value: '340 ₽', period: 'в месяц' }}
      />
  </CarouselBox>
  <VideoBlock content={videoBlockContent} videoSrc={videoBlockVideo} />
  <TabsBox>
      <TabBox title="Таб 1">
          <BenefitsPictures items={threeItemsBenefitsPictures} />
      </TabBox>
      <TabBox title="Таб 2">
          <BenefitsPictures align="center" items={twoItemsBenefitsPictures} />
      </TabBox>
  </TabsBox>
</Container>
<Container>
  <BannerBox hasMarginTop>
      <DemoSlide>1</DemoSlide>
      <DemoSlide>2</DemoSlide>
      <DemoSlide>3</DemoSlide>
      <DemoSlide>4</DemoSlide>
      <DemoSlide>5</DemoSlide>
  </BannerBox>
  <InfoCards items={twoItemsInfoCards} />
</Container>
<Container>
  <Partners items={partnersContent} />
  <InfoCards items={twoItemsInfoCards} />
  <Instructions title="Как подписаться" instructionItems={instructionsItems} />
  <Property
      items={[
          {
              title: ['Интернет не на все сервисы'],
              description: [{ value: ['Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка'] }],
          },
      ]}
  />
  <Property
      items={[
          {
              title: ['Интернет не на все сервисы'],
              description: [{ value: ['Boom, Yandex.Музыка, Zvooq, ВКонтакте Музыка'] }],
          },
      ]}
  />
  <Table fixColumn>
      <TableRow head>
          <TableCell>Интернет-опция</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет XS</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет XL</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
      </TableRow>
  </Table>
  <AccordionBox title="Accordion title" hCenterAlignWide>
      <Paragraph>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit dolore quam deserunt magni consequuntur
          veniam! Enim doloremque error expedita nisi nobis architecto aliquid. Iste dolores cupiditate earum
          vero, at quis.
      </Paragraph>
  </AccordionBox>
  <AccordionBox title="Accordion title" hCenterAlignWide>
      <Paragraph>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit dolore quam deserunt magni consequuntur
          veniam! Enim doloremque error expedita nisi nobis architecto aliquid. Iste dolores cupiditate earum
          vero, at quis.
      </Paragraph>
  </AccordionBox>
  <AccordionBox title="Accordion title" hCenterAlignWide>
      <Paragraph>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit dolore quam deserunt magni consequuntur
          veniam! Enim doloremque error expedita nisi nobis architecto aliquid. Iste dolores cupiditate earum
          vero, at quis.
      </Paragraph>
  </AccordionBox>
  <ButtonLinkBox buttonTitle="Кнопка" buttonUrl="#" linkTitle="Ссылка" linkUrl="#" align="center" />
</Container>
<Container backgroundColor="gray">
  <TextBox>
      <Header as="h3" margin>
          В рамках системы Личный кабинет (Сервис-Гид) (WEB) Вам доступны следующие возможности:
      </Header>
      <Header as="h5" margin>
          Путешествуй без забот
      </Header>
      <Paragraph>
          Бесплатные входящие вызовы и безлимитные звонки на номера московского МегаФона, минуты и SMS по России.
          <Link href="https://megafon.ru">Click me</Link>
      </Paragraph>
      <List>
          <ListItem>Тарифы</ListItem>
          <ListItem>Интернет</ListItem>
          <ListItem>Связь</ListItem>
          <ListItem>Услуги</ListItem>
      </List>
      <Paragraph size="small">
          Доступно для: WhatsApp, Viber, eMotion, Facebook Messenger, Telegram, ТамТам
      </Paragraph>
  </TextBox>
  <PictureWithDescription pictureUrl={pictureWithDescriptionImage.src}>
      <Header as="h3" margin>
          {pictureWithDescriptionTitle}
      </Header>
      <Paragraph>{pictureWithDescriptionText}</Paragraph>
      <List>
          <ListItem>{pictureWithDescriptionItems[0]}</ListItem>
          <ListItem>{pictureWithDescriptionItems[1]}</ListItem>
          <ListItem>{pictureWithDescriptionItems[2]}</ListItem>
          <ListItem>{pictureWithDescriptionItems[3]}</ListItem>
      </List>
  </PictureWithDescription>
  <DownloadLinks>
      <DownloadLink
          href={downloadLinkHref}
          text={downloadLinkText}
          extension={downloadLinkExtension}
          fileSize={downloadLinkFileSize}
      />
      <DownloadLink
          href={downloadLinkHref}
          text={downloadLinkText}
          extension={downloadLinkExtension}
          fileSize={downloadLinkFileSize}
      />
      <DownloadLink
          href={downloadLinkHref}
          text={downloadLinkText}
          extension={downloadLinkExtension}
          fileSize={downloadLinkFileSize}
      />
      <DownloadLink
          href={downloadLinkHref}
          text={downloadLinkText}
          extension={downloadLinkExtension}
          fileSize={downloadLinkFileSize}
      />
  </DownloadLinks>
</Container>
<Container>
  <StoreBanner
      title={storeBannerTitle}
      text={storeBannerText}
      linkApple="#"
      linkGoogle="#"
      imageSrc={storeBannerImage.src}
      deviceMask="android"
  />
</Container>
<Container backgroundColor="gray">
  <ButtonBanner
      title="Сложность с выбором тарифа?"
      text="Наши консультанты помогут подобрать нужный тариф и ответят на все интересующие вас вопросы."
      buttonText="Заказать консультацию"
  />
</Container>
<Container backgroundColor="gray">
  <Steps title="Как подписаться">
      <StepsItem
          index={1}
          text="Авторизуйтесь на сайте сервиса <a href=#>special.megafon.ru</a>, перейдите в магазин и добавьте покупки в корзину"
      />
      <StepsItem
          index={2}
          text="Выберите любой тариф из линейки <b>«Включайся!»</b>, которым хотите пользоваться со скидкой 50% на абонентскую плату."
      />
      <StepsItem index={3} text="Оформите заказ и оплатите его удобным способом: онлайн или при получении" />
      <StepsItem
          index={4}
          text="Позвоните первому свободному врачу или запишитесь на онлайн-консультацию к конкретному специалисту"
      />
      <StepsItem
          index={5}
          text="Позвоните первому свободному врачу или запишитесь на онлайн-консультацию к конкретному специалисту"
      />
  </Steps>
</Container>