tariffs page
This commit is contained in:
nflnkr
parent
5f3560fd1e
commit
705510f00f
29
src/pages/Tariffs/CalendarIcon.tsx
Normal file
29
src/pages/Tariffs/CalendarIcon.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import { Box, useTheme } from "@mui/material";
|
||||
|
||||
|
||||
export default function CalendarIcon() {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: "36px",
|
||||
width: "36px",
|
||||
bgcolor: theme.palette.custom.brightPurple.main,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: "6px",
|
||||
}}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M19.502 3.75455H4.50195C4.08774 3.75455 3.75195 4.09033 3.75195 4.50455V19.5045C3.75195 19.9188 4.08774 20.2545 4.50195 20.2545H19.502C19.9162 20.2545 20.252 19.9188 20.252 19.5045V4.50455C20.252 4.09033 19.9162 3.75455 19.502 3.75455Z" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M16.502 2.25455V5.25455" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M7.50195 2.25455V5.25455" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M3.75195 8.25455H20.252" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M8.62695 12.0045H11.252L9.75195 13.8795C9.99881 13.8791 10.242 13.9396 10.4598 14.0557C10.6777 14.1718 10.8636 14.3398 11.0009 14.545C11.1383 14.7501 11.2229 14.9859 11.2472 15.2316C11.2716 15.4773 11.2349 15.7251 11.1405 15.9532C11.0461 16.1813 10.8968 16.3826 10.706 16.5392C10.5151 16.6958 10.2886 16.8028 10.0465 16.8509C9.80431 16.8989 9.55405 16.8864 9.31788 16.8146C9.08171 16.7427 8.86692 16.6137 8.69258 16.4389" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M13.502 13.1295L15.002 12.0045V16.8795" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
28
src/pages/Tariffs/CustomIcon.tsx
Normal file
28
src/pages/Tariffs/CustomIcon.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { Box, useTheme } from "@mui/material";
|
||||
|
||||
|
||||
export default function CustomIcon() {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: "36px",
|
||||
width: "36px",
|
||||
bgcolor: theme.palette.custom.brightPurple.main,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: "6px",
|
||||
}}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7.12695 10.5045C8.99091 10.5045 10.502 8.99351 10.502 7.12955C10.502 5.26559 8.99091 3.75455 7.12695 3.75455C5.26299 3.75455 3.75195 5.26559 3.75195 7.12955C3.75195 8.99351 5.26299 10.5045 7.12695 10.5045Z" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M16.877 10.5045C18.7409 10.5045 20.252 8.99351 20.252 7.12955C20.252 5.26559 18.7409 3.75455 16.877 3.75455C15.013 3.75455 13.502 5.26559 13.502 7.12955C13.502 8.99351 15.013 10.5045 16.877 10.5045Z" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M7.12695 20.2545C8.99091 20.2545 10.502 18.7435 10.502 16.8795C10.502 15.0156 8.99091 13.5045 7.12695 13.5045C5.26299 13.5045 3.75195 15.0156 3.75195 16.8795C3.75195 18.7435 5.26299 20.2545 7.12695 20.2545Z" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M16.877 14.2545V19.5045" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M19.502 16.8795H14.252" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
27
src/pages/Tariffs/PieChartIcon.tsx
Normal file
27
src/pages/Tariffs/PieChartIcon.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import { Box, useTheme } from "@mui/material";
|
||||
|
||||
|
||||
export default function PieChartIcon() {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: "36px",
|
||||
width: "36px",
|
||||
bgcolor: theme.palette.custom.brightPurple.main,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: "6px",
|
||||
}}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10.0024 10.0045V1.00455" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M17.7932 5.50455L2.21191 14.5045" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M1.15253 11.6545C1.05021 11.1106 0.999987 10.5581 1.00253 10.0045C1.00135 8.14323 1.57789 6.32742 2.6526 4.80771C3.72731 3.288 5.24721 2.13932 7.00253 1.52017V8.27017L1.15253 11.6545Z" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M10.0025 1.00455C11.5795 1.00473 13.1288 1.41928 14.4952 2.2067C15.8616 2.99411 16.9971 4.12674 17.7879 5.49112C18.5788 6.85551 18.9973 8.40375 19.0014 9.98078C19.0056 11.5578 18.5953 13.1082 17.8117 14.4768C17.028 15.8453 15.8985 16.9839 14.5363 17.7785C13.1741 18.5732 11.627 18.9959 10.05 19.0044C8.47303 19.0129 6.92147 18.6069 5.55077 17.827C4.18007 17.0472 3.03836 15.9208 2.23999 14.5608" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
44
src/pages/Tariffs/TariffCard.tsx
Normal file
44
src/pages/Tariffs/TariffCard.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import { Box, SxProps, Theme, useTheme } from "@mui/material";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Button from "../../components/Button";
|
||||
|
||||
|
||||
interface Props {
|
||||
icon: React.ReactNode;
|
||||
headerText: string;
|
||||
text: string;
|
||||
sx: SxProps<Theme>;
|
||||
}
|
||||
|
||||
export default function TariffCard({ icon, headerText, text, sx }: Props) {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: "250px",
|
||||
maxWidth: "360px",
|
||||
width: "360px",
|
||||
bgcolor: "white",
|
||||
borderRadius: "12px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "start",
|
||||
p: "20px",
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
<Typography variant="h5" sx={{ mt: "14px", mb: "10px" }}>{headerText}</Typography>
|
||||
<Typography sx={{ maxHeight: "calc(1.185*3em)", overflow: "hidden" }}>{text}</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{
|
||||
color: theme.palette.custom.brightPurple.main,
|
||||
borderColor: theme.palette.custom.brightPurple.main,
|
||||
mt: "auto",
|
||||
}}
|
||||
>Подробнее</Button>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
109
src/pages/Tariffs/Tariffs.tsx
Normal file
109
src/pages/Tariffs/Tariffs.tsx
Normal file
@ -0,0 +1,109 @@
|
||||
import { useTheme } from "@mui/material";
|
||||
import { Box, Link, Typography } from "@mui/material";
|
||||
import CardWithLink from "../../components/CardWithLink";
|
||||
import SectionWrapper from "../../components/SectionWrapper";
|
||||
import CalendarIcon from "./CalendarIcon";
|
||||
import CustomIcon from "./CustomIcon";
|
||||
import PieChartIcon from "./PieChartIcon";
|
||||
import TariffCard from "./TariffCard";
|
||||
import pena_illustration01 from "../../assets/pena_illustration01.png";
|
||||
import pena_illustration03 from "../../assets/pena_illustration03.png";
|
||||
import pena_illustration04 from "../../assets/pena_illustration04.png";
|
||||
|
||||
|
||||
export default function Tariffs() {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<SectionWrapper
|
||||
maxWidth="lg"
|
||||
sx={{
|
||||
mt: "60px",
|
||||
mb: "90px",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Выберите удобный тариф</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
mt: "40px",
|
||||
mb: "30px",
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: "3.5%",
|
||||
}}
|
||||
>
|
||||
<TariffCard
|
||||
sx={{ width: "31%" }}
|
||||
icon={<CalendarIcon />}
|
||||
headerText="Тарифы на время"
|
||||
text="безлимит на 1 месяц , 3 , 6 , 12"
|
||||
/>
|
||||
<TariffCard
|
||||
sx={{ width: "31%" }}
|
||||
icon={<PieChartIcon />}
|
||||
headerText="Тариф на объем"
|
||||
text="200 шаблонов, 1000 шаблонов, 5000 шаблонов, 10 000 шаблонов"
|
||||
/>
|
||||
<TariffCard
|
||||
sx={{ width: "31%" }}
|
||||
icon={<CustomIcon />}
|
||||
headerText="Кастом"
|
||||
text="Текст-заполнитель — это текст, который имеет "
|
||||
/>
|
||||
</Box>
|
||||
<Typography>
|
||||
{`Или попробуйте наш `}
|
||||
<Link
|
||||
href="#"
|
||||
sx={{
|
||||
color: theme.palette.custom.brightPurple.main,
|
||||
textUnderlinePosition: "under",
|
||||
textDecorationColor: theme.palette.custom.brightPurple.main,
|
||||
}}
|
||||
>бесплатный план</Link>
|
||||
</Typography>
|
||||
<Typography variant="h4" sx={{ mt: "60px", mb: "40px" }}>Наши продукты</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: "3.5%",
|
||||
}}
|
||||
>
|
||||
<CardWithLink
|
||||
shadowType="light"
|
||||
buttonType="button"
|
||||
height="520px"
|
||||
width="31%"
|
||||
headerText="Шаблонизатор"
|
||||
text="Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного текста, но является "
|
||||
isHighlighted
|
||||
linkHref="#"
|
||||
image={pena_illustration03}
|
||||
/>
|
||||
<CardWithLink
|
||||
shadowType="light"
|
||||
buttonType="button"
|
||||
height="520px"
|
||||
width="31%"
|
||||
headerText="Опросник"
|
||||
text="Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного текста, но является "
|
||||
isHighlighted
|
||||
linkHref="#"
|
||||
image={pena_illustration04}
|
||||
/>
|
||||
<CardWithLink
|
||||
shadowType="light"
|
||||
buttonType="button"
|
||||
height="520px"
|
||||
width="31%"
|
||||
headerText="Сокращатель ссылок"
|
||||
text="Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного текста, но является "
|
||||
isHighlighted
|
||||
linkHref="#"
|
||||
image={pena_illustration01}
|
||||
/>
|
||||
</Box>
|
||||
</SectionWrapper>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user