diff --git a/package-lock.json b/package-lock.json index 8259253..5cd2059 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index d205072..60b6859 100644 --- a/package.json +++ b/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", diff --git a/src/components/HomePage.js b/src/components/HomePage.js index 75947da..3460079 100644 --- a/src/components/HomePage.js +++ b/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() { - + Adapt to a new place easy peasy.