YH-1922: Fixed: Incorrect size module and text spacing in the “Mentoring - Pricing” section

public/locales/ru/mentor.json

@@ -318,11 +318,11 @@
 		"info": {
 			"postpay": {
 				"title": "Что такое постоплата?",
-				"description": "Вы устраиваетесь на работу с окладом, например, 150 000 ₽, и оплачиваете обучение по частям — 50% (75 000 ₽) в течение 3 месяцев."
+				"description": "Вы устраиваетесь на работу с окладом, например, 150 000 ₽, и оплачиваете обучение по частям — 50% (75 000 ₽) в течение 3 месяцев."
 			},
 			"experienced": {
 				"title": "Для опытных",
-				"description": "Если у тебя есть релевантный опыт от 1 года, можно выбрать любую программу. Мы адаптируем её под твои цели, чтобы ты быстрее закрыл пробелы и усилил свой стек, а постоплата составит 100% вместо 150%."
+				"description": "Если у тебя есть релевантный опыт от 1 года, можно выбрать любую программу. Мы адаптируем её под твои цели, чтобы ты быстрее закрыл пробелы и усилил свой стек, а постоплата составит 100% вместо 150%."
 			},
 			"badge": {
 				"instead": "Оплата частями 3 месяца",
@@ -331,10 +331,10 @@
 			}
 		},
 		"bonuses": {
-			"all_programs": "Все программы ведут до оффера и включают достаточное количество созвонов и обратной связи.",
-			"intensive_note": "Интенсивный — быстрый формат для повторения: меньше экзаменов,\n проверок и домашних, новичкам сложнее из-за длинных микроцелей.",
-			"mentor_involvement": "Любая программа рассчитывает вовлечённость ментора, так как основная награда — постоплата после оффера.",
-			"mentor_interest": "Ментор заинтересован в твоём оффере: дополнительные созвоны после основной программы — без доплаты."
+			"all_programs": "Все программы ведут до оффера и включают достаточное количество созвонов и обратной связи.",
+			"intensive_note": "Интенсивный — быстрый формат для повторения: меньше экзаменов, проверок и домашних, новичкам сложнее из-за длинных микроцелей.",
+			"mentor_involvement": "Любая программа рассчитывает вовлечённость ментора,\nтак как основная награда — постоплата после оффера.",
+			"mentor_interest": "Ментор заинтересован в твоём оффере: дополнительные созвоны после основной программы — без доплаты."
 		},
 		"rates": {
 			"intensive": {

src/widgets/Mentor/PricingSection/ui/BonusesBlock/BonusesBlock.module.css

@@ -8,6 +8,10 @@
 	height: 20px;
 }
 
+.description {
+	white-space: pre-line;
+}
+
 @media (width < 1280px) {
 	.bonus-blocks {
 		flex-direction: column;
@@ -18,7 +22,7 @@
 		flex: 1;
 		width: 100%;
 	}
-	
+
 	.bonus-block-content {
 		gap: 20px;
 	}
@@ -33,4 +37,4 @@
 	.bonus-block {
 		padding: 10px;
 	}
-}
+}

src/widgets/Mentor/PricingSection/ui/BonusesBlock/BonusesBlock.tsx

@@ -24,7 +24,9 @@ export const BonusesBlock = () => {
 						{block.map((line, lineIndex) => (
 							<Flex key={lineIndex} gap="9" align="start">
 								<Badge icon="lightning" wrapperClassName={styles['icon-wrapper']} />
-								<Text variant="body3-accent">{line}</Text>
+								<Text variant="body3-accent" className={styles.description}>
+									{line}
+								</Text>
 							</Flex>
 						))}
 					</Flex>

src/widgets/Mentor/PricingSection/ui/TariffCard/TariffCard.module.css

@@ -1,6 +1,7 @@
 .card {
 	padding: 20px;
 	width: calc(33% - 10px);
+	height: 528px;
 	border-radius: 20px;
 }
 
@@ -25,13 +26,15 @@
 
 .button {
 	margin-top: 40px;
+	padding: 0;
 	font-weight: 500;
 	font-size: 18px;
 }
 
 @media (width < 1280px) {
 	.card {
 		width: calc(50% - 10px);
+		height: auto;
 	}
 
 	.title {
@@ -45,7 +48,8 @@
 
 @media (width < 768px) {
 	.card {
+		padding: 10px;
 		width: 100%;
 		min-height: unset;
 	}
-}
+}

src/widgets/Mentor/PricingSection/ui/infoBlock/InfoBlock.module.css

@@ -1,6 +1,6 @@
 .wrapper {
 	display: grid;
-	grid-template-columns: 1fr 2fr;
+	grid-template-columns: 392px 2fr;
 	gap: 20px;
 	width: 100%;
 	min-height: 357px;
@@ -16,10 +16,16 @@
 
 .description {
 	margin-top: 8px;
+	white-space: pre-line;
+}
+
+.description-width {
+	width: 370px;
 }
 
 .button {
 	margin-top: 20px;
+	padding: 0;
 	font-size: var(--font-size-p-l);
 }
 
@@ -121,14 +127,22 @@
 	.wrapper {
 		grid-template-columns: 1fr 1fr;
 	}
-
+
+	.card {
+		width: auto;
+	}
+
+	.description-width {
+		width: 278px;
+	}
+
 	.badges {
 		position: absolute;
 		right: 20px;
 		z-index: -1;
 		gap: 16px;
 	}
-	
+
 	.badge-red {
 		margin-top: 8px;
 		width: 64px;
@@ -140,7 +154,7 @@
 		width: 80px;
 		height: 80px;
 	}
-	
+
 	h2.badge-red-text {
 		font-size: var(--font-size-h-xs);
 	}
@@ -162,11 +176,11 @@
 	.wrapper {
 		grid-template-columns: 1fr;
 	}
-	
+
 	p.title {
 		font-size: var(--font-size-h-xs);
 	}
-	
+
 	.card {
 		padding: 10px;
 		min-height: 337px;

src/widgets/Mentor/PricingSection/ui/infoBlock/InfoBlock.tsx

@@ -53,7 +53,10 @@ export const InfoBlock = () => {
 						<Text variant="body6" className={styles.title}>
 							{t(Mentor.PRICING_INFO_EXPERIENCED_TITLE)}
 						</Text>
-						<Text variant="body3-accent" className={styles.description}>
+						<Text
+							variant="body3-accent"
+							className={classNames(styles.description, styles['description-width'])}
+						>
 							{t(Mentor.PRICING_INFO_EXPERIENCED_DESCRIPTION)}
 						</Text>
 						<Button

src/widgets/Mentor/SectionHeader/ui/SectionHeader/SectionHeader.module.css

@@ -6,9 +6,13 @@
 	margin-bottom: 30px;
 }
 
+h2.title {
+	line-height: 127%;
+}
 
 .description {
 	max-width: 493px;
+	white-space: pre-line;
 }
 
 @media (width < 1280px) {
@@ -21,4 +25,4 @@
 		line-height: 120%;
 		font-size: 24px;
 	}
-}
+}