add pages about us && about project

This commit is contained in:
Firesieht 2022-10-23 03:11:10 +03:00
parent 1e872f7812
commit 496592eda6
11 changed files with 155 additions and 1 deletions

42
pages/about-project.tsx Normal file
View File

@ -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;

27
pages/about-us.tsx Normal file
View File

@ -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;

View File

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

BIN
public/member1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

BIN
public/member2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

BIN
public/member3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

BIN
public/member5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

View File

@ -4,7 +4,41 @@
align-items: center; align-items: center;
gap:100px; gap:100px;
padding: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) { @media screen and (max-width: 800px) {

View File

@ -21,6 +21,7 @@ a {
color-scheme: dark; color-scheme: dark;
} }
body { body {
transition: 0.3s; transition: 0.3s;
color: white; color: white;

View File

@ -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
}

View File

@ -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>
);
}