diff --git a/src/App.tsx b/src/App.tsx
index 68b6ad6d..d6195646 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -35,6 +35,7 @@ const { DesignPage } = lazily(() => import("./pages/DesignPage/DesignPage"));
const { IntegrationsPage } = lazily(() => import("./pages/IntegrationsPage/IntegrationsPage"));
const { QuizAnswersPage } = lazily(() => import("./pages/QuizAnswersPage/QuizAnswersPage"));
const ChatImageNewWindow = lazy(() => import("@ui_kit/FloatingSupportChat/ChatImageNewWindow"));
+const PersonalizationAI = lazy(() => import("./pages/PersonalizationAI/PersonalizationAI"));
let params = new URLSearchParams(document.location.search);
const isTest = Boolean(params.get("test"))
@@ -60,6 +61,12 @@ const routeslink = [
sidebar: true,
footer: true,
},
+ {
+ path: "/personalization-ai",
+ page: PersonalizationAI,
+ header: true,
+ sidebar: true,
+ },
] as const;
const LazyLoading = ({ children, fallback }: SuspenseProps) => (
diff --git a/src/assets/icons/AiPersonalizationIcon.svg b/src/assets/icons/AiPersonalizationIcon.svg
new file mode 100644
index 00000000..74f20dc9
--- /dev/null
+++ b/src/assets/icons/AiPersonalizationIcon.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/icons/AiPersonalizationIcon.tsx b/src/assets/icons/AiPersonalizationIcon.tsx
new file mode 100644
index 00000000..fc815fa1
--- /dev/null
+++ b/src/assets/icons/AiPersonalizationIcon.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import { SvgIcon, SvgIconProps } from "@mui/material";
+
+const AiPersonalizationIcon = (props: SvgIconProps) => (
+
+
+
+
+
+);
+
+export default AiPersonalizationIcon;
\ No newline at end of file
diff --git a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
new file mode 100644
index 00000000..f3aff559
--- /dev/null
+++ b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx
@@ -0,0 +1,172 @@
+import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme } from "@mui/material";
+import { InfoPopover } from '@ui_kit/InfoPopover';
+import CheckboxIcon from "@icons/Checkbox";
+
+interface GenderAndAgeSelectorProps {
+ gender: string;
+ setGender: (gender: string) => void;
+}
+
+export default function GenderAndAgeSelector({ gender, setGender }: GenderAndAgeSelectorProps) {
+ const theme = useTheme();
+ return (
+
+
+
+
+
+
+ Пол
+
+
+ setGender(e.target.value)}>
+
+ } checkedIcon={} />} label="М" />
+ } checkedIcon={} />} label="Ж" />
+
+
+
+
+
+
+
+ Возраст
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/PersonalizationAI/PersonalizationAI.tsx b/src/pages/PersonalizationAI/PersonalizationAI.tsx
new file mode 100644
index 00000000..80331c4a
--- /dev/null
+++ b/src/pages/PersonalizationAI/PersonalizationAI.tsx
@@ -0,0 +1,167 @@
+import { Box, Container, Typography, TextField, Button, List, ListItem, IconButton } from "@mui/material";
+import { InfoPopover } from '@ui_kit/InfoPopover';
+import CopyIcon from "@/assets/icons/CopyIcon";
+import GenderAndAgeSelector from "./GenderAndAgeSelector";
+import { useState } from "react";
+import CustomTextField from "@ui_kit/CustomTextField";
+import Collapse from '@mui/material/Collapse';
+import { ArrowDownIcon } from "../../assets/icons/questionsPage/ArrowDownIcon";
+import { useTheme } from "@mui/material";
+
+const PURPLE = "#7E2AEA";
+const GREY_TEXT = "#A0A0A0";
+const GREY_BORDER = "#E0E0E0";
+const GREY_ICON = "#B0B0B0";
+const BLOCK_RADIUS = "16px";
+const BLOCK_PX = "32px";
+const BLOCK_PY = "24px";
+
+export default function PersonalizationAI() {
+ const [gender, setGender] = useState('');
+ const [linksOpen, setLinksOpen] = useState(true);
+ const theme = useTheme();
+
+ return (
+
+
+ Персонализация вопросов с помощью AI
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+
+ {/* Первый белый блок */}
+
+
+
+
+
+
+ {/* Ссылка */}
+
+
+ Ссылка
+
+
+
+ Вставьте ссылку со всеми utm-метками
+
+
+
+
+
+
+
+
+ {/* Второй белый блок */}
+
+
+
+ Ваши сохраненные ссылки
+
+ setLinksOpen((prev) => !prev)}
+ size="large"
+ >
+
+
+
+
+
+ {[1, 2, 3, 4, 5].map((_, idx) => (
+
+
+
+
+
+
+
+
+
+ }
+ >
+
+ linkexample.ru
+
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/src/ui_kit/InfoPopover.tsx b/src/ui_kit/InfoPopover.tsx
new file mode 100644
index 00000000..8ce59e2e
--- /dev/null
+++ b/src/ui_kit/InfoPopover.tsx
@@ -0,0 +1,53 @@
+import { useState, MouseEvent } from "react";
+import Info from "@icons/Info";
+
+import { Paper, Popover, SxProps, Typography } from "@mui/material";
+
+export const InfoPopover = ({ blink = false, sx }: {blink?: boolean, sx?: SxProps}) => {
+ const [anchorEl, setAnchorEl] = useState(null);
+
+ const handleClick = (event: MouseEvent) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ const open = Boolean(anchorEl);
+ const id = open ? "simple-popover" : undefined;
+
+ return (
+ <>
+
+
+
+
+ подсказка
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/ui_kit/Sidebar/Sidebar.tsx b/src/ui_kit/Sidebar/Sidebar.tsx
index 6350ea48..b18e668b 100755
--- a/src/ui_kit/Sidebar/Sidebar.tsx
+++ b/src/ui_kit/Sidebar/Sidebar.tsx
@@ -12,6 +12,7 @@ import { useCurrentQuiz } from "@root/quizes/hooks";
import { useLocation, useNavigate } from "react-router-dom";
import { setCurrentStep } from "@root/quizes/actions";
import { setTryShowAmoTokenExpiredDialog, updateNextStep } from "@root/uiTools/actions";
+import AiPersonalizationIcon from "../../assets/icons/AiPersonalizationIcon";
const quizSettingsMenuItems = [
[TagIcon, "Дополнения"],
@@ -168,6 +169,20 @@ export default function Sidebar({ changePage, disableCollapse }: SidebarProps) {
/>
}
/>
+