fixes and started clampig text
This commit is contained in:
@@ -4,7 +4,7 @@ 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">
|
||||
<h1 className="pb-8 font-medium desktop:block mobile:max-desktop:hidden text-[clamp(64px,6vw,96px)] leading-[clamp(57.6px,5.4vw,86.54px)]">
|
||||
Создаем{' '}
|
||||
<span
|
||||
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
|
||||
@@ -31,7 +31,7 @@ export function Header() {
|
||||
для обучения сотрудников
|
||||
</span>
|
||||
</h1>
|
||||
<h2 className="text-[32px] max-w-[768px] desktop:block mobile:max-desktop:hidden desktop:leading-8">
|
||||
<h2 className="text-[clamp(0px,2vw,32px)] max-w-[768px] desktop:block mobile:max-desktop:hidden desktop:leading-[clamp(0px,2vw,32px)]">
|
||||
Помогаем сократить затраты на обучение, повысить безопасность и
|
||||
производительность
|
||||
</h2>
|
||||
|
||||
@@ -23,7 +23,7 @@ export function Navbar() {
|
||||
<NavLink text="Варианты комплектации" route="/" />
|
||||
<NavLink text="Проекты" route="/" />
|
||||
<NavLink text="События" route="/" />
|
||||
<button className="desktop:text-lg tablet:text-base font-semibold text-[#ffffff] bg-gradient-to-r from-[#798FFF] to-[#D375FF] border-x border-[#3D425C] tablet:block mobile:hidden px-10">
|
||||
<button className="desktop:text-[clamp(16px,1.125vw,18px)] tablet:text-[clamp(0px,1.56vw,16px)] font-semibold text-[#ffffff] bg-gradient-to-r from-[#798FFF] to-[#D375FF] border-x border-[#3D425C] tablet:block mobile:hidden px-10">
|
||||
Оставить заявку
|
||||
</button>
|
||||
{!menuOpen && <LangToggler lang={lang} />}
|
||||
@@ -101,10 +101,10 @@ function ChooseLang({ lang }: { lang: 'RU' | 'EN' }) {
|
||||
function LangToggler({ lang }: { lang: Lang }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<div className="min-w-[101px] mobile:max-[1350px]:hidden box-border border-r border-[#3D425C]">
|
||||
<div className="min-w-[101px] mobile:max-[1349px]:hidden box-border border-r border-[#3D425C]">
|
||||
<button
|
||||
onClick={() => setOpen(prev => !prev)}
|
||||
className="mx-6 h-full gap-x-1 items-center flex text-[#ffffff] font-semibold box-border"
|
||||
className="mx-6 h-full gap-x-1 items-center flex text-[#ffffff] font-semibold box-border text-[clamp(0px,1.125vw,18px)]"
|
||||
>
|
||||
{lang}
|
||||
<img src="src/assets/arrow_down.svg" alt="" />
|
||||
|
||||
@@ -23,7 +23,7 @@ export function Effeciency() {
|
||||
title={'готовность к опасным ситуациямние выше на'}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[#ffffff] font-medium desktop:text-[32px] tablet:text-2xl mobile:text-xl tablet:leading-8 mobile:leading-5 max-w-[752px]">
|
||||
<p className="text-[#ffffff] font-medium desktop:text-[clamp(24px,2vw,32px)] desktop:leading-[clamp(24px,2vw,32px)] tablet:text-[clamp(20px,2.34vw,24px)] tablet:leading-[clamp(20px,2.34vw,24px)] mobile:text-xl mobile:leading-5 max-w-[752px]">
|
||||
В тренажере человек принимает решения так же, как в реальном мире,{' '}
|
||||
<span className="opacity-60">
|
||||
активируя те же нейронные цепочки в мозгу. Это позволяет добиться
|
||||
@@ -55,10 +55,14 @@ function Figure({
|
||||
}}
|
||||
>
|
||||
<div className="text-[#ffffff] flex flex-col justify-between py-6">
|
||||
<h6 className="xl:text-sm tablet:text-xs xl:font-medium">{title}</h6>
|
||||
<h1 className="font-medium xl:text-8xl mobile:text-[64px] flex items-center">
|
||||
<h6 className="desktop:font-medium desktop:text-[clamp(12px,0.87vw,14px)] mobile:text-xs">
|
||||
{title}
|
||||
</h6>
|
||||
<h1 className="font-medium flex items-center desktop:text-[clamp(64px,6vw,96px)] desktop:leading-[clamp(57.6px,5.4vw,86.4px)] mobile:text-[64px] mobile:leading-[57.6px]">
|
||||
{percents}
|
||||
<span className="xl:text-[64px] tablet:text-[32px]">%</span>
|
||||
<span className="desktop:text-[clamp(32px,4vw,64px)] desktop:leading-[clamp(32px,3.6vw,57.6px)] mobile:text-[32px] mobile:leading-8">
|
||||
%
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { MiniTitle } from '../../ui/MiniTitle';
|
||||
|
||||
export function Events() {
|
||||
return (
|
||||
<div className="desktop:py-[70px] desktop:max-desktop-figma:px-10 desktop-figma:pl-10 desktop-figma:pr-[171px] tablet:py-14 tablet:px-6 mobile:px-4">
|
||||
<div className="flex desktop:border-t w-full mobile:max-desktop:flex-col gap-4 border-[#3D425C] pt-5">
|
||||
<div className="desktop:py-[70px] desktop:px-10 tablet:py-14 tablet:px-6 mobile:px-4">
|
||||
<div className="flex desktop:border-t mobile:max-desktop:flex-col gap-x-4 border-[#3D425C] pt-5 w-fit">
|
||||
<MiniTitle text="события" />
|
||||
<div className="w-full">
|
||||
<div className="py-5 tablet:border-b mobile:max-tablet:border-t border-[#3D425C] flex mobile:max-tablet:flex-col items-start justify-between gap-2">
|
||||
<div className="">
|
||||
<div className="">
|
||||
<div className="py-5 tablet:border-b mobile:max-tablet:border-t border-[#3D425C] flex mobile:max-tablet:flex-col items-start gap-x-4">
|
||||
<div className="desktop:min-w-[984px]">
|
||||
<h1 className="text-[#ffffff] desktop-figma:text-[32px] desktop-figma:leading-8 tablet:text-[24px] tablet:leading-6 font-medium tablet:mb-8 mobile:text-xl mobile:leading-5">
|
||||
Макет кабины машиниста «Иволга» на выставке ВДНХ
|
||||
</h1>
|
||||
@@ -24,31 +25,33 @@ export function Events() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button className="text-[#ffffff] opacity-60 uppercase flex items-center gap-2 desktop-figma:text-sm mobile:text-xs tablet:max-desktop:min-w-[114px] mobile:max-tablet:self-end">
|
||||
как это было
|
||||
<img src="src/assets/arrow_insert.svg" alt="" />
|
||||
</button>
|
||||
<LinkButton href="/" />
|
||||
</div>
|
||||
<div className="py-5 tablet:border-b mobile:max-tablet:border-t border-[#3D425C] flex mobile:max-tablet:flex-col tablet:items-center justify-between gap-2">
|
||||
<h1 className="text-[#ffffff] desktop-figma:text-[32px] desktop-figma:leading-8 tablet:text-[24px] tablet:leading-6 font-medium mobile:text-xl mobile:leading-5">
|
||||
Победа на BuildUP 2023 в номинации IT
|
||||
</h1>
|
||||
<button className="text-[#ffffff] opacity-60 uppercase flex items-center gap-2 desktop-figma:text-sm mobile:text-xs tablet:max-desktop:min-w-[114px] mobile:max-tablet:self-end">
|
||||
как это было
|
||||
<img src="src/assets/arrow_insert.svg" alt="" />
|
||||
</button>
|
||||
<LinkButton href="/" />
|
||||
</div>
|
||||
<div className="py-5 tablet:border-b mobile:max-tablet:border-t border-[#3D425C] flex mobile:max-tablet:flex-col tablet:items-center justify-between gap-2">
|
||||
<h1 className="text-[#ffffff] desktop-figma:text-[32px] desktop-figma:leading-8 tablet:text-[24px] tablet:leading-6 font-medium mobile:text-xl mobile:leading-5">
|
||||
Транспортное и специальное тренажеростроение — 2023
|
||||
</h1>
|
||||
<button className="text-[#ffffff] opacity-60 uppercase flex items-center gap-2 desktop-figma:text-sm mobile:text-xs tablet:max-desktop:min-w-[114px] mobile:max-tablet:self-end">
|
||||
как это было
|
||||
<img src="src/assets/arrow_insert.svg" alt="" />
|
||||
</button>
|
||||
<LinkButton href="/" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LinkButton({ href }: { href: string }) {
|
||||
return (
|
||||
<Link
|
||||
to={href}
|
||||
className="text-[#ffffff] opacity-60 uppercase flex items-center gap-2 desktop-figma:text-sm mobile:text-xs tablet:max-desktop:min-w-[114px] mobile:max-tablet:self-end"
|
||||
>
|
||||
как это было <img src="src/assets/arrow_insert.svg" alt="" />
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { MiniTitle } from '../../ui/MiniTitle';
|
||||
import { Title } from '../../ui/Title';
|
||||
|
||||
export function Pluses() {
|
||||
return (
|
||||
<div className="desktop:py-[70px] mobile:py-14 desktop:px-10 tablet:px-6 mobile:px-4">
|
||||
<h1 className="desktop:text-[64px] tablet:text-[40px] font-medium desktop:leading-[57px] tablet:leading-10 text-[#ffffff] tablet:block mobile:max-tablet:hidden">
|
||||
<Title className="tablet:block mobile:max-tablet:hidden">
|
||||
<span
|
||||
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
|
||||
style={{
|
||||
@@ -15,8 +16,8 @@ export function Pluses() {
|
||||
Достигайте положительный эффект
|
||||
</span>{' '}
|
||||
за счет снижения издержек
|
||||
</h1>
|
||||
<h1 className="text-[#ffffff] text-[28px] leading-[28px] tablet:hidden">
|
||||
</Title>
|
||||
<Title className="tablet:hidden">
|
||||
<span
|
||||
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
|
||||
style={{
|
||||
@@ -29,38 +30,35 @@ export function Pluses() {
|
||||
</span>{' '}
|
||||
сократить затраты на обучение, повысить безопасность и
|
||||
производительность
|
||||
</h1>
|
||||
</Title>
|
||||
<div className="flex tablet:flex-row mobile:flex-col justify-between gap-x-3 tablet:items-end desktop:pl-64 desktop:mt-14 mobile:mt-6">
|
||||
<div className="tablet:hidden mb-2">
|
||||
<MiniTitle text="снижение" />
|
||||
</div>
|
||||
<ul className="text-[#ffffff] xl:min-w-[752px] desktop:text-lg tablet:min-w-[318px] mobile:text-base mobile:mb-6">
|
||||
<ul className="xl:max-w-[752px] w-full tablet:min-w-[318px] mobile:mb-6">
|
||||
<li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
|
||||
<p>снижение количества несчастных случаев</p>
|
||||
<Plus text="снижение количества несчастных случаев" />
|
||||
<p className="text-[#52587A]">[01]</p>
|
||||
</li>
|
||||
<li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
|
||||
<p>уменьшение количества ошибок при ТО и ППР</p>
|
||||
<Plus text="уменьшение количества ошибок при ТО и ППР" />
|
||||
<p className="text-[#52587A]">[02]</p>
|
||||
</li>
|
||||
<li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
|
||||
<p>меньше случаев внеплановой остановки оборудования</p>
|
||||
<Plus text="меньше случаев внеплановой остановки оборудования" />
|
||||
<p className="text-[#52587A]">[03]</p>
|
||||
</li>
|
||||
<li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
|
||||
<p>
|
||||
снижение расходов на закупку реальной техники и оборудования для
|
||||
обучения
|
||||
</p>
|
||||
<Plus text="снижение расходов на закупку реальной техники и оборудования для обучения" />
|
||||
<p className="text-[#52587A]">[04]</p>
|
||||
</li>
|
||||
<li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
|
||||
<p>сокращение сроков обучения</p>
|
||||
<Plus text="сокращение сроков обучения" />
|
||||
<p className="text-[#52587A]">[05]</p>
|
||||
</li>
|
||||
</ul>
|
||||
<img
|
||||
className="desktop:w-[352px] desktop:h-[280px] tablet:w-[262px] tablet:h-[168px]"
|
||||
// className="desktop:w-[352px] desktop:h-[280px] tablet:w-[262px] tablet:h-[168px]"
|
||||
src="src/assets/effect.png"
|
||||
alt=""
|
||||
/>
|
||||
@@ -68,3 +66,11 @@ export function Pluses() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Plus({ text }: { text: string }) {
|
||||
return (
|
||||
<p className="text-[#ffffff] desktop:text-[clamp(16px,1.125vw,18px)] tablet:text-[clamp(14px,1.56vw,16px)] mobile:text-sm">
|
||||
{text}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { useState } from 'react';
|
||||
import { MiniTitle } from '../../ui/MiniTitle';
|
||||
import { Title } from '../../ui/Title';
|
||||
|
||||
export function Products() {
|
||||
const [curTab, setCurTab] = useState(0);
|
||||
|
||||
return (
|
||||
<div className="desktop:py-[70px] tablet:max-desktop:pt-14 tablet:max-desktop:pb-8 mobile:max-tablet:py-14 desktop:px-10 tablet:max-desktop:px-6 mobile:max-tablet:px-4 text-[#ffffff]">
|
||||
<h1 className="text-[64px] font-medium leading-[58px] mb-14 -tracking-[.02em] desktop:block mobile:hidden">
|
||||
<div className="desktop:py-[70px] tablet:max-desktop:pt-14 tablet:max-desktop:pb-8 mobile:max-tablet:py-14 desktop:px-10 tablet:max-desktop:px-6 mobile:max-tablet:px-4">
|
||||
<Title className="mb-14 -tracking-[.02em] desktop:block mobile:hidden">
|
||||
Процесс обучения сотрудников станет безопасней и эффективней с
|
||||
<span
|
||||
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
|
||||
@@ -19,23 +20,21 @@ export function Products() {
|
||||
{' '}
|
||||
продуктами GRAFF.training
|
||||
</span>
|
||||
</h1>
|
||||
<div className="desktop:hidden">
|
||||
<MiniTitle text="Продукты" />
|
||||
</div>
|
||||
</Title>
|
||||
<MiniTitle className="desktop:hidden" text="Продукты" />
|
||||
<div className="flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 rounded-xl p-1 mb-2 w-fit max-w-full overflow-auto [-webkit-scroll-bar:_background-color:_red] tablet:max-desktop:mt-[13px] mobile:mt-6 mobile:max-[912px]:[-webkit-mask-image:_linear-gradient(to_left,rgba(32,35,50,0)_0%,rgba(32,35,50,1)_20%)]">
|
||||
<TabButton
|
||||
className={curTab === 0 ? ' bg-[#798FFF]' : ''}
|
||||
className={curTab === 0 ? 'bg-[#798FFF]' : ''}
|
||||
onClick={() => setCurTab(0)}
|
||||
text="Промышленные тренажеры"
|
||||
/>
|
||||
<TabButton
|
||||
className={curTab === 1 ? ' bg-[#798FFF]' : ''}
|
||||
className={curTab === 1 ? 'bg-[#798FFF]' : ''}
|
||||
onClick={() => setCurTab(1)}
|
||||
text="Симуляторы управления техникой"
|
||||
/>
|
||||
<TabButton
|
||||
className={curTab === 2 ? ' bg-[#798FFF]' : ''}
|
||||
className={curTab === 2 ? 'bg-[#798FFF]' : ''}
|
||||
onClick={() => setCurTab(2)}
|
||||
text="Тренажеры для учебных заведений"
|
||||
/>
|
||||
@@ -54,7 +53,7 @@ function TabButton({
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={
|
||||
'active:bg-[#798FFF] rounded-lg px-5 py-[13.5px] desktop:text-lg font-semibold desktop:leading-[18px] mobile:text-base tablet:leading-4 text-nowrap text-clip bg-text-gradient' +
|
||||
'active:bg-[#798FFF] text-[#ffffff] font-semibold rounded-lg px-5 py-[13.5px] desktop:text-[clamp(16px,1.125vw,18px)] desktop:leading-[clamp(16px,1.125vw,18px)] mobile:text-base tablet:leading-4 text-nowrap text-clip bg-text-gradient ' +
|
||||
className
|
||||
}
|
||||
>
|
||||
@@ -79,8 +78,8 @@ function TeachingItem({
|
||||
alt=""
|
||||
className="mobile:max-tablet:hidden tablet:max-desktop:mb-[14px]"
|
||||
/>
|
||||
<div className="desktop:border-l border-[#3D425C] desktop:pl-4 font-medium">
|
||||
<p className="text-[#ffffff] flex items-center gap-x-2 desktop:text-lg tablet:text-base mobile:text-sm mb-2 desktop:leading-[21px] tablet:leading-[19px] mobile:leading-[17px]">
|
||||
<div className="desktop:border-l border-[#3D425C] desktop:pl-4">
|
||||
<p className="text-[#ffffff] flex items-center gap-x-2 font-medium desktop:text-[clamp(16px,1.125vw,18px)] desktop:leading-[clamp(19.2px,1.35vw,21.6px)] tablet:text-[clamp(14px,1.56vw,16px)] tablet:leading-[clamp(16.8px,1.87vw,19.2px)] mobile:text-sm mb-2 mobile:leading-[16.8px]">
|
||||
<img
|
||||
src={`src/assets/${iconType}_icon.svg`}
|
||||
alt=""
|
||||
@@ -88,7 +87,9 @@ function TeachingItem({
|
||||
/>
|
||||
{title}
|
||||
</p>
|
||||
<p className="desktop:text-sm mobile:text-xs">{text}</p>
|
||||
<p className="text-[#ffffff] desktop:text-[clamp(12px,0.87vw,14px)] desktop:leading-[clamp(16.8px,1.24vw,19.6px)] mobile:text-xs mobile:leading-[16.8px]">
|
||||
{text}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -103,7 +104,7 @@ function TeachingItems() {
|
||||
<h1 className="text-[#ffffff] desktop:text-[32px] tablet:text-2xl mobile:text-xl font-medium desktop:leading-[29px] tablet:leading-6 mobile:leading-6 tablet:mb-8">
|
||||
Промышленные тренажеры виртуальной реальности
|
||||
</h1>
|
||||
<p className="desktop:hidden tablet:max-desktop:mt-11 mobile:max-tablet:mt-2 text-xs">
|
||||
<p className="desktop:hidden tablet:max-desktop:mt-11 mobile:max-tablet:mt-2 text-xs text-[#ffffff]">
|
||||
Может быть еще какой-нибудь небольшой текст, а то мне не хватает
|
||||
для балланса. Ну если не будет, то как-нибудь переживем
|
||||
</p>
|
||||
|
||||
@@ -52,7 +52,7 @@ function Project({
|
||||
tags: string[];
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-[#3D425C] bg-opacity-50 rounded-2xl box-border desktop:min-w-[624px] tablet:min-w-[520px] mobile:min-w-[328px] duration-1000 select-none">
|
||||
<div className="bg-[#3D425C] bg-opacity-50 rounded-2xl box-border desktop:min-w-[624px] tablet:min-w-[520px] mobile:min-w-[328px] duration-1000 select-none desktop:translate-x-[264px]">
|
||||
<div
|
||||
className="bg-cover h-[340px] rounded-2xl"
|
||||
style={{ backgroundImage: `url(${src})` }}
|
||||
@@ -140,7 +140,7 @@ function Slider({
|
||||
<Project key={index} {...project} />
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-4 desktop-figma:min-w-[1135px] mobile:max-desktop-figma:w-full self-center">
|
||||
<div className="flex items-center gap-4 w-[1264px] self-start ml-64">
|
||||
<button
|
||||
onClick={() => {
|
||||
dispatch('prev');
|
||||
@@ -152,7 +152,7 @@ function Slider({
|
||||
</button>
|
||||
<div className="h-1 bg-[#3D425C] w-full">
|
||||
<div
|
||||
className="bg-[#ffffff] h-1 duration-1000"
|
||||
className="bg-[#ffffff] h-1 duration-1000"
|
||||
style={{ width: `${((slide + 1) / 3) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { Title } from '../../ui/Title';
|
||||
|
||||
export function Teaching() {
|
||||
return (
|
||||
<div className="desktop:py-[70px] desktop:px-10 tablet:max-desktop:px-6 mobile:max-tablet:px-4 mobile:max-desktop:py-14 desktop-figma:flex gap-x-4">
|
||||
<h1 className="font-medium text-[64px] leading-[57.6px] text-[#ffffff] desktop:block mobile:max-desktop:hidden mb-8 desktop-figma:sticky top-0 h-fit">
|
||||
<div className="desktop:py-[70px] desktop:px-10 tablet:max-desktop:px-6 mobile:max-tablet:px-4 mobile:max-desktop:py-14 desktop:flex gap-x-4">
|
||||
<Title className="mobile:max-desktop:hidden mb-8 desktop:sticky top-0 h-fit">
|
||||
<span
|
||||
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
|
||||
style={{
|
||||
@@ -13,8 +15,8 @@ export function Teaching() {
|
||||
Тренинг модуль{' '}
|
||||
</span>
|
||||
помогает осуществлять координацию между всеми участниками процесса
|
||||
</h1>
|
||||
<h1 className="desktop:hidden font-medium text-[40px] leading-10 text-[#ffffff] mobile:mb-6">
|
||||
</Title>
|
||||
<Title className="desktop:hidden mobile:mb-6">
|
||||
<span
|
||||
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
|
||||
style={{
|
||||
@@ -26,7 +28,7 @@ export function Teaching() {
|
||||
Дистанционное обучение
|
||||
</span>{' '}
|
||||
на базе платформы GRAFF TRANING
|
||||
</h1>
|
||||
</Title>
|
||||
<TeachingFeaturesForDesktop />
|
||||
<TeachingFeaturesForOtherScreens />
|
||||
</div>
|
||||
@@ -35,13 +37,13 @@ export function Teaching() {
|
||||
|
||||
function TeachingFeaturesForDesktop() {
|
||||
return (
|
||||
<div className="mobile:max-desktop-figma:hidden desktop:flex-col gap-y-4 flex-wrap desktop:flex">
|
||||
<div className="mobile:max-desktop:hidden desktop:flex-col gap-y-4 flex-wrap desktop:flex">
|
||||
<div className="max-w-[880px] desktop:p-10 tablet:p-6 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex desktop:min-w-[880px] desktop:min-h-[400px] bg-auto bg-[url(src/assets/schedule_big.svg)] bg-no-repeat bg-right-bottom">
|
||||
<div className="text-[#ffffff]">
|
||||
<h1 className="font-medium text-[32px] leading-8 mb-2">
|
||||
<h1 className="font-medium text-[clamp(24px,2vw,32px)] leading-[clamp(24px,2vw,32px)] mb-2">
|
||||
Управление процессом
|
||||
</h1>
|
||||
<p className="text-lg max-w-[361px]">
|
||||
<p className="text-[clamp(12px,1.125vw,18px)] leading-[16.8px,1.52vw,24.3px] max-w-[361px]">
|
||||
Назначение сценария обучения
|
||||
<br />
|
||||
Выбор режима: обучение, тренировка, тестирование
|
||||
@@ -56,10 +58,10 @@ function TeachingFeaturesForDesktop() {
|
||||
|
||||
<div className="max-w-[880px] p-10 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-w-[880px] min-h-[400px]">
|
||||
<div className="text-[#ffffff]">
|
||||
<h1 className="font-medium text-[32px] leading-8 mb-2">
|
||||
<h1 className="font-medium text-[clamp(24px,2vw,32px)] leading-[clamp(24px,2vw,32px)] mb-2">
|
||||
Управление пользователями
|
||||
</h1>
|
||||
<p className="text-lg max-w-[200px]">
|
||||
<p className="text-[clamp(12px,1.125vw,18px)] leading-[16.8px,1.52vw,24.3px] max-w-[200px]">
|
||||
Добавление, удаление
|
||||
<br />и назначение ролей
|
||||
</p>
|
||||
@@ -69,10 +71,10 @@ function TeachingFeaturesForDesktop() {
|
||||
|
||||
<div className="max-w-[880px] p-10 pb-[18px] bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-w-[880px] min-h-[400px] bg-[url(src/assets/pinned_windows.svg)] bg-no-repeat bg-right-bottom">
|
||||
<div className="text-[#ffffff]">
|
||||
<h1 className="font-medium text-[32px] leading-8 mb-2">
|
||||
<h1 className="font-medium text-[clamp(24px,2vw,32px)] leading-[clamp(24px,2vw,32px)] mb-2">
|
||||
Видеозапись обучения
|
||||
</h1>
|
||||
<p className="text-lg max-w-[361px]">
|
||||
<p className="text-[clamp(12px,1.125vw,18px)] leading-[16.8px,1.52vw,24.3px] max-w-[361px]">
|
||||
Фиксация и хранение сессий обучения, тренировки и тестирования.
|
||||
Ретроспектива по пройденной сессии вместе с инструктором
|
||||
</p>
|
||||
@@ -86,10 +88,10 @@ function TeachingFeaturesForDesktop() {
|
||||
|
||||
<div className="max-w-[880px] p-10 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-w-[880px] min-h-[400px] flex justify-between">
|
||||
<div className="text-[#ffffff]">
|
||||
<h1 className="font-medium text-[32px] leading-8 mb-2">
|
||||
<h1 className="font-medium text-[clamp(24px,2vw,32px)] leading-[clamp(24px,2vw,32px)] mb-2">
|
||||
Статистика обучения
|
||||
</h1>
|
||||
<p className="text-lg max-w-[280px]">
|
||||
<p className="text-[clamp(12px,1.125vw,18px)] leading-[16.8px,1.52vw,24.3px] max-w-[280px]">
|
||||
Фиксация правильных и неправильных действий.
|
||||
<br />
|
||||
Отчет об ошибках
|
||||
@@ -116,7 +118,7 @@ function TeachingFeaturesForOtherScreens() {
|
||||
return (
|
||||
<div className="mobile:max-tablet:flex mobile:max-tablet:flex-col mobile:max-tablet:gap-y-2 tablet-figma:max-desktop:grid grid-rows-[272px_113px_249px] gap-3 grid-cols-2 desktop:hidden tablet:max-tablet-figma:flex tablet:max-tablet-figma:flex-col">
|
||||
<div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 overflow-hidden row-start-1 col-start-1 mobile:max-tablet:flex mobile:max-tablet:flex-col">
|
||||
<h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-2xl mobile:max-tablet:text-xl tablet:max-desktop:leading-6 mobile:max-tablet:leading-5 mb-1">
|
||||
<h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-[clamp(20px,2.34vw,24px)] tablet:max-desktop:leading-[clamp([clamp(20px,2.34vw,24px)])] mobile:max-tablet:text-xl mobile:max-tablet:leading-5 mb-1">
|
||||
Управление
|
||||
<br /> пользователями
|
||||
</h1>
|
||||
@@ -131,7 +133,7 @@ function TeachingFeaturesForOtherScreens() {
|
||||
</div>
|
||||
|
||||
<div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 bg-[url(src/assets/schedule_big.svg)] tablet-figma:max-desktop:bg-contain mobile:max-tablet:bg-contain mobile:max-tablet:bg-[140px_130px] tablet:max-tablet-figma:bg-[length:50%] bg-no-repeat tablet-figma:max-desktop:bg-[73px_102px] tablet:max-tablet-figma:bg-right-bottom row-start-1 row-span-2 col-start-2">
|
||||
<h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-2xl mobile:max-tablet:text-xl tablet:max-desktop:leading-6 mobile:max-tablet:leading-5 mb-1">
|
||||
<h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-[clamp(20px,2.34vw,24px)] tablet:max-desktop:leading-[clamp([clamp(20px,2.34vw,24px)])] mobile:max-tablet:text-xl mobile:max-tablet:leading-5 mb-1">
|
||||
Управление процессом
|
||||
</h1>
|
||||
<p className="text-[#ffffff] text-xs leading-[17px]">
|
||||
@@ -147,7 +149,7 @@ function TeachingFeaturesForOtherScreens() {
|
||||
</div>
|
||||
|
||||
<div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 bg-[url(src/assets/pinned_windows_mini.svg)] tablet:max-tablet-figma:bg-[100%_100%] tablet-figma:max-desktop:bg-contain bg-no-repeat tablet-figma:max-desktop:bg-[67px_119px] mobile:max-tablet:bg-[100%_119px] mobile:max-tablet:flex mobile:max-tablet:flex-col row-start-2 row-span-2 col-start-1">
|
||||
<h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-2xl mobile:max-tablet:text-xl tablet:max-desktop:leading-6 mobile:max-tablet:leading-5 mb-1">
|
||||
<h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-[clamp(20px,2.34vw,24px)] tablet:max-desktop:leading-[clamp([clamp(20px,2.34vw,24px)])] mobile:max-tablet:text-xl mobile:max-tablet:leading-5 mb-1">
|
||||
Видеозапись обучения
|
||||
</h1>
|
||||
<p className="text-[#ffffff] text-xs leading-[17px]">
|
||||
@@ -162,7 +164,7 @@ function TeachingFeaturesForOtherScreens() {
|
||||
</div>
|
||||
|
||||
<div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 tablet:max-tablet-figma:pb-6 mobile:max-tablet:pb-5 overflow-hidden row-start-3 col-start-2">
|
||||
<h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-2xl mobile:max-tablet:text-xl tablet:max-desktop:leading-6 mobile:max-tablet:leading-5 mb-1">
|
||||
<h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-[clamp(20px,2.34vw,24px)] tablet:max-desktop:leading-[clamp([clamp(20px,2.34vw,24px)])] mobile:max-tablet:text-xl mobile:max-tablet:leading-5 mb-1">
|
||||
Статистика обучения
|
||||
</h1>
|
||||
<p className="text-[#ffffff] text-xs leading-[17px] mobile:max-tablet-figma:mb-5">
|
||||
|
||||
@@ -15,7 +15,7 @@ export function Trainings() {
|
||||
</span>
|
||||
, основываясь на специфике вашего тренировочного процесса
|
||||
</h1>
|
||||
<div className="desktop:pl-[257px]">
|
||||
<div className="desktop:pl-[257px] desktop:max-w-[1133px]">
|
||||
<TrainingsFeature
|
||||
order="[01]"
|
||||
src="src/assets/vr_1.png"
|
||||
|
||||
@@ -1,8 +1,15 @@
|
||||
export function MiniTitle({ text }: { text: string }) {
|
||||
export function MiniTitle({
|
||||
text,
|
||||
className = '',
|
||||
}: {
|
||||
text: string;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<h2
|
||||
className={
|
||||
'flex gap-1 items-center self-start text-[#ffffff] uppercase opacity-80 font-medium desktop:text-sm mobile:text-xs desktop:w-60'
|
||||
'flex gap-1 items-center self-start text-[#ffffff] uppercase opacity-80 font-medium desktop:text-[clamp(12px,0.87vw,14px)] mobile:max-desktop:text-xs desktop:max-w-60 w-full ' +
|
||||
className
|
||||
}
|
||||
>
|
||||
<img src="src/assets/cube.svg" alt="" />
|
||||
|
||||
+1
-1
@@ -4,7 +4,7 @@ export function NavLink({ text, route }: { text: string; route: string }) {
|
||||
return (
|
||||
<Link
|
||||
className={
|
||||
'text-[#ffffff] desktop:text-lg tablet:text-base desktop:leading-[18px] tablet:leading-4 font-semibold border-l border-[#3D425C] mobile:hidden py-[30px] px-10 min-[1350px]:block hover:bg-[#3D425C] active:bg-[#14161F]'
|
||||
'text-[#ffffff] desktop:text-[clamp(0px,1.125vw,18px)] desktop:leading-[clamp(0px,1.125vw,18px)] font-semibold border-l border-[#3D425C] mobile:hidden py-[30px] px-10 min-[1350px]:block hover:bg-[#3D425C] active:bg-[#14161F]'
|
||||
}
|
||||
to={route}
|
||||
>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import { PropsWithChildren } from 'react';
|
||||
|
||||
export function Title({
|
||||
children,
|
||||
className = '',
|
||||
}: PropsWithChildren<{ className?: string }>) {
|
||||
return (
|
||||
<h1
|
||||
className={
|
||||
'font-medium text-[#ffffff] desktop:text-[clamp(40px,4vw,64px)] desktop:leading-[clamp(40px,3.6vw,57.6px)] tablet:text-[clamp(28px,3.9vw,40px)] tablet:leading-[clamp(28px,3.9vw,40px)] mobile:text-[clamp(0px,4.37vw,28px)] mobile:leading-[clamp(0px,4.37vw,28px)] ' +
|
||||
className
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user