PenaSide/front-hub
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into 'main'

Browse Source 
Dev

See merge request frontend/marketplace!64
This commit is contained in:
Nastya 2023-10-25 10:43:42 +00:00
commit 94219fb9a0
14 changed files with 107 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Footer.tsx
View File

@ -1,6 +1,7 @@
import { Box, Button, Divider, Typography, useMediaQuery, useTheme } from "@mui/material"; import { Box, Button, Divider, Typography, useMediaQuery, useTheme } from "@mui/material";
import PenaLogo from "./PenaLogo"; import PenaLogo from "./PenaLogo";
import SectionWrapper from "./SectionWrapper"; import SectionWrapper from "./SectionWrapper";
import { Link } from "react-router-dom";
export default function Footer() { export default function Footer() {
const theme = useTheme(); const theme = useTheme();
@ -27,6 +28,9 @@ export default function Footer() {
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: upMd ? "row" : "column", flexDirection: upMd ? "row" : "column",
width: "100%",
justifyContent: "space-between",
alignItems: "center"
}} }}
> >
<Box <Box
@ -53,15 +57,17 @@ export default function Footer() {
}, },
}} }}
> >
<Link to="https://docs.pena.digital/docs">
<Button variant="pena-navitem-dark">Оферта</Button>
</Link>
{/* <Button variant="pena-navitem-dark">Меню 1</Button>
<Button variant="pena-navitem-dark">Меню 1</Button> <Button variant="pena-navitem-dark">Меню 1</Button>
<Button variant="pena-navitem-dark">Меню 1</Button> <Button variant="pena-navitem-dark">Меню 1</Button>
<Button variant="pena-navitem-dark">Меню 1</Button> <Button variant="pena-navitem-dark">Меню 1</Button>
<Button variant="pena-navitem-dark">Меню 1</Button> <Button variant="pena-navitem-dark">Меню 1</Button>
<Button variant="pena-navitem-dark">Меню 1</Button> <Button variant="pena-navitem-dark">Меню 1</Button>
<Button variant="pena-navitem-dark">Меню 1</Button> <Button variant="pena-navitem-dark">Меню 1</Button>
<Button variant="pena-navitem-dark">Меню 1</Button> <Button variant="pena-navitem-dark">Меню 1</Button> */}
<Button variant="pena-navitem-dark">Меню 1</Button>
<Button variant="pena-navitem-dark">Меню 1</Button>
</Box> </Box>
<Typography <Typography
variant="body2" variant="body2"
@ -71,18 +77,9 @@ export default function Footer() {
mb: upMd ? undefined : "36px", mb: upMd ? undefined : "36px",
}} }}
> >
Сервисы помогают предпринимателям, маркетологам и агентствам сделать интернет-маркетинг прозрач ООО Пена© 2023 {new Date().getFullYear() === 2023 ? "" : " - " + new Date().getFullYear()}
</Typography> </Typography>
</Box> </Box>
{!upMd && <Divider sx={{ width: "100%", bgcolor: "white", borderColor: "#00000000" }} />}
<Typography
variant="body2"
sx={{
mt: "25px",
}}
>
Конструктор маркетинговых решений. © 2022
</Typography>
</SectionWrapper> </SectionWrapper>
); );
} }

15
src/components/Menu.tsx
View File

