reclampling text

src/components/Layout/Header.tsx

@@ -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="pb-8 font-medium desktop:block mobile:max-desktop:hidden text-[clamp(64px,6vw,96px)] leading-[clamp(57.6px,5.4vw,86.54px)]">
+        <h1 className="pb-8 font-medium desktop:block mobile:max-desktop:hidden tablet-figma:text-[clamp(64px,64px+(100vw-768px)/832*32,96px)] tablet-figma:leading-[clamp(57.6px,57.6px+(100vw-768px)/832*29,86.54px)]">
           Создаем{' '}
           <span
             className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
@@ -18,7 +18,7 @@ export function Header() {
           </span>{' '}
           для промышленности и образования
         </h1>
-        <h1 className="tablet:text-[64px] mobile:text-[40px] font-medium tablet:leading-[57px] mobile:leading-9 desktop:hidden mobile:max-desktop:block">
+        <h1 className="font-medium desktop:hidden mobile:max-desktop:block mobile:max-tablet-figma:text-[clamp(40px,40px+(100vw-360px)/408*24,64px)] tablet-figma:text-[64px] mobile:max-tablet-figma:leading-[clamp(36px,36px+(100vw-360px)/408*21.6,57.6px)] tablet-figma:leading-[57.6px]">
           Интерактивные тренажеры{' '}
           <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-[clamp(0px,2vw,32px)] max-w-[768px] desktop:block mobile:max-desktop:hidden desktop:leading-[clamp(0px,2vw,32px)]">
+        <h2 className="tablet-figma:text-[clamp(20px,20px+(100vw-768px)/832*12,32px)] max-w-[768px] desktop:block mobile:max-desktop:hidden tablet-figma:leading-[clamp(20px,20px+(100vw-768px)/832*12,32px)]">
           Помогаем сократить затраты на обучение, повысить безопасность и
           производительность
         </h2>

src/components/Layout/Navbar.tsx

@@ -23,7 +23,7 @@ export function Navbar() {
           <NavLink text="Варианты комплектации" route="/" />
           <NavLink text="Проекты" route="/" />
           <NavLink text="События" route="/" />
-          <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 className="tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] mobile:max-tablet-figma: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>
           {!menuOpen && <LangToggler lang={lang} />}
@@ -51,7 +51,7 @@ export function Navbar() {
           <BurgerLink route="/" text="Проекты" />
           <BurgerLink route="/" text="События" />
           <div className="grid mobile:max-tablet:grid-cols-[216px_1fr_1fr] tablet:grid-cols-2">
-            <button className="text-[#ffffff] desktop:text-lg tablet:text-base tablet:hidden font-semibold bg-gradient-to-r from-[#798FFF] to-[#D375FF] border-x border-[#3D425C] py-[30px] px-10">
+            <button className="text-[#ffffff] tablet:hidden font-semibold leading-4 bg-gradient-to-r from-[#798FFF] to-[#D375FF] border-x border-[#3D425C] py-[30px] px-10">
               Оставить заявку
             </button>
             <ChooseLang lang="RU" />
@@ -67,7 +67,7 @@ function BurgerLink({ text, route }: { text: string; route: string }) {
   return (
     <Link
       to={route}
-      className="flex px-10 py-6 gap-1 text-[#ffffff] mobile:text-base desktop:text-lg bg-[#14161F] w-full font-semibold border-[#3D425C] border-b hover:bg-[#3D425C] active:bg-[#14161F]"
+      className="flex px-10 py-6 gap-1 text-[#ffffff] mobile:text-base mobile:leading-4 tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] bg-[#14161F] w-full font-semibold border-[#3D425C] border-b hover:bg-[#3D425C] active:bg-[#14161F]"
     >
       <img src="src/assets/cube.svg" alt="" />
       {text}
@@ -89,7 +89,7 @@ function ChooseLang({ lang }: { lang: 'RU' | 'EN' }) {
       <button
         onClick={() => updateLang(lang)}
         className={
-          'text-[#ffffff] w-full h-full desktop:text-lg tablet:text-base font-semibold bg-[#14161F] hover:bg-[#3D425C] active:bg-[#14161F]'
+          'text-[#ffffff] w-full h-full tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] font-semibold bg-[#14161F] hover:bg-[#3D425C] active:bg-[#14161F]'
         }
       >
         {lang}
@@ -104,7 +104,7 @@ function LangToggler({ lang }: { lang: Lang }) {
     <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 text-[clamp(0px,1.125vw,18px)]"
+        className="mx-6 h-full gap-x-1 items-center flex text-[#ffffff] font-semibold box-border text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)]"
       >
         {lang}
         <img src="src/assets/arrow_down.svg" alt="" />

src/components/Main/Decreasing.tsx

@@ -1,7 +1,7 @@
 import { MiniTitle } from '../../ui/MiniTitle';
 import { Title } from '../../ui/Title';
 
-export function Pluses() {
+export function Decreasing() {
   return (
     <div className="desktop:py-[70px] mobile:py-14 desktop:px-10 tablet:px-6 mobile:px-4">
       <Title className="tablet:block mobile:max-tablet:hidden">
@@ -32,36 +32,30 @@ export function Pluses() {
         производительность
       </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>
+        <MiniTitle text="снижение" className="tablet:hidden mb-2" />
         <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">
             <Plus text="снижение количества несчастных случаев" />
-            <p className="text-[#52587A]">[01]</p>
+            <Number text="[01]" />
           </li>
           <li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
             <Plus text="уменьшение количества ошибок при ТО и ППР" />
-            <p className="text-[#52587A]">[02]</p>
+            <Number text="[02]" />
           </li>
           <li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
             <Plus text="меньше случаев внеплановой остановки оборудования" />
-            <p className="text-[#52587A]">[03]</p>
+            <Number text="[03]" />
           </li>
           <li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
             <Plus text="снижение расходов на закупку реальной техники и оборудования для обучения" />
-            <p className="text-[#52587A]">[04]</p>
+            <Number text="[04]" />
           </li>
           <li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
             <Plus text="сокращение сроков обучения" />
-            <p className="text-[#52587A]">[05]</p>
+            <Number text="[05]" />
           </li>
         </ul>
-        <img
-          // className="desktop:w-[352px] desktop:h-[280px] tablet:w-[262px] tablet:h-[168px]"
-          src="src/assets/effect.png"
-          alt=""
-        />
+        <img src="src/assets/effect.png" alt="" />
       </div>
     </div>
   );
@@ -69,7 +63,15 @@ export function Pluses() {
 
 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">
+    <p className="text-[#ffffff] tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(21.6px,21.6px+(100vw-768px)/832*2.7,24.3px)] mobile:max-tablet-figma:text-[clamp(14px,14px+(100vw-360px)/408*2,16px)]">
+      {text}
+    </p>
+  );
+}
+
+function Number({ text }: { text: string }) {
+  return (
+    <p className="text-[#52587A] tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[clamp(16.8px,16px+(100vw-768px)/832*2.8),19.6px)] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[16.8px]">
       {text}
     </p>
   );

src/components/Main/Efficiency.tsx

@@ -23,7 +23,7 @@ export function Effeciency() {
               title={'готовность к опасным ситуациямние выше на'}
             />
           </div>
-          <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]">
+          <p className="text-[#ffffff] font-medium tablet-figma:text-[clamp(24px,24px+(100vw-768px)/832*8,32px)] tablet-figma:leading-[clamp(24px,24px+(100vw-768px)/832*8,32px)] mobile:max-tablet-figma:text-[clamp(20px,20px+(100vw-768px)/832*4,24px)] mobile:max-tablet-figma:leading-[clamp(20px,20px+(100vw-768px)/832*4,24px)] mobile:text-xl mobile:leading-5 max-w-[752px]">
             В тренажере человек принимает решения так же, как в реальном мире,{' '}
             <span className="opacity-60">
               активируя те же нейронные цепочки в мозгу. Это позволяет добиться
@@ -55,10 +55,10 @@ function Figure({
       }}
     >
       <div className="text-[#ffffff] flex flex-col justify-between py-6">
-        <h6 className="desktop:font-medium desktop:text-[clamp(12px,0.87vw,14px)] mobile:text-xs">
+        <h6 className="desktop:font-medium tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] mobile:max-tablet-figma:text-xs tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-768px)/832*2.8,19.6px)] mobile:max-tablet-figma:leading-[16.8px]">
           {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]">
+        <h1 className="font-medium flex items-center tablet-figma:text-[clamp(64px,64px+(100vw-768px)/832*32,96px)] tablet-figma:leading-[clamp(57.6px,5.4vw,86.4px)] mobile:text-[64px] mobile:leading-[57.6px]">
           {percents}
           <span className="desktop:text-[clamp(32px,4vw,64px)] desktop:leading-[clamp(32px,3.6vw,57.6px)] mobile:text-[32px] mobile:leading-8">
             %

src/components/Main/Products.tsx

@@ -53,7 +53,7 @@ function TabButton({
     <button
       onClick={onClick}
       className={
-        '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 ' +
+        'active:bg-[#798FFF] text-[#ffffff] font-semibold rounded-lg px-5 py-[13.5px] tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] mobile:max-tablet-figma:text-base mobile:max-tablet-figma:leading-4 text-nowrap text-clip bg-text-gradient ' +
         className
       }
     >
@@ -79,7 +79,7 @@ function TeachingItem({
         className="mobile:max-tablet:hidden tablet:max-desktop:mb-[14px]"
       />
       <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]">
+        <p className="text-[#ffffff] flex items-center gap-x-2 font-medium tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(19.2px,19.2px+(100vw-768px)/832*2.2,21.6px)] mobile:max-tablet-figma:text-[clamp(14px,14px+(100vw-360px)/408*2,16px)] mobile:max-tablet-figma:leading-[clamp(16.8px,16.8px+(1000vw-360px)/408*2.4,19.2px)] mb-2">
           <img
             src={`src/assets/${iconType}_icon.svg`}
             alt=""
@@ -87,7 +87,7 @@ function TeachingItem({
           />
           {title}
         </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]">
+        <p className="text-[#ffffff] tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-768px)/832*2.6,19.6px)] mobile:text-xs mobile:leading-[16.8px]">
           {text}
         </p>
       </div>
@@ -101,7 +101,7 @@ function TeachingItems() {
       <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 tablet:max-tablet-figma:bg-[length:40%]">
           <div className="tablet:max-desktop:max-w-[326px] mobile:max-tablet:border-b border-[#3D425C]">
-            <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 className="text-[#ffffff] font-medium tablet:mb-8 tablet-figma:text-[clamp(24px,24px+(100vw-768px)/832*8,32px)] tablet-figma:leading-[clamp(24px,24px+(100vw-768px)/832*4.8,28.8px)] mobile:max-tablet-figma:text-[clamp(20px,20px+(100vw-360px)/408*4,24px)] mobile:max-tablet-figma:leading-[clamp(20px,20px+(100vw-360px)/408*4,24px)]">
               Промышленные тренажеры виртуальной реальности
             </h1>
             <p className="desktop:hidden tablet:max-desktop:mt-11 mobile:max-tablet:mt-2 text-xs text-[#ffffff]">

src/components/Main/Trainings.tsx

@@ -1,7 +1,9 @@
+import { Title } from '../../ui/Title';
+
 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">
+      <Title className="desktop:mb-14 mobile:mb-6">
         Предлагаем различные{' '}
         <span
           className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
@@ -14,7 +16,7 @@ export function Trainings() {
           варианты комплектации тренажеров
         </span>
         , основываясь на специфике вашего тренировочного процесса
-      </h1>
+      </Title>
       <div className="desktop:pl-[257px] desktop:max-w-[1133px]">
         <TrainingsFeature
           order="[01]"
@@ -53,7 +55,7 @@ function TrainingsFeature({
   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">
+        <h1 className="font-medium 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]">

src/pages/MainPage.tsx

@@ -1,5 +1,5 @@
 import { Video } from '../components/Main/Video';
-import { Pluses } from '../components/Main/Pluses';
+import { Decreasing } from '../components/Main/Decreasing';
 import { Effeciency } from '../components/Main/Efficiency';
 import { Products } from '../components/Main/Products';
 import { Teaching } from '../components/Main/Teaching';
@@ -14,7 +14,7 @@ export function MainPage() {
   return (
     <>
       <Video />
-      <Pluses />
+      <Decreasing />
       <Effeciency />
       <Products />
       <Teaching />

src/ui/MiniTitle.tsx

@@ -8,7 +8,7 @@ export function MiniTitle({
   return (
     <h2
       className={
-        '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 ' +
+        'flex gap-1 items-center self-start text-[#ffffff] uppercase opacity-80 font-medium tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] mobile:max-desktop:text-xs desktop:max-w-60 w-full ' +
         className
       }
     >

src/ui/NavLink.tsx

@@ -4,7 +4,7 @@ export function NavLink({ text, route }: { text: string; route: string }) {
   return (
     <Link
       className={
-        '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]'
+        'text-[#ffffff] desktop:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] font-semibold border-l border-[#3D425C] mobile:hidden py-[30px] px-10 min-[1350px]:block  hover:bg-[#3D425C] active:bg-[#14161F]'
       }
       to={route}
     >

src/ui/Title.tsx

@@ -7,7 +7,7 @@ export function Title({
   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)] ' +
+        'font-medium text-[#ffffff] tablet-figma:text-[clamp(40px,40px+(100vw-768px)/832*24,64px)] tablet-figma:leading-[clamp(40px,40px+(100vw-768px)/832*17.6,57.6px)] mobile:max-tablet-figma:text-[clamp(28px,28px+(100vw-360px)/408*12,40px)] mobile:max-tablet-figma:leading-[clamp(28px,28px+(100vw-360px)/408*12,40px)] ' +
         className
       }
     >