add animations

src/components/CardWithLink.tsx

@@ -5,7 +5,9 @@ import CustomButton from "./CustomButton";
 
 
 interface Props {
-    image: string;
+    image?: string;
+    video?: string;
+    poster?: string;
     headerText: string;
     text: string;
     linkHref: string;
@@ -18,6 +20,8 @@ interface Props {
 
 export default function CardWithLink({
     image,
+    video,
+    poster,
     headerText,
     text,
     linkHref,
@@ -31,11 +35,11 @@ export default function CardWithLink({
 
     const boxShadow: string = shadowType === "dark" ?
         `0px 100px 309px rgba(37, 39, 52, 0.24),
-        0px 41.7776px 129.093px rgba(37, 39, 52, 0.172525),
+         0px 41.7776px 129.093px rgba(37, 39, 52, 0.172525),
-        0px 22.3363px 69.0192px rgba(37, 39, 52, 0.143066),
+         0px 22.3363px 69.0192px rgba(37, 39, 52, 0.143066),
-        0px 12.5216px 38.6916px rgba(37, 39, 52, 0.12),
+         0px 12.5216px 38.6916px rgba(37, 39, 52, 0.12),
-        0px 6.6501px 20.5488px rgba(37, 39, 52, 0.0969343),
+         0px 6.6501px 20.5488px rgba(37, 39, 52, 0.0969343),
-        0px 2.76726px 8.55082px rgba(37, 39, 52, 0.0674749)`
+         0px 2.76726px 8.55082px rgba(37, 39, 52, 0.0674749)`
         :
         `0px 100px 80px rgba(126, 42, 234, 0.07),
          0px 41.7776px 33.4221px rgba(126, 42, 234, 0.0503198),
@@ -63,7 +67,7 @@ export default function CardWithLink({
         >
             <Box sx={{
                 alignSelf: "center",
-                backgroundImage: `url(${image})`,
+                backgroundImage: image ? `url(${image})` : undefined,
                 width: "100%",
                 height: "100%",
                 maxHeight: "196px",
@@ -71,7 +75,27 @@ export default function CardWithLink({
                 backgroundSize: "contain",
                 backgroundRepeat: "no-repeat",
                 backgroundPosition: "center",
-            }} />
+                display: "flex",
+                alignItems: "center",
+                overflow: "hidden",
+            }}>
+                {video &&
+                    <video
+                        autoPlay
+                        loop
+                        muted
+                        playsInline
+                        poster={poster}
+                        style={{
+                            width: "100%",
+                            height: "150%",
+                        }}
+                    >
+                        <source src={video} type="video/webm" />
+                        Your browser doesn't support HTML5 video tag.
+                    </video>
+                }
+            </Box>
             <Typography variant="h5" sx={{ my: "12px" }}>{headerText}</Typography>
             <Typography>{text}</Typography>
             {buttonType === "link" ?

src/pages/Landing/Section1.tsx

@@ -1,8 +1,9 @@
 import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
-import pena_illustration02 from "../../assets/pena_illustration02.png";
 import CustomButton from "../../components/CustomButton";
 import PenaLogo from "../../components/PenaLogo";
 import SectionWrapper from "../../components/SectionWrapper";
+import mainShapeVideo from "../../assets/animations/main.webm";
+import previewMain from "../../assets/animations/preview_main.png";
 
 
 export default function Section1() {
@@ -18,8 +19,8 @@ export default function Section1() {
             }}
             sx={{
                 display: "flex",
-                pt: "70px",
+                pt: upMd ? "70px" : "20px",
-                pb: upMd ? "40px" : "70px",
+                pb: "70px",
                 justifyContent: "space-between",
                 flexDirection: upMd ? "row" : "column",
             }}
@@ -43,8 +44,8 @@ export default function Section1() {
                     textAlign: "center",
                     order: upMd ? 2 : 1,
                     mx: upMd ? "30px" : 0,
-                    mt: upMd ? undefined : "-70px",
+                    // mt: upMd ? undefined : "-70px",
-                    mb: upMd ? undefined : "-30px",
+                    // mb: upMd ? undefined : "-30px",
                     alignSelf: "center",
                     aspectRatio: "1 / 1",
                     width: upMd ? undefined : "100%",
@@ -52,14 +53,21 @@ export default function Section1() {
                     maxHeight: "301px",
                 }}
             >
-                <img
+                <video
+                    autoPlay
+                    loop
+                    muted
+                    playsInline
+                    poster={previewMain}
                     style={{
-                        transform: upMd ? undefined : "rotate(-90deg)",
+                        width: "100%",
-                        width: upMd ? "100%" : `${170 / 301 * 100}%`,
+                        height: "100%",
+                        // transform: upMd ? undefined : "rotate(-90deg)",
                     }}
-                    src={pena_illustration02}
+                >
-                    alt="pena illustration"
+                    <source src={mainShapeVideo} type="video/webm" />
-                />
+                    Your browser doesn't support HTML5 video tag.
+                </video>
             </Box>
             <Box
                 sx={{

src/pages/Landing/Section2.tsx

@@ -1,11 +1,14 @@
 import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 import CardWithLink from "../../components/CardWithLink";
-import pena_illustration01 from "../../assets/pena_illustration01.png";
-import pena_illustration03 from "../../assets/pena_illustration03.png";
-import pena_illustration04 from "../../assets/pena_illustration04.png";
 import UnderlinedLink from "../../components/UnderlinedLink";
 import SectionWrapper from "../../components/SectionWrapper";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import icon1 from "../../assets/animations/Icon_1.webm";
+import icon2 from "../../assets/animations/Icon_2.webm";
+import icon3 from "../../assets/animations/Icon_3.webm";
+import preview1 from "../../assets/animations/preview_1.png";
+import preview2 from "../../assets/animations/preview_2.png";
+import preview3 from "../../assets/animations/preview_3.png";
 
 
 export default function Section2() {
@@ -85,7 +88,8 @@ export default function Section2() {
                     text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"
                     isHighlighted
                     linkHref="#"
-                    image={pena_illustration03}
+                    video={icon1}
+                    poster={preview1}
                 />
                 <CardWithLink
                     shadowType="dark"
@@ -95,7 +99,8 @@ export default function Section2() {
                     headerText="Опросник"
                     text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"
                     linkHref="#"
-                    image={pena_illustration04}
+                    video={icon2}
+                    poster={preview2}
                 />
                 <CardWithLink
                     shadowType="dark"
@@ -105,7 +110,8 @@ export default function Section2() {
                     headerText="Сокращатель ссылок"
                     text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"
                     linkHref="#"
-                    image={pena_illustration01}
+                    video={icon3}
+                    poster={preview3}
                 />
             </Box>
         </SectionWrapper>

src/react-app-env.d.ts

@@ -1 +1,6 @@
 /// <reference types="react-scripts" />
+
+declare module "*.webm" {
+    const src: string;
+    export default src;
+  }