Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/landing/components/testimonials.tsx (TypeScript)

Code before:
import React from 'react';

import { Trans, useTranslation } from 'react-i18next';
import { Col } from '@freecodecamp/ui';
import emmaImg from '../../../assets/images/landing/Emma.png';
import sarahImg from '../../../assets/images/landing/Sarah.png';
import shawnImg from '../../../assets/images/landing/Shawn.png';
import { LazyImage } from '../../helpers';
import BigCallToAction from './big-call-to-action';

const Testimonials = (): JSX.Element => {
  const { t } = useTranslation();

  return (
    <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
      <div className='testimonials'>
        <h2
          className='big-heading text-center'
          data-playwright-test-label='testimonials-section-header'
        >
          {t('landing.testimonials.heading')}
        </h2>
        <div className='testimonials-row' data-test-label='testimonial-cards'>
          <div
            className='testimonial-card'
            data-playwright-test-label='testimonial-card'
          >
            <div
              className='testimonial-card-header'
              data-playwright-test-label='testimonials-endorser-image-container'
            >
              <LazyImage
                alt='Shawn Wang, a young-looking Asian man, smiling for a selfie with a snow-capped mountain in the background.'
                className='testimonial-image'
                src={shawnImg}
              />
            </div>

            <div className='testimonials-footer'>
              <div className='testimonial-meta'>

Review comment (suggestion):
This change is to fix the issue with button not being padded (because the Col component adds some padding to its content). I'm also using `Col` here to add some responsiveness to the section.

The value of the props are copied from the Certifications section right below this one:

https://github.com/freeCodeCamp/freeCodeCamp/blob/b05d9541a34d673b763a2c107824a3c7a9ddfba8/client/src/components/landing/components/certifications.tsx#L10-L17

Code after:
import React from 'react';

import { Trans, useTranslation } from 'react-i18next';
import emmaImg from '../../../assets/images/landing/Emma.png';
import sarahImg from '../../../assets/images/landing/Sarah.png';
import shawnImg from '../../../assets/images/landing/Shawn.png';
import { LazyImage } from '../../helpers';
import BigCallToAction from './big-call-to-action';

const Testimonials = (): JSX.Element => {
  const { t } = useTranslation();

  return (
    <div className='testimonials'>
      <h2
        className='big-heading text-center'
        data-playwright-test-label='testimonials-section-header'
      >
        {t('landing.testimonials.heading')}
      </h2>
      <div className='testimonials-row' data-test-label='testimonial-cards'>
        <div
          className='testimonial-card'
          data-playwright-test-label='testimonial-card'
        >
          <div
            className='testimonial-card-header'
            data-playwright-test-label='testimonials-endorser-image-container'
          >
            <LazyImage
              alt='Shawn Wang, a young-looking Asian man, smiling for a selfie with a snow-capped mountain in the background.'
              className='testimonial-image'
              src={shawnImg}
            />
          </div>

          <div className='testimonials-footer'>
            <div className='testimonial-meta'>
              <h3 data-playwright-test-label='testimonials-endorser-location'>
                {' '}