landing

src/pages/Landing/Landing.jsx

@@ -0,0 +1,114 @@
+import React from "react";
+import SVG from "react-inlinesvg";
+import { Link } from "react-router-dom";
+
+import authIcon from 'assets/icons/authIcon.svg'
+import clue from "assets/icons/landingClue.svg"
+import cat from "assets/images/landingCat.png"
+import arrow from "assets/icons/arrows/arrowLanding.svg"
+import vk from "assets/icons/vkIcon.svg"
+import telegram from "assets/icons/telegramIcon.svg"
+import codeBg from "assets/images/landingBackgroundCode.svg"
+
+import "./landing.scss";
+
+export const Landing = () => {
+  const opportunities = [
+    {
+      name: '<span>Аутстаффинг</span> сотрудников',
+      class: 'outstaffing__employees',
+      img: cat
+    },
+    {
+      name: 'Модуль для видеоконференций',
+    },
+    {
+      name: 'Система контроля версий GIT',
+    },
+    {
+      name: 'Управление задачами',
+    },
+    {
+      name: 'Система для отчётности',
+    },
+    {
+      name: 'Все наши предложения',
+      class: 'outstaffing__offers',
+      img: arrow
+    }
+  ]
+  const socials = [
+    {
+      img: vk,
+      to: ''
+    },
+    {
+      img: telegram,
+      to: ''
+    }
+  ]
+  return (
+    <section className="landing">
+      <div className="landing__container">
+        <div className="landing__head">
+          <h2 className="head__logo">ITGUILD</h2>
+          <Link className="head__signIn" to='/auth'>войти в систему</Link>
+          <Link className="head__signUp" to='/auth'>
+            <SVG src={authIcon} />
+            авторизация
+          </Link>
+        </div>
+        <div className="landing__info">
+          <p className="info__title">
+            <SVG className='code' src={codeBg} />
+            <span>Экосистема</span> для диджитализации бизнеса
+          </p>
+          <div className="landing__background">
+            <h3>ITGuild</h3>
+            <SVG className='clue' src={clue} />
+            <SVG className='code' src={codeBg} />
+          </div>
+          <div className="info__block">
+            <p>
+              Подберем и документально оформим IT-специалистов, после чего передадим исполнителей под ваше руководство.
+              <br/><br/>
+              <span>Вы получаете полное управление над сотрудниками,</span> имея возможность контролировать и заменять IT штат.
+            </p>
+          </div>
+        </div>
+        <div className="landing__opportunities">
+          {opportunities.map((opportunity, index) => {
+            return <div className={opportunity.class ? opportunity.class : 'landing__opportunity'} key={index}>
+              {opportunity.class ?
+                <div>
+                  <p dangerouslySetInnerHTML={{__html:opportunity.name}}/>
+                  {opportunity.img ? <img src={opportunity.img} alt='img' /> : ''}
+                </div> :
+                <p>{opportunity.name}</p>
+              }
+            </div>
+          })
+          }
+        </div>
+        <div className="landing__footer">
+          <div className="footer__links">
+            <div className="footer__socials">
+              {socials.map((social, index) => {
+                return <Link to={social.to} key={index}><SVG src={social.img} /></Link>
+              })}
+            </div>
+            <Link className='footer__invite' to='/auth'>Присоединиться к команде</Link>
+          </div>
+          <div className="footer__info">
+            <p>
+              office@itguild.info
+            </p>
+            <p>
+              © 2024 - Outstaffing. Все права защищены
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};