New About Page Cover

packages/web/src/about/About.tsx

@@ -3,6 +3,7 @@ import { Image, StyleSheet, View } from 'react-native'
 import Backers from 'src/about/Backers'
 import { mintPlaza, teamHero } from 'src/about/images'
 import Team from 'src/about/Team'
+import VideoCover from 'src/about/VideoCover'
 import { H1, H4 } from 'src/fonts/Fonts'
 import OpenGraph from 'src/header/OpenGraph'
 import MissionText from 'src/home/MissionText'
@@ -38,30 +39,7 @@ export class About extends React.Component<Props & I18nProps> {
           description={t('description')}
         />
         <View style={styles.container}>
-          <View style={styles.background}>
-            <View style={styles.absolute}>
-              <View style={styles.maxWidth}>
-                <Responsive medium={styles.mediumHero} large={styles.largeHero}>
-                  <View style={styles.hero}>
-                    <H1>{t('aboutUs')}</H1>
-                    <H4>{t('ourTeam')}</H4>
-                  </View>
-                </Responsive>
-              </View>
-            </View>
-            <Responsive
-              medium={[styles.mintPlazaContainer, styles.mediumMintPlaza]}
-              large={[styles.mintPlazaContainer, styles.largeMintPlaza]}
-            >
-              <AspectRatio style={styles.mintPlazaContainer} ratio={IMAGE_WIDTH / IMAGE_HEIGHT}>
-                <Image
-                  resizeMode={'contain'}
-                  source={{ uri: mintPlaza }}
-                  style={styles.mintPlaza}
-                />
-              </AspectRatio>
-            </Responsive>
-          </View>
+          <VideoCover />
           <MissionText />
           <Team randomSeed={randomSeed} />
           <GridRow

packages/web/src/about/VideoCover.tsx

@@ -0,0 +1,167 @@
+import * as React from 'react'
+import { createElement, Image, NetInfo, StyleSheet, View, ViewStyle } from 'react-native'
+import { BeautifulMoneyPreview } from 'src/about/images/index'
+import { H1, H3 } from 'src/fonts/Fonts'
+import { I18nProps, NameSpaces, withNamespaces } from 'src/i18n'
+import { ScreenProps, ScreenSizes, withScreenSize } from 'src/layout/ScreenSize'
+import Hoverable from 'src/shared/Hoverable'
+import { PlayCircle2 } from 'src/shared/PlayCircle'
+import VideoModal from 'src/shared/VideoModal'
+import { standardStyles, textStyles } from 'src/styles'
+
+import { getEffectiveConnection, SLOW_CONNECTIONS } from 'src/utils/utils'
+interface State {
+  isHovering: boolean
+  supportsVideo: boolean
+}
+
+interface VideoProps {
+  style?: ViewStyle | ViewStyle[]
+  autoPlay?: boolean
+  muted?: boolean
+  loop?: boolean
+  poster?: string
+  children: React.ReactNode
+}
+
+function Video(props: VideoProps) {
+  return createElement('video', props)
+}
+
+class VideoCover extends React.PureComponent<I18nProps & ScreenProps, State> {
+  state: State = {
+    isHovering: false,
+    supportsVideo: false,
+  }
+
+  onHoverStart = () => {
+    this.setState({ isHovering: true })
+  }
+  onHoverEnd = () => {
+    this.setState({ isHovering: false })
+  }
+
+  componentDidMount = () => {
+    const connectionType = getEffectiveConnection(window.navigator)
+    if (!SLOW_CONNECTIONS.has(connectionType)) {
+      this.setState({ supportsVideo: true })
+    }
+  }
+
+  render() {
+    const { t, screen } = this.props
+    return (
+      <View style={[styles.cover]}>
+        <View style={styles.background}>
+          <Video
+            style={[styles.video, this.state.isHovering && styles.videoHover]}
+            muted={true}
+            autoPlay={true}
+            loop={true}
+            poster="/static/AboutPreview.jpg"
+          >
+            {this.state.supportsVideo && (
+              <source
+                src="https://storage.googleapis.com/celo_whitepapers/about-video.mp4"
+                type="video/mp4"
+              />
+            )}}
+            <Image
+              resizeMode="cover"
+              source={{ uri: '/static/AboutPreview.jpg' }}
+              style={standardStyles.image}
+            />
+          </Video>
+        </View>
+        <View style={[styles.overlay, standardStyles.centered]}>
+          <VideoModal videoID="kKggE5OvyhE" ariaDescription="Video: What if money were beautiful?">
+            {(onPlay) => (
+              <Hoverable
+                onHoverIn={this.onHoverStart}
+                onHoverOut={this.onHoverEnd}
+                onPress={onPlay}
+              >
+                <View
+                  style={[
+                    standardStyles.centered,
+                    styles.interactive,
+                    this.state.isHovering && styles.hover,
+                  ]}
+                >
+                  <H1
+                    style={[
+                      textStyles.invert,
+                      styles.title,
+                      textStyles.center,
+                      standardStyles.elementalMarginBottom,
+                    ]}
+                  >
+                    {screen === ScreenSizes.MOBILE
+                      ? t('prosperityForAllMobile')
+                      : t('prosperityForAll')}
+                  </H1>
+                  <View
+                    style={[
+                      standardStyles.centered,
+                      standardStyles.row,
+                      standardStyles.elementalMargin,
+                    ]}
+                  >
+                    <PlayCircle2 height={40} />
+                    <H3 style={[textStyles.invert, textStyles.center, styles.subtitle]}>
+                      {t('whatIfMoney')}
+                    </H3>
+                  </View>
+                </View>
+              </Hoverable>
+            )}
+          </VideoModal>
+        </View>
+      </View>
+    )
+  }
+}
+
+export default withNamespaces(NameSpaces.about)(withScreenSize(VideoCover))
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 64,
+    lineHeight: 72,
+  },
+  subtitle: {
+    marginLeft: 10,
+  },
+  interactive: {
+    cursor: 'pointer',
+    transitionProperty: 'transform',
+    transitionDuration: '500ms',
+    padding: 15,
+  },
+  hover: {
+    transform: [{ scale: 1.015 }],
+  },
+  background: {
+    position: 'absolute',
+    width: '100vw',
+    height: '100vh',
+  },
+  overlay: {
+    height: '100%',
+    width: '100%',
+  },
+  cover: {
+    width: '100vw',
+    height: '100vh',
+  },
+  video: {
+    objectFit: 'cover',
+    height: '100%',
+    filter: 'saturate(0.6) brightness(0.70)',
+    transitionProperty: 'filter',
+    transitionDuration: '400ms',
+  },
+  videoHover: {
+    filter: 'saturate(1) brightness(0.9)',
+  },
+})

