homepage build start

src/components/Footer.js

@@ -0,0 +1,28 @@
+import React from "react";
+
+class Footer extends React.Component {
+    render() {
+        return (
+            <footer>
+                <div className={'container'}>
+                    <div className={'flex flex-row'}>
+                        <div className={'basis-1/2'}>
+                            <div className={'flex flex-row items-center'}>
+                                <div className={'basis 1/2'}>
+                                    <h2>Stay up<br/>
+                                    to <span>date</span></h2>
+                                </div>
+                                <div className={'basis 1/2'}>
+                                    Subscribe
+                                </div>
+                            </div>
+                            <hr/>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        );
+    }
+}
+
+export default Footer;

src/contents/Home/video-section1.js

@@ -0,0 +1,34 @@
+import React from "react";
+
+import video1 from "../../videos/video1.mp4"
+import video1webm from "../../videos/video1.webm"
+import video1hero from "../../images/video-section-1-hero.png"
+
+class VideoSection1 extends React.Component {
+    render() {
+        return (
+            <div className={'container'}>
+                <div className={'flex flex-row items-center h-full'}>
+                    <div className={'basis-1/2 pr-64'}>
+                        <div className={'video-section-content'}>
+                            <h2>Create a vault</h2>
+                            <p>
+                                Create a vault, mint IST, and trade in the $10B+ interchain market while holding onto your Cosmos assets.
+                            </p>
+                        </div>
+                    </div>
+                    <div className={'basis-1/2 h-full'}>
+                        <div className={'video-container'}>
+                            <video autoPlay={false} preload={'none'} loop={true} playsInline={true} muted={true} poster={video1hero}>
+                                <source src={video1} type='video/mp4;codecs="hvc1"'/>
+                                <source src={video1webm} type="video/webm" />
+                            </video>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default VideoSection1;

src/contents/Home/video-section2.js

@@ -8,15 +8,22 @@ class VideoSection2 extends React.Component {
     render() {
         return (
             <div className={'container'}>
-                <div className={'flex flex-row items-center'}>
-                    <div className={'basis-1/2'}>
-
+                <div className={'flex flex-row items-center h-full'}>
+                    <div className={'basis-1/2 pr-64'}>
+                        <div className={'video-section-content'}>
+                            <h2>Arb <br/> the peg</h2>
+                            <p>
+                                Provide a high-quality stable token and receive newly-minted IST using the Parity Stability module, all via CLI.
+                            </p>
+                        </div>
                     </div>
-                    <div className={'basis-1/2'}>
-                        <video autoPlay={true} preload={'none'} loop={true} playsInline={true} muted={true} poster={video2hero}>
-                            <source src={video2} type='video/mp4;codecs="hvc1"'/>
-                            <source src={video2webm} type="video/webm" />
-                        </video>
+                    <div className={'basis-1/2 h-full'}>
+                        <div className={'video-container'}>
+                            <video autoPlay={true} preload={'none'} loop={true} playsInline={true} muted={true} poster={video2hero}>
+                                <source src={video2} type='video/mp4;codecs="hvc1"'/>
+                                <source src={video2webm} type="video/webm" />
+                            </video>
+                        </div>
                     </div>
                 </div>
             </div>

src/contents/Home/video-section3.js

@@ -0,0 +1,34 @@
+import React from "react";
+
+import video3 from "../../videos/video3.mp4"
+import video3webm from "../../videos/video3.webm"
+import video3hero from "../../images/video-section-3-hero.png"
+
+class VideoSection3 extends React.Component {
+    render() {
+        return (
+            <div className={'container'}>
+                <div className={'flex flex-row items-center h-full'}>
+                    <div className={'basis-1/2 pr-64'}>
+                        <div className={'video-section-content'}>
+                            <h2>Boost your BLD</h2>
+                            <p>
+                                Boost enhances your staked Agoric BLD tokens by allowing you to mint IST against your future staking rewards.
+                            </p>
+                        </div>
+                    </div>
+                    <div className={'basis-1/2 h-full'}>
+                        <div className={'video-container'}>
+                            <video autoPlay={true} preload={'none'} loop={true} playsInline={true} muted={true} poster={video3hero}>
+                                <source src={video3} type='video/mp4;codecs="hvc1"'/>
+                                <source src={video3webm} type="video/webm" />
+                            </video>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default VideoSection3;

src/contents/homepage.js

@@ -2,15 +2,55 @@ import React from 'react';
 import ReactFullpage from '@fullpage/react-fullpage';
 import HeroSection from "./Home/hero-section";
 import StakeSection from "./Home/stake-section";
+import VideoSection1 from "./Home/video-section1";
 import VideoSection2 from "./Home/video-section2";
+import VideoSection3 from "./Home/video-section3";
+import Footer from "../components/Footer";
 
 class Fullpage extends React.Component {
+    onLeave(origin, destination, direction) {
+        console.log("onLeave", { origin, destination, direction });
+        // arguments are mapped in order of fullpage.js callback arguments do something
+        // with the event
+
+
+        origin.item.classList.add('leave');
+        origin.item.classList.remove('slide-down');
+        origin.item.classList.remove('slide-up');
+
+        if(direction === 'down'){
+            destination.item.classList.remove('slide-down');
+            destination.item.classList.add('slide-up');
+        }
+        if(direction === 'up'){
+            destination.item.classList.remove('slide-up');
+            destination.item.classList.add('slide-down');
+        }
+
+        if(destination.item.querySelector('video') !== null){
+            const nextVideo = destination.item.querySelector('video');
+            nextVideo.play();
+        }
+
+        if(origin.item.querySelector('video') !== null){
+            const prevVideo = origin.item.querySelector('video');
+            prevVideo.pause();
+        }
+
+        setTimeout(function(){
+            origin.item.classList.remove('leave');
+        },100)
+    }
+
     render(){
         return (
             <ReactFullpage
                 //fullpage options
                 licenseKey = {'YOUR_KEY_HERE'}
                 scrollingSpeed = {1000} /* Options here */
+                onLeave={this.onLeave.bind(this)}
+                normalScrollElements = '.normal-scroll'
+
 
                 render={({ state, fullpageApi }) => {
                     return (
@@ -21,17 +61,17 @@ class Fullpage extends React.Component {
                             <div className={'section stake-section fp-auto-height'}>
                                 <StakeSection/>
                             </div>
+                            <div className={'section video-section'}>
+                                <VideoSection1/>
+                            </div>
                             <div className={'section video-section'}>
                                 <VideoSection2/>
                             </div>
-                            <div className="section">
-                                <p>Section 1 (welcome to fullpage.js)</p>
-                                <button onClick={() => fullpageApi.moveSectionDown()}>
-                                    Click me to move down
-                                </button>
+                            <div className={'section video-section'}>
+                                <VideoSection3/>
                             </div>
-                            <div className="section">
-                                <p>Section 2</p>
+                            <div className={'section footer-section fp-auto-height normal-scroll'}>
+                                <Footer/>
                             </div>
                         </ReactFullpage.Wrapper>
                     );

src/styles/components/Home/video-section.scss

@@ -0,0 +1,64 @@
+.section{
+  overflow: hidden;
+  &.video-section{
+    .container{
+      padding:0 0 0 30px;
+      height:100%;
+    }
+
+    .video-section-content{
+      width:100%;
+      transform:translateY(-100%);
+      transition: 750ms all ease-in-out 100ms;
+      opacity:0;
+      will-change: transform;
+    }
+
+    &.slide-up{
+      .video-section-content{
+        transform:translateY(100%);
+      }
+    }
+    &.slide-down{
+      .video-section-content{
+        transform:translateY(-100%);
+      }
+    }
+    &.active{
+      .video-section-content{
+        transform:translateY(0);
+        opacity:1;
+      }
+    }
+
+    &.leave{
+      transition: 0ms all ease-in-out 0ms;
+    }
+
+    .video-container{
+      position:absolute;
+      height: 100%;
+      width: 50vw;
+      overflow: hidden;
+      right: 0;
+
+      video{
+        position:absolute;
+        object-fit: cover;
+
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translateX(-50%) translateY(-50%);
+        transform: translateX(-50%) translateY(-50%);
+        min-width: 100%;
+        min-height: 100%;
+        width: auto;
+        height: auto;
+        z-index: -1000;
+        overflow: hidden;
+
+
+      }
+    }
+  }
+}

src/styles/components/footer.scss

@@ -0,0 +1,58 @@
+.section{
+  &.footer-section{
+    overflow: visible;
+  }
+  footer{
+    background: rgb(254,198,9);
+    background: linear-gradient(51deg, rgba(254,198,9,1) 39%, rgba(239,90,32,1) 100%);
+
+    .container{
+      padding:90px 0;
+      position:relative;
+
+      &:after{
+        width:40vw;
+        padding-top:45%;
+        background:url(../images/footer-illustration.png) no-repeat scroll bottom right transparent;
+        background-size:contain;
+        position:absolute;
+        right:0;
+        bottom:0;
+        content:'';
+        z-index:1;
+      }
+    }
+
+    h2{
+      font-weight:bold;
+      font-size: 52px;
+      color: #000000;
+      letter-spacing: -1px;
+      line-height: 62px;
+      text-transform:uppercase;
+
+      span{
+        position: relative;
+
+        &:after{
+          position: absolute;
+          content:'';
+          bottom:-10px;
+          width:100%;
+          display:inline-block;
+          height:10px;
+          background: #000000;
+          left:0;
+        }
+      }
+    }
+
+    hr{
+      border:none;
+      background:#000000;
+      height:1px;
+      width:100%;
+      margin:60px 0;
+    }
+  }
+}

src/styles/main.scss

@@ -5,11 +5,12 @@
 @import "components/buttons";
 
 @import "components/header";
+@import "components/footer";
 @import "components/Home/hero-section";
 @import "components/Home/stake-section";
+@import "components/Home/video-section";
 
 body{
-  background:yellow;
   font-family: $font;
   font-size:16px;
   font-weight:400;
@@ -48,5 +49,5 @@ h2{
   color: #000000;
   letter-spacing: 0;
   line-height: 72px;
-  margin-bottom:10px;
+  margin-bottom:0px;
 }