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

components/PromoSection/PromoSection.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Container } from '../Container';
+import classNames from 'classnames';
+import styles from './PromoSection.module.scss';
+
+const cx = classNames.bind(styles);
+
+const PromoSection = () => {
+  return (
+    <div className={cx(['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.</div>
+      </Container>
+    </div>
+  );
+};
+
+export default PromoSection;

components/PromoSection/PromoSection.module.scss

@@ -0,0 +1,27 @@
+.component {
+  @import 'styles/css-variables';
+
+  background-color: var(--wpe--color--grey);
+
+  h2 {
+    padding: 2em;
+  }
+
+  .section {
+    display: flex;
+  }
+
+  .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';

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 />
       </Main>
       <Footer title={siteTitle} menuItems={footerMenu} />
     </>