FB-331-add-lottie-animation (#56)

* add lottie animation * delete unused forminer image * fix eslint * add missing space * add missing space * fix lottie-react version and position of the animation on tablet
vazco · Jul 31, 2023 · 2a1eb56 · 2a1eb56
1 parent 3ad9b32
commit 2a1eb56
Show file tree

Hide file tree

Showing 8 changed files with 656 additions and 4,564 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "clsx": "1.2.1",
     "docusaurus-plugin-hotjar": "0.0.2",
     "lodash": "4.17.21",
-    "lottie-web": "5.10.2",
+    "lottie-react": "2.4.0",
     "polished": "3.7.1",
     "prism-react-renderer": "1.3.5",
     "react": "17.0.2",

diff --git a/src/images/forminer.webp b/src/images/forminer.webp
diff --git a/src/lotties/forminer-head-animation.json b/src/lotties/forminer-head-animation.json
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,4 +1,3 @@
-import Head from '@docusaurus/Link';
 import Layout from '@theme/Layout';
 import React from 'react';
 
@@ -21,14 +20,6 @@ const IndexPage = () => {
   return (
     <>
       <SEO />
-      <Head>
-        <link
-          rel="preload"
-          href={require('../images/forminer.webp')}
-          as="image"
-          type="image/webp"
-        />
-      </Head>
       <Layout>
         <LayoutBase>
           <Hero />

diff --git a/src/sections/CTASection/CTASection.tsx b/src/sections/CTASection/CTASection.tsx
@@ -1,11 +1,11 @@
 import { rem } from 'polished';
 import React from 'react';
 import styled from 'styled-components';
-import media from '../../globalStyles/media';
 
 import { Button } from '../../components/Button';
 import { Container } from '../../components/Container';
 import { Link } from '../../components/Link';
+import media from '../../globalStyles/media';
 import { BOX_BORDER_RADIUS } from '../../globalStyles/sharedStyles/box';
 // @ts-expect-error Image import
 import ctaBackground from '../../images/cta-background.webp';

diff --git a/src/sections/Hero/FeaturedCase/FeaturedCase.tsx b/src/sections/Hero/FeaturedCase/FeaturedCase.tsx
@@ -1,14 +1,14 @@
 import { useMediaQuery, useTheme } from '@material-ui/core';
 import Grid from '@material-ui/core/Grid';
+import Lottie from 'lottie-react';
 import React, { ReactNode } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 import { Container } from '../../../components/Container';
 import media from '../../../globalStyles/media';
 // @ts-expect-error Image import
-import image from '../../../images/forminer.webp';
-// @ts-expect-error Image import
 import background from '../../../images/cta-background.webp';
+import forminerHeadAnimation from '../../../lotties/forminer-head-animation.json';
 
 const Section = styled.section`
   padding: 10px;
@@ -29,14 +29,6 @@ const StyledContainer = styled(Container)`
   position: relative;
 `;
 
-const StyledGridItem = styled(Grid)`
-  && {
-    justify-content: center;
-    align-items: center;
-    margin-top: 80px;
-  }
-`;
-
 const ContentWrapper = styled.div`
   padding-top: 60px;
   ${media.greaterThan('md')`
@@ -49,19 +41,21 @@ const StyledGridContainer = styled(Grid)`
     width: 100%;
     padding-bottom: 16px;
     ${media.greaterThan('md')`
-    min-width: 700px;
-    padding-top: 64px;
-    
-  `}
+      min-width: 700px;
+      padding-top: 90px;
+      display: flex;
+      align-items: center;
+    `}
     ${media.greaterThan('lg')`
-    min-width: 1000px;
-  `}
+      min-width: 1000px;
+    `}
   }
 `;
 
-const StyledImage = styled.img`
-  max-width: 100%;
-  height: auto;
+const AbsoluteImageContainer = styled.div`
+  position: absolute;
+  width: 50%;
+  height: 50%;
 `;
 
 type FeaturedCaseProps = {
@@ -72,32 +66,27 @@ const direction = 'row-reverse';
 
 export const FeaturedCase = ({ children }: FeaturedCaseProps) => {
   const theme = useTheme();
-  const showImage = useMediaQuery(theme.breakpoints.up('md'));
-  const changeOrder = useMediaQuery(theme.breakpoints.up('lg'));
-
+  const showImage = useMediaQuery(theme.breakpoints.up('lg'));
+  const showAbsoluteImage = useMediaQuery(
+    '(min-width: 900px) and (max-width: 1023px)',
+  );
   return (
     <Section>
       <StyledContainer>
         <StyledGridContainer direction={direction} alignItems="start" container>
-          {!changeOrder && (
-            <Grid xs={12} sm={12} md={12} lg={6} item>
-              <ContentWrapper reversed>{children}</ContentWrapper>
-            </Grid>
-          )}
           {showImage && (
-            <StyledGridItem xs={12} sm={12} md={12} lg={6} item>
-              <StyledImage
-                src={image}
-                alt="Forminer - Build form in React without any problems"
-              />
-            </StyledGridItem>
-          )}
-
-          {changeOrder && (
             <Grid xs={12} sm={12} md={12} lg={6} item>
-              <ContentWrapper reversed>{children}</ContentWrapper>
+              <Lottie animationData={forminerHeadAnimation} loop />
             </Grid>
           )}
+          <Grid xs={12} sm={12} md={12} lg={6} item>
+            <ContentWrapper reversed>{children}</ContentWrapper>
+          </Grid>
+          {showAbsoluteImage && (
+            <AbsoluteImageContainer>
+              <Lottie animationData={forminerHeadAnimation} loop />
+            </AbsoluteImageContainer>
+          )}
         </StyledGridContainer>
       </StyledContainer>
     </Section>

diff --git a/src/sections/Hero/Hero.tsx b/src/sections/Hero/Hero.tsx
@@ -25,46 +25,27 @@ const ButtonsWrapperOffset = styled.div`
 
   ${media.between('md', 'lg')`
     gap: ${rem('10px')} ${rem('5px')}; 
-`}
+  `}
 
   ${media.between('lg', 'xl')`
     gap: ${rem('10px')} ${rem('12px')};
   `}
 
-  ${media.lessThan('sm')`
+  @media (max-width: 427px) {
     margin-top: ${rem('30px')};
     flex-direction: column;
-  `}
+    justify-content: center;
+  }
 `;
 
 const TextUnderline = styled.span`
   text-decoration: underline;
-  text-decoration-color: #EEEEE0;
+  text-decoration-color: #eeeee0;
   text-decoration-thickness: 6px;
   text-underline-offset: 3px;
   text-decoration-skip-ink: none;
 `;
 
-const StyledLargeText = styled.p`
-  ${media.greaterThan('xl')`
-    font-size: ${rem('30px')};
-    line-height: ${rem('40px')};
-  `}
-  ${media.between('md', 'xl')`
-    font-size: ${rem('23px')};
-    line-height: ${rem('30px')};
-  `}
-  font-size: ${rem('20px')};
-  line-height: ${rem('30px')};
-
-  font-weight: 300;
-  max-width: 660px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-`;
-
 const SupportedLibrariesTitle = styled.h4`
   ${media.between('xs', 'sm')`
     margin-top: ${rem('40px')};
@@ -95,7 +76,8 @@ export const Hero = () => {
   return (
     <FeaturedCase>
       <h2 style={{ fontWeight: 900 }}>
-        Empower your users with <TextUnderline>seamless form building</TextUnderline>
+        Empower your users with{' '}
+        <TextUnderline>seamless form building</TextUnderline>
       </h2>
       <CustomBulletList>
         <CustomBulletListItem>
@@ -110,7 +92,8 @@ export const Hero = () => {
         </CustomBulletListItem>
         <CustomBulletListItem>
           <span>
-            Customize it or leverage <strong>already-prepped forms' UI</strong>
+            Customize it or leverage{' '}
+            <strong>already-prepped forms&apos; UI</strong>
           </span>
         </CustomBulletListItem>
       </CustomBulletList>