todo: some updates, some redesign...

src/components/Layouts/Header.tsx

@@ -13,8 +13,8 @@ import { LogoIcon } from '../icons/LogoIcon';
 import { BurgerIcon } from '../icons/BurgerIcon';
 import { CloseIcon } from '../icons/CloseIcon';
 import { CubeIcon } from '../icons/CubeIcon';
-import { ArrowDownIcon } from '../icons/ArrowDownIcon';
 import { useWindowWidth } from '../../hooks/useWindowWidth';
+import { ChevronDownIcon } from '../icons/ChevronDownIcon';
 
 export function Header() {
   const [menuOpen, setMenuOpen] = useState(false);
@@ -147,7 +147,7 @@ function LangToggler({ lang }: { lang: Lang }) {
         className="mx-6 h-full gap-x-1 items-center flex font-semibold btn-text outline-none"
       >
         {lang}
-        <ArrowDownIcon />
+        <ChevronDownIcon />
       </button>
       <motion.div
         className="absolute z-20 grid grid-cols-2 min-w-[101px]"

src/components/Layouts/Layout.tsx

@@ -8,7 +8,7 @@ export function Layout() {
   return (
     <>
       <Header />
-      <main className="relative overflow-clip">
+      <main className="relative overflow-clip lg:px-10 sm:px-6 px-4">
         <Outlet />
         <Feedback />
       </main>

src/components/Main/Availables.tsx

@@ -9,7 +9,7 @@ import { getIcon } from '../../utils/getIcon';
 
 export function Availables() {
   return (
-    <div className="lg:py-[70px] lg:px-10 py-14 sm:px-6 px-4 overflow-hidden sm:grid lg:grid-cols-12 max-lg:grid-cols-8 gap-x-4">
+    <div className="lg:py-[70px] py-14 overflow-hidden sm:grid lg:grid-cols-12 max-lg:grid-cols-8 gap-x-4">
       <Title className="lg:mb-14 mb-6 lg:col-span-6 col-span-full">
         <span className="text-gradient text-wrap">Многопользовательский</span>
         <br />

src/components/Main/Contacts.tsx

@@ -9,7 +9,7 @@ import { YouTubeIcon } from '../icons/YoutubeIcon';
 
 export function Feedback() {
   return (
-    <div className="sm:grid lg:grid-cols-12 sm:grid-cols-2 lg:grid-rows-[repeat(min-content,2)] sm:grid-rows-[repeat(min-content,3)] lg:gap-x-4 sm:gap-x-14 lg:gap-y-[68px] sm:px-6 px-4 pb-20 pt-[70px]">
+    <div className="sm:grid lg:grid-cols-12 sm:grid-cols-2 lg:grid-rows-[repeat(min-content,2)] sm:grid-rows-[repeat(min-content,3)] lg:gap-x-4 sm:gap-x-14 lg:gap-y-[68px] pb-20 pt-[70px]">
       <h2 className="lg:col-span-7 sm:col-span-full h2 font-medium max-lg:mb-6">
         Хотите использовать интерактивные тренажеры в обучении?
         <br />

src/components/Main/Decreasing.tsx

@@ -3,7 +3,7 @@ import { Title } from '../../ui/Title';
 
 export function Decreasing() {
   return (
-    <div className="lg:py-[70px] py-14 lg:px-10 sm:px-6 px-4">
+    <div className="lg:py-[70px] py-14">
       <Title className="max-sm:hidden">
         <span className="text-gradient">Достигайте положительный эффект</span>
         <br /> за счет снижения издержек

src/components/Main/Distance.tsx

@@ -2,7 +2,7 @@ import { Title } from '../../ui/Title';
 
 export function Distance() {
   return (
-    <div className="lg:py-[70px] lg:px-10 py-14 sm:px-6 px-4">
+    <div className="lg:py-[70px] py-14">
       <Title className="2xl:mb-[77px] lg:mb-14 mb-6">
         Платформа GRAFF.training поволяет осуществлять
         <span className="text-gradient"> дистанционное обучение</span> с любого

src/components/Main/Efficiency.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef } from 'react';
 
 export function Effeciency() {
   return (
-    <div className="lg:py-[70px] py-14 lg:px-10 sm:px-6 px-4">
+    <div className="lg:py-[70px] py-14">
       <AppearanceHr className="max-sm:hidden" />
       <div className="pt-5 gap-4 sm:grid lg:grid-cols-12 sm:grid-cols-8">
         <MiniTitle
@@ -17,15 +17,17 @@ export function Effeciency() {
           <div className="flex max-sm:flex-col lg:max-2xl:w-[clamp(728px,728px+(100vw-1024px)/576*405,1133px)] justify-stretch gap-x-4 gap-y-2 max-sm:py-5 sm:pb-5">
             <Figure
               percents={50}
+              type="charts"
               title={'сокращение бюджета на обучение сотрудников'}
             />
             <Figure
               percents={30}
+              type="diagram"
               title={'сокращение времени обучения сотрудников'}
             />
             <Figure
               percents={90}
-              type="right"
+              type="pizza"
               title={'готовность к опасным ситуациям выше на'}
             />
           </div>
@@ -56,11 +58,11 @@ export function Effeciency() {
 function Figure({
   title,
   percents,
-  type = 'left',
+  type,
 }: {
   percents: number;
   title: string;
-  type?: 'left' | 'right';
+  type: 'charts' | 'diagram' | 'pizza';
 }) {
   const root = useRef<HTMLDivElement>(null);
   const figureRef = useRef<HTMLSpanElement>(null);
@@ -87,16 +89,15 @@ function Figure({
     <motion.div
       ref={root}
       initial={{
-        background: `bottom right 24px/auto url(src/assets/efficiency/${type}_variance_figure.svg) no-repeat, bottom right/100% 0% url(src/assets/efficiency/efficiency_backlight.svg) no-repeat, #3D425C4D`,
-        backgroundSize: 'auto,100% 0%',
+        background: `bottom right / 50% url(src/assets/efficiency/${type}.png) no-repeat, bottom center / 0% 0% url(src/assets/efficiency/efficiency_backlight.svg) no-repeat, #3D425C4D`,
       }}
       whileHover={{
-        backgroundSize: 'auto,100% 100%',
+        // backgroundSize: '50% 50%,100% 100%',
         transition: { duration: 0.075 },
       }}
-      className="flex px-6 2xl:max-w-[22vw] w-full rounded-2xl pt-6 bg-no-repeat bg-[position:bottom_right_24px,bottom_right] h-[262px] relative"
+      className="flex px-6 2xl:max-w-[22vw] w-full rounded-2xl pt-6 bg-no-repeat h-[262px] relative"
     >
-      <div className="flex flex-col justify-between py-6 max-sm:max-w-[50vw]">
+      <div className="flex flex-col justify-between pb-6 max-sm:max-w-[50vw]">
         <h3 className="lg:font-medium l-text 2xl:max-w-[70%]">{title}</h3>
         <h1 className="font-medium flex items-center md:text-[clamp(64px,64px+(100vw-768px)/832*32,96px)] md:leading-[clamp(57.6px,57.6px+(100vw-768px)/832*28.8,86.4px)] text-[64px] leading-[57.6px]">
           <span ref={figureRef}>{percents}</span>

src/components/Main/Events.tsx

@@ -8,7 +8,7 @@ import { ArrowInsertIcon } from '../icons/ArrowInsertIcon';
 
 export function Events() {
   return (
-    <div className="lg:py-[70px] lg:px-10 sm:py-14 sm:px-6 px-4" id="events">
+    <div className="lg:py-[70px] sm:py-14" id="events">
       <AppearanceHr className="max-lg:hidden" />
       <div className="pt-5 gap-x-4 w-full sm:grid lg:grid-cols-12 grid-cols-8">
         <MiniTitle text="события" className="max-sm:mb-2 col-span-2" />

src/components/Main/Marquee.tsx

@@ -1,6 +1,6 @@
 export function Marquee() {
   return (
-    <div className="flex flex-nowrap w-full overflow-hidden lg:max-h-[100px] sm:max-h-[82px] max-h-20 relative z-10 bg-[#14161F]">
+    <div className="flex flex-nowrap w-screen overflow-hidden lg:max-h-[100px] sm:max-h-[82px] max-h-20 relative z-10 bg-[#14161F] lg:-mx-10 sm:-mx-6 -mx-4">
       <div className="flex absolute z-40 right-0 max-sm:hidden">
         <div className="w-0 h-0 lg:border-b-[100px] lg:border-l-[100px] sm:border-b-[82px] sm:border-l-[82px] border-[transparent_transparent_#D0D6DF_transparent]" />
         <div className="lg:w-[260px] sm:w-[216px] bg-[#D0D6DF]" />

src/components/Main/Motivation.tsx

@@ -3,7 +3,7 @@ import { Marquee } from '../Main/Marquee';
 export function Motivation() {
   return (
     <div>
-      <div className="lg:px-10 sm:px-6 px-4 lg:py-28 sm:py-12 py-14 grid grid-cols-12">
+      <div className="lg:py-28 sm:py-12 py-14 grid grid-cols-12">
         <h1 className="2xl:mb-[38px] pb-8 font-medium lg:block max-lg:hidden h1 col-span-full">
           Создаем
           <span className="text-gradient"> интерактивные тренажеры </span>

src/components/Main/Products/Products.tsx

@@ -25,7 +25,7 @@ export function Products() {
   return (
     <div
       id="products"
-      className="lg:py-[70px] sm:max-lg:pt-14 sm:max-lg:pb-8 max-sm:py-14 lg:px-10 sm:px-6 px-4 relative z-10"
+      className="lg:py-[70px] sm:max-lg:pt-14 sm:max-lg:pb-8 max-sm:py-14 relative z-10"
     >
       <Title className="2xl:mb-[77px] mb-14 max-lg:hidden">
         Процесс обучения сотрудников станет безопасней и эффективней с

src/components/Main/Projects.tsx

@@ -25,13 +25,16 @@ export function Projects() {
   return (
     <div
       id="projects"
-      className="lg:py-[70px] lg:px-10 py-14 sm:px-6 px-4 overflow-hidden"
+      className="lg:py-[70px] py-14 overflow-hidden lg:-mx-10 sm:-mx-6 -mx-4"
     >
-      <Title className="2xl:mb-[77px] lg:mb-14 mb-6">
+      <Title className="2xl:mb-[77px] lg:mb-14 mb-6 lg:ml-10 sm:ml-6 ml-4">
         <span className="text-gradient">Большой опыт в работе</span> с
         промышленными предприятиями и учебными заведениями
       </Title>
-      <MiniTitle text="реализованные проекты" />
+      <MiniTitle
+        text="реализованные проекты"
+        className="lg:ml-10 sm:ml-6 ml-4"
+      />
       <Slider
         projects={[
           {
@@ -197,7 +200,7 @@ function Slider({ projects }: { projects: IProject<Media>[] }) {
   }, [sliderOffset, order, slide]);
 
   return (
-    <div className="flex flex-col lg:mt-4 sm:mt-3 mt-2">
+    <div className="flex flex-col lg:mt-4 sm:mt-3 mt-2 lg:-mx-10 sm:-mx-6 -mx-4 relative">
       <div {...handlers}>
         <div
           ref={ref}

src/components/Main/RecentProjects.tsx

@@ -0,0 +1,54 @@
+import { HashLink } from 'react-router-hash-link';
+import { MiniTitle } from '../../ui/MiniTitle';
+import { ArrowDownIcon } from '../icons/ArrowDownIcon';
+
+export function RecentProjects() {
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <MiniTitle text="последние проекты" />
+        <HashLink
+          className="flex items-center gap-x-2 p-2 bg-[#3D425C] rounded-full"
+          to={'#projects'}
+        >
+          <span className="btn-text font-medium ml-3">Смотреть все</span>
+          <div className="bg-white rounded-full p-1">
+            <ArrowDownIcon className="w-5 h-5 text-black" />
+          </div>
+        </HashLink>
+      </div>
+      <div className="flex justify-stretch gap-x-4 min-w-[calc(752/1600*100%)]">
+        <div className="flex-1 flex flex-col gap-y-6">
+          <img src="src/assets/recent_projects/plane.png" className="" alt="" />
+          <div className="space-y-2">
+            <p className="h3 font-medium">L 410 NG Aircraft</p>
+            <div className="flex items-center gap-x-6">
+              <p className="flex items-center gap-x-2 h4 font-medium py-2">
+                <div className="w-3 h-3 bg-white" />
+                Презентация
+              </p>
+              <p className="flex items-center gap-x-2 h4 font-medium py-2">
+                <div className="w-3 h-3 bg-white" />
+                3D-макет
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="flex-1 flex flex-col gap-y-6">
+          <img src="src/assets/recent_projects/laba.png" className="" alt="" />
+          <div className="space-y-2">
+            <p className="h3 font-medium">
+              Учебная лаборатория определения жирности молока
+            </p>
+            <div className="flex items-center gap-x-6">
+              <p className="flex items-center gap-x-2 h4 font-medium py-2">
+                <div className="w-3 h-3 bg-white" />
+                VR-приложение
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Main/Teaching.tsx

@@ -3,7 +3,7 @@ import { Title } from '../../ui/Title';
 
 export function Teaching() {
   return (
-    <div className="lg:py-[70px] lg:mb-[60px] lg:px-10 sm:px-6 px-4 py-14 md:grid lg:grid-cols-12 gap-x-4">
+    <div className="lg:py-[70px] lg:mb-[60px] py-14 md:grid lg:grid-cols-12 gap-x-4">
       <Title className="max-lg:hidden 2xl:mb-[38px] mb-8 lg:sticky top-14 h-fit col-span-5">
         <span className="text-gradient">Тренинг модуль</span>
         <br className="max-lg:hidden" />

src/components/Main/Trainings.tsx

@@ -7,7 +7,7 @@ import { VrBacklightIcon } from '../icons/VrBacklightIcon';
 
 export function Trainings() {
   return (
-    <div id="trainings" className="lg:py-[70px] lg:px-10 py-14 sm:px-7 px-4">
+    <div id="trainings" className="lg:py-[70px] py-14">
       <Title className="2xl:mb-[77px] lg:mb-14 mb-6">
         Предлагаем различные{' '}
         <span className="text-gradient">варианты комплектации тренажеров</span>,

src/components/Main/Video.tsx

@@ -15,7 +15,7 @@ export function Video() {
 
   return (
     <>
-      <div className="flex bg-[url(src/assets/video/video.jpg)] lg:h-[836px] sm:h-[561px] h-[400px] bg-cover bg-right bg-no-repeat justify-center relative z-20">
+      <div className="flex bg-[url(src/assets/video/video.jpg)] lg:h-[836px] sm:h-[561px] h-[400px] bg-cover bg-right bg-no-repeat justify-center relative z-20 lg:-mx-10 sm:-mx-6 -mx-4">
         <button
           className="self-center outline-none"
           onClick={() => setOpen(true)}

src/components/icons/ArrowDownIcon.tsx

@@ -1,22 +1,19 @@
 export function ArrowDownIcon({ className = '' }: { className?: string }) {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      className={className}
-      color="currentColor"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
-      <g opacity="0.8">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M11.2929 16.7071C11.6834 17.0976 12.3166 17.0976 12.7071 16.7071L19.7071 9.70713C20.0976 9.31661 20.0976 8.68344 19.7071 8.29292C19.3165 7.90239 18.6834 7.90239 18.2928 8.29292L12 14.5858L5.70711 8.29292C5.31658 7.90239 4.68342 7.90239 4.29289 8.29292C3.90237 8.68344 3.90237 9.31661 4.29289 9.70713L11.2929 16.7071Z"
-          fill="white"
-        />
-      </g>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 4.16663C9.53976 4.16663 9.16667 4.53972 9.16667 4.99996L9.16667 12.9014L5.60632 9.12525C5.29059 8.79039 4.76318 8.77488 4.42832 9.0906C4.09346 9.40633 4.07795 9.93374 4.39367 10.2686L9.39367 15.5716C9.55113 15.7386 9.77048 15.8333 10 15.8333C10.2295 15.8333 10.4489 15.7386 10.6063 15.5716L15.6063 10.2686C15.9221 9.93374 15.9065 9.40633 15.5717 9.09061C15.2368 8.77488 14.7094 8.79039 14.3937 9.12525L10.8333 12.9014L10.8333 4.99996C10.8333 4.53972 10.4602 4.16663 10 4.16663Z"
+        fill="#14161F"
+      />
     </svg>
   );
 }

src/pages/MainPage.tsx

@@ -11,6 +11,7 @@ import { Events } from '../components/Main/Events';
 import { Ellipse } from '../components/Main/Ellipse';
 import { Motivation } from '../components/Main/Motivation';
 import { useWindowWidth } from '../hooks/useWindowWidth';
+import { RecentProjects } from '../components/Main/RecentProjects';
 
 export function MainPage() {
   const width = useWindowWidth();
@@ -23,6 +24,7 @@ export function MainPage() {
       <Decreasing />
       <Effeciency />
       <Products />
+      <RecentProjects />
       <Teaching />
       <Distance />
       <Availables />