lottie plane gif addition

package-lock.json

@@ -10211,6 +10211,11 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "lottie-web": {
+      "version": "5.7.6",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.7.6.tgz",
+      "integrity": "sha512-qn/KYMI4QQvFDhtoxs0RPkn9uZKhDB9keE5BKgbJlSRfNEZpRiDlwBE9ibYz4nPhbyE+NUlt8IRIVR7g5OSX3w=="
+    },
     "lower-case": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.1.tgz",
@@ -12894,6 +12899,15 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-lottie": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/react-lottie/-/react-lottie-1.2.3.tgz",
+      "integrity": "sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "lottie-web": "^5.1.3"
+      }
+    },
     "react-overlays": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz",

package.json

@@ -16,6 +16,7 @@
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",
+    "react-lottie": "^1.2.3",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "styled-components": "^5.2.1",

src/components/HomePage.js

@@ -3,6 +3,8 @@ import '../homepage.css';
 import NavBar from './NavBar';
 import Footer from './Footer';
 import { useHistory } from "react-router-dom";
+import Lottie from 'react-lottie';
+import animationData from '../lottie/plane_gif';
 import {
   Container,
   Row,
@@ -28,6 +30,14 @@ const IconStyler = styled.div`
 
 
 `;
+const defaultOptions = {
+      loop: true,
+      autoplay: true,
+      animationData: animationData,
+      rendererSettings: {
+        preserveAspectRatio: "xMidYMid slice"
+      }
+    }; 
 
 const ColoredSection = styled.section`  
 
@@ -62,10 +72,12 @@ const ContainerPadded = styled(Container)`
 
 `;
 const BigHeading = styled.h1`
-  font-size: 3.5rem;
+  font-size: 5rem;
   line-height: 1.5;
-  font-family: "Montserrat-Bold";
+  font-family: "Ubuntu";
   color: white;
+  font-weight: bold;
+  
 `;
 const FeatureTitle = styled.h3`
   font-size: 1.5rem;
@@ -97,7 +109,7 @@ export default function HomePage() {
 
           <Row>
 
-            <FeatureCol lg="4">
+            <FeatureCol lg="6">
               <BigHeading>Adapt to a new place easy peasy.</BigHeading>
               <button type="button" onClick={() => {
                 history.push("/user/login")
@@ -108,7 +120,8 @@ export default function HomePage() {
             </FeatureCol>
 
             <FeatureCol lg="6">
-              <img className="title-image" src="/locaft_optmized.jpg" alt="locaft-mockup" />
+              
+              <Lottie height={500} width={500} options= { defaultOptions } />
             </FeatureCol>
 
           </Row>