login page frontend
This commit is contained in:
@@ -0,0 +1,112 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
}
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
min-height: auto;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
.left_side {
|
||||
width: 60%;
|
||||
background-image: url("../assets/bg_login.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-right: 1px solid rgba(68, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 40px 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.img_logo {
|
||||
width: 133px;
|
||||
height: 82px;
|
||||
}
|
||||
.header_top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.header_title {
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
}
|
||||
.header_heading {
|
||||
font-size: 28px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.header_bottom {
|
||||
font-size: 20px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
line-height: 30px;
|
||||
padding-top: 20px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.main_item_img {
|
||||
width: 75%;
|
||||
height: 70%;
|
||||
}
|
||||
.main_items {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.main {
|
||||
}
|
||||
.main_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.main_item_title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.main_item_p {
|
||||
padding-top: 10px;
|
||||
font-size: 16px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
}
|
||||
.section_item > svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.section_items {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.section {
|
||||
padding: 7% 40px 0px 0px;
|
||||
}
|
||||
.section_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 25%;
|
||||
line-height: 25px;
|
||||
font-weight: 900;
|
||||
font-size: 16px;
|
||||
}
|
||||
.section_line {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@@ -1,9 +1,111 @@
|
||||
import { Auth } from "../features/auth/components/AuthComponent";
|
||||
import "./LoginPage.css"
|
||||
import logo from "../assets/LOGO.png"
|
||||
import img_1 from "../assets/paper.png"
|
||||
import img_2 from "../assets/PC.png"
|
||||
import img_3 from "../assets/graphics.png"
|
||||
|
||||
export function LoginPage(){
|
||||
return(
|
||||
<>
|
||||
<div className="wrapper">
|
||||
<div className="left_side">
|
||||
<header className="header">
|
||||
<div className="container">
|
||||
<div className="header_top">
|
||||
<img className="img_logo" src={logo} alt="LOGO" />
|
||||
<p className="header_text">
|
||||
<div className="header_title">
|
||||
The DisExcel
|
||||
</div>
|
||||
<div className="header_heading">
|
||||
Project
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div className="header_bottom">
|
||||
<p>
|
||||
Избавляем от ручной работы. <br />
|
||||
Переводим процессы из бумаги в Excel, <br />
|
||||
а из Excel - в 1С и отчеты.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main className="main">
|
||||
<div className="contain">
|
||||
<div className="main_items">
|
||||
{/* 1 */}
|
||||
<div className="main_item">
|
||||
<img className="main_item_img" src={img_1} alt="img" />
|
||||
<div className="main_item_title">Бумага</div>
|
||||
<div className="main_item_p">
|
||||
Ручная работа, ошибки, потери
|
||||
</div>
|
||||
</div>
|
||||
<div className="main_i"></div>
|
||||
{/* 2 */}
|
||||
<div className="main_item">
|
||||
<img className="main_item_img" src={img_2} alt="img" />
|
||||
<div className="main_item_title">Excel</div>
|
||||
<div className="main_item_p">
|
||||
Структура, формулы, автоматизация
|
||||
</div>
|
||||
</div>
|
||||
<div className="main_i"></div>
|
||||
{/* 3 */}
|
||||
<div className="main_item">
|
||||
<img className="main_item_img" src={img_3} alt="img" />
|
||||
<div className="main_item_title">1С / Отчеты</div>
|
||||
<div className="main_item_p">
|
||||
Готовые процессы, аналитика, контроль
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<section className="section">
|
||||
<div className="section_items">
|
||||
{/* 1 */}
|
||||
<div className="section_item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
|
||||
<circle cx="24" cy="24" r="16" stroke="#087A55" stroke-width="3"/>
|
||||
<path d="M24 14v11l7 4" stroke="#087A55" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
Экономим <br /> время
|
||||
</div>
|
||||
<div className="section_line"></div>
|
||||
{/* 2 */}
|
||||
<div className="section_item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
|
||||
<path d="M24 6 38 11v11c0 9-5.8 15.2-14 20-8.2-4.8-14-11-14-20V11z" stroke="#087A55" stroke-width="3" stroke-linejoin="round"/>
|
||||
<path d="m17 24 5 5 10-11" stroke="#087A55" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
Снижаем <br /> ошибки
|
||||
</div>
|
||||
<div className="section_line"></div>
|
||||
{/* 3 */}
|
||||
<div className="section_item">
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke="#087A55" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.5.5 0 0 0 .12-.63l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.03 7.03 0 0 0-1.62-.94l-.36-2.54a.5.5 0 0 0-.5-.43h-3.84a.5.5 0 0 0-.5.43l-.36 2.54c-.59.24-1.13.56-1.62.94l-2.39-.96a.5.5 0 0 0-.6.22L2.66 8.85a.5.5 0 0 0 .12.63l2.03 1.58c-.05.3-.08.63-.08.94s.02.64.07.94l-2.03 1.58a.5.5 0 0 0-.12.63l1.92 3.32a.5.5 0 0 0 .6.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54a.5.5 0 0 0 .5.43h3.84a.5.5 0 0 0 .5-.43l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96a.5.5 0 0 0 .6-.22l1.92-3.32a.5.5 0 0 0-.12-.63l-2.03-1.58Z"/>
|
||||
<circle cx="12" cy="12" r="3.5" stroke="#087A55" stroke-width="1.6"/>
|
||||
</svg>
|
||||
Автоматизируем <br /> процессы
|
||||
</div>
|
||||
<div className="section_line"></div>
|
||||
{/* 4 */}
|
||||
<div className="section_item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
|
||||
<path d="M24 6 38 11v11c0 9-5.8 15.2-14 20-8.2-4.8-14-11-14-20V11z" stroke="#087A55" stroke-width="3" stroke-linejoin="round"/>
|
||||
<path d="m17 24 5 5 10-11" stroke="#087A55" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
Делаем <br /> бизнес эффективнее
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<Auth />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user