107 lines
4.4 KiB
TypeScript
107 lines
4.4 KiB
TypeScript
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
|
||
import UnderlinedLink from "@components/UnderlinedLink";
|
||
import WideTemplCard from "@components/wideTemplCard";
|
||
import TemplCardPhonePink from "@components/templCardPhonePink";
|
||
import SectionWrapper from "@components/SectionWrapper";
|
||
|
||
interface Props {
|
||
templaterOnly?: boolean;
|
||
}
|
||
|
||
export default function Section2({ templaterOnly }: Props) {
|
||
const theme = useTheme();
|
||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||
|
||
return (
|
||
<SectionWrapper
|
||
component="section"
|
||
maxWidth="lg"
|
||
outerContainerSx={{
|
||
backgroundColor: theme.palette.darkPurple.main,
|
||
mb: "-90px",
|
||
}}
|
||
sx={{
|
||
pt: upMd ? "90px" : "50px",
|
||
pb: "20px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: upMd ? "row" : "column",
|
||
gap: "3.5%",
|
||
}}
|
||
>
|
||
<Typography
|
||
variant="h4"
|
||
sx={{
|
||
flexGrow: 1,
|
||
flexBasis: "31%",
|
||
maxWidth: "50%",
|
||
}}
|
||
>
|
||
Интеграции, избавляющие от рутины
|
||
</Typography>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "30px",
|
||
alignItems: "start",
|
||
flexGrow: 1,
|
||
flexBasis: "65.5%",
|
||
mt: upMd ? "10px" : "30px",
|
||
}}
|
||
>
|
||
<Typography maxWidth="560px">
|
||
Сервисы помогают предпринимателям, маркетологам и агентствам сделать интернет-маркетинг прозрачным и
|
||
эффективным. С нами не придется тратить рекламный бюджет впустую и терять клиентов на сайте.
|
||
</Typography>
|
||
<UnderlinedLink
|
||
linkHref="#"
|
||
text="Подробнее"
|
||
endIcon={<ArrowForwardIcon sx={{ height: "20px", width: "20px" }} />}
|
||
sx={{
|
||
mt: "auto",
|
||
}}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
{upMd ?
|
||
<WideTemplCard light={false} sx={{marginTop: "76px"}}/>
|
||
:
|
||
<TemplCardPhonePink/>}
|
||
|
||
{/*<Box sx={{*/}
|
||
{/* mt: upMd ? "93px" : "55px",*/}
|
||
{/* display: "flex",*/}
|
||
{/* flexWrap: "wrap",*/}
|
||
{/* justifyContent: "space-evenly",*/}
|
||
{/* columnGap: "40px",*/}
|
||
{/* rowGap: "50px",*/}
|
||
{/*}}>*/}
|
||
{/* <CardWithLink*/}
|
||
{/* headerText="Шаблонизатор"*/}
|
||
{/* text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"*/}
|
||
{/* linkHref="#"*/}
|
||
{/* image={card1Image}*/}
|
||
{/* isHighlighted={!upMd}*/}
|
||
{/* />*/}
|
||
{/* <CardWithLink*/}
|
||
{/* headerText="Опросник"*/}
|
||
{/* text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"*/}
|
||
{/* linkHref="#"*/}
|
||
{/* image={card2Image}*/}
|
||
{/* />*/}
|
||
{/* <CardWithLink*/}
|
||
{/* headerText="Сокращатель ссылок"*/}
|
||
{/* text="Текст- это текст, который имеет некоторые характеристики реального письменного текс"*/}
|
||
{/* linkHref="#"*/}
|
||
{/* image={card3Image}*/}
|
||
{/* />*/}
|
||
{/*</Box>*/}
|
||
|
||
</SectionWrapper>
|
||
);
|
||
} |