Binary files /dev/null and b/public/images/promo-cards/chats.png differ
Binary files /dev/null and b/public/images/promo-cards/copyright.png differ
Binary files /dev/null and b/public/images/promo-cards/flux.png differ
Binary files /dev/null and b/public/images/promo-cards/image-enhancement.png differ
Binary files /dev/null and b/public/images/promo-cards/stable-diff.png differ
Binary files /dev/null and b/public/images/promo-cards/video.png differ
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.36364 1.97843C9.0573 2.1053 8.78272 2.37987 8.23364 2.92897C7.68466 3.47796 7.40997 3.75265 7.28312 4.05889C7.11396 4.46727 7.11396 4.92617 7.28312 5.33455C7.40999 5.64084 7.68454 5.9154 8.23366 6.46451C8.78247 7.01331 9.05739 7.28823 9.36355 7.41506C9.77197 7.58421 10.2309 7.58421 10.6392 7.41506C10.9456 7.28819 11.2201 7.01363 11.7692 6.46451C12.3183 5.9154 12.5921 5.64084 12.719 5.33455C12.8881 4.92617 12.8881 4.46727 12.719 4.05889C12.5921 3.75261 12.3183 3.47809 11.7692 2.92897C11.2201 2.37986 10.9456 2.1053 10.6392 1.97843C10.2309 1.80927 9.77197 1.80927 9.36364 1.97843Z" stroke="#7F7DF3" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.06282 7.28312C3.75654 7.40999 3.48197 7.68455 2.93286 8.23366C2.3839 8.78263 2.10919 9.05738 1.98234 9.36354C1.81318 9.77196 1.81318 10.2309 1.98234 10.6392C2.1092 10.9455 2.38377 11.2201 2.93288 11.7692C3.48169 12.318 3.7566 12.5929 4.0628 12.7197C4.47118 12.8889 4.93008 12.8889 5.33845 12.7197C5.64475 12.5929 5.9193 12.3183 6.46842 11.7692C7.01754 11.2201 7.29129 10.9455 7.41815 10.6392C7.58731 10.2309 7.58731 9.77196 7.41815 9.36354C7.29129 9.05729 7.01754 8.78279 6.46842 8.23366C5.9193 7.68454 5.64475 7.40999 5.33845 7.28312C4.93008 7.11396 4.4712 7.11396 4.06282 7.28312Z" stroke="#7F7DF3" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.5384 8.23366C12.9894 8.78263 12.7147 9.05729 12.5878 9.36354C12.4186 9.77196 12.4186 10.2309 12.5878 10.6392C12.7147 10.9455 12.9893 11.22 13.5384 11.7692C14.0871 12.318 14.3621 12.5929 14.6683 12.7197C15.0766 12.8889 15.5356 12.8889 15.944 12.7197C16.2502 12.5929 16.5248 12.3183 17.0739 11.7692C17.6231 11.2201 17.8968 10.9455 18.0236 10.6392C18.1928 10.2309 18.1928 9.77196 18.0236 9.36354C17.8968 9.05729 17.6231 8.78279 17.0739 8.23366C16.5248 7.68455 16.2502 7.40999 15.944 7.28312C15.5356 7.11396 15.0767 7.11396 14.6683 7.28312C14.3621 7.40999 14.0875 7.68455 13.5384 8.23366Z" stroke="#7F7DF3" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.36364 12.5858C9.0573 12.7127 8.78272 12.9873 8.23364 13.5364C7.68467 14.0854 7.40997 14.36 7.28312 14.6663C7.11396 15.0747 7.11396 15.5335 7.28312 15.942C7.40999 16.2482 7.68454 16.5228 8.23366 17.0719C8.78247 17.6207 9.05739 17.8956 9.36355 18.0225C9.77197 18.1916 10.2309 18.1916 10.6392 18.0225C10.9456 17.8956 11.2201 17.621 11.7692 17.0719C12.3183 16.5228 12.5921 16.2482 12.719 15.942C12.8881 15.5335 12.8881 15.0747 12.719 14.6663C12.5921 14.36 12.3183 14.0855 11.7692 13.5364C11.2201 12.9873 10.9456 12.7127 10.6392 12.5858C10.2309 12.4167 9.77197 12.4167 9.36364 12.5858Z" stroke="#7F7DF3" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,7 @@
+import { HomePage } from '#/views/home'
+import { getDefaultLayout } from '#/widgets/layouts'
+
+HomePage.getLayout = getDefaultLayout({ titlePage: 'Главная' })
+
+export default HomePage
+
@@ -0,0 +1,3 @@
+export { PromoCard } from './promo-card'
+export type { PromoCard as PromoCardType, PromoCardProps } from './promo-card'
+
@@ -0,0 +1,167 @@
+.card {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	min-height: 400px;
+	cursor: pointer;
+	border-radius: 16px;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	transition: transform 0.2s ease, box-shadow 0.2s ease;
+	grid-column: span 1;
+
+	&:hover {
+		transform: scale(1.02);
+		box-shadow: 0px 4px 20px rgba(130, 128, 255, 0.2);
+	}
+
+	&[data-desktop='true'] {
+		min-height: 500px;
+		min-width: 0;
+
+		&[data-flex='2'] {
+			grid-column: span 2;
+		}
+
+		&[data-flex='1'] {
+			grid-column: span 1;
+		}
+	}
+}
+
+.imageWrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+}
+
+.overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: linear-gradient(
+		180deg,
+		rgba(0, 0, 0, 0.3) 0%,
+		rgba(0, 0, 0, 0.5) 50%,
+		rgba(0, 0, 0, 0.7) 100%
+	);
+	z-index: 1;
+}
+
+.content {
+	position: relative;
+	z-index: 2;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	height: 100%;
+	padding: 32px 24px;
+	color: white;
+}
+
+.card[data-desktop='true'] .content {
+	padding: 40px 32px;
+}
+
+.title {
+	font-size: 32px;
+	font-weight: 700;
+	color: #ffffff;
+	margin-bottom: 16px;
+	line-height: 1.2;
+}
+
+.card[data-desktop='true'] .title {
+	font-size: 48px;
+	margin-bottom: 20px;
+}
+
+.description {
+	font-size: 14px;
+	color: rgba(255, 255, 255, 0.9);
+	line-height: 1.6;
+	margin-bottom: auto;
+	max-width: 80%;
+}
+
+.card[data-desktop='true'] .description {
+	font-size: 16px;
+	max-width: 70%;
+}
+
+.buttonWrapper {
+	margin-top: 24px;
+}
+
+.card[data-desktop='true'] .buttonWrapper {
+	margin-top: 32px;
+}
+
+.button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	background-color: #ffffff !important;
+	color: #000000 !important;
+	border-radius: 12px;
+	padding: 14px 24px;
+	width: fit-content;
+	transition: background-color 0.2s ease, transform 0.2s ease;
+	cursor: pointer;
+	border: none;
+
+	&:hover {
+		background-color: rgba(255, 255, 255, 0.9) !important;
+		transform: translateX(4px);
+	}
+
+	&:disabled {
+		background-color: transparent !important;
+		border: 1px solid rgba(255, 255, 255, 0.3) !important;
+		cursor: not-allowed;
+		pointer-events: none;
+
+		&:hover {
+			background-color: transparent !important;
+			transform: none;
+		}
+	}
+}
+
+.card[data-desktop='true'] .button {
+	padding: 16px 28px;
+}
+
+.buttonText {
+	font-size: 15px;
+	font-weight: 600;
+	color: #000000;
+	margin: 0;
+}
+
+.card[data-desktop='true'] .buttonText {
+	font-size: 16px;
+}
+
+.button:disabled .buttonText {
+	color: rgba(255, 255, 255, 1);
+}
+
+.arrowIcon {
+	width: 20px;
+	height: 20px;
+	transition: transform 0.2s ease;
+}
+
+.card[data-desktop='true'] .arrowIcon {
+	width: 24px;
+	height: 24px;
+}
+
@@ -0,0 +1,77 @@
+import * as React from 'react'
+import { Box, Typography } from '@mui/material'
+import { ChevronRight } from '@mui/icons-material'
+import Image from 'next/image'
+import Link from 'next/link'
+
+import { CommonButton } from '#/shared/ui/button/ui'
+import styles from './promo-card.module.scss'
+
+export interface PromoCard {
+	title: string
+	image: string
+	description: string
+	routerlink: string
+	buttonText?: string
+	buttonDisabled?: boolean
+}
+
+export interface PromoCardProps {
+	card: PromoCard
+	isDesktop?: boolean
+	flex?: number
+}
+
+export const PromoCard: React.FC<PromoCardProps> = ({ card, isDesktop, flex = 1 }) => {
+	const isButtonDisabled = card.buttonDisabled ?? false;
+
+	const handleClick = (e: React.MouseEvent) => {
+		if (isButtonDisabled) {
+			e.preventDefault()
+		}
+	}
+
+	return (
+		<Link 
+			href={card.routerlink} 
+			className={styles.card}
+			onClick={handleClick}
+			data-flex={flex}
+			data-desktop={isDesktop}
+		>
+			<Box className={styles.imageWrapper}>
+				<Image
+					src={card.image}
+					alt={card.title}
+					fill
+					sizes={isDesktop ? '(max-width: 1200px) 50vw, 33vw' : '100vw'}
+					priority
+					style={{ objectFit: 'cover' }}
+				/>
+				<Box className={styles.overlay} />
+			</Box>
+			<Box className={styles.content}>
+				<Box>
+					<Typography className={styles.title}>
+						{card.title}
+					</Typography>
+					<Typography className={styles.description}>
+						{card.description}
+					</Typography>
+				</Box>
+				<Box className={styles.buttonWrapper}>
+					<CommonButton
+						disabled={isButtonDisabled}
+						className={styles.button}
+					>
+						<span className={styles.buttonText}>
+							{card.buttonText || 'Попробовать'}
+						</span>
+						{!isButtonDisabled && <ChevronRight className={styles.arrowIcon} />}
+					</CommonButton>
+				</Box>
+			</Box>
+		</Link>
+	)
+}
+
@@ -0,0 +1,2 @@
+export * from './ui'
+
@@ -0,0 +1,3 @@
+export { PromoCardsList } from './promo-cards-list'
+export type { PromoCardsListProps } from './promo-cards-list'
+
@@ -0,0 +1,13 @@
+.list {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 20px;
+	width: 100%;
+
+	&[data-desktop='true'] {
+		grid-template-columns: repeat(3, 1fr);
+		gap: 24px;
+		max-width: 100%;
+	}
+}
+
@@ -0,0 +1,26 @@
+import * as React from 'react'
+import { Box } from '@mui/material'
+
+import { PromoCard, PromoCardType } from '#/views/home/ui/promo-card'
+import styles from './promo-cards-list.module.scss'
+
+export interface PromoCardsListProps {
+	cards: PromoCardType[]
+	isDesktop?: boolean
+}
+
+const FLEX_PATTERN = [2, 1, 1, 2]
+
+export const PromoCardsList: React.FC<PromoCardsListProps> = ({ cards, isDesktop }) => {
+	return (
+		<Box className={styles.list} data-desktop={isDesktop}>
+			{cards.map((card, index) => {
+				const flexValue = FLEX_PATTERN[index % FLEX_PATTERN.length]
+				return (
+					<PromoCard key={index} card={card} isDesktop={isDesktop} flex={flexValue} />
+				)
+			})}
+		</Box>
+	)
+}
+
@@ -0,0 +1,2 @@
+export * from './ui'
+
@@ -0,0 +1,83 @@
+import * as React from 'react'
+import { Box, Typography } from '@mui/material'
+
+import { NextPageWithLayout } from '#/pages/_app'
+import { getDeviceType } from '#/shared/lib/helpers/get-type-device'
+import { PromoCardsList } from './promo-cards-list'
+import type { PromoCardType } from './promo-card'
+
+export interface HomePageProps {}
+
+const Home: NextPageWithLayout<HomePageProps> = () => {
+	const deviceType = getDeviceType()
+
+	const promoCards: PromoCardType[] = [
+		{
+			title: 'Flux 1.1',
+			image: '/images/promo-cards/flux.png',
+			description: 'Современная нейросеть, способная анализировать данные, обрабатывать информацию и генерировать уникальный контент для различных задач.',
+			routerlink: '/images/flux',
+			buttonText: 'Попробовать',
+		},
+		{
+			title: 'Чат-боты',
+			image: '/images/promo-cards/chats.png',
+			description: 'Получите доступ к последним версиям самых передовых текстовых моделей.',
+			routerlink: '/chat-bot',
+			buttonText: 'Попробовать',
+		},
+		{
+			title: 'Stable Diffusion',
+			image: '/images/promo-cards/stable-diff.png',
+			description: 'Превращайте текстовые описания в реалистичные или художественные изображения.',
+			routerlink: '/images/stablediffusion',
+			buttonText: 'Попробовать',
+		},
+		{
+			title: 'Создание видео',
+			image: '/images/promo-cards/video.png',
+			description: 'Генерируйте и редактируйте видео с помощью передовых технологий ИИ.',
+			routerlink: '/videos',
+			buttonText: 'Попробовать',
+		},
+		{
+			title: 'Копирайтинг',
+			image: '/images/promo-cards/copyright.png',
+			description: 'Создавайте уникальные, качественные тексты для бизнеса, блогов и рекламы.',
+			routerlink: '/chat-bot',
+			buttonText: 'Скоро будет доступно',
+			buttonDisabled: true,
+		},
+		{
+			title: 'Улучшение фото',
+			image: '/images/promo-cards/image-enhancement.png',
+			description: 'Улучшайте качество, устраняйте шум и добавляйте детали с помощью ИИ.',
+			routerlink: '/images/nanobanana',
+			buttonText: 'Скоро будет доступно',
+			buttonDisabled: true,
+		},
+	]
+
+	return (
+		<Box width='100%'>
+			<Box sx={{ padding: deviceType === 'desktop' ? '20px' : '10px' }}>
+				<Typography
+					sx={{
+						fontSize: deviceType === 'desktop' ? '28px' : '24px',
+						fontWeight: 600,
+						color: '#D4D4D4',
+						marginBottom: '20px',
+					}}
+				>
+					Главная
+				</Typography>
+				<Box>
+					<PromoCardsList cards={promoCards} isDesktop={deviceType === 'desktop'} />
+				</Box>
+			</Box>
+		</Box>
+	)
+}
+
+export default Home
+
@@ -0,0 +1,2 @@
+export { default as HomePage } from './home'
+
@@ -0,0 +1,2 @@
+export * from './ui'
+
@@ -20,6 +20,7 @@ import { useUserSettingsContext } from '#/entities/user-account'
 import { BUSINESS_ERROR_REPORT, ERROR_REPORT, getModalById } from '#/features/modals'
 
 export const menuListTop = [
+	{ title: 'Главная', link: '/home', icon: '/svg/side-menu/home-page', activeList: ['home'] },
 	{ title: 'Дашборд', link: '/', icon: '/svg/side-menu/market', activeList: [] },
 	{
 		title: 'Оплата',