Binary files /dev/null and b/public/voice-clone/add-voice.png differ
Binary files /dev/null and b/public/voice-clone/message-input-mobile.png differ
Binary files /dev/null and b/public/voice-clone/message-preview-mobile.png differ
Binary files /dev/null and b/public/voice-clone/my-generations.png differ
Binary files /dev/null and b/public/voice-clone/parameters-panel.png differ
Binary files /dev/null and b/public/voice-clone/step-1.png differ
Binary files /dev/null and b/public/voice-clone/step-2.png differ
Binary files /dev/null and b/public/voice-clone/voice-selector-mobile.png differ
@@ -0,0 +1,3 @@
+.card {
+	background: linear-gradient(to top left, rgba(42, 40, 188, 0.2), transparent 52%), #1a1a1e;
+}
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import Image from 'next/image'
+
+import shell from './voice-clone-card-shell.module.scss'
+import fig from './voice-clone-figure.module.scss'
+import styles from './add-voices-card.module.scss'
+
+export function AddVoicesCard() {
+	return (
+		<section className={`${shell.shell} ${styles.card} ${shell.shellFill}`}>
+			<h2 className={shell.title}>
+				Добавляйте новые голоса
+			</h2>
+			<div className={shell.body}>
+				<figure className={`${fig.figure} ${fig.figureFull}`}>
+					<Image
+						className={fig.image}
+						src='/voice-clone/add-voice.png'
+						alt='Карточка добавления голоса'
+						width={1809}
+						height={580}
+					/>
+				</figure>
+			</div>
+		</section>
+	)
+}
@@ -0,0 +1,96 @@
+.grid {
+	display: grid;
+	grid-template-columns: 203px 78px 405px;
+	grid-template-rows: auto auto;
+	row-gap: 16px;
+	align-items: start;
+}
+
+.cellFigure1 {
+	grid-column: 1;
+	grid-row: 1;
+	align-self: center;
+}
+
+.cellArrow {
+	grid-column: 2;
+	grid-row: 1;
+	place-self: center;
+}
+
+.cellFigure2 {
+	grid-column: 3;
+	grid-row: 1;
+	align-self: center;
+}
+
+.cellText1 {
+	grid-column: 1;
+	grid-row: 2;
+	min-width: 0;
+}
+
+.cellText2 {
+	grid-column: 3;
+	grid-row: 2;
+	min-width: 0;
+}
+
+.stepFigure {
+	margin: 0;
+	border-radius: 12px;
+	overflow: hidden;
+	line-height: 0;
+	background: rgba(0, 0, 0, 0.2);
+}
+
+.stepFigureNarrow {
+	width: 203px;
+	height: 146px;
+}
+
+.stepFigureWide {
+	width: 405px;
+	height: 148px;
+}
+
+.stepImage {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
+.arrowWrap {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #a4aab5;
+
+	svg {
+		display: block;
+	}
+}
+
+.stepTitle {
+	margin: 0;
+	font-size: 20px;
+	font-weight: 700;
+	line-height: 1.2;
+	letter-spacing: -0.01em;
+	color: #fff;
+}
+
+.stepText {
+	margin: 8px 0 0;
+	max-width: 220px;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 1.35;
+	letter-spacing: -0.01em;
+	color: #a4aab5;
+}
+
+.cellText2 .stepText {
+	max-width: 405px;
+}
@@ -0,0 +1,71 @@
+import * as React from 'react'
+import Image from 'next/image'
+
+import shell from './voice-clone-card-shell.module.scss'
+import styles from './how-to-model-card.module.scss'
+
+function StepArrow() {
+	return (
+		<svg
+			width={39}
+			height={12}
+			viewBox='0 0 39 12'
+			fill='none'
+			xmlns='http://www.w3.org/2000/svg'
+			aria-hidden
+		>
+			<line x1={0} y1={6} x2={28} y2={6} stroke='currentColor' strokeWidth={2} strokeLinecap='round' />
+			<path d='M28 2L36 6L28 10Z' fill='currentColor' />
+		</svg>
+	)
+}
+
+export function HowToModelCard() {
+	return (
+		<section className={`${shell.shell} ${shell.shellCornerGlow} ${shell.shellFill}`}>
+			<h2 className={shell.title}>
+				Как работать с моделью
+			</h2>
+
+			<div className={shell.body}>
+				<div className={styles.grid}>
+					<figure className={`${styles.stepFigure} ${styles.stepFigureNarrow} ${styles.cellFigure1}`}>
+						<Image
+							className={styles.stepImage}
+							src='/voice-clone/step-1.png'
+							alt='Выбор шаблона голоса или добавление своего'
+							width={203}
+							height={146}
+						/>
+					</figure>
+
+					<div className={`${styles.arrowWrap} ${styles.cellArrow}`} aria-hidden>
+						<StepArrow />
+					</div>
+
+					<figure className={`${styles.stepFigure} ${styles.stepFigureWide} ${styles.cellFigure2}`}>
+						<Image
+							className={styles.stepImage}
+							src='/voice-clone/step-2.png'
+							alt='Ввод текста для озвучки и кнопка запуска генерации'
+							width={405}
+							height={148}
+						/>
+					</figure>
+
+					<div className={styles.cellText1}>
+						<h3 className={styles.stepTitle}>Шаг 1.</h3>
+						<p className={styles.stepText}>Выберите один из шаблонов голоса или создайте свой</p>
+					</div>
+
+					<div className={styles.cellText2}>
+						<h3 className={styles.stepTitle}>Шаг 2.</h3>
+						<p className={styles.stepText}>
+							Введите текст, который нужно озвучить и нажмите на кнопку – запустится процесс генерации
+						</p>
+					</div>
+				</div>
+			</div>
+		</section>
+	)
+}
@@ -0,0 +1,4 @@
+export { HowToModelCard } from './how-to-model-card'
+export { SoundParamsCard } from './sound-params-card'
+export { AddVoicesCard } from './add-voices-card'
+export { ReuseQueryCard } from './reuse-query-card'
@@ -0,0 +1,3 @@
+.card {
+	background: linear-gradient(to top right, #2b2b42, #18181b);
+}
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import Image from 'next/image'
+
+import shell from './voice-clone-card-shell.module.scss'
+import fig from './voice-clone-figure.module.scss'
+import styles from './reuse-query-card.module.scss'
+
+export function ReuseQueryCard() {
+	return (
+		<section className={`${shell.shell} ${styles.card} ${shell.shellFill}`}>
+			<h2 className={shell.title}>
+				Переиспользуйте запрос по клику
+			</h2>
+			<div className={shell.body}>
+				<figure className={fig.figure}>
+					<Image
+						className={fig.image}
+						src='/voice-clone/my-generations.png'
+						alt='Раздел «Мои генерации»'
+						width={2223}
+						height={583}
+					/>
+				</figure>
+			</div>
+		</section>
+	)
+}
@@ -0,0 +1,3 @@
+.card {
+	background: linear-gradient(to bottom right, #2b2b42, #18181b);
+}
@@ -0,0 +1,30 @@
+import * as React from 'react'
+import Image from 'next/image'
+
+import shell from './voice-clone-card-shell.module.scss'
+import fig from './voice-clone-figure.module.scss'
+import styles from './sound-params-card.module.scss'
+
+export function SoundParamsCard() {
+	return (
+		<section className={`${shell.shell} ${styles.card} ${shell.shellFill}`}>
+			<h2 className={shell.title}>
+				Меняйте параметры звучания
+			</h2>
+			<p className={shell.description}>
+				Экспериментируйте с настройками, чтобы добиться идеального звучания
+			</p>
+			<div className={shell.body}>
+				<figure className={fig.figure}>
+					<Image
+						className={fig.image}
+						src='/voice-clone/parameters-panel.png'
+						alt='Панель параметров'
+						width={1296}
+						height={637}
+					/>
+				</figure>
+			</div>
+		</section>
+	)
+}
@@ -0,0 +1,79 @@
+$purple-fade: rgba(42, 40, 188, 0.9) 0%, rgba(42, 40, 188, 0.4) 32%, rgba(42, 40, 188, 0.1) 55%, transparent 72%;
+
+.shell {
+	position: relative;
+	overflow: hidden;
+	border-radius: 16px;
+	padding: 25px;
+	width: 100%;
+	background: #1d1d21;
+}
+
+.shellFill {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.shellFill .body {
+	flex: 1 1 auto;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
+.shellCornerGlow::before,
+.shellCornerGlow::after {
+	content: '';
+	position: absolute;
+	z-index: 0;
+	pointer-events: none;
+	width: min(100%, 520px);
+	height: 75%;
+	min-height: 200px;
+	filter: blur(48px);
+	opacity: 0.72;
+}
+
+.shellCornerGlow::before {
+	top: -12%;
+	right: -8%;
+	background: radial-gradient(ellipse 80% 70% at 100% 0%, $purple-fade);
+}
+
+.shellCornerGlow::after {
+	bottom: -12%;
+	left: -8%;
+	background: radial-gradient(ellipse 80% 70% at 0% 100%, $purple-fade);
+}
+
+.title {
+	position: relative;
+	z-index: 1;
+	margin: 0 0 20px;
+	font-size: 28px;
+	font-weight: 600;
+	line-height: 1;
+	letter-spacing: -0.01em;
+	color: #fff;
+}
+
+.shell:has(.description) .title {
+	margin-bottom: 12px;
+}
+
+.description {
+	position: relative;
+	z-index: 1;
+	margin: 0 0 20px;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 1.35;
+	letter-spacing: -0.01em;
+	color: #a4aab5;
+}
+
+.body {
+	position: relative;
+	z-index: 1;
+}
@@ -0,0 +1,17 @@
+.figure {
+	margin: 0;
+	border-radius: 12px;
+	overflow: hidden;
+	line-height: 0;
+	background: rgba(0, 0, 0, 0.2);
+}
+
+.figureFull {
+	max-width: 100%;
+}
+
+.image {
+	display: block;
+	width: 100%;
+	height: auto;
+}
@@ -0,0 +1,3 @@
+export { default as VoiceClonePage } from './voice-clone-page'
+export { VoiceCloneCardsGrid } from './voice-clone-cards-grid'
+export { VoiceCloneMobile } from './voice-clone-mobile'
@@ -0,0 +1,50 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	width: 100%;
+	max-width: 1130px;
+	overflow-x: auto;
+}
+
+.row {
+	display: flex;
+	flex-wrap: nowrap;
+	align-items: stretch;
+	gap: 20px;
+	min-width: 0;
+}
+
+.mainSlot {
+	flex: 1 1 0;
+	min-width: 0;
+	max-width: 736px;
+	display: flex;
+}
+
+.sideSlot {
+	flex: 0 1 374px;
+	width: 374px;
+	max-width: 100%;
+	min-width: 280px;
+	display: flex;
+}
+
+.rowBottom .mainSlot {
+	flex: 502 1 0;
+	max-width: none;
+}
+
+.rowBottom .sideSlot {
+	flex: 608 1 0;
+	width: auto;
+	min-width: 0;
+}
+
+.mainSlot > *,
+.sideSlot > * {
+	flex: 1;
+	width: 100%;
+	min-width: 0;
+	min-height: 0;
+}
@@ -0,0 +1,28 @@
+import * as React from 'react'
+
+import { AddVoicesCard, HowToModelCard, ReuseQueryCard, SoundParamsCard } from './cards'
+
+import styles from './voice-clone-cards-grid.module.scss'
+
+export function VoiceCloneCardsGrid() {
+	return (
+		<div className={styles.root}>
+			<div className={styles.row}>
+				<div className={styles.mainSlot}>
+					<HowToModelCard />
+				</div>
+				<div className={styles.sideSlot}>
+					<SoundParamsCard />
+				</div>
+			</div>
+			<div className={`${styles.row} ${styles.rowBottom}`}>
+				<div className={styles.mainSlot}>
+					<AddVoicesCard />
+				</div>
+				<div className={styles.sideSlot}>
+					<ReuseQueryCard />
+				</div>
+			</div>
+		</div>
+	)
+}
@@ -0,0 +1,58 @@
+.root {
+	width: 100%;
+}
+
+.title {
+	margin: 0 0 25px 0;
+	font-weight: 700;
+	font-size: 18.27px;
+	line-height: 100%;
+	letter-spacing: -0.01em;
+	color: #fff;
+}
+
+.steps {
+	display: flex;
+	flex-direction: column;
+	gap: 25px;
+	margin-top: 25px;
+}
+
+.step {
+	position: relative;
+}
+
+.stepBadge {
+	position: absolute;
+	z-index: 1;
+	top: -8px;
+	left: 5px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	height: 29px;
+	padding: 7px 10px;
+	border-radius: 95px;
+	font-weight: 800;
+	font-size: 12.79px;
+	line-height: 1;
+	letter-spacing: -0.01em;
+	color: #fff;
+	background: #8280ff;
+	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+}
+
+.stepImageWrap {
+	margin: 0;
+	line-height: 0;
+}
+
+.stepImage {
+	display: block;
+	height: auto;
+	width: 100%;
+}
+
+.footerInputWrap {
+	margin-top: 28px;
+}
@@ -0,0 +1,58 @@
+import * as React from 'react'
+import { Box } from '@mui/material'
+import Image from 'next/image'
+
+import styles from './voice-clone-mobile.module.scss'
+import { ModelInput } from '#/features/model-input'
+
+export function VoiceCloneMobile() {
+	const steps = [
+		{ label: 'Шаг 1', src: '/voice-clone/message-input-mobile.png', alt: 'Ввод сообщения' },
+		{ label: 'Шаг 2', src: '/voice-clone/voice-selector-mobile.png', alt: 'Выбор голоса' },
+		{ label: 'Шаг 3', src: '/voice-clone/message-preview-mobile.png', alt: 'Предпросмотр сообщения' },
+	]
+	const inputTypes = [{ type: 'text', required: true, versions: [] }]
+
+	return (
+		<Box className='mt-15'>
+			<Box
+				sx={{
+					display: 'flex',
+					flexDirection: 'column',
+					gap: '20px',
+				}}
+			>
+				<section className={styles.root}>
+					<h2 className={styles.title}>
+						Добавляйте свой голос
+						<br />
+						или выбирайте из пресетов
+					</h2>
+
+					<div className={styles.steps}>
+						{steps.map((step) => (
+							<div key={step.label} className={styles.step}>
+								<div className={styles.stepBadge}>{step.label}</div>
+								<figure className={styles.stepImageWrap}>
+									<Image className={styles.stepImage} src={step.src} alt={step.alt} width={295} height={177} />
+								</figure>
+							</div>
+						))}
+					</div>
+
+					<div className={styles.footerInputWrap}>
+						<ModelInput
+							loading={false}
+							desktop={false}
+							sendMessage={() => false}
+							styles='chats'
+							viewMobileSettings={() => {}}
+							currentVersion=''
+							input_types={inputTypes}
+						/>
+					</div>
+				</section>
+			</Box>
+		</Box>
+	)
+}
@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { Box, Typography } from '@mui/material'
+
+import { NextPageWithLayout } from '#/pages/_app'
+import { getDeviceType } from '#/shared/lib/helpers'
+
+import { VoiceCloneCardsGrid } from './voice-clone-cards-grid'
+import { VoiceCloneMobile } from './voice-clone-mobile'
+
+export const VoiceClonePage: NextPageWithLayout = () => {
+	const device = getDeviceType()
+	const desktop = device === 'desktop'
+
+	return (
+		<Box>
+			{desktop && (
+				<>
+					<Box sx={{ display: 'flex', alignItems: 'center' }}>
+						<Typography sx={{ fontSize: 24, fontWeight: 'bold', marginTop: '25px' }}>Войсклон</Typography>
+					</Box>
+
+					<Box sx={{ marginTop: 3 }}>
+						<VoiceCloneCardsGrid />
+					</Box>
+				</>
+			)}
+
+			{!desktop && <VoiceCloneMobile />}
+		</Box>
+	)
+}
+
+export default VoiceClonePage
@@ -33,6 +33,7 @@ import { useDeviceType } from '#/shared/lib/hooks'
 
 import { AddVoiceCta } from '../add-voice-cta'
 import { AddVoicePlate } from '../add-voice-plate'
+import { VoiceCloneCardsGrid, VoiceCloneMobile } from '../voice-clone-empty-state'
 import { VoiceCloneSelect } from '../voice-clone-select'
 
 const VoiceCloningModelPage: NextPageWithLayout = () => {
@@ -212,6 +213,11 @@ const VoiceCloningModelPage: NextPageWithLayout = () => {
 		token: session?.access,
 		enabled: !!modelType && !!session?.access && scope === 'playground',
 	})
+	const hasGenerations = (messages?.length ?? 0) > 0
+	const mobileScrollAreaHeight = `calc(100dvh - 116px - 61px - 15px ${botParams?.blocked ? '- 17px' : '- 23.5px'})`
+	const compactPlaygroundEmpty = scope === 'playground' && !hasGenerations
+	/** Меню + отступы layout + шапка страницы + табы — чтобы основной блок доходил до низа экрана без серой полосы */
+	const mobileVoiceCompactMinHeight = 'calc(100dvh - 200px)'
 
 	return (
 		<>
@@ -255,6 +261,9 @@ const VoiceCloningModelPage: NextPageWithLayout = () => {
 					marginBottom: desktop ? 0 : 2,
 					width: desktop ? '97%' : '100%',
 					marginTop: desktop ? 3 : '15px',
+					...(!desktop && compactPlaygroundEmpty
+						? { minHeight: mobileVoiceCompactMinHeight, justifyContent: 'flex-start' }
+						: {}),
 				}}
 			>
 				<Box
@@ -263,6 +272,7 @@ const VoiceCloningModelPage: NextPageWithLayout = () => {
 						marginLeft: 0,
 						display: 'flex',
 						flexDirection: desktop ? 'column' : 'column-reverse',
+						...(!desktop && compactPlaygroundEmpty ? { flex: 1, minHeight: 0, alignSelf: 'stretch' } : {}),
 					}}
 				>
 					{desktop ? (
@@ -322,7 +332,16 @@ const VoiceCloningModelPage: NextPageWithLayout = () => {
 									/>
 								</Box>
 								<Box sx={{ display: scope === 'playground' ? 'block' : 'none' }}>
-									<AudioMessagesList device={deviceType} audios={messages} getMessagesPagination={fetchMessages} onPromptClick={(content) => setPrompt(content)} />
+									{hasGenerations ? (
+										<AudioMessagesList
+											device={deviceType}
+											audios={messages}
+											getMessagesPagination={fetchMessages}
+											onPromptClick={(content) => setPrompt(content)}
+										/>
+									) : (
+										<VoiceCloneCardsGrid />
+									)}
 								</Box>
 								<Box
 									sx={{
@@ -337,7 +356,15 @@ const VoiceCloningModelPage: NextPageWithLayout = () => {
 							</Box>
 						</>
 					) : (
-						<Box className={'bg-color-block border-radius-main'} sx={{ position: 'relative' }}>
+						<Box
+							className={'bg-color-block border-radius-main'}
+							sx={{
+								position: 'relative',
+								...(compactPlaygroundEmpty
+									? { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }
+									: {}),
+							}}
+						>
 							<div className={c(styles.container, loading && offset.current === 0 && styles.container_active)}>
 								<div
 									style={{
@@ -350,12 +377,28 @@ const VoiceCloningModelPage: NextPageWithLayout = () => {
 									<Loader />
 								</div>
 							</div>
-							<div style={{ position: 'relative', borderRadius: '13px' }}>
+							<div
+								style={{
+									position: 'relative',
+									borderRadius: '13px',
+									...(compactPlaygroundEmpty
+										? { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }
+										: {}),
+								}}
+							>
 								<Box
 									sx={{
-										padding: '30px',
-										height: `calc(100dvh - 116px - 61px - 15px ${botParams?.blocked ? '- 17px' : '- 23.5px'})`,
-										overflowY: 'scroll',
+										padding: compactPlaygroundEmpty ? '30px 30px 12px' : '30px',
+										...(compactPlaygroundEmpty
+											? {
+													flex: 1,
+													minHeight: 0,
+													overflowY: 'auto',
+												}
+											: {
+													height: mobileScrollAreaHeight,
+													overflowY: 'scroll',
+												}),
 										overflowX: 'hidden',
 										position: 'relative',
 									}}
@@ -364,7 +407,16 @@ const VoiceCloningModelPage: NextPageWithLayout = () => {
 								>
 									<Box sx={{ display: scope === 'playground' ? 'block' : 'none' }}>
 										<div style={{ position: 'absolute', top: 300 }} ref={refScrollMobile}></div>
-										<AudioMessagesList device={deviceType} audios={messages} getMessagesPagination={fetchMessages} onPromptClick={(content) => setPrompt(content)} />
+										{hasGenerations ? (
+											<AudioMessagesList
+												device={deviceType}
+												audios={messages}
+												getMessagesPagination={fetchMessages}
+												onPromptClick={(content) => setPrompt(content)}
+											/>
+										) : (
+											<VoiceCloneMobile />
+										)}
 									</Box>
 
 									<Box sx={{ display: scope === 'api' ? 'block' : 'none' }}>
@@ -378,7 +430,16 @@ const VoiceCloningModelPage: NextPageWithLayout = () => {
 									</Box>
 								</Box>
 
-								<Stack alignItems='center' sx={{ zIndex: 10, position: 'relative', margin: 1.25 }}>
+								<Stack
+									alignItems='center'
+									sx={{
+										display: 'flex',
+										zIndex: 10,
+										position: 'relative',
+										margin: 1.25,
+										marginTop: 'auto',
+									}}
+								>
 									{botParams && (
 										<ModelInput
 											currentVersion={version}
@@ -412,7 +473,14 @@ const VoiceCloningModelPage: NextPageWithLayout = () => {
 					)}
 				</Box>
 
-				<Stack spacing={2} sx={{ width: desktop ? '25.5%' : '100%', paddingBottom: desktop ? '' : '15px' }}>
+				<Stack
+					spacing={2}
+					sx={{
+						width: desktop ? '25.5%' : '100%',
+						paddingBottom: desktop ? '' : '15px',
+						display: desktop ? 'flex' : 'none',
+					}}
+				>
 					{desktop && (
 						<Stack spacing={2} className='pd-30 bg-color-block border-radius-main' sx={{ height: 'auto' }}>
 							{botParams?.versions && botParams.versions.length !== 0 ? (