add pages about us && about project

pages/about-project.tsx

@@ -0,0 +1,42 @@
+import { NextPage } from "next";
+import { MyHeader } from "../сomponents/header";
+import styles from '../styles/Home.module.css'
+import 'antd/dist/antd.css';
+
+
+const AboutProject: NextPage = () => {
+
+  
+    return (
+      <div className={styles.aboutProjectContainer}>
+          <MyHeader></MyHeader>
+          <div className={styles.h1}>
+            О проекте
+          </div>
+          <div>
+                <div className={styles.h2}>Ссылки</div>
+                <div>Demo: <a href="">Скоро будет!</a></div>
+                <div>GitHub: <a  href="https://github.com/magnum-opus-tender-hack">https://github.com/magnum-opus-tender-hack</a></div>
+                <div>Frontend: <a  href="https://github.com/magnum-opus-tender-hack/frontend">https://github.com/magnum-opus-tender-hack/frontend</a></div>
+                <div>Backend: <a  href="https://github.com/magnum-opus-tender-hack/backend">https://github.com/magnum-opus-tender-hack/backend</a></div>
+                <div>Презентация: <a  href="">Скоро будет!</a></div>
+          </div>
+          <div>
+                <div className={styles.h2}>Описание</div>
+                <div>
+                    Наша идея решения заключается в том чтобы максимально упростить когнитивную нагрузку
+                    на поиск в целом, сведя весь фокус в одну поисковую строку. Пользователю достаточно
+                    просто начать вводить информацию о продукте в поисковой строке, наша система сама начнет
+                    его дополнять и предлагать варианты. К тому же реализовано автоматическое определение 
+                    сорта высказывания. Например автоматическое определение что пользователь начинает
+                    вводить название продукта или его категорию. Также автоматически определяться могут
+                    категории из необработанной части базы данных - поля из Характеристик в выданном нам
+                    excel файле
+                </div>
+          </div>
+          
+      </div>
+    )
+  }
+  
+  export default AboutProject;

pages/about-us.tsx

@@ -0,0 +1,27 @@
+import { NextPage } from "next";
+import { MyHeader } from "../сomponents/header";
+import styles from '../styles/Home.module.css'
+import 'antd/dist/antd.css';
+
+
+const AboutUs: NextPage = () => {
+
+  
+    return (
+      <div className={styles.aboutContainer}>
+          <MyHeader></MyHeader>
+          <div className={styles.h1}>
+            Наша команда
+          </div>
+          <div className={styles.imgWrapper}>
+                <img className={styles.img} src="/member1.png"></img>
+                <img className={styles.img} src="/member2.png"></img>
+                <img className={styles.img} src="/member3.png"></img>
+                <img className={styles.img} src="/member5.png"></img>
+          </div>
+          
+      </div>
+    )
+  }
+  
+  export default AboutUs;

pages/index.tsx

@@ -10,6 +10,7 @@ import {useAppDispatch, useAppSelector} from '../hooks';
 import {search, createHints} from '../store/reducers/asyncActions';
 import {products, hints, INode} from '../store/reducers/nodesInputReducer'
 import { ProductsView } from '../сomponents/ProductsView'
+import { MyHeader } from '../сomponents/header'
 
 const Home: NextPage = () => {
   const [goods, setGoods] = useState([]);
@@ -34,6 +35,7 @@ const Home: NextPage = () => {
 
   return (
     <div className={styles.container}>
+        <MyHeader></MyHeader>
         <Search onData={(data)=>setGoods(data)}></Search>
         {
           getProducts.length == 0? null:<ProductsView></ProductsView>

styles/Home.module.css

@@ -4,7 +4,41 @@
   align-items: center;
   gap:100px;
   padding:100px;
+  margin-top: 100px;
+}
 
+.aboutContainer{
+  padding:100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap:100px;
+}
+
+.aboutProjectContainer{
+  padding:100px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap:100px;
+  font-size: 16px;
+}
+.h1{
+  font-size: 48px;
+  font-weight: 500;
+}
+.h2{
+  font-size: 24px;
+  font-weight: 500;
+}
+.imgWrapper{
+  display: flex;
+  flex-direction: row;
+  gap:10px;
+  flex-wrap: wrap;
+}
+.img{
+  width: 250px;
 }
 
 @media screen and (max-width: 800px) {

styles/globals.css

@@ -20,7 +20,8 @@ a {
   html {
     color-scheme: dark;
   }
-  body {    
+  body {
+    
     transition: 0.3s;
 
     color: white;

сomponents/header/header.module.css

@@ -0,0 +1,35 @@
+.header{
+    position: fixed;
+    top:0px;
+    left: 0px;
+    width: 100%;
+    height: 60px;
+    background-color: #fafaff;
+    border-radius: 0px 0px 10px 10px;
+    box-shadow: 0px 5px 10px rgba(88, 88, 146, 0.18);
+    padding: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 50px;
+    font-size: 18px;
+}
+.link a{
+    transition: 0.3s;
+    font-weight: 500;
+    text-decoration: none;
+    color: rgb(249, 90, 90) !important
+}
+
+.link a:active{
+    transition: 0.3s;
+    text-decoration: none;
+    color: rgb(255, 47, 47) !important
+}
+
+.link a:hover{
+    transition: 0.3s;
+    font-weight: 400;
+    text-decoration: none;
+    color: rgb(255, 47, 47) !important
+}

сomponents/header/index.tsx

@@ -0,0 +1,13 @@
+import Link from "next/link";
+import React from "react"
+import styles from "./header.module.css"
+
+export const MyHeader:React.FC = () =>{
+    return(
+        <div className={styles.header}>
+            <div className={styles.link}><Link  href="/">Главная</Link></div>
+            <div className={styles.link}><Link  className={styles.link}  href="/about-us">О нас</Link></div>
+            <div className={styles.link}><Link  className={styles.link}  href="/about-project">О проекте</Link></div>
+        </div>
+    );
+}