issue #120

app/frontend/package.json

@@ -19,6 +19,7 @@
     "@mantine/core": "^8.2.4",
     "@mantine/form": "^8.2.4",
     "@mantine/hooks": "^8.2.4",
+    "@reduxjs/toolkit": "^2.11.2",
     "@tailwindcss/vite": "^4.1.11",
     "axios": "^1.12.0",
     "class-variance-authority": "^0.7.1",
@@ -27,6 +28,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.60.0",
+    "react-redux": "^9.2.0",
     "react-social-icons": "^6.24.0",
     "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.11"

app/frontend/src/components/pages/agency-pricing-page/api/data.ts

@@ -0,0 +1,86 @@
+import { CircleStackIcon, ShieldCheckIcon, PhoneIcon, UserGroupIcon} from "@heroicons/react/16/solid";
+
+export const advantages = [
+  {
+    icon: UserGroupIcon,
+    title: "Командная работа",
+    description: "Управление доступами и совместная работа",
+  },
+  {
+    icon: CircleStackIcon,
+    title: "API интеграция",
+    description: "Подключение к вашим внутренним системам",
+  },
+  {
+    icon: ShieldCheckIcon,
+    title: "Безопасность",
+    description: "Защита данных на уровне enterprise",
+  },
+  {
+    icon: PhoneIcon,
+    title: "Поддержка 24/7",
+    description: "Персональный менеджер и техподдержка",
+  },
+];
+
+
+type Plan = {
+  id: string;
+  title: string;
+  subtitle: string;
+  price: string;
+  period: string;
+  features: string[];
+  highlighted?: boolean;
+};
+
+export const plans: Plan[] = [
+  {
+    id: 'starter',
+    title: 'Стартовый',
+    subtitle: 'Для небольших HR-команд',
+    price: '₽14,990 ',
+    period: ' /мес',
+    features: [
+      'До 5 пользователей',
+      '1000 запросов/месяц',
+      'Базовая аналитика',
+      'Email поддержка',
+      'Еженедельные отчеты',
+    ],
+  },
+  {
+    id: 'pro',
+    title: 'Профессиональный',
+    subtitle: 'Для агентств и средних компаний',
+    price: '₽29,990 ',
+    period: ' /мес',
+    features: [
+      'До 20 пользователей',
+      'Безлимитные запросы',
+      'Расширенная аналитика',
+      'API доступ',
+      'Приоритетная поддержка',
+      'Кастомные отчеты',
+      'Интеграции',
+    ],
+    highlighted: true,
+  },
+  {
+    id: 'enterprise',
+    title: 'Корпоративный',
+    subtitle: 'Для крупных компаний',
+    price: '₽49,990',
+    period: ' /мес',
+    features: [
+      'До 50 пользователей',
+      'Безлимитные запросы',
+      'Полная аналитика + AI',
+      'API доступ',
+      'Персональный менеджер',
+      'SLA 99.9%',
+      'Кастомные интеграции',
+      'Обучение команды',
+    ],
+  },
+];

app/frontend/src/components/pages/agency-pricing-page/ui/AgencyPricingPage.tsx

@@ -0,0 +1,51 @@
+import { Box, Flex, Stack } from "@mantine/core";
+import "@mantine/core/styles.css";
+
+import BusinessAdvantages from "./BusinessAdvantages";
+import ContactForm from "./ContactForm";
+import PricingSection from "./PricingSection";
+import Header from "./Header";
+
+const AgencyPricingPage = () => {
+ return (
+  <>
+   <Header />
+   <Box
+    style={{
+     backgroundColor: "white",
+     minHeight: "100vh",
+     display: "flex",
+     justifyContent: "center",
+     alignItems: "flex-start",
+     padding: "20px",
+     boxSizing: "border-box",
+    }}
+   >
+    <Stack style={{ maxWidth: "1140px", width: "100%" }}>
+     <PricingSection />
+     <Flex
+      gap="xl"
+      wrap="wrap"
+      justify="center"
+      align="flex-start"
+      style={{
+       backgroundColor: "#0A192F",
+       padding: "calc(2rem)",
+       borderRadius: "10px",
+       width: "100%",
+      }}
+     >
+      <Box style={{ flex: 1, minWidth: "350px" }}>
+       <BusinessAdvantages />
+      </Box>
+      <Box style={{ flex: 1, minWidth: "350px" }}>
+       <ContactForm />
+      </Box>
+     </Flex>
+    </Stack>
+   </Box>
+  </>
+ );
+};
+
+export default AgencyPricingPage;

app/frontend/src/components/pages/agency-pricing-page/ui/BusinessAdvantages.tsx

@@ -0,0 +1,40 @@
+import { Title, Stack, Group, Text, ThemeIcon } from "@mantine/core";
+import { advantages } from "../api/data";
+
+const BusinessAdvantages = () => {
+ return (
+  <Stack>
+   <Title order={2} c="white" mb="xl" ta="left">
+    Преимущества для бизнеса
+   </Title>
+   <Stack gap="lg">
+    {advantages.map((advantage, index) => (
+     <Group key={index} wrap="nowrap" align="flex-start">
+      <ThemeIcon
+       size="lg"
+       radius="md"
+       variant="light"
+       color="#4ECDC4"
+       style={{
+        backgroundColor: "transparent",
+        border: "1px solid #4ECDC4",
+       }}
+      >
+       <advantage.icon/>
+      </ThemeIcon>
+      <Stack gap={4}>
+       <Text fw={700} c="white">
+        {advantage.title}
+       </Text>
+       <Text size="sm" c="dimmed">
+        {advantage.description}
+       </Text>
+      </Stack>
+     </Group>
+    ))}
+   </Stack>
+  </Stack>
+ );
+};
+
+export default BusinessAdvantages;