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}
    imageTablet={images.imageTablet}
    imageDesktop={images.imageDesktop}
    imageDesktopWide={images.imageDesktopWide}
    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>
  <VideoBanner
    videoType="video"
    videoSrc={videoBannerVideo}
    imageMobile={videoBannerImage}
    imageTablet={videoBannerImage}
  />
</Container>
<Container>
  <TitleDescriptionBox
    title="Интернет"
    description="При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц и дополнительных услуг, указанных в заявке."
    align="center"
  />
  <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={video} />
  <TabsBox>
    <TabBox title="Таб 1">
      <BenefitsPictures items={threeItemsBenefitsPictures} />
    </TabBox>
    <TabBox title="Таб 2">
      <BenefitsPictures align="center" items={twoItemsBenefitsPictures} />
    </TabBox>
  </TabsBox>
</Container>
<Container>
  <Partners items={partnersContent} />
  <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>
  <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}>
    <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}
    deviceMask="android"
  />
</Container>
<Container>
  <ButtonBanner
    title="Сложность с выбором тарифа?"
    text="Наши консультанты помогут подобрать нужный тариф и ответят на все интересующие вас вопросы."
    buttonText="Заказать консультацию"
  />
</Container>
<Container>
  <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>