From 81f6fed96b7ca7f90ef7c4a1bdcd9775e67abc16 Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Mon, 1 Jul 2024 15:02:20 +0500
Subject: [PATCH] navbar, products, header, efficiency, products tabs, teaching
 grid, footer, contacts were fixed

---
 src/components/Layout/Footer.tsx   | 22 ++++-----
 src/components/Layout/Header.tsx   | 72 +++++++++++++-----------------
 src/components/Layout/Navbar.tsx   |  8 ++--
 src/components/Main/Efficiency.tsx |  2 +-
 src/components/Main/Marquee.tsx    |  2 +-
 src/components/Main/Pluses.tsx     | 70 +++++++++++++----------------
 src/components/Main/Products.tsx   |  8 ++--
 src/components/Main/Projects.tsx   |  2 +-
 src/components/Main/Teaching.tsx   | 26 ++++++-----
 src/ui/NavLink.tsx                 | 23 +---------
 10 files changed, 100 insertions(+), 135 deletions(-)

diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
index 38b3a0b..1572e2c 100644
--- a/src/components/Layout/Footer.tsx
+++ b/src/components/Layout/Footer.tsx
@@ -1,35 +1,35 @@
 export function Footer() {
   return (
-    <footer className="desktop:flex">
-      <div className="flex px-10 py-[31px] border-t border-[#3D425C] justify-between desktop-figma:min-w-[880px] desktop:max-desktop-figma:gap-10">
+    <footer className="tablet:grid xl:grid-cols-[2fr_1fr_1fr] tablet:max-xl:grid-cols-2 tablet:max-xl:grid-rows-2">
+      <div className="flex tablet:items-center mobile:max-tablet:flex-col tablet:px-10 mobile:px-4 tablet:py-9 mobile:py-4 border-t border-[#3D425C] gap-6 tablet:max-xl:row-start-1 tablet:max-xl:col-span-2">
         <div className="w-32 flex justify-between items-center">
           <img src="src/assets/logo.svg" alt="" className="h-[50px]" />
           <img src="src/assets/text_logo.svg" className="h-[33px]" alt="" />
         </div>
-        <div className="flex flex-col gap-y-1 font-medium text-[#ffffff]">
-          <p className="flex gap-4 text-base">
+        <div className="desktop:text-sm mobile:text-xs flex flex-col gap-y-1 font-medium text-[#ffffff]">
+          <p className="flex gap-4 ">
             Политика конфиденциальности <span>graff.tech</span>
           </p>
-          <p className="text-base opacity-40">
+          <p className="opacity-40">
             © 2024 GRAFF interactive. Все права защищены
           </p>
         </div>
       </div>
-      <div className="px-10 py-[30px] flex items-center border-t border-x border-[#3D425C] flex-1 justify-between">
-        <div className="text-[#ffffff] text-lg font-medium">
+      <div className="px-10 py-[30px] flex items-center border-t xl:border-l tablet:border-r border-[#3D425C] flex-1 justify-between tablet:max-xl:row-start-2 tablet:max-xl:col-start-1">
+        <div className="text-[#ffffff] desktop:text-lg tablet:text-base mobile:text-xs">
           <p>info@graff.tech</p>
           <p>+7 800 770 00 67</p>
         </div>
-        <div className="text-sm text-[#ffffff] font-medium p-[14px] border border-[#3D425C] rounded-full">
+        <div className="dsektop:text-sm mobile:text-base text-[#ffffff] p-[14px] border border-[#3D425C] rounded-full">
           RU
         </div>
       </div>
-      <div className="px-10 py-[30px] flex items-center border-t border-[#3D425C] flex-1 justify-between">
-        <div className="text-[#ffffff] text-lg">
+      <div className="px-10 py-[30px] flex items-center border-t border-[#3D425C] flex-1 justify-between tablet:max-xl:row-start-2 tablet:max-xl:col-start-2">
+        <div className="text-[#ffffff] desktop:text-lg tablet:text-base mobile:text-xs">
           <p>info@graff.tech</p>
           <p>+7 800 770 00 67</p>
         </div>
-        <div className="text-sm text-[#ffffff] font-medium py-[14px] px-[10px] border border-[#3D425C] rounded-full">
+        <div className="text-sm text-[#ffffff] py-[14px] px-[10px] border border-[#3D425C] rounded-full">
           UAE
         </div>
       </div>
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index 68d5b9f..8079b5f 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -1,48 +1,40 @@
-import { useWindowWidth } from '../../hooks/useWindowWidth';
 import { Marquee } from '../Main/Marquee';
 
 export function Header() {
-  const width = useWindowWidth();
-
   return (
     <header className="text-[#ffffff]">
-      <div className="px-10 desktop:pt-28 tablet:pt-12 mobile:pt-14">
-        {width >= 1024 ? (
-          <h1 className="text-8xl pb-8 font-medium">
-            Создаем{' '}
-            <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 leading-[57px]">
-            Интерактивные тренажеры{' '}
-            <span
-              className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
-              style={{
-                backgroundClip: 'text',
-                WebkitBackgroundClip: 'text',
-                WebkitTextFillColor: 'transparent',
-              }}
-            >
-              для обучения сотрудников
-            </span>
-          </h1>
-        )}
-        {width >= 1024 && (
-          <h2 className="text-[32px] max-w-[768px] desktop:block">
-            Помогаем сократить затраты на обучение, повысить безопасность и
-            производительность
-          </h2>
-        )}
+      <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">
+          Помогаем сократить затраты на обучение, повысить безопасность и
+          производительность
+        </h2>
       </div>
       <Marquee />
     </header>
diff --git a/src/components/Layout/Navbar.tsx b/src/components/Layout/Navbar.tsx
index 71cccfa..40e9c6c 100644
--- a/src/components/Layout/Navbar.tsx
+++ b/src/components/Layout/Navbar.tsx
@@ -2,7 +2,7 @@ import { NavLink } from '../../ui/NavLink';
 
 export function Navbar() {
   return (
-    <nav className="flex items-center justify-between text-[#ffffff] desktop:text-lg tablet:text-base font-semibold border-b border-[#3D425C] desktop:pl-10 t mobile:pl-4">
+    <nav className="flex items-stretch justify-between text-[#ffffff] desktop:text-lg tablet:text-base font-semibold border-b border-[#3D425C] desktop:pl-10 t mobile:pl-4">
       <div className="flex w-[104px] justify-between items-center mobile:py-3">
         <img src="src/assets/logo.svg" alt="" />
         <img
@@ -11,19 +11,19 @@ export function Navbar() {
           className="desktop:block mobile:hidden"
         />
       </div>
-      <div className="items-center flex">
+      <div className="items-stretch flex">
         <NavLink text="Типы тренажеров" route="/" />
         <NavLink text="Варианты комплектации" route="/" />
         <NavLink text="Проекты" route="/" />
         <NavLink text="События" route="/" />
-        <button className="text-lg bg-gradient-to-r from-[#798FFF] to-[#D375FF] border border-[#3D425C] tablet:block mobile:hidden py-[30px] px-10">
+        <button className="text-lg bg-gradient-to-r from-[#798FFF] to-[#D375FF] border-x border-[#3D425C] tablet:block mobile:hidden py-[30px] px-10">
           Оставить заявку
         </button>
         <button className="p-6 gap-x-1 items-center desktop:flex mobile:hidden">
           <span>RU</span>
           <img src="src/assets/arrow_down.svg" alt="" />
         </button>
-        <button className="px-6 py-5 desktop:hidden mobile:block border-l border-[#3D425C]">
+        <button className="px-6 py-5 min-[1350px]:hidden mobile:block border-l border-[#3D425C]">
           <img src="src/assets/burger.svg" alt="" />
         </button>
       </div>
diff --git a/src/components/Main/Efficiency.tsx b/src/components/Main/Efficiency.tsx
index 3374379..9a5ee17 100644
--- a/src/components/Main/Efficiency.tsx
+++ b/src/components/Main/Efficiency.tsx
@@ -6,7 +6,7 @@ export function Effeciency() {
       <div className="flex justify-between min-[1400px]:flex-row mobile:flex-col tablet:border-t border-[#3D425C] pt-5">
         <MiniTitle text={'экономическая\nэффективность'} />
         <div className="tablet:max-desktop-figma:mt-4 mobile:max-tablet:mt-2">
-          <div className="flex mobile:max-tablet:flex-col mobile:items-stretch gap-x-4 gap-y-2 mobile:max-tablet:py-5 tablet:pb-5 border-b border-[#3D425C] mb-9 w-fit tablet:border-t-0 mobile:border-t">
+          <div className="flex mobile:max-tablet:flex-col mobile:items-stretch gap-x-4 gap-y-2 mobile:max-tablet:py-5 tablet:pb-5 border-b border-[#3D425C] mb-9 tablet:border-t-0 mobile:border-t">
             <Figure
               variance={'left'}
               percents={50}
diff --git a/src/components/Main/Marquee.tsx b/src/components/Main/Marquee.tsx
index fe135b0..974c807 100644
--- a/src/components/Main/Marquee.tsx
+++ b/src/components/Main/Marquee.tsx
@@ -1,6 +1,6 @@
 export function Marquee() {
   return (
-    <div className="flex items-stretch overflow-clip desktop:mt-28 tablet:mt-12 mobile:mt-14">
+    <div className="flex items-stretch overflow-clip">
       <div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
         <img src="src/assets/rosatom.svg" className="m-auto" alt="" />
       </div>
diff --git a/src/components/Main/Pluses.tsx b/src/components/Main/Pluses.tsx
index 449c759..fca56d8 100644
--- a/src/components/Main/Pluses.tsx
+++ b/src/components/Main/Pluses.tsx
@@ -1,47 +1,39 @@
-import { useWindowWidth } from '../../hooks/useWindowWidth';
+import { MiniTitle } from '../../ui/MiniTitle';
 
 export function Pluses() {
-  const width = useWindowWidth();
-
   return (
     <div className="desktop:py-[70px] mobile:py-14 desktop:px-10 tablet:px-6 mobile:px-4">
-      {width >= 640 ? (
-        <h1 className="desktop:text-[64px] tablet:text-[40px] font-medium desktop:leading-[57px] tablet:leading-10 text-[#ffffff]">
-          <span
-            className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
-            style={{
-              backgroundClip: 'text',
-              WebkitBackgroundClip: 'text',
-              WebkitTextFillColor: 'transparent',
-            }}
-          >
-            Достигайте положительный эффект
-          </span>{' '}
-          за счет снижения издержек
-        </h1>
-      ) : (
-        <h1 className="text-[#ffffff] text-[28px] leading-[28px]">
-          <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:text-[64px] tablet:text-[40px] font-medium desktop:leading-[57px] tablet:leading-10 text-[#ffffff] tablet:block mobile:max-tablet: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="text-[#ffffff] text-[28px] leading-[28px] tablet:hidden">
+        <span
+          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
+          style={{
+            backgroundClip: 'text',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+          }}
+        >
+          Помогаем
+        </span>{' '}
+        сократить затраты на обучение, повысить безопасность и
+        производительность
+      </h1>
       <div className="flex tablet:flex-row mobile:flex-col justify-between gap-x-3 tablet:items-end 2xl:pl-[128px] min-[1600px]:pl-64 desktop:mt-14 mobile:mt-6">
-        {320 <= width && width <= 640 && (
-          <p className="flex text-[#ffffff] gap-x-1 mb-2">
-            <img src="src/assets/cube.svg" alt="" />
-            <span className="uppercase">снижение</span>
-          </p>
-        )}
+        <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">
           <li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
             <p>снижение количества несчастных случаев</p>
diff --git a/src/components/Main/Products.tsx b/src/components/Main/Products.tsx
index 5f7622e..5bc41c0 100644
--- a/src/components/Main/Products.tsx
+++ b/src/components/Main/Products.tsx
@@ -20,7 +20,7 @@ export function Products() {
       <div className="desktop:hidden">
         <MiniTitle text="Продукты" />
       </div>
-      <div className="flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 rounded-xl p-1 mb-2 w-fit max-w-full overflow-clip tablet:max-desktop:mt-[13px] mobile:mt-6">
+      <div className="flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 rounded-xl p-1 mb-2 w-fit max-w-full overflow-auto 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 text="Промышленные тренажеры" />
         <TabButton text="Симуляторы управления техникой" />
         <TabButton text="Тренажеры для учебных заведений" />
@@ -32,7 +32,7 @@ export function Products() {
 
 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">
+    <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 bg-text-gradient">
       {text}
     </button>
   );
@@ -71,9 +71,9 @@ function TeachingItem({
 
 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="bg-[#3D425C4D] rounded-xl desktop:bg-[url('src/assets/mask_group.png')] 2xl:bg-contain bg-right-bottom desktop:max-2xl:bg-[length:60%] desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 bg-no-repeat">
       <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:border-b border-[#3D425C] pb-5 tablet:max-desktop:bg-[url('src/assets/mask_group.png')] bg-no-repeat bg-contain bg-right-bottom tablet:max-tablet-figma:bg-[length:40%]">
           <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">
               Промышленные тренажеры виртуальной реальности
diff --git a/src/components/Main/Projects.tsx b/src/components/Main/Projects.tsx
index d9983d3..98f73ba 100644
--- a/src/components/Main/Projects.tsx
+++ b/src/components/Main/Projects.tsx
@@ -152,7 +152,7 @@ function Slider({
         </button>
         <div className="h-1 bg-[#3D425C] w-full">
           <div
-            className="bg-[#ffffff] h-1"
+            className="bg-[#ffffff] h-1  duration-1000"
             style={{ width: `${((slide + 1) / 3) * 100}%` }}
           />
         </div>
diff --git a/src/components/Main/Teaching.tsx b/src/components/Main/Teaching.tsx
index f13aa75..aed2d8e 100644
--- a/src/components/Main/Teaching.tsx
+++ b/src/components/Main/Teaching.tsx
@@ -114,7 +114,7 @@ function TeachingFeaturesForDesktop() {
 
 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-[353px_354px] desktop:hidden tablet:max-tablet-figma:flex tablet:max-tablet-figma:flex-col">
+    <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">
           Управление
@@ -170,17 +170,19 @@ function TeachingFeaturesForOtherScreens() {
           <br />
           Отчет об ошибках
         </p>
-        <div className="flex items-end mobile:max-tablet-figma:justify-center tablet-figma:max-desktop:overflow-hidden mt-0.5 mobile:max-tablet:pl-11">
-          <img
-            src="src/assets/schedule.svg"
-            className="rounded-lg mobile:max-desktop:w-[166px] tablet:max-desktop:relative z-10"
-            alt=""
-          />
-          <img
-            src="src/assets/stats.svg"
-            className="rounded-lg relative tablet-figma:max-desktop:right-[27px] tablet:max-tablet-figma:right-[31px] mobile:max-desktop:w-[166px] tablet:max-tablet-figma:bottom-[27px] mobile:max-tablet:bottom-[14px] mobile:max-tablet:right-11"
-            alt=""
-          />
+        <div className="flex flex-col">
+          <div className="flex items-end mobile:max-tablet-figma:justify-center tablet-figma:max-desktop:overflow-hidden mt-0.5 mobile:max-tablet:pl-11 mx-auto">
+            <img
+              src="src/assets/schedule.svg"
+              className="rounded-lg mobile:max-desktop:w-[166px] tablet:max-desktop:relative z-10"
+              alt=""
+            />
+            <img
+              src="src/assets/stats.svg"
+              className="rounded-lg relative tablet-figma:max-desktop:right-[27px] tablet:max-tablet-figma:right-[31px] mobile:max-desktop:w-[166px] tablet:max-tablet-figma:bottom-[27px] mobile:max-tablet:bottom-[14px] mobile:max-tablet:right-11"
+              alt=""
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/ui/NavLink.tsx b/src/ui/NavLink.tsx
index d915159..928c827 100644
--- a/src/ui/NavLink.tsx
+++ b/src/ui/NavLink.tsx
@@ -1,32 +1,11 @@
 import { Link } from 'react-router-dom';
-import { useWindowWidth } from '../hooks/useWindowWidth';
 
 export function NavLink({ text, route }: { text: string; route: string }) {
-  const width = useWindowWidth();
-
   return (
     <Link
       className={
-        'border-x border-[#3D425C] desktop:block mobile:hidden py-[30px]'
+        'border-l border-[#3D425C] mobile:hidden py-[30px] px-10 min-[1350px]:block'
       }
-      style={{
-        paddingLeft:
-          width <= 1600 && width >= 1024
-            ? ((width - 1024) / (1600 - 1024)) * 25 + 15
-            : 40,
-        paddingRight:
-          width <= 1600 && width >= 1024
-            ? ((width - 1024) / (1600 - 1024)) * 25 + 15
-            : 40,
-        paddingTop:
-          width <= 1600 && width >= 1024
-            ? ((width - 1024) / (1600 - 1024)) * 3 + 27
-            : 30,
-        paddingBottom:
-          width <= 1600 && width >= 1024
-            ? ((width - 1024) / (1600 - 1024)) * 3 + 27
-            : 30,
-      }}
       to={route}
     >
       {text}