diff --git a/components/CtaButton/CtaButton.js b/components/CtaButton/CtaButton.js
new file mode 100644
index 0000000..1dbcf10
--- /dev/null
+++ b/components/CtaButton/CtaButton.js
@@ -0,0 +1,13 @@
+import Link from 'next/link';
+
+const CtaButton = ({ctaLink = null, ctaLabel = null }) => {
+  return (
+    <div className='buttonContainer'>
+      <Link href={ctaLink}>
+        <a className='button'>{ctaLabel}</a>
+      </Link>
+    </div>
+  );
+};
+
+export default CtaButton;
diff --git a/components/CtaButton/index.js b/components/CtaButton/index.js
new file mode 100644
index 0000000..66d84d2
--- /dev/null
+++ b/components/CtaButton/index.js
@@ -0,0 +1 @@
+export { default as CtaButton } from './CtaButton.js';
diff --git a/components/ProductCard/ProductCard.js b/components/ProductCard/ProductCard.js
index 7c646f0..0e1d3c9 100644
--- a/components/ProductCard/ProductCard.js
+++ b/components/ProductCard/ProductCard.js
@@ -45,9 +45,9 @@ const ProductCard = ({ product }) => {
             )}
           </span>
         </div>
-        <div className={styles.buttonContainer}>
+        <div className='buttonContainer'>
           <Link href={productHref}>
-            <a className={styles.button}>View product</a>
+            <a className='button'>View product</a>
           </Link>
         </div>
       </div>
diff --git a/components/ProductCard/ProductCard.module.scss b/components/ProductCard/ProductCard.module.scss
index 621fd21..ee86fee 100644
--- a/components/ProductCard/ProductCard.module.scss
+++ b/components/ProductCard/ProductCard.module.scss
@@ -76,21 +76,5 @@
       font-weight: 700;
       margin-bottom: 1rem;
     }
-
-    .buttonContainer {
-      .button {
-        margin: 0px 0.5rem;
-        background-color: var(--wpe--color--green);
-        text-decoration: none;
-        font-weight: 500;
-        padding: 1rem;
-        display: inline-block;
-        color: var(--wpe--color--white);
-        transition: all 0.5s;
-        &:hover {
-          background-color: var(--wpe--color--green);
-        }
-      }
-    }
   }
 }
diff --git a/components/ProductSection/ProductSection.js b/components/ProductSection/ProductSection.js
index 3487992..b5f6779 100644
--- a/components/ProductSection/ProductSection.js
+++ b/components/ProductSection/ProductSection.js
@@ -1,16 +1,13 @@
-import classNames from 'classnames';
 import styles from './ProductSection.module.scss';
 import { ProductCard } from '../ProductCard';
 import { Container } from '../Container';
 
