Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Introduction/components/super-block-intro.tsx (TypeScript)

Code before:
  const introTopB = (
    <>
      {' '}
      <SuperBlockIcon className='cert-header-icon' superBlock={superBlock} />
      <Spacer size='m' />
      <h1 id='content-start' className='text-center big-heading'>
        {i18nSuperBlock}
      </h1>
      <Spacer size='m' />
      <p>{t('misc.fsd-b-description')}</p>
      {superBlockNoteText && (
        <div className='alert alert-info' style={{ marginTop: '2rem' }}>
          {superBlockNoteText}
        </div>
      )}
      <Spacer size='s' />
      <a
        className={'btn-cta-big btn-block signup-btn btn-cta'}
        href={firstChallengeSlug}
      >
        {t('misc.fsd-b-cta')}
      </a>
      <Spacer size='l' />
      <Container
        fluid={true}
        className=' full-width-container super-benefits-container'
      >
        <Container>
          <Row>
            <Col xs={12} className='super-block-benefits'>
              <div>
                <CommunityIcon />
                <div className='benefit-text'>
                  <h3>{t('misc.fsd-b-benefit-1-title')}</h3>
                  <p>{t('misc.fsd-b-benefit-1-description')}</p>
                </div>
              </div>
              <div>
                <CapIcon />
                <div className='benefit-text'>
                  <h3>{t('misc.fsd-b-benefit-2-title')}</h3>
                  <p>{t('misc.fsd-b-benefit-2-description')}</p>
                </div>
              </div>
              <div>
                <DumbbellIcon />
                <div className='benefit-text'>
                  <h3>{t('misc.fsd-b-benefit-3-title')}</h3>
                  <p>{t('misc.fsd-b-benefit-3-description')}</p>
                </div>
              </div>

Review comment (suggestion):
```suggestion
        className='full-width-container super-benefits-container'
```

Code after:
      )}
    </>
  );

  const introTopB = (
    <>
      <SuperBlockIcon className='cert-header-icon' superBlock={superBlock} />
      <Spacer size='m' />
      <h1 id='content-start' className='text-center big-heading'>
        {i18nSuperBlock}
      </h1>
      <Spacer size='m' />
      <p>{t('misc.fsd-b-description')}</p>
      {superBlockNoteText && (
        <div className='alert alert-info' style={{ marginTop: '2rem' }}>
          {superBlockNoteText}
        </div>
      )}
      <Spacer size='s' />
      <a
        className={'btn-cta-big btn-block signup-btn btn-cta'}
        href={firstChallengeSlug}
      >
        {t('misc.fsd-b-cta')}
      </a>
      <Spacer size='l' />
      <Container
        fluid={true}
        className='full-width-container super-benefits-container'
      >
        <Container>
          <Row>
            <Col xs={12} className='super-block-benefits'>
              <div>
                <CommunityIcon />
                <div className='benefit-text'>
                  <h3>{t('misc.fsd-b-benefit-1-title')}</h3>
                  <p>{t('misc.fsd-b-benefit-1-description')}</p>
                </div>
              </div>
              <div>
                <CapIcon />
                <div className='benefit-text'>
                  <h3>{t('misc.fsd-b-benefit-2-title')}</h3>
                  <p>{t('misc.fsd-b-benefit-2-description')}</p>
                </div>
              </div>
              <div>
                <DumbbellIcon />
                <div className='benefit-text'>
                  <h3>{t('misc.fsd-b-benefit-3-title')}</h3>