import { Marquee } from '../Main/Marquee';

export function Header() {
  return (
    <header className="text-[#ffffff]">
      <div className="desktop:px-10 tablet:px-6 mobile:px-4 desktop:py-28 tablet:py-12 mobile:py-14">
        <h1 className="text-8xl pb-8 font-medium desktop:block mobile:max-desktop:hidden">
          Создаем{' '}
          <span
            className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
            style={{
              backgroundClip: 'text',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
            }}
          >
            интерактивные тренажеры
          </span>{' '}
          для промышленности и образования
        </h1>
        <h1 className="tablet:text-[64px] mobile:text-[40px] font-medium tablet:leading-[57px] mobile:leading-9 desktop:hidden mobile:max-desktop:block">
          Интерактивные тренажеры{' '}
          <span
            className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
            style={{
              backgroundClip: 'text',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
            }}
          >
            для обучения сотрудников
          </span>
        </h1>
        <h2 className="text-[32px] max-w-[768px] desktop:block mobile:max-desktop:hidden desktop:leading-8">
          Помогаем сократить затраты на обучение, повысить безопасность и
          производительность
        </h2>
      </div>
      <Marquee />
    </header>
  );
}
