Skip to content

Commit

Permalink
Merge pull request #433 from aimementoring/feat/imagine-updates
Browse files Browse the repository at this point in the history 
Imagine page updates

Former-commit-id: be6fdad
  • Loading branch information
@lulen11
lulen11 authored May 8, 2020
2 parents 257e708 + e951b1b commit 37d22cb
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 497 deletions.
159 changes: 44 additions & 115 deletions pages/imagine/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
Expand All @@ -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}>
Expand All @@ -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>
);
};
Expand Down
Loading

0 comments on commit 37d22cb

Please sign in to comment.