Разработка начальной страницы проекта

frontend/src/App.css

@@ -2,26 +2,5 @@
 
 body {
   margin: 0;
-  background-color: #D9D9D9;
-  color: rgba(0, 0, 0, 0.8);
-  font-size: 24px;
-  font-weight: 400;
-  font-family: 'Inter', sans-serif;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 24px;
-  line-height: 40px;
-}
-
-a {
-  color: #fff;
-  text-decoration: none;
-}
-
-a:hover {
-  color: #F5B14E;
-}
-
-a:active {
-  color: #F5B14E;
+  padding: 0;
 }

frontend/src/App.tsx

@@ -1,18 +1,11 @@
 import React from 'react';
 import './App.css';
-import Cover from './start-page/cover';
-import TopBar from './start-page/top-bar';
-
-export const AppData = {
-  contact: 'https://t.me/pavelgnedov',
-  bot: 'https://t.me/eltex_event_emitter_bot'
-};
+import StartPage from './start-page/start-page';
 
 function App() {
   return (
     <>
-      <TopBar contact={AppData.contact} />
-      <Cover telegramBotUrl={AppData.bot} /> 
+      <StartPage />
     </>
   );
 }

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export type Props = {
+	title: string;
+	children?: any;
+};
+
+export const ContentBlock = (props: Props) => {
+	return (
+		<>
+			<h2>{props.title}</h2>
+			{props.children}
+		</>
+	);
+};
+
+export default ContentBlock;

frontend/src/start-page/content.module.css

@@ -0,0 +1,10 @@
+.content {
+	margin-left: 135px;
+	margin-top: 956px;
+	max-width: 1170px;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	padding: 0px;
+	gap: 32px;
+}

frontend/src/start-page/content.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ContentCss from './content.module.css';
+
+export type Props = {
+	children?: any;
+};
+
+export const Content = (props: Props) => {
+	return (
+		<div className={ContentCss.content}>
+			{props.children}
+		</div>
+	);
+};
+
+export default Content;

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

@@ -0,0 +1,25 @@
+.startPage {
+		margin: 0;
+		background-color: #D9D9D9;
+		color: rgba(0, 0, 0, 0.8);
+		font-size: 24px;
+		font-weight: 400;
+		font-family: 'Inter', sans-serif;
+		font-style: normal;
+		font-weight: 400;
+		font-size: 24px;
+		line-height: 40px;
+}
+
+.startPage a {
+	color: #fff;
+	text-decoration: none;
+}
+
+.startPage a:hover {
+	color: #F5B14E;
+}
+
+.startPage a:active {
+	color: #F5B14E;
+}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import Content from './content';
+import ContentBlock from './content-block';
+import Cover from './cover';
+import StartPageCss from './start-page.module.css';
+import TopBar from './top-bar';
+
+export const StartPageData = {
+	contact: 'https://t.me/pavelgnedov',
+	bot: 'https://t.me/eltex_event_emitter_bot'
+};
+
+export const StartPage = () => {
+	return (
+		<div className={StartPageCss.startPage}>
+			<TopBar contact={StartPageData.contact} />
+			<Cover telegramBotUrl={StartPageData.bot} />
+			<Content>
+				<ContentBlock title='Возможности'>
+					<ul>
+						<li>Уведомления в реальном времени о событиях из задач - изменения статусов, упоминания комментариев</li>
+						<li>Генерация и управления отчётами о задачах</li>
+						<li>Под капотом приложение фреймворк</li>
+					</ul>
+				</ContentBlock>
+				<ContentBlock title='Функции telegram бота'>
+					<ul>
+						<li>Последний отчёт для дейли проект ECCM</li>
+						<li>Дополнительные функции для разработчиков
+							eccm:/current_issues_eccm - список текущих задач по статусам -  выбираютсятолько задачи из актуальных версий в статусах, где нужна какая-то реакцияили возможна работа прямо сейчас</li>
+						<li>Скриншоты уведомления от бота:
+							Примеры уведомлений о новых задачах и об изменениях статусов:</li>
+					</ul>
+				</ContentBlock>
+			</Content>
+		</div>
+	);
+};
+
+export default StartPage;

frontend/src/start-page/top-bar.module.css

@@ -4,6 +4,8 @@
 	display: flex;
 	flex-direction: row;
 	position: fixed;
+	top: 0;
+	left: 0;
 	z-index: 100500;
 	height: 80px;
 	background-color: #001826;
@@ -15,7 +17,7 @@
 	box-sizing: content-box;
 }
 
-.container_title {
+.containerTitle {
 	position: relative;
 	margin-left: 135px;
 	margin-right: 135px;
@@ -27,7 +29,7 @@
 	justify-content: space-between;
 }
 
-.container_title {
+.containerTitle {
 	height: 100%;
 	width: 100%;
 	margin-left: 100px;
@@ -38,14 +40,14 @@
 	justify-content: space-between;
 }
 
-.event_emitter_eltex_loc {
+.eventEmitterEltexLoc {
 	vertical-align: middle;
 	height: 32px;
 	cursor: pointer;
 	transition: width 0.5s, height 0.5s;
 }
 
-.event_emitter_eltex_loc:hover {
+.eventEmitterEltexLoc:hover {
 	/* height: 38px; */
 	/* transform: scale(1.5); */
 }

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

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import './top-bar.css';
+import TopBarCss from './top-bar.module.css';
 import LogoImg from './event_emitter_eltex_loc-32px.png';
 
 export type TopBarProps = {
@@ -9,11 +9,11 @@ export type TopBarProps = {
 
 const TopBar = (props: TopBarProps): ReactElement => {
 	return (
-		<div className="top">
-			<div className="container_title">
-				<div className="logo">
-					<a href="/" className="logo"> {/* a.logo */}
-						<img src={LogoImg} alt="event_emitter_eltex_loc" className="event_emitter_eltex_loc" />
+		<div className={TopBarCss.top}>
+			<div className={TopBarCss.containerTitle}>
+				<div className={TopBarCss.logo}>
+					<a href="/" className={TopBarCss.logo}>
+						<img src={LogoImg} alt="event_emitter_eltex_loc" className={TopBarCss.eventEmitterEltexLoc} />
 						<span>redmine-issue-event-emitter</span>
 					</a>
 				</div>