Заполнил вопросы, адаптив

src/components/CustomAccordion.tsx

@@ -1,11 +1,11 @@
-import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
-import { useState } from "react"
+import { useState } from "react";
-import ExpandIcon from "./icons/ExpandIcon"
+import ExpandIcon from "./icons/ExpandIcon";
-import type { ReactNode } from "react"
+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 theme = useTheme();
-	const upMd = useMediaQuery(theme.breakpoints.up("md"))
+  const upMd = useMediaQuery(theme.breakpoints.up("md")); //900
-	const upXs = useMediaQuery(theme.breakpoints.up("xs"))
+  const upXs = useMediaQuery(theme.breakpoints.up("xs")); //300
-	const [isExpanded, setIsExpanded] = useState<boolean>(false)
+  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>
-	)
+  );
 }

src/pages/Faq/AccordionWrapper.tsx

@@ -1,7 +1,8 @@
-import { Box } from "@mui/material"
+import React from "react";
+import { Box } from "@mui/material";
 
-import CustomAccordion from "@components/CustomAccordion"
+import CustomAccordion from "@components/CustomAccordion";
-import { cardShadow } from "@root/utils/theme"
+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>
-	)
+  );
 }

src/pages/Faq/Faq.tsx

@@ -1,25 +1,25 @@
-import { IconButton, useMediaQuery, useTheme } from "@mui/material"
+import { IconButton, useMediaQuery, useTheme } from "@mui/material";
-import { Select } from "@root/components/Select"
+import { Select } from "@root/components/Select";
-import { Box } from "@mui/material"
+import { Box } from "@mui/material";
-import { Typography } from "@mui/material"
+import { Typography } from "@mui/material";
-import { useState } from "react"
+import { useState } from "react";
-import SectionWrapper from "../../components/SectionWrapper"
+import SectionWrapper from "../../components/SectionWrapper";
-import AccordionWrapper from "./AccordionWrapper"
+import AccordionWrapper from "./AccordionWrapper";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack"
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import { Tabs } from "@root/components/Tabs"
+import { Tabs } from "@root/components/Tabs";
-import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker"
+import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
 
-const subPages = ["Pena hub", "Шаблоны", "Опросы", "Ссылки", "Финансовые", "Юридические", "Юридические лица"]
+const subPages = ["Pena hub", "Шаблоны", "Опросы", "Ссылки", "Финансовые", "Юридические", "Юридические лица"];
 
 export default function Faq() {
-	const theme = useTheme()
+  const theme = useTheme();
-	const upMd = useMediaQuery(theme.breakpoints.up("md"))
+  const upMd = useMediaQuery(theme.breakpoints.up("md"));
-	const isMobile = useMediaQuery(theme.breakpoints.down(550))
+  const isMobile = useMediaQuery(theme.breakpoints.down(550));
-	const isTablet = useMediaQuery(theme.breakpoints.down(1000))
+  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
-	const [tabIndex, setTabIndex] = useState<number>(0)
+  const [tabIndex, setTabIndex] = useState<number>(0);
-	const [selectedItem, setSelectedItem] = 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>
-	)
+  );
 }