-const cx = classNames.bind(styles);
-
 const ProductSection = ({ products, heading }) => {
   return (
-    <div className={cx(['section', styles.component])}>
+    <div className={`section ${styles.component}`}>
       <Container>
-        <h1>{heading}</h1>
-        <div className={cx(styles.section)}>
+        <h2>{heading}</h2>
+        <div className='section'>
           {products?.map?.((product) => {
             return <ProductCard key={product.id} product={product} />;
           })}
diff --git a/components/PromoSection/PromoSection.js b/components/PromoSection/PromoSection.js
new file mode 100644
index 0000000..c347b15
--- /dev/null
+++ b/components/PromoSection/PromoSection.js
@@ -0,0 +1,23 @@
+import { Container } from '../Container';
+import { CtaButton } from '../CtaButton';
+import styles from './PromoSection.module.scss';
+
+const PromoSection = ({
+  showCta = false,
+  ctaLink = null,
+  ctaLabel = null,
+  title = null,
+  description = null
+}) => {
+  return (
+    <div className={`section ${styles.component}`}>
+      <Container>
+        <h1 className={styles.title}>{title}</h1>
+        <div className={styles.description}>{description}</div>
+        { showCta && <CtaButton ctaLink={ctaLink} ctaLabel={ctaLabel} /> }
+      </Container>
+    </div>
+  );
+};
+
+export default PromoSection;
diff --git a/components/PromoSection/PromoSection.module.scss b/components/PromoSection/PromoSection.module.scss
new file mode 100644
index 0000000..381d83e
--- /dev/null
+++ b/components/PromoSection/PromoSection.module.scss
@@ -0,0 +1,22 @@
+.component {
+  @import 'styles/css-variables';
+
+  background-color: var(--wpe--color--grey);
+
+  h2 {
+    padding: 2em;
+  }
+
+  .title {
+    text-align: center;
+    font-size: 50px;
+    padding: 1em 0 0 0;
+  }
+
+  .description {
+    padding: 1rem 0;
+    text-align: center;
+    margin-top: auto;
+    width: 100%;
+  }
+}
diff --git a/components/PromoSection/index.js b/components/PromoSection/index.js
new file mode 100644
index 0000000..97fb22a
--- /dev/null
+++ b/components/PromoSection/index.js
@@ -0,0 +1 @@
+export { default as PromoSection } from './PromoSection.js';
diff --git a/components/TestimonialsSection/TestimonialsSection.js b/components/TestimonialsSection/TestimonialsSection.js
index 43935df..4763dcc 100644
--- a/components/TestimonialsSection/TestimonialsSection.js
+++ b/components/TestimonialsSection/TestimonialsSection.js
@@ -1,16 +1,14 @@
 import TestimonialCard from './TestimonialCard';
 import { Container } from '../Container';
-import classNames from 'classnames';
 import styles from './TestimonialsSection.module.scss';
 
-const cx = classNames.bind(styles);
 
 const TestimonialsSection = () => {
   return (
-    <div className={cx(['section', styles.component])}>
+    <div className={`section ${styles.component}`}>
       <Container>
-        <h1>Customer Testimonials</h1>
-        <div className={cx(styles.section)}>
+        <h2>Customer Testimonials</h2>
+        <div className='section'>
           <TestimonialCard
             image='https://demo.studiopress.com/page-builder/spend/eso_spend_customer_testimonial_1.jpg'
             blurb='I can sync all my BigCommerce products into WordPress and catch all updates automatically. Now I can create content in WordPress with BigCommerce products!'
diff --git a/components/index.js b/components/index.js
index 37d94e4..48eeccc 100644
--- a/components/index.js
+++ b/components/index.js
@@ -15,6 +15,7 @@ export { SearchInput } from './SearchInput';
 export { SearchRecommendations } from './SearchRecommendations';
 export { SearchResults } from './SearchResults';
 export { SearchSection } from './SearchSection';
+export { PromoSection } from './PromoSection';
 export { SkipNavigationLink } from './SkipNavigationLink';
 export { TestimonialsSection } from './TestimonialsSection';
 export { Hero } from './Hero';
diff --git a/package-lock.json b/package-lock.json
index d9b23ba..ef4d88f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,11 +14,14 @@
         "@wordpress/base-styles": "^4.7.0",
         "@wordpress/block-library": "^7.13.0",
         "classnames": "^2.3.1",
+        "cookie-cutter": "^0.2.0",
         "graphql": "^16.6.0",
         "next": "^12.1.6",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "sass": "^1.54.9"
+        "react-icons": "^4.8.0",
+        "sass": "^1.54.9",
+        "use-debounce": "^9.0.3"
       },
       "devDependencies": {
         "eslint": "8.26.0",
@@ -2584,6 +2587,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/cookie-cutter": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/cookie-cutter/-/cookie-cutter-0.2.0.tgz",
+      "integrity": "sha512-eVyP5liHjDMCmGlp2OD+qoin5TJlwUBRjBKN8R2yJ3ePf8xqUtqmRP6e36ipe0nBm2lTiertH6iHPOptNQzAEw=="
+    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -5406,6 +5414,14 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
       "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
     },
+    "node_modules/react-icons": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
+      "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -6229,6 +6245,17 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-debounce": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-9.0.4.tgz",
+      "integrity": "sha512-6X8H/mikbrt0XE8e+JXRtZ8yYVvKkdYRfmIhWZYsP8rcNs9hk3APV8Ua2mFkKRLcJKVdnX2/Vwrmg2GWKUQEaQ==",
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/use-lilius": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/use-lilius/-/use-lilius-2.0.3.tgz",
@@ -8448,6 +8475,11 @@
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
       "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
     },
+    "cookie-cutter": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/cookie-cutter/-/cookie-cutter-0.2.0.tgz",
+      "integrity": "sha512-eVyP5liHjDMCmGlp2OD+qoin5TJlwUBRjBKN8R2yJ3ePf8xqUtqmRP6e36ipe0nBm2lTiertH6iHPOptNQzAEw=="
+    },
     "cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -10518,6 +10550,12 @@
         }
       }
     },
+    "react-icons": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
+      "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -11117,6 +11155,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "use-debounce": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-9.0.4.tgz",
+      "integrity": "sha512-6X8H/mikbrt0XE8e+JXRtZ8yYVvKkdYRfmIhWZYsP8rcNs9hk3APV8Ua2mFkKRLcJKVdnX2/Vwrmg2GWKUQEaQ==",
+      "requires": {}
+    },
     "use-lilius": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/use-lilius/-/use-lilius-2.0.3.tgz",
diff --git a/styles/global.scss b/styles/global.scss
index 11168bd..00e13c4 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -11,6 +11,23 @@
   margin: 0 auto;
   text-align: center;
   padding-bottom: 4em;
+  display: flex;
+}
+
+.buttonContainer {
+  .button {
+    margin: 0px 0.5rem;
+    background-color: var(--wpe--color--green);
+    text-decoration: none;
+    font-weight: 500;
+    padding: 1rem;
+    display: inline-block;
+    color: var(--wpe--color--white);
+    transition: all 0.5s;
+    &:hover {
+      background-color: var(--wpe--color--green);
+    }
+  }
 }
 
 .shop-grid {
diff --git a/wp-templates/front-page.js b/wp-templates/front-page.js
index 0d9c2ef..8bbb0f1 100644
--- a/wp-templates/front-page.js
+++ b/wp-templates/front-page.js
@@ -9,6 +9,7 @@ import {
   SEO,
   ContentWrapper,
   ProductSection,
+  PromoSection,
   TestimonialsSection,
 } from '../components';
 import productsStub from '../data/stubs/products';
@@ -40,9 +41,12 @@ export default function Component(props) {
         <ProductSection heading='Latest Products' products={latestProducts} />
         <TestimonialsSection />
         <ProductSection heading='On Sale' products={saleProducts} />
-        {/*
-          <div>promo banner</div> 
-          */}
+        <PromoSection
+          showCta
+          ctaLink='/about'
+          ctaLabel='About'
+          title='Promo Banners'
+          description='You can use this component to promote articles or specific products. And optionally add a CTA below.' />
       </Main>
       <Footer title={siteTitle} menuItems={footerMenu} />
     </>