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

) * feat: ✨ Added Promo section component to the Front Page * feat: ✨ Added CTA to the PromoSection component Also removed unused React import and refactored the CSS * refactor: 💄 Refactored button styling to the global scope * refactor: ♻️ Using showCta flag instead of two props to display CTA component Also made some updates regarding styling * style: ♻️ Using the section style from the global scss * refactor: ♻️ Extracted CtaButton component into its own module * refactor: ♻️ Moved showCta into the props of CtaButton * refactor: ♻️ Lifted CtaButton state to PromoSection * feat: ✨ Added Promo section component to the Front Page * feat: ✨ Added CTA to the PromoSection component Also removed unused React import and refactored the CSS * refactor: 💄 Refactored button styling to the global scope * refactor: ♻️ Using showCta flag instead of two props to display CTA component Also made some updates regarding styling * style: ♻️ Using the section style from the global scss * refactor: ♻️ Extracted CtaButton component into its own module * refactor: ♻️ Moved showCta into the props of CtaButton * refactor: ♻️ Lifted CtaButton state to PromoSection
wpengine · Apr 11, 2023 · 16d406b · 16d406b
1 parent b976438
commit 16d406b
Show file tree

Hide file tree

Showing 13 changed files with 138 additions and 33 deletions.
diff --git a/components/CtaButton/CtaButton.js 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
@@ -0,0 +1 @@
+export { default as CtaButton } from './CtaButton.js';
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
+export { default as PromoSection } from './PromoSection.js';
diff --git 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
@@ -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
diff --git 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
@@ -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} />
     </>