Feature: Add featured Product component.

components/featuredProduct/featuredProduct.module.scss

@@ -0,0 +1,71 @@
+@import "../../styles/base/variables";
+
+.featuredProductContainer {   
+  background-color: $white;
+  border: 15px solid $pink;
+  border-radius: 3px;
+  box-sizing: border-box;
+  margin: 1em 1em 2em;
+  padding: 1em;
+
+  @media screen and (min-width: $md) {
+    display: flex;
+    margin: 0 auto 3em;
+    max-width: 50em;
+  }
+
+  .featuredProductImageContainer {
+    display: flex;
+    align-items: center;
+    justify-self: center;
+    img {
+      margin: 0 auto;
+
+      @media screen and (min-width: $md) {
+        max-width: 20em;
+      }
+    }
+  }
+  .featuredProductText {
+    margin-top: 2em;
+
+    @media screen and (min-width: $md) {
+      padding: 0 1em;
+    }
+
+    .linkGoShop {
+      margin: 2em 0 0;
+      text-align: right;
+      a {
+        font-weight: 500;
+        text-decoration: none;
+        cursor: pointer;
+      }
+    }
+  }
+  .featuredProductImage:hover {
+    transform: scale(1.05);
+    transition: 1s ease-in-out;
+  }
+  .featuredProductTitle {
+    letter-spacing: -0.15em;
+    margin-bottom: 0.7em;
+
+    strong {
+      letter-spacing: -0.15em;
+      color: $magenta;
+      font-size: 2.5rem;
+      line-height: 0.75em;
+      left: -0.2em;
+
+      @media screen and (min-width: $md) {
+        font-size: 3.5rem;
+      }
+    }
+  }
+  .featuredProductPreheader {
+    letter-spacing: -0.13em;
+    font-size: 1.8rem;
+    font-style: normal;
+  }
+}

components/featuredProduct/index.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Title from 'aime-blueprint/lib/components/title';
+import Button from 'aime-blueprint/lib/components/button';
+import Paragraph from 'aime-blueprint/lib/components/paragraph';
+import styles from './featuredProduct.module.scss';
+import Link from 'next/link';
+
+const FeaturedProduct = ({
+  pretitle, title, imageUrl, text, linkUrl, linkText,
+}) => (
+  <div className={styles.featuredProductContainer}>
+    <div className={styles.featuredProductImageContainer}>
+      <img
+        className={styles.featuredProductImage}
+        alt={title}
+        src={imageUrl}
+      />
+    </div>
+    <div className={styles.featuredProductText}>
+      <Title
+        type="headingLockup"
+        className={styles.featuredProductTitle}
+        theme={process.env.REACT_APP_THEME}
+      >
+        {pretitle}
+        <strong>{title}</strong>
+      </Title>
+      <Paragraph theme={process.env.REACT_APP_THEME}>
+        {text}
+      </Paragraph>
+      { linkUrl && (
+        <Button
+          theme={process.env.REACT_APP_THEME}
+          aria-label="cta"
+          type="link"
+          className={styles.featuredProductButton}
+          url={linkUrl}
+        >
+          {linkText}
+        </Button>
+      )}
+      <Paragraph theme={process.env.REACT_APP_THEME} className={styles.linkGoShop}>
+        <a href="http://shop.aimementoring.com" target="_blank">Go to shop.aimementoring.com</a>
+      </Paragraph>
+    </div>
+  </div>
+);
+
+FeaturedProduct.defaultProps = {
+  pretitle: '',
+  text: '',
+  linkUrl: '',
+  linkText: 'Buy it now',
+};
+
+FeaturedProduct.propTypes = {
+  pretitle: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  imageUrl: PropTypes.string.isRequired,
+  text: PropTypes.string,
+  linkUrl: PropTypes.string,
+  linkText: PropTypes.string,
+};
+
+export default FeaturedProduct;

pages/imagi-nation-tv/index.js

@@ -5,12 +5,15 @@ import Paragraph from 'aime-blueprint/lib/components/paragraph';
 import Button from 'aime-blueprint/lib/components/button';
 import Layout from '../../hocs/basicLayout';
 import IntercomChat from '../../components/intercom';
-import styles from './styles.module.scss';
 import Anchor from '../../components/common/link';
+import FeaturedProduct from '../../components/featuredProduct';
+import styles from './styles.module.scss';
 
 const DoubleCurvedLine = dynamic(() => import('../../components/imaginationTv/doubleCurvedLine'));
 const ImaginationTvCard = dynamic(() => import('../../components/imaginationTv/imaginationTvCard'));
 const ASSETS_URL = process.env.REACT_APP_ASSETS_URL;
+const FEATURED_PRODUCT_LINK = 'https://shop.aimementoring.com/collections/all-products/products/imagi-nation-hoodie';
+
 
 const ImagiNationTV = () => (
   <Layout>
@@ -91,14 +94,6 @@ const ImagiNationTV = () => (
             in one moment so we are not alone, so that we move through tough times and
             great times with a sense of connectedness.
           </Paragraph>
-          <Paragraph>
-            The classroom and studio is Google. Guests join from their homes. The broadcast space is YouTube.
-          </Paragraph>
-          {/* <Paragraph>
-          The audience is 40+ universities, 300+ schools, 8,000 marginalised kids, across 6
-          countries who are currently involved in AIME’s Imagination Factory, and a world
-          of people looking to make sense of today in order to imagine tomorrow.
-          </Paragraph> */}
         </div>
         <ImaginationTvCard
           day="Monday"
@@ -214,6 +209,16 @@ const ImagiNationTV = () => (
           </Paragraph>
         </ImaginationTvCard>
       </section>
+      <section className={styles.featuredProductWrapper}>
+        <FeaturedProduct
+          imageUrl="https://cdn.shopify.com/s/files/1/0226/0157/products/Screen_Shot_2020-02-17_at_9.54.51_pm_796x884.png?v=1581937021"
+          pretitle="Check it out …"
+          title="Imagi-Nation Hoodie"
+          text={'Support IN{TV}, checkout the Imagi-Nation Hoodie for sale over at our apparel shop. Every sale from this hoodie goes towards keeping mentors in our global virtual classrooms!'}
+          linkUrl={FEATURED_PRODUCT_LINK}
+          linkText="Buy a Hoodie"
+        />
+      </section>
       <DoubleCurvedLine />
       <section className={styles.partnersWrapper}>
         <div className={styles.partnersHeader}>
@@ -251,6 +256,7 @@ const ImagiNationTV = () => (
           </div>
         </div>
       </section>
+
     </div>
   </Layout>
 );

pages/imagi-nation-tv/styles.module.scss

@@ -126,7 +126,7 @@
 
   .inTVEpisodesWrapper {
     max-width: $lg;
-    padding: 2em;
+    padding: 2em 2em 0;
     margin: 0 auto;
     width: 100%;
     columns: 20em;
@@ -203,4 +203,7 @@
       }
     }
   }
-}
+}
+.featuredProductWrapper {
+
+}