Заполнил вопросы, адаптив
This commit is contained in:
ArtChaos189
parent
13820d6652
commit
5b42706455
@ -1,11 +1,11 @@
|
||||
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"
|
||||
import { useState } from "react"
|
||||
import ExpandIcon from "./icons/ExpandIcon"
|
||||
import type { ReactNode } from "react"
|
||||
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import ExpandIcon from "./icons/ExpandIcon";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
interface Props {
|
||||
header: ReactNode;
|
||||
text: string;
|
||||
text: ReactNode;
|
||||
divide?: boolean;
|
||||
price?: number;
|
||||
last?: boolean;
|
||||
@ -13,10 +13,12 @@ interface Props {
|
||||
}
|
||||
|
||||
export default function CustomAccordion({ header, text, divide = false, price, last, first }: Props) {
|
||||
const theme = useTheme()
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"))
|
||||
const upXs = useMediaQuery(theme.breakpoints.up("xs"))
|
||||
const [isExpanded, setIsExpanded] = useState<boolean>(false)
|
||||
const theme = useTheme();
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md")); //900
|
||||
const upXs = useMediaQuery(theme.breakpoints.up("xs")); //300
|
||||
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
||||
|
||||
console.log(upXs);
|
||||
|
||||
return (
|
||||
<Box
|
||||
@ -52,6 +54,7 @@ export default function CustomAccordion({ header, text, divide = false, price, l
|
||||
width: "100%",
|
||||
fontSize: upMd ? undefined : "16px",
|
||||
lineHeight: upMd ? undefined : "19px",
|
||||
p: !upMd ? "17px 0 20px" : undefined,
|
||||
fontWeight: 500,
|
||||
color: theme.palette.gray.dark,
|
||||
px: 0,
|
||||
@ -99,5 +102,5 @@ export default function CustomAccordion({ header, text, divide = false, price, l
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { Box } from "@mui/material"
|
||||
import React from "react";
|
||||
import { Box } from "@mui/material";
|
||||
|
||||
import CustomAccordion from "@components/CustomAccordion"
|
||||
import { cardShadow } from "@root/utils/theme"
|
||||
import CustomAccordion from "@components/CustomAccordion";
|
||||
import { cardShadow } from "@root/utils/theme";
|
||||
|
||||
interface Props {
|
||||
content: [string, string][];
|
||||
@ -17,8 +18,17 @@ export default function AccordionWrapper({ content }: Props) {
|
||||
}}
|
||||
>
|
||||
{content.map((accordionItem, index) => (
|
||||
<CustomAccordion key={index} header={accordionItem[0]} text={accordionItem[1]} />
|
||||
<CustomAccordion
|
||||
key={index}
|
||||
header={accordionItem[0]}
|
||||
text={accordionItem[1].split("\n").map((line, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{line}
|
||||
<br />
|
||||
</React.Fragment>
|
||||
))}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
import { IconButton, useMediaQuery, useTheme } from "@mui/material"
|
||||
import { Select } from "@root/components/Select"
|
||||
import { Box } from "@mui/material"
|
||||
import { Typography } from "@mui/material"
|
||||
import { useState } from "react"
|
||||
import SectionWrapper from "../../components/SectionWrapper"
|
||||
import AccordionWrapper from "./AccordionWrapper"
|
||||
import ArrowBackIcon from "@mui/icons-material/ArrowBack"
|
||||
import { Tabs } from "@root/components/Tabs"
|
||||
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker"
|
||||
import { IconButton, useMediaQuery, useTheme } from "@mui/material";
|
||||
import { Select } from "@root/components/Select";
|
||||
import { Box } from "@mui/material";
|
||||
import { Typography } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import SectionWrapper from "../../components/SectionWrapper";
|
||||
import AccordionWrapper from "./AccordionWrapper";
|
||||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||||
import { Tabs } from "@root/components/Tabs";
|
||||
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
|
||||
|
||||
const subPages = ["Pena hub", "Шаблоны", "Опросы", "Ссылки", "Финансовые", "Юридические", "Юридические лица"]
|
||||
const subPages = ["Pena hub", "Шаблоны", "Опросы", "Ссылки", "Финансовые", "Юридические", "Юридические лица"];
|
||||
|
||||
export default function Faq() {
|
||||
const theme = useTheme()
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"))
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(550))
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
||||
const [tabIndex, setTabIndex] = useState<number>(0)
|
||||
const [selectedItem, setSelectedItem] = useState<number>(0)
|
||||
const theme = useTheme();
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(550));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const [tabIndex, setTabIndex] = useState<number>(0);
|
||||
const [selectedItem, setSelectedItem] = useState<number>(0);
|
||||
|
||||
const handleCustomBackNavigation = useHistoryTracker()
|
||||
const handleCustomBackNavigation = useHistoryTracker();
|
||||
|
||||
return (
|
||||
<SectionWrapper
|
||||
@ -65,20 +65,29 @@ export default function Faq() {
|
||||
<AccordionWrapper
|
||||
content={[
|
||||
[
|
||||
"Что такое корзина?",
|
||||
"Корзина это место где хранятся выбранные и собранные вами тарифы,оплатить можно в 1 клик или удалить не актуальные.",
|
||||
"Что такое бесплатный тариф?",
|
||||
"Это тариф который доступен каждому пользователю после регистрации, он позволяет пользоваться всеми нашими продуктами 14 дней бесплатно, что позволит в полной мере понять ценность наших сервисов.",
|
||||
],
|
||||
[
|
||||
"Какие функции я могу использовать бесплатно?",
|
||||
"Все функции и все продукты, но с ограничением бесплатного периода",
|
||||
"Что такое PenaHub? Куда я попал?",
|
||||
"Это личный кабинет по управлению всеми продуктами экосистемы PenaHub, тут вы можете приобрести любой тип услуги, любого нашего продукта, пройти верификацию как НКО или Юр лицо и получить акт оказанных услуг, так же только в рамках PenaHub вам доступна кастомная настройка тарифа (Мой Тариф).",
|
||||
],
|
||||
[
|
||||
"Чем могут помочь ваши продукты, конкретно в моём бизнесе?",
|
||||
"Вы можете написать в тех поддержку и наши опытные операторы, проконсультируют вас по этому и многим другим вопросам, при наличии таковых.",
|
||||
"Как у вас формируется скидка?",
|
||||
`У нашей скидочной системы 4 уровня: \n 1 уровень. Тариф: чем объемнее тариф, тем больше скидка. \n2 уровень Продукт: если вы через “Мой тариф” берете больше одного вида тарифов,то в зависимости от итоговой суммы в рамках одного продукта, вы получаете увеличение итоговой скидки.\n3 уровень. Корзина: Чем больше товаров в корзине,не важно каких,то в зависимости от суммы получаете увеличенную скидку на разовую покупку.\n4 уровень. Лояльность: считается сумма покупок за всю историю вашего аккаунта и появляется скидка за лояльность,она действует на любые тарифы экосистемы независимо от остальных уровней скидки.`,
|
||||
],
|
||||
[
|
||||
"Можно ли использовать все ваши продукты не имея в штате программиста?",
|
||||
"Абсолютно все наши продукты работают по принципу no-code.",
|
||||
"Как у вас формируется скидка для НКО?",
|
||||
"Скидка для НКО всегда равна 60%, так как мы проводим политику социальной ответственности.",
|
||||
],
|
||||
["Где можно пройти верификацию как НКО или юр лицо?", "Вкладка профиль."],
|
||||
[
|
||||
"Хочу предложить крутую идею или предложение о сотрудничестве, как это сделать?",
|
||||
"Напишите в техническую поддержку и ваша заявка будет прочитана руководством, со 100% вероятностью.",
|
||||
],
|
||||
[
|
||||
"Хочу заказать у вас разработку, как это сделать?",
|
||||
"Заказать разработку полного цикла или отдельные услуги по web-разработке можно по адресу pena.digital",
|
||||
],
|
||||
]}
|
||||
/>
|
||||
@ -156,7 +165,7 @@ export default function Faq() {
|
||||
/>
|
||||
</TabPanel>
|
||||
</SectionWrapper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
interface TabPanelProps {
|
||||
@ -171,5 +180,5 @@ function TabPanel({ index, value, children, mt }: TabPanelProps) {
|
||||
<Box hidden={index !== value} sx={{ mt }}>
|
||||
{children}
|
||||
</Box>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user