From 8965419cbc70096129e582daed546ca522f1ae9d Mon Sep 17 00:00:00 2001
From: Pavel Gnedov <pavel@gnedov.info>
Date: Wed, 15 Mar 2023 13:19:43 +0700
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B0=D0=B7=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D0=B0=20=D0=BD=D0=B0=D1=87=D0=B0=D0=BB=D1=8C=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B9=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B?=
 =?UTF-8?q?=20=D0=BF=D1=80=D0=BE=D0=B5=D0=BA=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.css                          | 23 +----------
 frontend/src/App.tsx                          | 11 +----
 frontend/src/start-page/content-block.tsx     | 17 ++++++++
 frontend/src/start-page/content.module.css    | 10 +++++
 frontend/src/start-page/content.tsx           | 16 ++++++++
 frontend/src/start-page/start-page.module.css | 25 ++++++++++++
 frontend/src/start-page/start-page.tsx        | 40 +++++++++++++++++++
 .../{top-bar.css => top-bar.module.css}       | 10 +++--
 frontend/src/start-page/top-bar.tsx           | 12 +++---
 9 files changed, 123 insertions(+), 41 deletions(-)
 create mode 100644 frontend/src/start-page/content-block.tsx
 create mode 100644 frontend/src/start-page/content.module.css
 create mode 100644 frontend/src/start-page/content.tsx
 create mode 100644 frontend/src/start-page/start-page.module.css
 create mode 100644 frontend/src/start-page/start-page.tsx
 rename frontend/src/start-page/{top-bar.css => top-bar.module.css} (90%)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 9dbdad7..afe32dc 100644
--- a/frontend/src/App.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2072e1d..3e28154 100644
--- a/frontend/src/App.tsx
+++ b/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 />
     </>
   );
 }
diff --git a/frontend/src/start-page/content-block.tsx b/frontend/src/start-page/content-block.tsx
new file mode 100644
index 0000000..1a53e54
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/src/start-page/content.module.css b/frontend/src/start-page/content.module.css
new file mode 100644
index 0000000..a799fe3
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/frontend/src/start-page/content.tsx b/frontend/src/start-page/content.tsx
new file mode 100644
index 0000000..b9c96aa
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/src/start-page/start-page.module.css b/frontend/src/start-page/start-page.module.css
new file mode 100644
index 0000000..021d9bb
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/frontend/src/start-page/start-page.tsx b/frontend/src/start-page/start-page.tsx
new file mode 100644
index 0000000..f1e32ed
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/src/start-page/top-bar.css b/frontend/src/start-page/top-bar.module.css
similarity index 90%
rename from frontend/src/start-page/top-bar.css
rename to frontend/src/start-page/top-bar.module.css
index caa6d5c..a479e34 100644
--- a/frontend/src/start-page/top-bar.css
+++ b/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); */
 }
diff --git a/frontend/src/start-page/top-bar.tsx b/frontend/src/start-page/top-bar.tsx
index 9184ad8..365dcee 100644
--- a/frontend/src/start-page/top-bar.tsx
+++ b/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>