Merge pull request #433 from aimementoring/feat/imagine-updates

Imagine page updates

pages/imagine/index.js

@@ -10,6 +10,8 @@ import WavyDonateSection from '../../components/wavyDonateSection';
 import TypeformModal from '../../components/typeformModal';
 import IntercomChat from '../../components/intercom';
 import scrollToComponent from '../../utils/scrollToComponent';
+import useDonate from '../../hooks/useDonate';
+
 import styles from './style.scss';
 
 const DoubleCurvedLine = dynamic(() => import('../../components/imaginationTv/doubleCurvedLine'));
@@ -23,11 +25,11 @@ const ImagiNationTV = (props) => {
   const [showModal, setModal] = useState(false);
   const toggleModal = () => setModal(!showModal);
   const scrollToPanel = () => scrollToComponent(scrollToThisRef);
-  const { scrollHandler } = props;
+  const [modalVisible, toggleDonateModal] = useDonate();
 
   return (
     <Layout>
-      <div className={styles.heroBannerImagiTV}>
+      <div className={styles.heroBannerImagine}>
         <div className={styles.bannerWrapper}>
           <div className={`${styles.bannerContent} ${styles.bannerItem}`} >
             <Title className={styles.welcomeTitle} type="headingLockup" theme={process.env.REACT_APP_THEME}>
@@ -44,130 +46,57 @@ const ImagiNationTV = (props) => {
               a live YouTube TV show, an open Google Doc and a hoodie?
               <br /><br />
               <strong><mark>&nbsp;A feature film, of course.&nbsp;</mark></strong>
+              <br /><br />
+              {`Live on IMAGI-NATION{TV} from May 11, we will share a Google Doc with the
+              world with the title ‘IMAGINE’, and those in and outside of the AIME orbit
+              will be able to come together and write a feature film script. Guests on IN{TV}
+              over the four weeks will have the chance to engage in the writing experience.
+              So will kids AIME mentors across 6 countries.`}
             </Paragraph>
+            <div className="triBtnSet">
+              <Button
+                theme={process.env.REACT_APP_THEME}
+                className={`${styles.triBtn} ${styles.watchBtn}`}
+                url="https://docs.google.com/document/d/1MyE1Xv8OSsFnJLEL2WNhLL0DbsKJfMtmcrrUUa7BOh8/edit"
+                target="_blank"
+                type="link"
+              >
+              Write
+              </Button>
+              <Button
+                type="link"
+                text="Film"
+                theme={process.env.REACT_APP_THEME}
+                className={`${styles.triBtn} ${styles.imagiDonate}`}
+                url="/positions/rec9lXBVd7ju08wtf/Intern-Production-Coordinator"
+              />
+              <Button
+                type="link"
+                text="Fund"
+                className={`${styles.triBtn} ${styles.imagiHoodieBtn}`}
+                theme={process.env.REACT_APP_THEME}
+                onClickFunction={toggleDonateModal}
 
-            <Button
-              theme={process.env.REACT_APP_THEME}
-              className={`${styles.watchBtn}`}
-              target="_blank"
-              type="link"
-              scrollHandler={scrollToPanel}
-              onClickFunction={scrollHandler}
-            >
-              Get Involved
-            </Button>
-          </div>
-
-          <div className={`${styles.bannerMediaFeature} ${styles.bannerItem} ${styles.welcomeVideoWrapper}`}>
-            <img
-              src={`${ASSETS_URL}/assets/images/illustrations/imagi-splosion.png`}
-              alt="IMAGI-SPLOSION"
-              className={styles.videoCoverArt}
-            />
-          </div>
-
-        </div>
-      </div>
-
-      <section className={styles.aboutImagineSection}>
-        <div className={styles.aboutInTVWrapper}>
-          <div className={styles.aboutParagraphColumn}>
-            <Title type="h3Title" className={styles.aboutInTVTitle}>
-              Welcome to the latest initiative from AIME
-            </Title>
-            <Paragraph>
-              {`
-                Live on IMAGI-NATION{TV} from May 11, we will share a Google Doc
-                with the world with the title ‘IMAGINE’, and those in and outside
-                of the AIME orbit will be able to come together and write a feature
-                film script. Guests on IN{TV} over the four weeks will have the
-                chance to engage in the writing experience. So will kids AIME mentors
-                across 6 countries. 
-              `}
-            </Paragraph>
-            <Paragraph>
-              {`
-                Also launching on May 11 will be over 500 creator grants in the shape
-                of a hoodie. Those who want to create a scene for the film ‘IMAGINE’ 
-                will be able to apply at aimementoring.com to secure themselves an official
-                “This Hoodie is a Film” hoodie. This will be their key to submitting a creation into ‘IMAGINE’. 
-              `}
-            </Paragraph>
-          </div>
-          <div className={styles.aboutCyclopsColumn}>
-            <div className={styles.cyclopsSpeechBubble}>
-              <div>
-                <Title type="h5Title" className={styles.speechButtonContent}>
-                  Let's create together!
-                </Title>
-              </div>
-              <img
-                src={`${ASSETS_URL}/assets/images/illustrations/kyle-cyclops@2x.png`}
-                alt="Kyle the Cyclops"
-                className={styles.cyclopsImage}
               />
             </div>
+            <Paragraph>
+              Or if you have any questions,&nbsp;
+              <IntercomChat label="chat with us" />
+            </Paragraph>
           </div>
-        </div>
-      </section>
-      <div className={styles.inTVContentWrapper}>
-        <section className={styles.inTVEpisodesWrapper}>
-          <ImagineCarousel ref={scrollToThisRef} />
-        </section>
 
-        <section ref={scrollToThisRef} className={styles.chattyPuppetsSection}>
-          <div className={styles.puppetsChatWrapper}>
-            <TypeformModal visible={showModal} toggleModal={toggleModal} />
-            <div className={styles.puppetChat}>
-              <div className={styles.puppetWrap}>
-                <img
-                  src={`${ASSETS_URL}/assets/images/illustrations/robo_red@2x.png`}
-                  alt="Robo Red"
-                  className={styles.puppetTalking}
-                />
-              </div>
-              <div className={styles.puppetWords}>
-                <Title type="h4Title">Hey hey hey, are you up for it? </Title>
-                <Paragraph>
-                  This is an experiment that requires ultimate imagination.
-                  It will be one of the films that captures the essence of
-                  isolation and creation in 2020. 
-                </Paragraph>
-                <div className={styles.becomeAPartnerBtn}>
-                  <IntercomChat label="Chat with us" />
-                </div>
-              </div>
-            </div>
-            <div className={styles.puppetChatSmaller}>
-              <div>
-                <Button
-                  type="text"
-                  className={`${styles.typeformAction} ${styles.puppetTitle}`}
-                >
-                  Your contribution would be truly spectacular
-                </Button>
-
-              </div>
+          <div className={`${styles.bannerMediaFeature} ${styles.bannerItem} ${styles.welcomeVideoWrapper}`}>
+            <div className={styles.bannerImageRotate}>
               <img
-                src={`${ASSETS_URL}/assets/images/illustrations/queen_lizzy@2x.png`}
-                alt="Queen Lizzy"
-                className={styles.smlPuppetTalking}
+                src={`${ASSETS_URL}/assets/images/banner/partnering.webp`}
+                alt="Write it, Film it, Fund it"
               />
             </div>
           </div>
-        </section>
-        <WavyDonateSection />
-        <section className={styles.featuredProductWrapper}>
-          <FeaturedProduct
-            imageUrl={`${ASSETS_URL}/assets/images/apparel/hoodie_imagine@2x.jpg`}
-            pretitle="Check it out …"
-            title="Imagine Hoodie"
-            text={'Support the making of this film, checkout the Imagine Hoodie for sale over at our apparel shop. Every sale from this hoodie will help bring people together from all walks of life to co-create something wonderful!'}
-            linkUrl={`${SHOP_PRODUCT_LINK}/imagi-nation-hoodie`}
-            linkText="Buy a Hoodie"
-          />
-        </section>
+
+        </div>
       </div>
+
     </Layout>
   );
 };