add animations
This commit is contained in:
nflnkr
parent
b910de9624
commit
e00fba297d
@ -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 22.3363px 69.0192px rgba(37, 39, 52, 0.143066),
|
||||
0px 12.5216px 38.6916px rgba(37, 39, 52, 0.12),
|
||||
0px 6.6501px 20.5488px rgba(37, 39, 52, 0.0969343),
|
||||
0px 2.76726px 8.55082px rgba(37, 39, 52, 0.0674749)`
|
||||
0px 41.7776px 129.093px rgba(37, 39, 52, 0.172525),
|
||||
0px 22.3363px 69.0192px rgba(37, 39, 52, 0.143066),
|
||||
0px 12.5216px 38.6916px rgba(37, 39, 52, 0.12),
|
||||
0px 6.6501px 20.5488px rgba(37, 39, 52, 0.0969343),
|
||||
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" ?
|
||||
|
||||
@ -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",
|
||||
pb: upMd ? "40px" : "70px",
|
||||
pt: upMd ? "70px" : "20px",
|
||||
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",
|
||||
mb: upMd ? undefined : "-30px",
|
||||
// mt: upMd ? undefined : "-70px",
|
||||
// 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: upMd ? "100%" : `${170 / 301 * 100}%`,
|
||||
width: "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={{
|
||||
|
||||
@ -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>
|
||||
|
||||
5
src/react-app-env.d.ts
vendored
5
src/react-app-env.d.ts
vendored
@ -1 +1,6 @@
|
||||
/// <reference types="react-scripts" />
|
||||
|
||||
declare module "*.webm" {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user