slider with projects in process

src/Layout.tsx

@@ -1,7 +1,7 @@
 import { Outlet } from 'react-router-dom';
-import { Header } from './components/Header';
+import { Header } from './components/Layout/Header';
 import { Navbar } from './components/Layout/Navbar';
-import { Footer } from './components/Footer';
+import { Footer } from './components/Layout/Footer';
 
 export default function Layout() {
   return (

src/assets/left_slide.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 12C19 11.4477 18.5523 11 18 11L8.51831 11L13.0497 6.72759C13.4515 6.34871 13.4701 5.71582 13.0912 5.31398C12.7124 4.91215 12.0795 4.89353 11.6776 5.27241L5.31399 11.2724C5.1136 11.4613 5 11.7246 5 12C5 12.2754 5.11359 12.5386 5.31399 12.7276L11.6776 18.7276C12.0795 19.1065 12.7124 19.0878 13.0912 18.686C13.4701 18.2842 13.4515 17.6513 13.0496 17.2724L8.51831 13L18 13C18.5523 13 19 12.5523 19 12Z" fill="white"/>
+</svg>

src/assets/right_slide.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 12C5 12.5523 5.44771 13 6 13L15.4817 13L10.9504 17.2724C10.5485 17.6513 10.5299 18.2842 10.9088 18.686C11.2876 19.0879 11.9205 19.1065 12.3224 18.7276L18.686 12.7276C18.8864 12.5387 19 12.2754 19 12C19 11.7246 18.8864 11.4614 18.686 11.2724L12.3224 5.27241C11.9205 4.89354 11.2876 4.91215 10.9088 5.31399C10.5299 5.71583 10.5485 6.34872 10.9504 6.72759L15.4817 11L6 11C5.44772 11 5 11.4477 5 12Z" fill="white"/>
+</svg>

src/components/Expirience.tsx

@@ -1,3 +0,0 @@
-export function Expirience() {
-  return <div></div>;
-}

src/components/Layout/Header.tsx

@@ -1,5 +1,5 @@
-import { useWindowWidth } from '../hooks/useWindowWidth';
-import { Marquee } from './Main/Marquee';
+import { useWindowWidth } from '../../hooks/useWindowWidth';
+import { Marquee } from '../Main/Marquee';
 
 export function Header() {
   const width = useWindowWidth();

src/components/Main/Projects.tsx

@@ -0,0 +1,131 @@
+import { useReducer, useState } from 'react';
+
+export function Projects() {
+  return (
+    <div className="desktop:py-[70px] desktop:px-10">
+      <h1 className="text-[#ffffff] font-medium desktop:text-[64px] desktop:leading-[58px] desktop:mb-14">
+        <span
+          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
+          style={{
+            backgroundClip: 'text',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+          }}
+        >
+          Большой опыт в работе
+        </span>{' '}
+        с промышленными предприятиями и учебными заведениями
+      </h1>
+      <h2 className="uppercase text-[#ffffff] gap-1 desktop:text-sm mobile:text-xs flex font-medium mb-4">
+        <img src="src/assets/cube.svg" alt="" />
+        РЕАЛИЗОВАННЫЕ ПРОЕКТЫ
+      </h2>
+      <Slider
+        projects={[
+          {
+            src: 'src/assets/tank.png',
+            tags: ['Симулятор', 'VR-приложение'],
+            title: 'Ремонт и обслуживание двигателей спецтехники',
+          },
+          {
+            src: 'src/assets/helicopter.jpg',
+            tags: ['Симулятор'],
+            title: 'Сборка-разборка вертолётного двигателя',
+          },
+          {
+            src: 'src/assets/train.png',
+            tags: ['Симулятор'],
+            title: 'Симулятор машиниста',
+          },
+        ]}
+      />
+    </div>
+  );
+}
+
+function Project({
+  src,
+  title,
+  tags,
+}: {
+  src: string;
+  title: string;
+  tags: string[];
+}) {
+  return (
+    <div className="bg-[#3D425C] bg-opacity-50 rounded-2xl box-border desktop-figma:min-w-[624px]">
+      <div
+        className="bg-cover h-[340px] rounded-2xl"
+        style={{ backgroundImage: `url(${src})` }}
+      />
+      <div className="p-5">
+        <h1 className="text-[#ffffff] font-medium desktop:text-lg">{title}</h1>
+        <div className="flex gap-2 mt-4">
+          {tags.map(tag => (
+            <p
+              key={tag}
+              className="text-[#ffffff] font-medium desktop:text-sm rounded-3xl py-3 px-4 border border-[#798FFF]"
+            >
+              {tag}
+            </p>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Slider({
+  projects,
+}: {
+  projects: { src: string; title: string; tags: string[] }[];
+}) {
+  const [order, dispatch] = useReducer(
+    (state: typeof projects, action: string) =>
+      action === 'next'
+        ? [...state.slice(1), state[2]]
+        : action === 'prev'
+          ? [state[state.length - 3], ...state.slice(0, -1)]
+          : state,
+    [projects[projects.length - 1], ...projects, projects[0]],
+  );
+
+  const [slide, setSlide] = useState(0);
+
+  return (
+    <div className="flex flex-col">
+      <div
+        className="flex gap-2 overflow-hidden absolute mb-[18px]"
+        style={{
+          transition: '1s',
+          left: -624,
+        }}
+      >
+        {order.map((project, index) => (
+          <Project key={index} {...project} />
+        ))}
+      </div>
+      <div className="mt-[500px] flex items-center gap-4 desktop-figma:min-w-[1135px] desktop:max-desktop-figma:w-full self-center">
+        <button
+          onClick={() => {
+            dispatch('prev');
+            setSlide(slide === 0 ? order.length - 1 : slide - 1);
+          }}
+        >
+          <img src="src/assets/left_slide.svg" alt="" />
+        </button>
+        <div className="h-1 bg-[#3D425C] w-full">
+          <div className="bg-[#ffffff] h-1 w-[50%]" />
+        </div>
+        <button
+          onClick={() => {
+            dispatch('next');
+            setSlide(slide === order.length - 1 ? 0 : slide + 1);
+          }}
+        >
+          <img src="src/assets/right_slide.svg" alt="" />
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/Main/Trainings.tsx

@@ -0,0 +1,83 @@
+export function Trainings() {
+  return (
+    <div className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-7 mobile:px-4">
+      <h1 className="text-[#ffffff] desktop:text-[64px] desktop:leading-[58px] desktop:mb-14 tablet:text-[40px] tablet:leading-10 mobile:text-[28px] mobile:mb-6 mobile:leading-7 font-medium">
+        Предлагаем различные{' '}
+        <span
+          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
+          style={{
+            backgroundClip: 'text',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+          }}
+        >
+          варианты комплектации тренажеров
+        </span>
+        , основываясь на специфике вашего тренировочного процесса
+      </h1>
+      <div className="desktop-figma:pl-[257px]">
+        <TrainingsFeature
+          order="[01]"
+          src="src/assets/vr_1.png"
+          title="VR - тренажеры"
+          text="Обучение навыкам работы с инструментами и оборудованием. Пешее хождение по территории или между оборудованием"
+        />
+        <TrainingsFeature
+          order="[02]"
+          src="src/assets/vr_2.png"
+          title="Cтенды"
+          text="Отработки навыков вождение и управления техникой. Работа с панелями управления"
+        />
+        <TrainingsFeature
+          order="[03]"
+          src="src/assets/vr_3.png"
+          title="Учебные классы"
+          text="Оснащение учебных классов и центров всем необходимым для современного обучения и профессиональной подготовки кадров"
+        />
+      </div>
+    </div>
+  );
+}
+
+function TrainingsFeature({
+  src,
+  title,
+  text,
+  order,
+}: {
+  title: string;
+  text: string;
+  src: string;
+  order: string;
+}) {
+  return (
+    <div className="tablet:flex items-stretch justify-between tablet:py-10 desktop-figma:min-w-[1133px] border-b border-[#3D425C] first:border-t mobile:max-tablet:pt-5">
+      <div className="tablet:flex flex-col justify-between mobile:max-tablet:mb-[42px]">
+        <h1 className="desktop:text-[32px] font-medium desktop:leading-8 mobile:text-xl mobile:leading-5 text-[#ffffff] mobile:max-tablet:mb-2">
+          {title}
+        </h1>
+        <p className="desktop:text-lg desktop:leading-6 tablet:text-sm tablet:leading-[19px] tablet:max-w-[346px] text-[#ffffff] desktop:max-w-[495px]">
+          {text}
+        </p>
+      </div>
+      <div className="mobile:max-tablet:flex tablet:hidden justify-between items-end">
+        <p className="text-[#52587A] text-sm mb-5">{order}</p>
+        <img src={src} alt="" />
+      </div>
+      <div className="tablet-figma:flex tablet:max-tablet-figma:hidden mobile:max-tablet-figma:hidden">
+        <img src={src} alt="" />
+        <p className="text-[#52587A] desktop:font-medium desktop:text-sm desktop:leading-5 tablet:text-sm">
+          {order}
+        </p>
+      </div>
+      <img
+        src={src}
+        className="mobile:max-tablet:hidden tablet-figma:hidden"
+        alt=""
+      />
+      <p className="text-[#52587A] desktop:font-medium desktop:text-sm desktop:leading-5 tablet:text-sm mobile:max-tablet:hidden tablet-figma:hidden">
+        {order}
+      </p>
+    </div>
+  );
+}

src/pages/MainPage.tsx

@@ -5,6 +5,8 @@ import { Products } from '../components/Main/Product';
 import { Teaching } from '../components/Main/Teaching';
 import { Distance } from '../components/Main/Distance';
 import { MultiUser } from '../components/Main/MultiUser';
+import { Projects } from '../components/Main/Projects';
+import { Trainings } from '../components/Main/Trainings';
 
 export function MainPage() {
   return (
@@ -16,6 +18,8 @@ export function MainPage() {
       <Teaching />
       <Distance />
       <MultiUser />
+      <Trainings />
+      <Projects />
     </>
   );
 }