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

15
src/components/Menu.tsx
View File

@ -16,19 +16,8 @@ export default function Menu() {
const color = location.pathname === "/" ? "white" : "black";
const arrayMenu: MenuItem[] = [
{
name: "Тарифы",
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" },
{ name: "Наши продукты", url: "/faq" },
{ name: "Наши услуги", url: "/cart" }
];
return (

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

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

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

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

1
src/components/SectionWrapper.tsx
View File

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

23
src/components/wideTemplCard.tsx
View File

@ -6,9 +6,11 @@ import { Link as RouterLink } from "react-router-dom";
interface Props {
light?: boolean;
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 isTablet = useMediaQuery(theme.breakpoints.down(1000));
@ -32,25 +34,10 @@ export default function WideTemplCard({ light = true, sx }: Props) {
alignItems: "start",
}}
>
<Typography variant="h5">Шаблонизатор</Typography>
<Typography variant="h5">{name}</Typography>
<Typography sx={{ marginTop: isTablet ? "10px" : "20px" }} maxWidth="552px">
Текст- это текст, который имеет некоторые характеристики реального письменного текс
{desc}
</Typography>
{light ? (
<Button variant="pena-contained-light" sx={{ mt: "28px" }}>
Подробнее
</Button>
) : (
<PenaLink
component={RouterLink}
to="/"
sx={{
mt: "auto",
}}
>
Подробнее
</PenaLink>
)}
</Box>
<img
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) => {
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 dateMatch = tariffName.match(/\d{4}-\d{2}-\d{2}/);
return dateMatch ? dateMatch[0] : null;
@ -104,7 +107,7 @@ export default function AccordionWrapper({ content, last, first, createdAt }: Ac
whiteSpace: "nowrap",
}}
>
{extractDateFromString(createdAt)}
{createdAt}
</Typography>
<Typography

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

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

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

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

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

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

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

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

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

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

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

@ -27,12 +27,12 @@ export default function Section4() {
pb: upMd ? "112px" : "76px",
}}
>
<Infographics flex={itemsFlex} bigText="9" text="лет на рынке" />
<Infographics flex={itemsFlex} bigText="18" text="инструментов в едином кабинете" />
<Infographics flex={itemsFlex} bigText="4" text="года на рынке" />
<Infographics flex={itemsFlex} bigText="+103 %" text="к эффективности вашего бизнеса" />
<Infographics flex={itemsFlex} bigText="5 467" text="клиентов с нами" />
<Infographics flex={itemsFlex} bigText="15" text="минут на подключение" />
<Infographics flex={itemsFlex} bigText="24/7" text="с вами служба поддержка" />
<Infographics flex={itemsFlex} bigText="1 000" text="рублей в месяц минимальный тариф" />
<Infographics flex={itemsFlex} bigText="1" text="минута на подключение" />
<Infographics flex={itemsFlex} bigText="24/7" text="с вами служба поддержки" />
<Infographics flex={itemsFlex} bigText="500" text="рублей в месяц минимальный тариф" />
</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" }}>
Остались вопросы?
Хотите свой IT продукт?
</Typography>
<Typography
sx={{
@ -36,8 +36,8 @@ export default function Section5() {
mb: upMd ? undefined : "50px",
}}
>
Сервисы помогают предпринимателям, маркетологам и агентствам {upMd ? <br /> : null}сделать интернет-маркетинг
прозрачным и эффективным. С нами не придется тратить рекламный бюджет впустую и терять клиентов на сайте.
Закажите разработку любого продукта на любом этапе. У высококлассной команды специалистов
с обширным опытом и компетенциями, получить продукт мечты еще никогда не было так просто.
</Typography>
<Box
sx={{
@ -47,11 +47,8 @@ export default function Section5() {
gap: upMd ? "24px" : "20px",
}}
>
<Button sx={{ width: "180px" }} variant="pena-outlined-dark">
Подробнее
</Button>
<Button sx={{ width: "180px" }} variant="pena-contained-light">
Подробнее
<Button sx={{ width: "180px", height: "44px", p: 0 }} variant="pena-contained-light">
Наши услуги
</Button>
</Box>
</Box>