packages/web/src/about/images/index.ts

@@ -1,4 +1,5 @@
+import BeautifulMoneyPreview from './BeautifulMoneyPreview.jpg'
 import mintPlaza from './mint-plaza@2x.png'
 import teamHero from './team-hero@2x.png'
 
-export { mintPlaza, teamHero }
+export { BeautifulMoneyPreview, mintPlaza, teamHero }

packages/web/src/header/Header.3.tsx

@@ -29,6 +29,8 @@ const DARK_PAGES = new Set([
   CeloLinks.walletApp,
 ])
 
+const TRANSLUCENT_PAGES = new Set([menu.ABOUT_US.link])
+
 interface OwnProps {
   router: Router
 }
@@ -41,6 +43,7 @@ interface State {
   mobileMenuFade: Animated.Value
   menuFade: Animated.Value
   menuFaded: boolean
+  belowFoldUpScroll: boolean
   isBannerShowing: boolean
 }
 
@@ -58,23 +61,31 @@ export class Header extends React.Component<Props, State> {
   lastScrollOffset: number
 
   handleScroll = throttle(() => {
-    // GOing Up
+    const goingUp = this.lastScrollOffset > scrollOffset()
+    const belowFold = scrollOffset() > menuHidePoint()
 
-    if (this.lastScrollOffset > scrollOffset()) {
+    if (goingUp && belowFold) {
+      this.setState({ belowFoldUpScroll: true })
+    } else {
+      this.setState({ belowFoldUpScroll: false })
+    }
+
+    if (goingUp) {
       this.setState({ menuFaded: false }, () => {
         Animated.timing(this.state.menuFade, {
           toValue: 1,
           duration: 100,
           easing: Easing.in(Easing.quad),
         }).start()
       })
-    } else if (scrollOffset() > menuHidePoint()) {
+    } else if (belowFold) {
       Animated.timing(this.state.menuFade, {
         toValue: 0,
         duration: 100,
         easing: Easing.in(Easing.quad),
       }).start(() => this.setState({ menuFaded: true }))
     }
+
     this.lastScrollOffset = scrollOffset()
   }, 100)
 
@@ -106,6 +117,7 @@ export class Header extends React.Component<Props, State> {
       menuFade: new Animated.Value(1),
       menuFaded: false,
       mobileMenuActive: false,
+      belowFoldUpScroll: false,
       isBannerShowing: false,
     }
   }
@@ -145,13 +157,23 @@ export class Header extends React.Component<Props, State> {
   }
 
   isDarkMode = () => {
-    return DARK_PAGES.has(this.props.router.pathname)
+    return (
+      DARK_PAGES.has(this.props.router.pathname) ||
+      (this.props.router.pathname === menu.ABOUT_US.link && !this.state.belowFoldUpScroll)
+    )
+  }
+
+  isTranslucent = () => {
+    return TRANSLUCENT_PAGES.has(this.props.router.pathname)
   }
 
   getForegroundColor = () => {
     return this.isDarkMode() ? colors.white : colors.dark
   }
   getBackgroundColor = () => {
+    if (this.isTranslucent() && !this.state.belowFoldUpScroll) {
+      return 'transparent'
+    }
     return this.isDarkMode() ? colors.dark : colors.white
   }
 
@@ -205,7 +227,10 @@ export class Header extends React.Component<Props, State> {
                     <>
                       <Animated.View style={[{ opacity: this.state.menuFade }]}>
                         {this.isDarkMode() ? (
-                          <LogoDarkBg height={30} />
+                          <LogoDarkBg
+                            height={30}
+                            allWhite={this.isTranslucent() && !this.state.belowFoldUpScroll}
+                          />
                         ) : (
                           <LogoLightBg height={30} />
                         )}

packages/web/src/join/FeaturedVideo.tsx

@@ -34,7 +34,13 @@ class FeaturedVideo extends React.PureComponent<I18nProps> {
           desktopStyle={standardStyles.sectionMarginBottom}
         >
           <Cell span={Spans.full}>
-            {<VideoModal previewImage={image} videoID={'F5SnS1v9fNo'} />}
+            {
+              <VideoModal
+                previewImage={image}
+                videoID={'F5SnS1v9fNo'}
+                ariaDescription="Video on working on Celo"
+              />
+            }
           </Cell>
         </GridRow>
       </View>

packages/web/src/logos/LogoDarkBg.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react'
+import { colors } from 'src/styles'
 import { Path, Svg } from 'svgs'
 
 interface Props {
   height?: number
+  allWhite?: boolean
 }
 
 export default class LogoDarkBg extends React.Component<Props> {
@@ -24,15 +26,15 @@ export default class LogoDarkBg extends React.Component<Props> {
         />
         <Path
           d="M15.1316 17.1053C19.1284 17.1053 22.3684 13.8653 22.3684 9.86842C22.3684 5.87158 19.1284 2.63158 15.1316 2.63158C11.1348 2.63158 7.89476 5.87158 7.89476 9.86842C7.89476 13.8653 11.1348 17.1053 15.1316 17.1053ZM15.1316 19.7368C9.6816 19.7368 5.26318 15.3184 5.26318 9.86842C5.26318 4.41842 9.6816 0 15.1316 0C20.5816 0 25 4.41842 25 9.86842C25 15.3184 20.5816 19.7368 15.1316 19.7368Z"
-          fill="#35D07F"
+          fill={this.props.allWhite ? colors.white : '#35D07F'}
         />
         <Path
           d="M9.86842 22.3684C13.8653 22.3684 17.1053 19.1284 17.1053 15.1316C17.1053 11.1348 13.8653 7.89476 9.86842 7.89476C5.87158 7.89476 2.63158 11.1348 2.63158 15.1316C2.63158 19.1284 5.87158 22.3684 9.86842 22.3684ZM9.86842 25C4.41842 25 0 20.5816 0 15.1316C0 9.6816 4.41842 5.26318 9.86842 5.26318C15.3184 5.26318 19.7368 9.6816 19.7368 15.1316C19.7368 20.5816 15.3184 25 9.86842 25Z"
-          fill="#FBCC5C"
+          fill={this.props.allWhite ? colors.white : '#FBCC5C'}
         />
         <Path
           d="M15.4553 19.7315C16.1392 18.903 16.6292 17.932 16.89 16.8899C17.9321 16.6294 18.9029 16.1391 19.7316 15.4554C19.6937 16.6623 19.4339 17.852 18.9647 18.9646C17.8521 19.4338 16.6624 19.6936 15.4553 19.7315ZM8.11026 8.10989C7.06815 8.37042 6.09736 8.86068 5.26868 9.54436C5.30657 8.33752 5.56631 7.14778 6.03552 6.03515C7.14815 5.56594 8.33789 5.30621 9.54473 5.26831C8.86105 6.09699 8.37078 7.06778 8.11026 8.10989Z"
-          fill="#ECFF8F"
+          fill={this.props.allWhite ? colors.white : '#ECFF8F'}
         />
       </Svg>
     )

packages/web/src/react-native-aug.d.ts

@@ -29,6 +29,7 @@ declare module 'react-native' {
     cursor?: string
     display?: 'none' | 'flex' | 'inline' | 'inline-flex'
     fill?: string
+    filter?: string
   }
 
   interface ImageProps {

packages/web/src/shared/PlayCircle.tsx

@@ -15,3 +15,21 @@ export default class PlayCircle extends React.PureComponent {
     )
   }
 }
+
+interface Props {
+  height: number
+  color?: colors
+}
+
+export function PlayCircle2(props) {
+  return (
+    <Svg width={props.height} height={props.height} viewBox="0 0 40 40" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40ZM16.7857 24.9487L26.4286 20L16.7857 15.0513V24.9487Z"
+        fill={props.color || colors.white}
+      />
+    </Svg>
+  )
+}