From e363ffa7fd92b96da736de382e476f362198c579 Mon Sep 17 00:00:00 2001 From: Rin Raeuber Date: Tue, 31 Mar 2020 16:56:07 +0200 Subject: [PATCH 1/9] Feature: Add featured Product component. --- .../featuredProduct.module.scss | 53 ++++++++++++++ components/featuredProduct/index.js | 69 +++++++++++++++++++ pages/imagi-nation-tv/index.js | 20 +++++- pages/imagi-nation-tv/styles.module.scss | 6 +- 4 files changed, 145 insertions(+), 3 deletions(-) create mode 100644 components/featuredProduct/featuredProduct.module.scss create mode 100644 components/featuredProduct/index.js diff --git a/components/featuredProduct/featuredProduct.module.scss b/components/featuredProduct/featuredProduct.module.scss new file mode 100644 index 000000000..52981153f --- /dev/null +++ b/components/featuredProduct/featuredProduct.module.scss @@ -0,0 +1,53 @@ +@import "../../styles/base/variables"; + +.featuredProductContainer { + display: flex; + background-color: $white; + max-width: 64em; + margin: 0 auto; + padding: 3em; + border: 1px solid #C6CACC; + box-sizing: border-box; + border-radius: 3px; + @media screen and (max-width: $sm) { + width: 100%; + padding: 0; + } + .featuredProductImageContainer, .featuredProductText { + flex: 50%; + } + .featuredProductImageContainer { + padding-right: 1em; // to make some space for the scaling + @media screen and (max-width: $sm) { + // not responsive yet … some work needs to be done here! + flex: none; + max-width: 100%; + } + } + .featuredProductText { + margin-top: 4em; + width: 75%; + } + .featuredProductImage:hover { + transform: scale(1.05); + transition: 1s ease-in-out; + } + .featuredProductTitle { + color: $magenta; + font-size: 4rem; + transform: rotate(-7.02deg); + letter-spacing: -0.15em; + } + .featuredProductPreheader { + letter-spacing: -0.13em; + font-size: 1.8rem; + font-style: normal; + } + .featuredProductButton { + margin-top: 3em; + background-color: $magenta; + } + .featuredProductButton:hover { + background-color: $green; + } +} \ No newline at end of file diff --git a/components/featuredProduct/index.js b/components/featuredProduct/index.js new file mode 100644 index 000000000..d235bda9a --- /dev/null +++ b/components/featuredProduct/index.js @@ -0,0 +1,69 @@ +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'; + +const FeaturedProduct = ({ + pretitle, title, imageUrl, text, linkUrl, linkText, +}) => ( +
+
+ {title} +
+
+ + {pretitle} + + + {title} + + + + {text} + + { linkUrl && ( + + )} +
+
+); + +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; diff --git a/pages/imagi-nation-tv/index.js b/pages/imagi-nation-tv/index.js index 5e59b05ad..88e75115b 100644 --- a/pages/imagi-nation-tv/index.js +++ b/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 = () => ( @@ -92,7 +95,8 @@ const ImagiNationTV = () => ( great times with a sense of connectedness. - The classroom and studio is Google. Guests join from their homes. The broadcast space is YouTube. + The classroom and studio is Google. Guests join from their homes. + The broadcast space is YouTube. {/* The audience is 40+ universities, 300+ schools, 8,000 marginalised kids, across 6 @@ -251,6 +255,18 @@ const ImagiNationTV = () => ( +
+ +
); diff --git a/pages/imagi-nation-tv/styles.module.scss b/pages/imagi-nation-tv/styles.module.scss index 8e6c5a0fa..cb3135e7d 100644 --- a/pages/imagi-nation-tv/styles.module.scss +++ b/pages/imagi-nation-tv/styles.module.scss @@ -203,4 +203,8 @@ } } } -} \ No newline at end of file +} +.featuredProductWrapper { + background-color: $pink; + padding: 5em; +} From 6e4a9e62cf1dc1632461d514d9c7f693385d0506 Mon Sep 17 00:00:00 2001 From: Lara Salameh Date: Wed, 1 Apr 2020 15:59:26 +1100 Subject: [PATCH 2/9] responsive style updates --- .../featuredProduct.module.scss | 70 +++++++++++-------- components/featuredProduct/index.js | 19 +++-- pages/imagi-nation-tv/index.js | 25 +++---- pages/imagi-nation-tv/styles.module.scss | 5 +- 4 files changed, 66 insertions(+), 53 deletions(-) diff --git a/components/featuredProduct/featuredProduct.module.scss b/components/featuredProduct/featuredProduct.module.scss index 52981153f..b45c246ac 100644 --- a/components/featuredProduct/featuredProduct.module.scss +++ b/components/featuredProduct/featuredProduct.module.scss @@ -1,53 +1,65 @@ @import "../../styles/base/variables"; .featuredProductContainer { - display: flex; background-color: $white; - max-width: 64em; - margin: 0 auto; - padding: 3em; - border: 1px solid #C6CACC; - box-sizing: border-box; + border: 1px solid $grey40; border-radius: 3px; - @media screen and (max-width: $sm) { - width: 100%; - padding: 0; - } - .featuredProductImageContainer, .featuredProductText { - flex: 50%; + box-sizing: border-box; + margin: 1em; + padding: 1em; + + @media screen and (min-width: $md) { + display: flex; + margin: 0 auto; + max-width: 50em; } + .featuredProductImageContainer { - padding-right: 1em; // to make some space for the scaling - @media screen and (max-width: $sm) { - // not responsive yet … some work needs to be done here! - flex: none; - max-width: 100%; + display: flex; + align-items: center; + justify-self: center; + img { + max-width: 20em; + margin: 0 auto; } } .featuredProductText { - margin-top: 4em; - width: 75%; + margin-top: 2em; + + @media screen and (min-width: $md) { + padding: 0 1em; + } + + .linkGoShop { + margin: 2em 0 0; + text-align: right; + a { + font-weight: 500; + } + } } .featuredProductImage:hover { transform: scale(1.05); transition: 1s ease-in-out; } .featuredProductTitle { - color: $magenta; - font-size: 4rem; - transform: rotate(-7.02deg); letter-spacing: -0.15em; + margin-bottom: 0.7em; + + strong { + letter-spacing: -0.15em; + color: $magenta; + font-size: 2.5rem; + line-height: 0.75em; + + @media screen and (min-width: $md) { + font-size: 3.5rem; + } + } } .featuredProductPreheader { letter-spacing: -0.13em; font-size: 1.8rem; font-style: normal; } - .featuredProductButton { - margin-top: 3em; - background-color: $magenta; - } - .featuredProductButton:hover { - background-color: $green; - } } \ No newline at end of file diff --git a/components/featuredProduct/index.js b/components/featuredProduct/index.js index d235bda9a..e3971fcb8 100644 --- a/components/featuredProduct/index.js +++ b/components/featuredProduct/index.js @@ -4,6 +4,7 @@ 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, @@ -18,21 +19,14 @@ const FeaturedProduct = ({
- {pretitle} - - - {title} - + {pretitle} + <strong>{title}</strong> - + {text} { linkUrl && ( @@ -46,6 +40,9 @@ const FeaturedProduct = ({ {linkText} )} + + Go to shop.aimementoring.com +
); diff --git a/pages/imagi-nation-tv/index.js b/pages/imagi-nation-tv/index.js index 88e75115b..5999da9e0 100644 --- a/pages/imagi-nation-tv/index.js +++ b/pages/imagi-nation-tv/index.js @@ -44,6 +44,18 @@ const ImagiNationTV = () => ( +
+ +
(
-
- -
+ ); diff --git a/pages/imagi-nation-tv/styles.module.scss b/pages/imagi-nation-tv/styles.module.scss index cb3135e7d..9a2cc1e5a 100644 --- a/pages/imagi-nation-tv/styles.module.scss +++ b/pages/imagi-nation-tv/styles.module.scss @@ -206,5 +206,8 @@ } .featuredProductWrapper { background-color: $pink; - padding: 5em; + + @media screen and (min-width: $md) { + padding: 5em; + } } From 71f8d2a840c23627fd5642f8d6b4d0c22b68c92a Mon Sep 17 00:00:00 2001 From: Lara Salameh Date: Wed, 1 Apr 2020 16:05:47 +1100 Subject: [PATCH 3/9] link fixes --- components/featuredProduct/featuredProduct.module.scss | 2 ++ components/featuredProduct/index.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/components/featuredProduct/featuredProduct.module.scss b/components/featuredProduct/featuredProduct.module.scss index b45c246ac..bb2226b28 100644 --- a/components/featuredProduct/featuredProduct.module.scss +++ b/components/featuredProduct/featuredProduct.module.scss @@ -35,6 +35,8 @@ text-align: right; a { font-weight: 500; + text-decoration: none; + cursor: pointer; } } } diff --git a/components/featuredProduct/index.js b/components/featuredProduct/index.js index e3971fcb8..0de041be6 100644 --- a/components/featuredProduct/index.js +++ b/components/featuredProduct/index.js @@ -41,7 +41,7 @@ const FeaturedProduct = ({ )} - Go to shop.aimementoring.com + Go to shop.aimementoring.com From 768c8f90b7e770ec3e0a07a359f5f5d05c168689 Mon Sep 17 00:00:00 2001 From: Lara Salameh Date: Wed, 1 Apr 2020 16:12:09 +1100 Subject: [PATCH 4/9] temp context style fixes --- .../featuredProduct.module.scss | 6 ++--- pages/imagi-nation-tv/index.js | 24 +++++++++---------- pages/imagi-nation-tv/styles.module.scss | 8 ++----- 3 files changed, 17 insertions(+), 21 deletions(-) diff --git a/components/featuredProduct/featuredProduct.module.scss b/components/featuredProduct/featuredProduct.module.scss index bb2226b28..de95c0d68 100644 --- a/components/featuredProduct/featuredProduct.module.scss +++ b/components/featuredProduct/featuredProduct.module.scss @@ -2,15 +2,15 @@ .featuredProductContainer { background-color: $white; - border: 1px solid $grey40; + border: 15px solid $pink; border-radius: 3px; box-sizing: border-box; - margin: 1em; + margin: 1em 1em 2em; padding: 1em; @media screen and (min-width: $md) { display: flex; - margin: 0 auto; + margin: 0 auto 3em; max-width: 50em; } diff --git a/pages/imagi-nation-tv/index.js b/pages/imagi-nation-tv/index.js index 5999da9e0..104779579 100644 --- a/pages/imagi-nation-tv/index.js +++ b/pages/imagi-nation-tv/index.js @@ -44,18 +44,6 @@ const ImagiNationTV = () => ( -
- -
( +
+ +
diff --git a/pages/imagi-nation-tv/styles.module.scss b/pages/imagi-nation-tv/styles.module.scss index 9a2cc1e5a..280796680 100644 --- a/pages/imagi-nation-tv/styles.module.scss +++ b/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; @@ -205,9 +205,5 @@ } } .featuredProductWrapper { - background-color: $pink; - - @media screen and (min-width: $md) { - padding: 5em; - } + } From 499756b5fd7381ea00e65da194f49464e342534d Mon Sep 17 00:00:00 2001 From: Lara Salameh Date: Thu, 2 Apr 2020 10:13:38 +1100 Subject: [PATCH 5/9] img responsive fix --- components/featuredProduct/featuredProduct.module.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/featuredProduct/featuredProduct.module.scss b/components/featuredProduct/featuredProduct.module.scss index de95c0d68..28d0dc709 100644 --- a/components/featuredProduct/featuredProduct.module.scss +++ b/components/featuredProduct/featuredProduct.module.scss @@ -19,8 +19,11 @@ align-items: center; justify-self: center; img { - max-width: 20em; margin: 0 auto; + + @media screen and (min-width: $md) { + max-width: 20em; + } } } .featuredProductText { From d9c2983217815140dae03a0bad10dee0cd140b32 Mon Sep 17 00:00:00 2001 From: Lara Salameh Date: Thu, 2 Apr 2020 17:05:20 +1100 Subject: [PATCH 6/9] styling and copy updates --- components/featuredProduct/featuredProduct.module.scss | 1 + pages/imagi-nation-tv/index.js | 4 +--- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/components/featuredProduct/featuredProduct.module.scss b/components/featuredProduct/featuredProduct.module.scss index 28d0dc709..992248558 100644 --- a/components/featuredProduct/featuredProduct.module.scss +++ b/components/featuredProduct/featuredProduct.module.scss @@ -56,6 +56,7 @@ color: $magenta; font-size: 2.5rem; line-height: 0.75em; + left: -0.2em; @media screen and (min-width: $md) { font-size: 3.5rem; diff --git a/pages/imagi-nation-tv/index.js b/pages/imagi-nation-tv/index.js index 104779579..1a3ef91d1 100644 --- a/pages/imagi-nation-tv/index.js +++ b/pages/imagi-nation-tv/index.js @@ -223,9 +223,7 @@ const ImagiNationTV = () => ( 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 INTV, checkout the Imagi-Nation Hoodie for sale over at our - apparel shop. Every sale from this hoodie goes towards keeping - mentors in our global classrooms, houses, laptops!" + 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" /> From 8c45ca893fe7d948be13b7fba917a6ff08f2df2d Mon Sep 17 00:00:00 2001 From: Lara Salameh Date: Thu, 2 Apr 2020 17:08:46 +1100 Subject: [PATCH 7/9] updating copy --- pages/imagi-nation-tv/index.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/pages/imagi-nation-tv/index.js b/pages/imagi-nation-tv/index.js index 1a3ef91d1..b5264ae90 100644 --- a/pages/imagi-nation-tv/index.js +++ b/pages/imagi-nation-tv/index.js @@ -94,15 +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. - - The classroom and studio is Google. Guests join from their homes. - The broadcast space is YouTube. - - {/* - 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. - */}
Date: Thu, 2 Apr 2020 17:18:44 +1100 Subject: [PATCH 8/9] replacing image --- pages/imagi-nation-tv/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/imagi-nation-tv/index.js b/pages/imagi-nation-tv/index.js index b5264ae90..26ef1e650 100644 --- a/pages/imagi-nation-tv/index.js +++ b/pages/imagi-nation-tv/index.js @@ -211,7 +211,7 @@ const ImagiNationTV = () => (
Date: Thu, 2 Apr 2020 17:36:27 +1100 Subject: [PATCH 9/9] adding in shop variable --- .env.dev.example | 3 +++ .env.production.example | 3 +++ .env.staging.example | 3 +++ pages/imagi-nation-tv/index.js | 5 ++--- yarn.lock | 9 +++++++++ 5 files changed, 20 insertions(+), 3 deletions(-) diff --git a/.env.dev.example b/.env.dev.example index 9dd4c91f1..fc944ac17 100644 --- a/.env.dev.example +++ b/.env.dev.example @@ -56,3 +56,6 @@ REACT_APP_GOOGLE_TAG_MANAGER=GTM-NK5SFHW # MAILCHIMP REACT_APP_MAILCHIMP_API=https://us12.api.mailchimp.com/3.0 REACT_APP_MAILCHIMP_KEY=84b0bce41e03945cf599fa0e82780ddb-us12 + +#APPAREL +REACT_APP_SHOP_PRODUCT_LINK=https://shop.aimementoring.com/collections/all-products/products \ No newline at end of file diff --git a/.env.production.example b/.env.production.example index a79ae42a0..badebc421 100644 --- a/.env.production.example +++ b/.env.production.example @@ -57,3 +57,6 @@ REACT_APP_GOOGLE_TAG_MANAGER=GTM-NK5SFHW # MAILCHIMP REACT_APP_MAILCHIMP_API=https://us12.api.mailchimp.com/3.0 REACT_APP_MAILCHIMP_KEY=84b0bce41e03945cf599fa0e82780ddb-us12 + +#APPAREL +REACT_APP_SHOP_PRODUCT_LINK=https://shop.aimementoring.com/collections/all-products/products \ No newline at end of file diff --git a/.env.staging.example b/.env.staging.example index 3c5cbdca3..b5f2ee046 100644 --- a/.env.staging.example +++ b/.env.staging.example @@ -57,3 +57,6 @@ REACT_APP_GOOGLE_TAG_MANAGER=GTM-NK5SFHW # MAILCHIMP REACT_APP_MAILCHIMP_API=https://us12.api.mailchimp.com/3.0 REACT_APP_MAILCHIMP_KEY=84b0bce41e03945cf599fa0e82780ddb-us12 + +#APPAREL +REACT_APP_SHOP_PRODUCT_LINK=https://shop.aimementoring.com/collections/all-products/products \ No newline at end of file diff --git a/pages/imagi-nation-tv/index.js b/pages/imagi-nation-tv/index.js index 26ef1e650..a55924f46 100644 --- a/pages/imagi-nation-tv/index.js +++ b/pages/imagi-nation-tv/index.js @@ -12,8 +12,7 @@ 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 SHOP_PRODUCT_LINK = process.env.REACT_APP_SHOP_PRODUCT_LINK; const ImagiNationTV = () => ( @@ -215,7 +214,7 @@ const ImagiNationTV = () => ( 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} + linkUrl={`${SHOP_PRODUCT_LINK}/imagi-nation-hoodie`} linkText="Buy a Hoodie" />
diff --git a/yarn.lock b/yarn.lock index fb0a5d967..25ac7045c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11373,6 +11373,15 @@ react-places-autocomplete@^7.2.1: lodash.debounce "^4.0.8" prop-types "^15.5.8" +react-player@^1.11.0: + version "1.15.3" + resolved "https://registry.yarnpkg.com/react-player/-/react-player-1.15.3.tgz#d00cf145f9c86184cb0a071a1fbf8ecb7b68987f" + integrity sha512-8fc0R1AipFIy7l4lKgnIg+gMU2IY32ZMxxBlINjXAq/YnN3HUP3hOaE+aQ0lQv+a1/MMZgbekWD86ZGDO7kB8g== + dependencies: + deepmerge "^4.0.0" + load-script "^1.0.0" + prop-types "^15.7.2" + react-player@^1.15.2: version "1.15.2" resolved "https://registry.yarnpkg.com/react-player/-/react-player-1.15.2.tgz#b348df962dbdba39242e8c6edef1df479531a00b"