first stub of home page and animation

frontend/gatsby-config.js

@@ -19,13 +19,15 @@ module.exports = {
       options: {
         apiURL: process.env.API_URL || 'http://localhost:1337',
         contentTypes: [
+          'layer',
           'domain',
           'use-case',
           'alternative',
         ],
         singleTypes: [
-          `header`,
-          `about`,
+          'header',
+          'home',
+          'about',
         ],
         queryLimit: 1000
       }
@@ -42,7 +44,7 @@ module.exports = {
         background_color: `#663399`,
         theme_color: `#663399`,
         display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+        icon: ``, // This path is relative to the root of the site.
       },
     },
     // this (optional) plugin enables Progressive Web App + Offline functionality

frontend/package.json

@@ -5,10 +5,10 @@
   "version": "0.1.0",
   "author": "Alain Otjens <alain@waag.org>",
   "dependencies": {
-    "gatsby": "^2.24.32",
-    "gatsby-cli": "^2.12.77",
+    "gatsby": "^2.24.37",
+    "gatsby-cli": "^2.12.80",
     "gatsby-image": "^2.4.9",
-    "gatsby-plugin-manifest": "^2.4.14",
+    "gatsby-plugin-manifest": "^2.4.22",
     "gatsby-plugin-offline": "^3.2.22",
     "gatsby-plugin-react-helmet": "^3.3.6",
     "gatsby-plugin-sass": "^2.3.12",
@@ -16,6 +16,7 @@
     "gatsby-source-filesystem": "^2.3.24",
     "gatsby-source-strapi": "^0.0.12",
     "gatsby-transformer-sharp": "^2.5.7",
+    "gsap": "^3.3.4",
     "node-sass": "^4.14.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",

frontend/src/components/header.js

@@ -32,7 +32,7 @@ const Header = ({ siteTitle }) => (
 
         <div id="site-titles">
           <h1 id="site-title"><Link to="/" >{ data.strapiHeader.title }</Link></h1>
-          <h2 id="site-subtitle">{ data.strapiHeader.subtitle }</h2>
+          {/* <h2 id="site-subtitle">{ data.strapiHeader.subtitle }</h2> */}
         </div>
 
         <ul className="menu">

frontend/src/pages/index.js

-import React from "react"
+import React, { useRef, useEffect } from "react"
+import gsap, { Power1 } from 'gsap';
+import { MotionPathPlugin } from "gsap/MotionPathPlugin";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
 
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 
-const IndexPage = () => (
-  <Layout>
-    <SEO title="Home" />
-    <h1>Index</h1>
-    <p>Lorem ipsum dolor kit</p>
-  </Layout>
-)
+import VisualPhone from "../images/phone.js"
+
+gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);
+
+const IndexPage = ({ data }) => {
+  let phone = useRef(null);
+  let phonePin = useRef(null);
+  let phoneTrigger = useRef(null);
+
+  useEffect(()=> {
+    const tl = gsap.timeline({
+      scrollTrigger: {
+        trigger: phoneTrigger,
+        start: "0px top",
+        end: "bottom 75%",
+        toggleActions: "play pause reverse reset",
+        //markers: true,
+        scrub: 0.25,
+        pin: phonePin,
+      },
+      ease: Power1.easeInOut
+    });
+
+    const keyframes = [
+      0.8,
+      2
+    ]
+
+    tl.to(phone.querySelectorAll("#buttons"), { y: -300 }, keyframes[0])
+      .to(phone.querySelectorAll("#screen"),  { y: -200 }, keyframes[0])
+      .to(phone.querySelectorAll("#front"),   { y: -100 }, keyframes[0])
+      .to(phone.querySelectorAll("#capital"), { y: 150 }, keyframes[0])
+      .to(phone.querySelectorAll("#society"), { y: 400 }, keyframes[0])
+
+      .to(phone.querySelectorAll("#digits-bg"), { opacity: 1 }, keyframes[0])
+      .to(phone.querySelectorAll("#capital-bg"), { opacity: 1 }, keyframes[0])
+      .to(phone.querySelectorAll("#society-bg"), { opacity: 1 }, keyframes[0])
+
+
+    tl.to(phone.querySelectorAll("#digits-content"), { opacity: 1 }, keyframes[1])
+      .to(phone.querySelectorAll("#capital-content"), { opacity: 1 }, keyframes[1])
+      .to(phone.querySelectorAll("#society-content"), { opacity: 1 }, keyframes[1])
+
+    // motionPath: {
+    //   path: [
+    //     {x: 0, y: 0},
+    //     {x: 100, y: 0},
+    //     {x: 0, y: 0},
+    //   ]
+    // },
+  })
+  
+  return (
+    <Layout>
+      <SEO title="Home" />
+
+      <section>
+        <div className="row columns-2">
+          <div className="column" dangerouslySetInnerHTML={{__html: data.strapiHome.introduction }} />
+          <div className="column">[broodrooster]</div>
+        </div>
+      </section>
+
+      <section style={{background: "#F8F8F8"}} >
+        <div className="row columns-2">
+          <div className="column">
+            <div ref={el => phonePin = el}><div ref={el => phone = el}>
+              <VisualPhone />
+            </div></div>
+          </div>
+          <div className="column" ref={el => phoneTrigger = el}>
+            <div className="phone-part" dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_1 }}></div>
+            <div className="phone-part" dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_2 }}></div>
+            <div className="phone-part" dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_3 }}></div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_4 }}></div>
+      </section>
+
+      <section>
+        <div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_1 }}></div>
+      </section>
+      <section>
+        <div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_2 }}></div>
+      </section>
+      <section>
+        <div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_3 }}></div>
+      </section>
+    </Layout>
+  )
+}
 
 export default IndexPage
 
