complete page one

package.json

@@ -8,6 +8,7 @@
     "@types/react": "16.8.22",
     "@types/react-dom": "16.8.4",
     "@types/styled-components": "^4.1.16",
+    "lottie-web": "^5.5.5",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-responsive": "^8.0.0-beta.0",

src/components/Content.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 const Content = styled.div`
   align-self: center;
-  min-width: 350px;
+  min-width: 320px;
   max-width: 1224px;
   width: 100%;
 `;

src/pages/home/components/WhoWeAre.tsx

@@ -6,6 +6,7 @@ import {
   useMobileLayout
 } from "../../../functions/styles";
 import styled, { css } from "styled-components";
+import WhoWeAreAnimation from "./WhoWeAreAnimation";
 
 const Container = styled.div`
   flex-direction: column;
@@ -33,9 +34,17 @@ const Left = styled.div`
 `;
 
 const Right = styled.div`
-  background-color: blue;
-  height: 500px;
-  ${even}
+  ${even};
+  padding-right: 20px;
+  padding-left: 20px;
+  @media (min-width: ${shrinkBreak}px) {
+    padding-right: 60px;
+    padding-left: 0;
+  }
+  @media (min-width: ${layoutBreak}px) and (max-width: ${shrinkBreak}px) {
+    padding-right: 30px;
+    padding-left: 0;
+  }
 `;
 
 const Title = styled.h1`
@@ -45,7 +54,6 @@ const Title = styled.h1`
   letter-spacing: 2px;
   padding: 15px 20px 15px 0;
   text-transform: uppercase;
-  margin-right: 15px;
   @media (min-width: ${shrinkBreak}px) {
     font-size: 70px;
   }
@@ -57,15 +65,22 @@ const Title = styled.h1`
 const Header = styled.div`
   flex-direction: row;
   align-items: center;
+  margin-top: 100px;
+  @media (min-height: ${layoutBreak}) {
+    margin-top: 0;
+  }
 `;
 
 const PlatformImg = styled.img`
-  height: 30px;
   margin-right: 15px;
+  height: 20px;
+  @media (min-height: ${layoutBreak}) {
+    height: 30px;
+  }
 `;
 
-const Desc = () => (
-  <Desc.P>
+const Desc = (props: any) => (
+  <Desc.P {...props}>
     Scaffolding code, prebuilt UI components and integrated Cl/CD (continuous
     integration/continuous delivery) for rapid development in ios, Android and
     web. Booster helps you develop native apps for all platforms in half the
@@ -129,11 +144,13 @@ const WhoWeAre = () => {
             />
           </Header>
           {!mobileLayout && <Desc />}
-          <GetStarted>Get Started</GetStarted>
+          {!mobileLayout && <GetStarted>Get Started</GetStarted>}
         </Left>
         <div style={{ height: 30, width: 30 }} />
-        <Right />
-        {mobileLayout && <Desc />}
+        <Right>
+          <WhoWeAreAnimation />
+        </Right>
+        {mobileLayout && <Desc style={{ margin: 20 }} />}
       </Container>
     </Content>
   );

src/pages/home/components/WhoWeAreAnimation.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { useEffect } from "react";
+import styled from "styled-components";
+import Lottie from "lottie-web";
+
+const Container = styled.div.attrs({
+  id: "who_we_are_animation"
+})``;
+
+const WhoWeAreAnimation = () => {
+  useEffect(() => {
+    Lottie.loadAnimation({
+      container: document.getElementById("who_we_are_animation")!,
+      animationData: require("../../../assets/animations/who_we_are.json"),
+      loop: true,
+      autoplay: true,
+      // @ts-ignore
+      assetsPath: "/lottie/who_we_are_images/",
+      rendererSettings: {
+        viewBoxOnly: true
+      }
+    });
+  }, []);
+  return <Container />;
+};
+
+export default WhoWeAreAnimation;

typings/lottie-react-web/index.d.ts

@@ -0,0 +1,15 @@
+declare module "lottie-react-web" {
+  import { Component } from "react";
+
+  export interface LottieProps {
+    options: {
+      animationData: any;
+      loop?: boolean;
+      autoplay?: boolean;
+    };
+    width?: number | string;
+    height?: number | string;
+  }
+
+  export default class Lottie extends Component<LottieProps> {}
+}

yarn.lock

@@ -6008,6 +6008,24 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+"lottie-api@github:bodymovin/lottie-api#master":
+  version "1.0.2"
+  resolved "https://codeload.github.com/bodymovin/lottie-api/tar.gz/793fcfc4d8f2da1b868977c1a2c36eaf696e28c0"
+
+lottie-react-web@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/lottie-react-web/-/lottie-react-web-2.1.4.tgz#3159b4600b6baa858175a1c97daa595f85903d6e"
+  integrity sha512-/wcAxckdTo1uKUgv3hvUktDeeTQByNdRda+1iBQcteV3PyaIikCV0LleSOkBJccYA+v0mM/OZvoSbmQdWxt4+w==
+  dependencies:
+    babel-runtime "^6.26.0"
+    lottie-api bodymovin/lottie-api#master
+    lottie-web "^5.2.1"
+
+lottie-web@^5.2.1:
+  version "5.5.5"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.5.5.tgz#a9aea4c1df509d3a631c384f2e07e55ce28dd53b"
+  integrity sha512-y4K2iurSd2279WUW12OPzfDFpYjzHnz1fKwIaaSdD/rHdrOQHLiY7sZraHW0LZNH+Y5Ezerr0rjag7lZIcRzQQ==
+
 lower-case@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"