feat(client): remove extra HTML elements (#50988)

client/src/components/landing/components/as-seen-in.tsx

@@ -1,4 +1,4 @@
-import { Col, Row } from '@freecodecamp/react-bootstrap';
+import { Grid } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AsSeenInText } from '../../../assets/images/components';
@@ -7,14 +7,10 @@ const AsSeenIn = (): JSX.Element => {
   const { t } = useTranslation();
 
   return (
-    <Row className='as-seen-in'>
-      <Col sm={8} smOffset={2} xs={12}>
-        <div className='text-center'>
-          <p className='big-heading'>{t('landing.as-seen-in')}</p>
-          <AsSeenInText fill='light' />
-        </div>
-      </Col>
-    </Row>
+    <Grid fluid={true} className='as-seen-in text-center'>
+      <p className='big-heading'>{t('landing.as-seen-in')}</p>
+      <AsSeenInText fill='light' />
+    </Grid>
   );
 };
 

client/src/components/landing/components/landing-top.tsx

@@ -1,4 +1,4 @@
-import { Col, Row } from '@freecodecamp/react-bootstrap';
+import { Col, Row, Grid } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { clientLocale } from '../../../../../config/env.json';
@@ -21,7 +21,7 @@ function LandingTop(): JSX.Element {
     clientLocale
   );
   return (
-    <div className='landing-top'>
+    <Grid className='landing-top'>
       <Row>
         <Spacer size='medium' />
         <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
@@ -53,7 +53,7 @@ function LandingTop(): JSX.Element {
           <Spacer size='medium' />
         </Col>
       </Row>
-    </div>
+    </Grid>
   );
 }
 

client/src/components/landing/index.tsx

@@ -1,4 +1,3 @@
-import { Grid } from '@freecodecamp/react-bootstrap';
 import React, { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -18,12 +17,8 @@ function Landing(): ReactElement {
     <>
       <SEO title={t('metaTags:title')} />
       <main className='landing-page'>
-        <Grid>
-          <LandingTop />
-        </Grid>
-        <Grid fluid={true}>
-          <AsSeenIn />
-        </Grid>
+        <LandingTop />
+        <AsSeenIn />
         <Testimonials />
         <Certifications />
         <Faq />

client/src/components/landing/landing.css

@@ -40,6 +40,7 @@ figcaption.caption {
 .as-seen-in {
   background-color: var(--gray-75);
   color: var(--gray-15);
+  padding-inline: 15px;
 }
 
 .as-seen-in .big-heading {