+
+export const indexQuery = graphql`
+  query IndexQuery {
+    strapiHome {
+      introduction
+      layer_explanation_1
+      layer_explanation_2
+      layer_explanation_3
+      layer_explanation_4
+      three_stacks_intro
+      three_stacks_1
+      three_stacks_2
+      three_stacks_3
+    }
+  }
+`
\ No newline at end of file

frontend/src/styles/_layout.scss

+body {
+  padding: 0;
+  overflow-y: scroll;
+}
+
 #page {
   display: flex;
   flex-direction: column;
@@ -9,7 +14,6 @@ main {
   width: 100%;
   max-width: 1200px;
   margin: 3rem auto;
-  padding: 0 1rem;
 }
 
 footer {
@@ -17,12 +21,14 @@ footer {
 }
 
 section {
+  min-height: 80vh;
   margin-bottom: 4rem;
 }
 
 .row {
   display: flex;
   margin: 0 -1rem;
+  //align-items: flex-start;
 
   &.columns-1 .column {
     width: 100%;

frontend/src/styles/_page-index.scss

+#phone {
+  max-height: 80vh;
+}
+
+.phone-part {
+  min-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
\ No newline at end of file

frontend/src/styles/_reset.scss

-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-progress {
-  vertical-align: baseline;
-}
-[hidden],
-template {
-  display: none;
-}
-a {
-  background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-a:active,
-a:hover {
-  outline-width: 0;
-}
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-b,
-strong {
-  font-weight: inherit;
-  font-weight: bolder;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-img {
-  border-style: none;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-figure {
-  margin: 1em 40px;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-
-html {
-  font: 112.5%/1.45em georgia, serif;
-  box-sizing: border-box;
-  overflow-y: scroll;
-}
-* {
-  box-sizing: inherit;
-}
-*:before {
-  box-sizing: inherit;
-}
-*:after {
-  box-sizing: inherit;
-}
-body {
-  color: #000;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
-  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
-  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
-  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
-  font-feature-settings: "kern", "liga", "clig", "calt";
-}
-img {
-  max-width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-ul {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-ol {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-p {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-figure {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-pre {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 0.85rem;
-  line-height: 1.42;
-  background: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  overflow: auto;
-  word-wrap: normal;
-  padding: 1.45rem;
-}
-table {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 1rem;
-  line-height: 1.45rem;
-  border-collapse: collapse;
-  width: 100%;
-}
-blockquote {
-  margin-left: 1.45rem;
-  margin-right: 1.45rem;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-noscript {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-iframe {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-hr {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: calc(1.45rem - 1px);
-  background: hsla(0, 0%, 0%, 0.2);
-  border: none;
-  height: 1px;
-}
-b {
-  font-weight: bold;
-}
-strong {
-  font-weight: bold;
-}
-dt {
-  font-weight: bold;
-}
-th {
-  font-weight: bold;
-}
-li {
-  margin-bottom: calc(1.45rem / 2);
-}
-ol li {
-  padding-left: 0;
-}
-ul li {
-  padding-left: 0;
-}
-li > ol {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-li > ul {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-blockquote *:last-child {
-  margin-bottom: 0;
-}
-li *:last-child {
-  margin-bottom: 0;
-}
-p *:last-child {
-  margin-bottom: 0;
-}
-li > p {
-  margin-bottom: calc(1.45rem / 2);
-}
-code {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-thead {
-  text-align: left;
-}
-td,
-th {
-  text-align: left;
-  border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
-  font-feature-settings: "tnum";
-  -moz-font-feature-settings: "tnum";
-  -ms-font-feature-settings: "tnum";
-  -webkit-font-feature-settings: "tnum";
-  padding-left: 0.96667rem;
-  padding-right: 0.96667rem;
-  padding-top: 0.725rem;
-  padding-bottom: calc(0.725rem - 1px);
-}
-th:first-child,
-td:first-child {
-  padding-left: 0;
-}
-th:last-child,
-td:last-child {
-  padding-right: 0;
-}
-tt,
-code {
-  background-color: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-    "Liberation Mono", Menlo, Courier, monospace;
-  padding: 0;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-}
-pre code {
-  background: none;
-  line-height: 1.42;
-}
-code:before,
-code:after,
-tt:before,
-tt:after {
-  letter-spacing: -0.2em;
-  content: " ";
-}
-pre code:before,
-pre code:after,
-pre tt:before,
-pre tt:after {
-  content: "";
-}
-@media only screen and (max-width: 480px) {
-  html {
-    font-size: 100%;
-  }
-}