From c71f3089f02a83819ecfe114eb58b3c05a541ee5 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Thu, 20 Jul 2023 10:22:14 +0300
Subject: [PATCH] feat(client): remove extra HTML elements (#50988)

---
 .../components/landing/components/as-seen-in.tsx   | 14 +++++---------
 .../components/landing/components/landing-top.tsx  |  6 +++---
 client/src/components/landing/index.tsx            |  9 ++-------
 client/src/components/landing/landing.css          |  1 +
 4 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/client/src/components/landing/components/as-seen-in.tsx b/client/src/components/landing/components/as-seen-in.tsx
index febc7673410..c0f6aaf451d 100644
--- a/client/src/components/landing/components/as-seen-in.tsx
+++ b/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>
   );
 };
 
diff --git a/client/src/components/landing/components/landing-top.tsx b/client/src/components/landing/components/landing-top.tsx
index 4f17da73c63..de67413b2f7 100644
--- a/client/src/components/landing/components/landing-top.tsx
+++ b/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>
   );
 }
 
diff --git a/client/src/components/landing/index.tsx b/client/src/components/landing/index.tsx
index 24a14eeaa8b..e0cc6ca54c8 100644
--- a/client/src/components/landing/index.tsx
+++ b/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 />
diff --git a/client/src/components/landing/landing.css b/client/src/components/landing/landing.css
index f5bf8f14b22..c94a2f254e7 100644
--- a/client/src/components/landing/landing.css
+++ b/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 {