[TITAN-293] feat: ✨ Added Promo section component to the Front Page

components/ProductCard/ProductCard.js

@@ -46,9 +46,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>

components/ProductCard/ProductCard.module.scss

@@ -74,21 +74,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);
-        }
-      }
-    }
   }
 }

components/PromoSection/PromoSection.js

@@ -0,0 +1,30 @@
+import { Container } from '../Container';
+import classNames from 'classnames';
+import styles from './PromoSection.module.scss';
+import Link from 'next/link';
+
+const cx = classNames.bind(styles);
+
+const Cta = ({ ctaLink = null, ctaLabel = null }) => {
+  return (ctaLink && ctaLabel) ? (
+    <div className={'buttonContainer'}>
+      <Link href={ctaLink}>
+        <a className={'button'}>{`${ctaLabel}`}</a>
+      </Link>
+    </div>
+  ) : null;
+};
+
+const PromoSection = ({ ctaLink = null, ctaLabel = null }) => {
+  return (
+    <div className={`section ${styles.component}`}>
+      <Container>
+        <h1 className={cx(styles.title)}>Promo Banners</h1>
+        <div className={cx(styles.description)}>You can use this component to promote articles or specific products. And optionally add a CTA below.</div>
+        <Cta ctaLink={ctaLink} ctaLabel={ctaLabel} />
+      </Container>
+    </div>
+  );
+};
+
+export default PromoSection;

components/PromoSection/PromoSection.module.scss

@@ -0,0 +1,23 @@
+.component {
+  @import 'styles/css-variables';
+
+  background-color: var(--wpe--color--grey);
+
+  h2 {
+    padding: 2em;
+  }
+
+  .title {
+    text-align: center;
+    font-size: 50px;
+    padding: 1em;
+    margin-bottom: 0em;
+  }
+
+  .description {
+    padding: 1rem 0;
+    text-align: center;
+    margin-top: auto;
+    width: 100%;
+  }
+}

components/PromoSection/index.js

@@ -0,0 +1 @@
+export { default as PromoSection } from './PromoSection.js';

components/index.js

@@ -11,6 +11,7 @@ export { NavigationMenu } from './NavigationMenu';
 export { PostInfo } from './PostInfo';
 export { ProductCard } from './ProductCard';
 export { ProductSection } from './ProductSection';
+export { PromoSection } from './PromoSection';
 export { SkipNavigationLink } from './SkipNavigationLink';
 export { TestimonialsSection } from './TestimonialsSection';
 export { Hero } from './Hero';

styles/global.scss

@@ -11,4 +11,21 @@
   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);
+    }
+  }
 }

wp-templates/front-page.js

@@ -12,6 +12,7 @@ import {
   TestimonialsSection,
 } from '../components';
 import productsStub from '../data/stubs/products';
+import { PromoSection } from '../components/PromoSection';
 
 export default function Component(props) {
   const { title: siteTitle, description: siteDescription } =
@@ -40,9 +41,7 @@ export default function Component(props) {
         <ProductSection heading='Latest Products' products={latestProducts} />
         <TestimonialsSection />
         <ProductSection heading='On Sale' products={saleProducts} />
-        {/*
-          <div>promo banner</div> 
-          */}
+        <PromoSection ctaLink={'/about'} ctaLabel={'About'}/>
       </Main>
       <Footer title={siteTitle} menuItems={footerMenu} />
     </>