@ -16,19 +16,8 @@ export default function Menu() {
const color = location.pathname === "/" ? "white" : "black"; const color = location.pathname === "/" ? "white" : "black";
const arrayMenu: MenuItem[] = [ const arrayMenu: MenuItem[] = [
{ { name: "Наши продукты", url: "/faq" },
name: "Тарифы", { name: "Наши услуги", url: "/cart" }
url: "/tariffs",
subMenu: [
{ name: "Тарифы на время", url: "/tariffs/time" },
{ name: "Тарифы на объём", url: "/tariffs/volume" },
{ name: "Кастомный тариф", url: "/tariffconstructor" },
],
},
{ name: "Вопросы и ответы", url: "/faq" },
{ name: "Корзина", url: "/cart" },
{ name: "Поддержка", url: "/support" },
{ name: "История", url: "/history" },
]; ];
return ( return (

68
src/components/NavbarOld/DialogMenu.tsx
View File

@ -10,18 +10,8 @@ import { currencyFormatter } from "@root/utils/currencyFormatter";
const arrayMenu = [ const arrayMenu = [
{ name: "Главная", url: "/" }, { name: "Наши продукты", url: "/" },
{ name: "Профиль", url: "/settings" }, { name: "Наши услуги", url: "/" },
{ name: "Тарифы", url: "/tariffs" },
{ name: "Тарифы на время", url: "/tariffs/time" },
{ name: "Тарифы на объём", url: "/tariffs/volume" },
{ name: "Кастомный тариф", url: "/tariffconstructor" },
{ name: "Вопросы и ответы", url: "/faq" },
{ name: "История", url: "/history" },
{ name: "Оплата", url: "/payment" },
{ name: "Поддержка", url: "/support" },
{ name: "Оплата", url: "/wallet" },
{ name: "Корзина", url: "/cart" },
]; ];
const Transition = React.forwardRef(function Transition( const Transition = React.forwardRef(function Transition(
@ -54,8 +44,7 @@ export default function DialogMenu({ open, handleClose }: DialogMenuProps) {
sx={{ sx={{
width: isTablet ? "100%" : "320px", width: isTablet ? "100%" : "320px",
ml: "auto", ml: "auto",
mt: "50px", mt: isTablet ? "50px" : "80px",
height: "100%",
".MuiBackdrop-root.MuiModal-backdrop": { ".MuiBackdrop-root.MuiModal-backdrop": {
background: "transparent", background: "transparent",
}, },
@ -94,7 +83,8 @@ export default function DialogMenu({ open, handleClose }: DialogMenuProps) {
variant="text" variant="text"
sx={{ sx={{
fontWeight: "500", fontWeight: "500",
color: location.pathname === url ? theme.palette.purple.main : location.pathname === "/" ? "white" : "black", // color: location.pathname === url ? theme.palette.purple.main : location.pathname === "/" ? "white" : "black",
color: "white",
height: "20px", height: "20px",
textTransform: "none", textTransform: "none",
marginBottom: "25px", marginBottom: "25px",
@ -113,26 +103,14 @@ export default function DialogMenu({ open, handleClose }: DialogMenuProps) {
{isTablet ? ( {isTablet ? (
location.pathname === "/" ? ( location.pathname === "/" ? (
<Button <Button
component={Link} component={Link}
to={user ? "/tariffs" : "/signin"} to={user ? "/tariffs" : "/signin"}
state={user ? undefined : { backgroundLocation: location }} state={user ? undefined : { backgroundLocation: location }}
variant="outlined" variant="pena-contained-dark"
sx={{ sx={{px: "30px", ml: "40px" , width: "245px"}}
width: "188px", >
color: "white", Регистрация / Войти
border: "1px solid white", </Button>
ml: "40px",
mt: isMobileHeight ? "0" : "35px",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
padding: "8px 17px",
}}
>
Личный кабинет
</Button>
) : ( ) : (
<Box <Box
sx={{ sx={{
@ -164,26 +142,6 @@ export default function DialogMenu({ open, handleClose }: DialogMenuProps) {
) )
) : ( ) : (
<> <>
<Button
component={Link}
to={user ? "/tariffs" : "/signin"}
state={user ? undefined : { backgroundLocation: location }}
variant="outlined"
sx={{
width: "188px",
color: "white",
border: "1px solid white",
margin: "35px 0 0 126px",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
padding: "8px 17px",
}}
>
Личный кабинет
</Button>
<Box <Box
sx={{ sx={{
position: "absolute", position: "absolute",

13
src/components/NavbarOld/NavbarFull.tsx
View File

@ -11,6 +11,7 @@ import {
} from "@mui/material"; } from "@mui/material";
import SectionWrapper from "../SectionWrapper"; import SectionWrapper from "../SectionWrapper";
import LogoutIcon from "../icons/LogoutIcon"; import LogoutIcon from "../icons/LogoutIcon";
import DialogMenu from "./DialogMenu";
import WalletIcon from "../icons/WalletIcon"; import WalletIcon from "../icons/WalletIcon";
import CustomAvatar from "./Avatar"; import CustomAvatar from "./Avatar";
import Drawers from "../Drawers"; import Drawers from "../Drawers";
@ -138,22 +139,26 @@ export default function NavbarFull({ isLoggedIn }: Props) {
gap: "50px", gap: "50px",
}} }}
> >
<PenaLogo width={150} color="white" /> <Box width="457px" justifyContent="space-between" display="inline-flex" alignItems="center" >
<PenaLogo width={150} color="white" />
{!isTablet ? null : <Menu />} {!isTablet ? null : <Menu />}
</Box>
<Button <Button
component={Link} component={Link}
to={user ? "/tariffs" : "/signin"} to={user ? "/tariffs" : "/signin"}
state={user ? undefined : { backgroundLocation: location }} state={user ? undefined : { backgroundLocation: location }}
variant="pena-outlined-dark" variant="pena-contained-dark"
sx={{ px: "4px", ml: !isTablet ? "auto" : "none" }} sx={{px: "30px", ml: !isTablet ? "auto" : "none" }}
> >
Личный кабинет Регистрация / Войти
</Button> </Button>
<BurgerButton <BurgerButton
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
sx={{ color: "white", display: !isTablet ? "block" : "none" }} sx={{ color: "white", display: !isTablet ? "block" : "none" }}
/> />
</SectionWrapper> </SectionWrapper>
<DialogMenu open={open} handleClose={() => setOpen(false)} />
</> </>
); );
} }

1
src/components/SectionWrapper.tsx
View File

@ -5,6 +5,7 @@ interface Props {
component?: ElementType; component?: ElementType;
outerContainerSx?: SxProps<Theme>; outerContainerSx?: SxProps<Theme>;
sx?: SxProps<Theme>; sx?: SxProps<Theme>;
innerSx?: SxProps<Theme>;
maxWidth?: false | Breakpoint; maxWidth?: false | Breakpoint;
children?: React.ReactNode; children?: React.ReactNode;
} }

23
src/components/wideTemplCard.tsx
View File

@ -6,9 +6,11 @@ import { Link as RouterLink } from "react-router-dom";
interface Props { interface Props {
light?: boolean; light?: boolean;
sx?: SxProps<Theme>; sx?: SxProps<Theme>;
name?: string;
desc?: string;
} }
export default function WideTemplCard({ light = true, sx }: Props) { export default function WideTemplCard({ light = true, sx, name="Шаблонизатор", desc="тект заполнитель это текст который имеет" }: Props) {
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isTablet = useMediaQuery(theme.breakpoints.down(1000));
@ -32,25 +34,10 @@ export default function WideTemplCard({ light = true, sx }: Props) {
alignItems: "start", alignItems: "start",
}} }}
> >
<Typography variant="h5">Шаблонизатор</Typography> <Typography variant="h5">{name}</Typography>
<Typography sx={{ marginTop: isTablet ? "10px" : "20px" }} maxWidth="552px"> <Typography sx={{ marginTop: isTablet ? "10px" : "20px" }} maxWidth="552px">
Текст- это текст, который имеет некоторые характеристики реального письменного текс {desc}
</Typography> </Typography>
{light ? (
<Button variant="pena-contained-light" sx={{ mt: "28px" }}>
Подробнее
</Button>
) : (
<PenaLink
component={RouterLink}
to="/"
sx={{
mt: "auto",
}}
>
Подробнее
</PenaLink>
)}
</Box> </Box>
<img <img
src={cardImageBig} src={cardImageBig}

7
src/pages/History/AccordionWrapper.tsx
View File

@ -35,7 +35,10 @@ export default function AccordionWrapper({ content, last, first, createdAt }: Ac
content[0].Value[0].forEach((item) => { content[0].Value[0].forEach((item) => {
valuesByKey[item.Key] = item.Value; valuesByKey[item.Key] = item.Value;
}); });
console.log(content)
console.log(content[0])
console.log(content[0].Value)
console.log(valuesByKey)
const extractDateFromString = (tariffName: string) => { const extractDateFromString = (tariffName: string) => {
const dateMatch = tariffName.match(/\d{4}-\d{2}-\d{2}/); const dateMatch = tariffName.match(/\d{4}-\d{2}-\d{2}/);
return dateMatch ? dateMatch[0] : null; return dateMatch ? dateMatch[0] : null;
@ -104,7 +107,7 @@ export default function AccordionWrapper({ content, last, first, createdAt }: Ac
whiteSpace: "nowrap", whiteSpace: "nowrap",
}} }}
> >
{extractDateFromString(createdAt)} {createdAt}
</Typography> </Typography>
<Typography <Typography

11
src/pages/History/index.tsx
View File

@ -25,6 +25,11 @@ export default function History() {
const handleCustomBackNavigation = useHistoryTracker(); const handleCustomBackNavigation = useHistoryTracker();
const extractDateFromString = (tariffName: string) => {
const dateMatch = tariffName.match(/\d{4}-\d{2}-\d{2}/);
return dateMatch ? dateMatch[0] : "";
};
return ( return (
<SectionWrapper <SectionWrapper
maxWidth="lg" maxWidth="lg"
@ -63,7 +68,10 @@ export default function History() {
<Tabs items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} /> <Tabs items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
)} )}
{historyData?.records {historyData?.records
.filter((e) => (e.key === "payCart" && Array.isArray(e.rawDetails[0].Value))) .filter((e) => {
e.createdAt = extractDateFromString(e.createdAt)
return(!e.isDeleted && e.key === "payCart" && Array.isArray(e.rawDetails[0].Value)
)})
.map(( e, index) => { .map(( e, index) => {
return ( return (
<Box key={index} sx={{ mt: index === 0 ? "27px" : "0px" }}> <Box key={index} sx={{ mt: index === 0 ? "27px" : "0px" }}>
@ -71,6 +79,7 @@ export default function History() {
first={index === 0} first={index === 0}
last={index === historyData?.records.length - 1} last={index === historyData?.records.length - 1}
content={e.rawDetails} content={e.rawDetails}
key={e.id}
createdAt={e.createdAt} createdAt={e.createdAt}
/> />
</Box> </Box>

11
src/pages/Landing/PromoCard.tsx
View File

@ -9,6 +9,9 @@ interface Props {
text: string; text: string;
textOrientation: "row" | "column"; textOrientation: "row" | "column";
sx?: SxProps<Theme>; sx?: SxProps<Theme>;
sxBoxText?: SxProps<Theme>;
sxHeader?: SxProps<Theme>;
sxText?: SxProps<Theme>;
small?: boolean; small?: boolean;
} }
@ -20,6 +23,9 @@ export default function PromoCard({
backgroundPosition, backgroundPosition,
textOrientation, textOrientation,
sx, sx,
sxHeader,
sxBoxText,
sxText,
width, width,
small = false, small = false,
}: Props) { }: Props) {
@ -64,15 +70,15 @@ export default function PromoCard({
sx={{ sx={{
display: "grid", display: "grid",
gridTemplate: small || textOrientation === "column" ? "auto auto / auto" : "2.5em / 30% 50%", gridTemplate: small || textOrientation === "column" ? "auto auto / auto" : "2.5em / 30% 50%",
...sxBoxText
}} }}
> >
<Box <Box
sx={{ sx={{
maxWidth: "140px",
mb: "20px", mb: "20px",
}} }}
> >
<Typography variant="h5" sx={{ maxWidth: "75%", whiteSpace: isMobile ? "nowrap" : "normal" }}> <Typography variant="h5" sx={{ maxWidth: "180px", whiteSpace: isMobile ? "nowrap" : "normal", ...sxHeader}}>
{headerText} {headerText}
</Typography> </Typography>
</Box> </Box>
@ -81,6 +87,7 @@ export default function PromoCard({
overflow: "hidden", overflow: "hidden",
maxWidth: "200px", maxWidth: "200px",
maxHeight: "5.92em", maxHeight: "5.92em",
...sxText
}} }}
> >
{text} {text}

16
src/pages/Landing/Section1.tsx
View File

@ -25,7 +25,7 @@ export default function Section1() {
display: "flex", display: "flex",
pt: upMd ? "20px" : "20px", pt: upMd ? "20px" : "20px",
px: !isTablet ? (upMd ? "40px" : "18px") : "20px", px: !isTablet ? (upMd ? "40px" : "18px") : "20px",
pb: "0px", pb: "10px",
flexDirection: upMd ? "row" : "column", flexDirection: upMd ? "row" : "column",
}} }}
> >
@ -42,16 +42,16 @@ export default function Section1() {
}} }}
> >
<Typography sx={{ maxWidth: !isTablet ? "500px" : "100%" }} variant="h2"> <Typography sx={{ maxWidth: !isTablet ? "500px" : "100%" }} variant="h2">
Сервисы прокачки маркетинга Сервисы прокачки маркетинга и бизнеса
</Typography> </Typography>
<Typography mt="35px" maxWidth="560px"> <Typography mt="35px" maxWidth="380px">
Покажут эффективность рекламы. Соберут все обращения клиентов. Повысят конверсию сайта Автоматизация и новые источники трафика в единой экосистеме
</Typography> </Typography>
<Typography mt="11.5px">И все это в едином кабинете</Typography> {/*<Typography mt="11.5px">И все это в едином кабинете</Typography>*/}
<Button variant="pena-contained-dark" sx={{ mt: "40px" }}> {/*<Button variant="pena-contained-dark" sx={{ mt: "40px" }}>*/}
Подробнее {/* Подробнее*/}
</Button> {/*</Button>*/}
</Box> </Box>
<Box <Box
sx={{ sx={{

40
src/pages/Landing/Section2.tsx
View File

@ -39,7 +39,7 @@ export default function Section2() {
maxWidth: "50%", maxWidth: "50%",
}} }}
> >
Интеграции, избавляющие <br /> от рутины Хватит сливать бюджет!
</Typography> </Typography>
<Box <Box
sx={{ sx={{
@ -53,44 +53,14 @@ export default function Section2() {
}} }}
> >
<Typography sx={{ fontSize: upMd ? "18px" : "17px" }} maxWidth="560px"> <Typography sx={{ fontSize: upMd ? "18px" : "17px" }} maxWidth="560px">
Сервисы помогают предпринимателям, маркетологам и агентствам сделать интернет-маркетинг прозрачным и Надежные сервисы, которые не подведут. Увеличение эффективности рекламной кампании и увеличение ROI и ROMI на десятки процентов при использовании всех наших продуктов.
эффективным. С нами не придется тратить рекламный бюджет впустую и терять клиентов на сайте.
</Typography> </Typography>
<PenaLink component={RouterLink} to="/">
Подробнее
</PenaLink>
</Box> </Box>
</Box> </Box>
{upMd ? <WideTemplCard light={false} sx={{ marginTop: "73px" }} /> : <TemplCardPhonePink />} {upMd ? <WideTemplCard name="PenaDoc" desc="Сервис автоматизации, избавляющий от рутины
в документообороте. 1 раз делаешь шаблон и используешь всю жизнь " light={false} sx={{ marginTop: "126px" }} /> : <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> </SectionWrapper>
); );
} }

36
src/pages/Landing/Section3.tsx
View File

@ -52,69 +52,73 @@ export default function Section3() {
variant="h4" variant="h4"
sx={{ sx={{
mb: upMd ? "67px" : "30px", mb: upMd ? "67px" : "30px",
width: isMobile ? "340px" : "562px"
}} }}
> >
Узнайте, как наши сервисы решают ваши задачи Не знаете, подходят ли наши продукты для вашего бизнеса?
</Typography> </Typography>
<Box <Box
sx={{ sx={{
mb: upMd ? "20px" : "30px", mb: upMd ? "20px" : "30px",
}} }}
> >
<Typography>Покажут эффективность рекламы</Typography> <Typography>Зарегистрируйтесь и напишите в тех поддержку, </Typography>
<Typography>Соберут все обращения клиентов</Typography> <Typography>наши опытные операторы проконсультируют </Typography>
<Typography>Повысят конверсию сайта</Typography> <Typography>вас по всем вопросам, в том числе и как мы можем увеличить эффективность вашего бизнеса</Typography>
</Box> </Box>
<PenaLink component={RouterLink} to="/">
Подробнее
</PenaLink>
</Box> </Box>
<PromoCard <PromoCard
width={isTablet ? (upMd ? "87%" : "100%") : "43.1%"} width={isTablet ? (upMd ? "87%" : "100%") : "43.1%"}
headerText="Общий кабинет" headerText="Оплата в один клик"
text="Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного" text="Формируй корзину сколько удобно, плати за минуту"
textOrientation="column" textOrientation="column"
small={downXs} small={downXs}
backgroundSize={isTablet ? "contain" : "100% 300px"} backgroundSize={isTablet ? "contain" : "100% 300px"}
backgroundImage={downXs ? cardPagesBackground6 : cardPagesBackground1} backgroundImage={downXs ? cardPagesBackground6 : cardPagesBackground1}
backgroundPosition={isTablet ? (isMobile ? "15% 50%" : "bottom right -1px") : "bottom right -165px"} backgroundPosition={isTablet ? (isMobile ? "15% 72%" : "bottom right -1px") : "bottom right -165px"}
sx={{ sx={{
alignSelf: "center", alignSelf: "center",
maxWidth: isTablet ? "100%" : "500px", maxWidth: isTablet ? "100%" : "500px",
marginRight: isTablet ? (upMd ? "120px" : "0") : "0", marginRight: isTablet ? (upMd ? "120px" : "0") : "0",
}} }}
sxHeader={{maxWidth: "166px"}}
/> />
<PromoCard <PromoCard
width={isTablet ? (upMd ? "87%" : "100%") : "43.1%"} width={isTablet ? (upMd ? "87%" : "100%") : "43.1%"}
headerText="Общий кабинет" headerText="Собери свой тариф сам"
text="Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного" text="Только вы знаете реальные потребности своего бизнеса, не нужно переплачивать"
textOrientation="row" textOrientation="row"
small={downXs} small={downXs}
backgroundSize={"contain"} backgroundSize={"contain"}
backgroundImage={downXs ? cardPagesBackground6 : cardPagesBackground2} backgroundImage={downXs ? cardPagesBackground6 : cardPagesBackground2}
backgroundPosition={isTablet ? (isMobile ? "15% 50%" : "bottom right -1px") : "bottom right 0px"} backgroundPosition={isTablet ? (isMobile ? "15% 72%" : "bottom right -1px") : "bottom right 0px"}
sx={{ sx={{
alignSelf: "center", alignSelf: "center",
marginLeft: isTablet ? (upMd ? "120px" : "0") : "0", marginLeft: isTablet ? (upMd ? "120px" : "0") : "0",
mt: isTablet ? null : "-82px", mt: isTablet ? null : "-82px",
maxWidth: isTablet ? "100%" : "500px", maxWidth: isTablet ? "100%" : "500px",
}} }}
sxBoxText={{display: "flex", flexDirection: isMobile ? "column" : "row"}}
sxHeader={{maxWidth: "190px"}}
sxText={{maxWidth: "241px"}}
/> />
<PromoCard <PromoCard
width={isTablet ? (upMd ? "85%" : "100%") : "43.1%"} width={isTablet ? (upMd ? "85%" : "100%") : "43.1%"}
headerText="Гибкие тарифы" headerText="Все продукты в одном месте"
text="Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного" text="Больше не нужно искать и покупать на разных сайтах"
textOrientation="column" textOrientation="column"
small={downXs} small={downXs}
backgroundSize={isTablet ? "contain" : "100% 300px"} backgroundSize={isTablet ? "contain" : "100% 300px"}
backgroundImage={downXs ? cardPagesBackground6 : cardPagesBackground3} backgroundImage={downXs ? cardPagesBackground6 : cardPagesBackground3}
backgroundPosition={isTablet ? (isMobile ? "15% 50%" : "bottom right -1px") : "bottom right -165px"} backgroundPosition={isTablet ? (isMobile ? "15% 72%" : "bottom right -1px") : "bottom right -165px"}
sx={{ sx={{
mt: isTablet ? null : "82px", mt: isTablet ? null : "82px",
alignSelf: "center", alignSelf: "center",
maxWidth: isTablet ? "100%" : "500px", maxWidth: isTablet ? "100%" : "500px",
marginRight: isTablet ? (upMd ? "100px" : "0") : "0", marginRight: isTablet ? (upMd ? "100px" : "0") : "0",
}} }}
sxText={{maxWidth: "183px"}}
sxHeader={{whiteSpace: "normal"}}
/> />
</SectionWrapper> </SectionWrapper>
); );

10
src/pages/Landing/Section4.tsx
View File

@ -27,12 +27,12 @@ export default function Section4() {
pb: upMd ? "112px" : "76px", pb: upMd ? "112px" : "76px",
}} }}
> >
<Infographics flex={itemsFlex} bigText="9" text="лет на рынке" /> <Infographics flex={itemsFlex} bigText="4" text="года на рынке" />
<Infographics flex={itemsFlex} bigText="18" text="инструментов в едином кабинете" /> <Infographics flex={itemsFlex} bigText="+103 %" text="к эффективности вашего бизнеса" />
<Infographics flex={itemsFlex} bigText="5 467" text="клиентов с нами" /> <Infographics flex={itemsFlex} bigText="5 467" text="клиентов с нами" />
<Infographics flex={itemsFlex} bigText="15" text="минут на подключение" /> <Infographics flex={itemsFlex} bigText="1" text="минута на подключение" />
<Infographics flex={itemsFlex} bigText="24/7" text="с вами служба поддержка" /> <Infographics flex={itemsFlex} bigText="24/7" text="с вами служба поддержки" />
<Infographics flex={itemsFlex} bigText="1 000" text="рублей в месяц минимальный тариф" /> <Infographics flex={itemsFlex} bigText="500" text="рублей в месяц минимальный тариф" />
</SectionWrapper> </SectionWrapper>
); );
} }

13
src/pages/Landing/Section5.tsx
View File

@ -26,7 +26,7 @@ export default function Section5() {
}} }}
> >
<Typography variant="h4" sx={{ mb: upMd ? "62px" : "30px" }}> <Typography variant="h4" sx={{ mb: upMd ? "62px" : "30px" }}>
Остались вопросы? Хотите свой IT продукт?
</Typography> </Typography>
<Typography <Typography
sx={{ sx={{
@ -36,8 +36,8 @@ export default function Section5() {
mb: upMd ? undefined : "50px", mb: upMd ? undefined : "50px",
}} }}
> >
Сервисы помогают предпринимателям, маркетологам и агентствам {upMd ? <br /> : null}сделать интернет-маркетинг Закажите разработку любого продукта на любом этапе. У высококлассной команды специалистов
прозрачным и эффективным. С нами не придется тратить рекламный бюджет впустую и терять клиентов на сайте. с обширным опытом и компетенциями, получить продукт мечты еще никогда не было так просто.
</Typography> </Typography>
<Box <Box
sx={{ sx={{
@ -47,11 +47,8 @@ export default function Section5() {
gap: upMd ? "24px" : "20px", gap: upMd ? "24px" : "20px",
}} }}
> >
<Button sx={{ width: "180px" }} variant="pena-outlined-dark"> <Button sx={{ width: "180px", height: "44px", p: 0 }} variant="pena-contained-light">
Подробнее Наши услуги
</Button>
<Button sx={{ width: "180px" }} variant="pena-contained-light">
Подробнее
</Button> </Button>
</Box> </Box>
</Box> </Box>