import React from "react";
import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
import SVG from "react-inlinesvg";

import Ellipse from "assets/images/EllipseIntro.svg"
import clue from "assets/images/clue.png"
import cat from "assets/images/cat.png"

import "./stack.scss";

export const Stack = () => {

  return (
    <section className="stack">
      <AuthHeader />
      <section className="stack__intro">
        <div className="stack__container intro__container">
          <div className="intro__info">
            <span className="intro__suptitle">Все еще пытаетесь<br/> пасти котов?*</span>
            <h1 className="intro__title">Аутстаф<br/>финг</h1>
            <span className="intro__subtitle">IT-специалистов</span>
            <p className="intro__about">Подберем и документально оформим IT-специалистов, после чего
              передадим исполнителей под ваше руководство. <span>Вы получаете полное
              управление над сотрудниками,</span> имея возможность контролировать и
              заменять IT штат.</p>
            <div className="intro__links">
              <button className="stack__button">оставить заявку</button>
              <span className="intro__link">Окунитесь в<br/> экосистему ITGUIL</span>
            </div>
          </div>
          <SVG className="intro__ellipse" src={Ellipse} />
          <div className="intro__aside">
            <h3 className="aside__logo">ITGu ild</h3>
            <div className="aside__clue">
              <img src={clue} alt='clue' />
              <p>
                <span>Каждый день</span> база специалистов пополняется на <span>+15 резюме</span>
              </p>
            </div>
            <img className="aside__cat" src={cat} alt='cat' />
          </div>
        </div>
      </section>
      <section className="stack__opportunity">
        <div className="stack__container">

        </div>
      </section>
    </section>
  );
};