distance teaching grids bruh

2024-06-26 19:32:31 +05:00
parent e6cf8be75a
commit 74fafb2d6c
13 changed files with 751 additions and 167 deletions
@@ -9,7 +9,6 @@ export default function Layout() {
      <Navbar />
      <Header />
      <main>
-        1
        <Outlet />
      </main>
      <Footer />
@@ -1,3 +1,184 @@
 export function Distance() {
-  return <div></div>;
+  return (
+    <div className="desktop:py-[70px] desktop:px-10 tablet:max-desktop:px-6 tablet:max-desktop:py-14 desktop:flex">
+      <h1 className="font-medium text-[64px] leading-[57.6px] text-[#ffffff] 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="desktop:hidden font-medium text-[40px] leading-10 text-[#ffffff] mobile:mb-6">
+        <span
+          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
+          style={{
+            backgroundClip: 'text',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+          }}
+        >
+          Дистанционное обучение
+        </span>{' '}
+        на базе платформы GRAFF TRANING
+      </h1>
+      {/* <DistanceFeatures /> */}
+      <GridDistanceFeatures />
+    </div>
+  );
+}
+
+function DistanceFeatures() {
+  return (
+    <div className="desktop:flex desktop:flex-col gap-y-4 flex-wrap">
+      <div className="desktop:p-10 tablet:p-6 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex desktop:min-w-[880px] desktop:min-h-[400px] w-fit bg-[url(src/assets/chat.svg)] bg-no-repeat bg-[475px_69px]">
+        <div className="text-[#ffffff]">
+          <h1 className="font-medium text-[32px] leading-8 mb-2">
+            Управление процессом
+          </h1>
+          <p className="text-lg max-w-[361px]">
+            Назначение сценария обучения
+            <br />
+            Выбор режима: обучение, тренировка, тестирование
+          </p>
+        </div>
+        <img
+          src="src/assets/master_card.svg"
+          className="rounded-lg w-fit mt-[197px] -ml-[75px]"
+          alt=""
+        />
+      </div>
+
+      <div className="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>
+          <p className="text-lg max-w-[200px]">
+            Добавление, удаление
+            <br />и назначение ролей
+          </p>
+        </div>
+        <img src="src/assets/modal.svg" className="rounded-lg" alt="" />
+      </div>
+
+      <div className="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>
+          <p className="text-lg max-w-[361px]">
+            Фиксация и хранение сессий обучения, тренировки и тестирования.
+            Ретроспектива по пройденной сессии вместе с инструктором
+          </p>
+        </div>
+        <img
+          src="src/assets/manage_video.svg"
+          className="rounded-lg mt-[216px]"
+          alt=""
+        />
+      </div>
+
+      <div className="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>
+          <p className="text-lg max-w-[280px]">
+            Фиксация правильных и неправильных действий.
+            <br />
+            Отчет об ошибках
+          </p>
+        </div>
+        <div className="flex">
+          <img
+            src="src/assets/schedule.svg"
+            className="rounded-lg self-end relative"
+            alt=""
+          />
+          <img
+            src="src/assets/stats.svg"
+            className="rounded-lg mb-[27px] relative z-10 right-9"
+            alt=""
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function GridDistanceFeatures() {
+  return (
+    <div className="grid grid-cols-2 grid-rows-[272px_107px_249px]">
+      <div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl pt-6 px-6 overflow-hidden w-[353px] max-h-[272px] row-start-1 col-start-1">
+        <h1 className="text-[#ffffff] font-medium text-2xl leading-6 mb-1">
+          Управление
+          <br /> пользователями
+        </h1>
+        <p className="text-[#ffffff] text-xs -mb-[18px] leading-[17px]">
+          Добавление, удаление и назначение ролей
+        </p>
+        <img src="src/assets/modal.svg" className="relative top-7" alt="" />
+      </div>
+
+      <div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl max-h-[389px] pt-6 px-6 bg-[url(src/assets/chat.svg)] bg-contain bg-no-repeat bg-[73px_102px] w-[353px] row-start-1 row-end-2 col-start-2">
+        <h1 className="text-[#ffffff] font-medium text-2xl leading-6 mb-1">
+          Управление процессом
+        </h1>
+        <p className="text-[#ffffff] text-xs leading-[17px]">
+          Назначение сценария обучения
+          <br />
+          Выбор режима: обучение, тренировка, тестирование
+        </p>
+        <img
+          src="src/assets/master_card.svg"
+          className="rounded-lg mb-11 h-[92px] mt-[166px]"
+          alt=""
+        />
+      </div>
+
+      <div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl max-h-[389px] pt-6 px-6 bg-[url(src/assets/pinned_windows.svg)] bg-contain bg-no-repeat bg-[73px_119px] w-[353px] row-start-2 row-end-3 col-start-1">
+        <h1 className="text-[#ffffff] font-medium text-2xl leading-6 mb-1">
+          Видеозапись обучения
+        </h1>
+        <p className="text-[#ffffff] text-xs leading-[17px]">
+          Фиксация и хранение сессий обучения, тренировки и тестирования.
+          Ретроспектива по пройденной сессии вместе с инструктором
+        </p>
+        <img
+          src="src/assets/manage_video.svg"
+          className="rounded-lg h-[94px] mt-[147px] mb-6"
+          alt=""
+        />
+      </div>
+
+      <div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl max-h-[249px] pt-6 px-6 w-[353px] overflow-hidden row-start-3 col-start-2">
+        <h1 className="text-[#ffffff] font-medium text-2xl leading-6 mb-1">
+          Статистика обучения
+        </h1>
+        <p className="text-[#ffffff] text-xs leading-[17px]">
+          Фиксация правильных и неправильных действий.
+          <br />
+          Отчет об ошибках
+        </p>
+        <div className="flex items-end overflow-hidden mt-0.5">
+          <img
+            src="src/assets/schedule.svg"
+            className="rounded-lg w-[166px] relative z-10"
+            alt=""
+          />
+          <img
+            src="src/assets/stats.svg"
+            className="rounded-lg relative right-[27px] w-[166px]"
+            alt=""
+          />
+        </div>
+      </div>
+    </div>
+  );
 }
@@ -0,0 +1,111 @@
+export function Process() {
+  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">
+        Процесс обучения сотрудников станет безопасней и эффективней с
+        <span
+          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
+          style={{
+            backgroundClip: 'text',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+          }}
+        >
+          {' '}
+          продуктами GRAFF.training
+        </span>
+      </h1>
+      <p className="uppercase flex gap-x-1 mb-[13px] desktop:hidden">
+        <img src="src/assets/cube.svg" alt="" />
+        Продукты
+      </p>
+      <div className="flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 rounded-xl p-1 mb-2 w-fit max-w-full overflow-clip">
+        <TabButton text="Промышленные тренажеры" />
+        <TabButton text="Симуляторы управления техникой" />
+        <TabButton text="Тренажеры для учебных заведений" />
+      </div>
+      <TeachingItems />
+    </div>
+  );
+}
+
+function TabButton({ text }: { text: string }) {
+  return (
+    <button 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">
+      {text}
+    </button>
+  );
+}
+
+function TeachingItem({
+  title,
+  text,
+  iconType,
+}: {
+  title: string;
+  text: string;
+  iconType: 'danger' | 'service' | 'safety';
+}) {
+  return (
+    <div className="desktop:border-l-0 tablet:border-l mobile:max-tablet:first:border-t-0 mobile:max-tablet:border-t border-[#3D425C] desktop:flex desktop:items-start desktop:gap-x-7 tablet:max-desktop:pl-3 mobile:max-tablet:pt-4">
+      <img
+        src={`src/assets/${iconType}_icon.svg`}
+        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]">
+          <img
+            src={`src/assets/${iconType}_icon.svg`}
+            alt=""
+            className="tablet:hidden"
+          />
+          {title}
+        </p>
+        <p className="desktop:text-sm mobile:text-xs">{text}</p>
+      </div>
+    </div>
+  );
+}
+
+function TeachingItems() {
+  return (
+    <div className="bg-[#3D425C4D] rounded-xl desktop:bg-[url('src/assets/mask_group.png')] desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 bg-no-repeat bg-right-bottom">
+      <div className="desktop:max-w-[455px]">
+        <div className="tablet:max-desktop:border-b border-[#3D425C] pb-5 tablet:max-desktop:bg-[url('src/assets/mask_group.png')] bg-no-repeat bg-contain bg-right-bottom">
+          <div className="tablet:max-desktop:max-w-[326px] mobile:max-tablet:border-b">
+            <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>
+            <img
+              src="src/assets/mask_group.png"
+              className="tablet:hidden mt-4"
+              alt=""
+            />
+          </div>
+        </div>
+        <div className="flex desktop:flex-col tablet:max-desktop:mt-8 desktop:gap-y-6 mobile:max-tablet:flex-col mobile:max-tablet:gap-y-4 tablet:max-desktop:gap-x-3">
+          <TeachingItem
+            iconType="danger"
+            text="Отработка проведения технологических операций: оказание первой помощи, работы на высоте,  работа с доменной печью и т.п."
+            title="обучение навыкам работы на опасных производствах"
+          />
+          <TeachingItem
+            iconType="service"
+            text="отработка определения неисправностей оборудования и выполнения ремонтных работ на цифровом двойнике"
+            title="обучение обслуживанию и ремонту оборудования, систем, техники"
+          />
+          <TeachingItem
+            iconType="safety"
+            text="отработка плана мероприятий по локализации и ликвидации последствий аварий. "
+            title="обучение правилам промышленной безопасности и охраны труда"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -1,164 +0,0 @@
-import { useWindowWidth } from '../hooks/useWindowWidth';
-
-export function Process() {
-  const width = useWindowWidth();
-
-  return (
-    <div className="py-[70px] px-10 text-[#ffffff]">
-      <h1 className="text-[64px] tablet: font-medium leading-[58px] mb-14 -tracking-[.02em] desktop:block tablet:hidden">
-        Процесс обучения сотрудников станет безопасней и эффективней с
-        <span
-          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
-          style={{
-            backgroundClip: 'text',
-            WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent',
-          }}
-        >
-          {' '}
-          продуктами GRAFF.training
-        </span>
-      </h1>
-      <p className="uppercase flex gap-x-1 mb-[13px]">
-        <img src="src/assets/cube.svg" alt="" />
-        Продукты
-      </p>
-      <div className="flex bg-[#3D425C4D] bg-opacity-3 rounded-xl p-1 mb-2 w-fit max-w-full overflow-clip">
-        <TabButton text="Промышленные тренажеры" />
-        <TabButton text="Симуляторы управления техникой" />
-        <TabButton text="Тренажеры для учебных заведений" />
-      </div>
-      {width >= 1024 ? (
-        <div className="bg-[#3D425C4D] pt-10 pb-[52px] pl-10 rounded-xl flex bg-[url('src/assets/mask_group.png')] bg-no-repeat bg-right-bottom">
-          <div className="max-w-[455px]">
-            <h1 className="text-[#ffffff] text-[32px] font-medium leading-[29px] mb-8">
-              Промышленные тренажеры виртуальной реальности
-            </h1>
-            <div className="flex flex-col gap-y-6">
-              <div className="flex gap-x-7">
-                <img src="src/assets/danger_icon.svg" alt="" />
-                <div className="border-l border-[#3D425C] pl-4 font-medium">
-                  <p className="text-[#ffffff] text-lg mb-2">
-                    обучение навыкам работы на опасных производствах
-                  </p>
-                  <p className="text-sm">
-                    Отработка проведения технологических операций: оказание
-                    первой помощи, работы на высоте, работа с доменной печью и
-                    т.п.
-                  </p>
-                </div>
-              </div>
-              <div className="flex gap-x-7">
-                <img src="src/assets/service_icon.svg" alt="" />
-                <div className="border-l border-[#3D425C] pl-4 font-medium">
-                  <p className="text-[#ffffff] text-lg mb-2">
-                    обучение обслуживанию и ремонту оборудования, систем,
-                    техники
-                  </p>
-                  <p className="text-sm">
-                    отработка определения неисправностей оборудования и
-                    выполнения ремонтных работ на цифровом двойнике
-                  </p>
-                </div>
-              </div>
-              <div className="flex gap-x-7">
-                <img src="src/assets/safety_icon.svg" alt="" />
-                <div className="border-l border-[#3D425C] pl-4 font-medium">
-                  <p className="text-[#ffffff] text-lg mb-2">
-                    обучение правилам промышленной безопасности и охраны труда{' '}
-                  </p>
-                  <p className="text-sm">
-                    отработка плана мероприятий по локализации и ликвидации
-                    последствий аварий.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div className="bg-[#3D425C4D] opacity-3 p-7 rounded-xl">
-          <div className="bg-[url('src/assets/mask_group.png')] bg-no-repeat bg-contain bg-right-bottom border-b border-[#3D425C] pb-5">
-            <div className="max-w-[326px]">
-              <h1 className="text-2xl font-medium mb-11">
-                Промышленные тренажеры виртуальной реальности{' '}
-              </h1>
-              <p className="text-sm">
-                Может быть еще какой-нибудь небольшой текст, а то мне не хватает
-                для балланса. Ну если не будет, то как-нибудь переживем
-              </p>
-            </div>
-          </div>
-          <div className="flex mt-8">
-            <div className="border-l border-[#3D425C]">
-              <img src="src/assets/danger_icon.svg" alt="" />
-              <div className="pl-4 font-medium">
-                <p className="text-[#ffffff] text-base mb-2">
-                  обучение навыкам работы на опасных производствах
-                </p>
-                <p className="text-sm">
-                  Отработка проведения технологических операций: оказание первой
-                  помощи, работы на высоте, работа с доменной печью и т.п.
-                </p>
-              </div>
-            </div>
-            <div className="border-l border-[#3D425C]">
-              <img src="src/assets/service_icon.svg" alt="" />
-              <div className=" pl-4 font-medium">
-                <p className="text-[#ffffff] text-base mb-2">
-                  обучение обслуживанию и ремонту оборудования, систем, техники
-                </p>
-                <p className="text-sm">
-                  отработка определения неисправностей оборудования и выполнения
-                  ремонтных работ на цифровом двойнике
-                </p>
-              </div>
-            </div>
-            <div className="border-l border-[#3D425C]">
-              <img src="src/assets/safety_icon.svg" alt="" />
-              <div className="pl-4 font-medium">
-                <p className="text-[#ffffff] text-lg mb-2">
-                  обучение правилам промышленной безопасности и охраны труда{' '}
-                </p>
-                <p className="text-sm">
-                  отработка плана мероприятий по локализации и ликвидации
-                  последствий аварий.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function TabButton({ text }: { text: string }) {
-  return (
-    <button className="active:bg-[#798FFF] rounded-lg px-5 py-[13.5px] desktop:text-lg font-semibold desktop:leading-[18px] tablet:text-base tablet:leading-4 text-nowrap text-clip">
-      {text}
-    </button>
-  );
-}
-
-function TeachingItem({
-  title,
-  text,
-  iconType,
-}: {
-  title: string;
-  text: string;
-  iconType: 'danger' | 'service' | 'safety';
-}) {
-  return (
-    <div className="desktop:border-l-0 tablet:border-l border-[#3D425C] 2xl:flex 2xl:gap-x-7">
-      <img src={`src/assets/${iconType}_icon.svg`} alt="" />
-      <div className="2xl:border-l border-[#3D425C] 2xl:pl-4 font-medium">
-        <p className="text-[#ffffff] desktop:text-lg tablet:text-base mobile:text-sm mb-2">
-          {title}
-        </p>
-        <p className="desktop:text-sm mobile:text-xs">{text}</p>
-      </div>
-    </div>
-  );
-}
@@ -1,7 +1,8 @@
 import { Video } from '../components/Main/Video';
 import { Pluses } from '../components/Main/Pluses';
 import { Figures } from '../components/Main/Figures';
-import { Process } from '../components/Process';
+import { Process } from '../components/Main/Process';
+import { Distance } from '../components/Distance';

 export function MainPage() {
  return (
@@ -10,6 +11,7 @@ export function MainPage() {
      <Pluses />
      <Figures />
      <Process />
+      <Distance />
    </>
  );
 }