Binary files /dev/null and b/public/subscription/svg-icons/copy.png differ
Binary files /dev/null and b/public/subscription/svg-icons/decor.png differ
@@ -56,7 +56,7 @@ export const CurrentPlanAndBalance = ({
 
 	return (
 		<Stack className={styles.balanceContainer} gap={'20px'}>
-			<Box className={styles.balanceBox} style={{ display: !isIndividual ? 'block' : 'none' }}>
+			<Box className={styles.balanceBox}>
 				<Stack direction='row' justifyContent='space-between' alignItems='flex-start' sx={{ marginBottom: '15px' }}>
 					<Typography
 						className={styles.subTitle}
@@ -0,0 +1,115 @@
+.root {
+	position: relative;
+	width: 100%;
+	min-width: 0;
+	margin-top: 40px;
+	padding: 30px 240px 30px 30px;
+	overflow: hidden;
+	border-radius: 16px;
+	background: #1d1d21;
+	border: 1px solid rgba(255, 255, 255, 0.08);
+	font-family: Inter, system-ui, sans-serif;
+}
+
+.decor {
+	position: absolute;
+	right: 20px;
+	bottom: 0;
+	width: 240px;
+	height: 200px;
+	background-repeat: no-repeat;
+	background-position: center bottom;
+	background-size: contain;
+}
+
+.content {
+	position: relative;
+	z-index: 1;
+}
+
+.title {
+	font-weight: 600;
+	font-size: 32px;
+	line-height: 100%;
+	letter-spacing: -0.02em;
+	color: #fff;
+}
+
+.description {
+	margin: 10px 0 0;
+	font-size: 16px;
+	line-height: 100%;
+	letter-spacing: -0.02em;
+	color: #a4aab5;
+}
+
+.mail {
+	display: inline-flex;
+	align-items: center;
+}
+
+.emailCopyBtn,
+.copyIconBtn {
+	cursor: pointer;
+}
+
+.emailCopyBtn {
+	font: inherit;
+	color: #8280ff;
+	text-decoration: underline;
+}
+
+.copyIconBtn {
+	padding: 2px;
+
+	img {
+		display: block;
+	}
+}
+
+.actions {
+	margin-top: 30px;
+}
+
+.btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 270px;
+	height: 50px;
+	padding: 0 16px;
+	border-radius: 12px;
+	font-weight: 600;
+	font-size: 15px;
+	text-decoration: none;
+	color: #fff;
+	background: #8280ff;
+}
+
+@media (max-width: 600px) {
+	.root {
+		padding: 20px;
+	}
+
+	.title {
+		font-size: 20px;
+	}
+
+	.description {
+		font-size: 14px;
+	}
+
+	.decor {
+		display: none;
+	}
+
+	.actions {
+		display: flex;
+		justify-content: center;
+	}
+
+	.btn {
+		width: 270px;
+		max-width: 100%;
+	}
+}
@@ -0,0 +1,51 @@
+import { useCallback } from 'react'
+import { Box } from '@mui/material'
+
+import { useShowDataStore } from '#/shared/lib/hooks/use-show-data'
+
+import styles from './individual-subscription-notice.module.scss'
+
+export const IndividualSubscriptionNotice = ({ contactEmail = 't.bikbov@air.fail' }: { contactEmail?: string }) => {
+	const { showMessage } = useShowDataStore()
+
+	const copyEmail = useCallback(async () => {
+		try {
+			await navigator.clipboard.writeText(contactEmail)
+			showMessage('Почта скопирована', 'success')
+		} catch {
+			showMessage('Не удалось скопировать', 'error')
+		}
+	}, [contactEmail, showMessage])
+
+	return (
+		<Box className={styles.root}>
+			<div
+				className={styles.decor}
+				style={{ backgroundImage: "url('/subscription/svg-icons/decor.png')" }}
+			/>
+			<Box className={styles.content}>
+				<h2 className={styles.title}>У вас указана индивидуальная подписка!</h2>
+				<p className={styles.description}>
+					По вопросам платежей, тарификации или отключения индивидуальной подписки обращайтесь по адресу —{' '}
+					<span className={styles.mail}>
+						<button type="button" className={styles.emailCopyBtn} onClick={copyEmail}>
+							{contactEmail}
+						</button>
+						<button
+							type="button"
+							className={styles.copyIconBtn}
+							onClick={copyEmail}
+						>
+							<img src="/subscription/svg-icons/copy.png" alt="" width={18} height={18} />
+						</button>
+					</span>
+				</p>
+				<Box className={styles.actions}>
+					<a href={`mailto:${contactEmail}`} className={styles.btn}>
+						Написать на почту
+					</a>
+				</Box>
+			</Box>
+		</Box>
+	)
+}
@@ -12,6 +12,7 @@ import { balanceSelector } from '#/shared/lib/selectors'
 import { IFeatures, IOffer } from '../api'
 
 import { CurrentPlanAndBalance } from './current-plan-and-balance'
+import { IndividualSubscriptionNotice } from './individual-subscription-notice'
 import { FaqSection } from './faq-section'
 import { FeaturesSection } from './features-section'
 import { PlansSection } from './plans-section'
@@ -87,6 +88,29 @@ export const SubscriptionRecurrentPage = () => {
 
 	const planTokensFormatted = commaSeparated(Math.round(Number(planTokenLimit) || 0))
 
+	if (isIndividual) {
+		return (
+			<Box className={styles.container}>
+				<Box sx={{ marginTop: '20px', marginBottom: '20px' }}>
+					<Typography sx={{ fontSize: 35, fontWeight: '600' }}>Подписка</Typography>
+				</Box>
+
+				<CurrentPlanAndBalance
+					balance={balance}
+					planPrice={planPrice}
+					planTokenLimit={planTokenLimit}
+					isIndividual={isIndividual}
+					isRecurring={isRecurring}
+					nextPaymentAt={nextPaymentAt}
+				/>
+
+				<IndividualSubscriptionNotice />
+
+				<FaqSection />
+			</Box>
+		)
+	}
+
 	return (
 		<Box className={styles.container}>
 			<Box sx={{ marginTop: '20px', marginBottom: '20px' }}>