Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Imagine page updates #433

Merged
merged 8 commits into from
May 8, 2020
Merged

Imagine page updates #433

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c4a6bb0
jmb updates
lulen11 May 8, 2020
c56420f
cta btns
lulen11 May 8, 2020
3f2dd37
WIP removing everything
lulen11 May 8, 2020
29a5fc9
minimalist styles
lulen11 May 8, 2020
ab3e0f0
btn styles
lulen11 May 8, 2020
d291ef7
updating image gif
lulen11 May 8, 2020
61ba219
image fixes
lulen11 May 8, 2020
7612607
image flex alignment
lulen11 May 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 44 additions & 115 deletions pages/imagine/index.js
View file
Open in desktop
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