Блок уведомления для начальной страницы

frontend/src/start-page/notification-block.module.css

@@ -0,0 +1,32 @@
+.message {
+	display: flex;
+	flex-direction: row;
+	align-items: end;
+	justify-content: center;
+}
+
+.event_emitter_eltex_loc_icon {
+	vertical-align: middle;
+	height: 52px;
+	padding: 0em 15px 0px 0px;
+}
+
+.text_box {
+	width: 760px;
+	background-color: white;
+	border-radius: 28px;
+	box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.25);
+}
+
+.text_box_text {
+	padding-top: 0px;
+	padding-left: 40px;
+	padding-right: 40px;
+	padding-bottom: 0px;
+	font-size: 16pt;
+	line-height: normal;
+}
+
+.text_box_text_blue {
+	color: rgb(38, 140, 204);
+}

frontend/src/start-page/notification-block.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import NotificationBlockCss from './notification-block.module.css';
+
+export type Props = {
+	avatarUrl: string;
+	taskTitle?: string;
+	children?: any;
+};
+
+export const NotificationBlock = (props: Props) => {
+	const taskTitle = props?.taskTitle
+		? (<span className={NotificationBlockCss.text_box_text_blue}>{props.taskTitle} </span>)
+		: (<></>);
+	return (
+		<div className={NotificationBlockCss.message}>
+			<img src={props.avatarUrl} alt="event_emitter_eltex_loc" className={NotificationBlockCss.event_emitter_eltex_loc_icon} />
+			<div className={NotificationBlockCss.text_box}>
+				<p className={NotificationBlockCss.text_box_text}>
+					{taskTitle}
+					{props.children}
+				</p>
+			</div>
+		</div>
+	);
+};
+
+export default NotificationBlock;

frontend/src/start-page/start-page.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import Content from './content';
 import ContentBlock from './content-block';
 import Cover from './cover';
+import NotificationBlock from './notification-block';
+import NotificationBlockCss from './notification-block.module.css';
 import StartPageCss from './start-page.module.css';
 import TopBar from './top-bar';
 
@@ -31,6 +33,65 @@ export const StartPage = () => {
 						<li>Скриншоты уведомления от бота:
 							Примеры уведомлений о новых задачах и об изменениях статусов:</li>
 					</ul>
+					
+					<NotificationBlock
+						taskTitle='Feature #245005'
+						avatarUrl='/images/event_emitter_eltex_loc-49px.png'
+					>
+						Реализовать поддержку нового протокола: <br/><br/>
+						Стив Джобс изменил статус задачи с Feedback на Closed
+					</NotificationBlock>
+					
+					<NotificationBlock
+						taskTitle='Feature #241201'
+						avatarUrl='/images/event_emitter_eltex_loc-49px.png'
+					>
+						Добавить поддержку новых моделей: <br/><br/>
+
+						Билл Гейтс создал новую задачу и назначил её на вас
+					</NotificationBlock>
+					
+					<p>Простые уведомления о движении задач - и больше ничего лишнего.
+						Пример уведомления по личному упоминанию в задаче:
+					</p>
+					
+					<NotificationBlock
+						taskTitle='Question #230033'
+						avatarUrl='/images/event_emitter_eltex_loc-49px.png'
+					>
+						Сергей Брин:<br/><br/>
+
+						@Ларри Пейдж@, у меня есть хорошая идея. Посмотри, пожалуйста, по описанию к этой задаче.
+					</NotificationBlock>
+					
+					<NotificationBlock
+						taskTitle='Bug #191122'
+						avatarUrl='/images/event_emitter_eltex_loc-49px.png'
+					>
+						Исправление уязвимости<br/><br/>
+
+						Линус Торвальдс завершил разработку по задаче и передал вам на ревью<br/><br/>
+
+						Кажется получилось поправить проблемку. Глянь мой MR.
+					</NotificationBlock>
+					
+					<p>Можно задавать коллегам вопросы прямо из комментария задачи, неотрываясь от её содержимого. Уведомление доставится в считанные минуты с ссылкой на задачу и информацией от кого это уведомление.</p>
+					<p>Пример запроса моих текущих задач с помощью команды
+						<span className={NotificationBlockCss.text_box_text_blue}>/current_issues_eccm</span>
+					</p>
+					
+					<NotificationBlock
+						avatarUrl='/images/event_emitter_eltex_loc-49px.png'
+					>
+						Бьёрн Страуструп:<br/><br/>
+
+						Re-opened:<br/><br/>
+						<span className={NotificationBlockCss.text_box_text_blue}> - Feature #223301: </span>
+						Дополнить stdlib новыми функциями (прио - P4, версия - C++23)<br/><br/>
+						In Progress:<br/><br/>
+						<span className={NotificationBlockCss.text_box_text_blue}> - Question #223411:</span>
+						Выпуск релиза C++23 (прио - P4, версия - C++23) 
+					</NotificationBlock>
 				</ContentBlock>
 			</Content>
 		</div>