upd smth

src/components/Main/Contacts.tsx

@@ -15,7 +15,7 @@ export function Contacts() {
 
   return (
     <div className="sm:grid lg:grid-cols-12 sm:grid-cols-2 lg:gap-x-4 sm:gap-x-14 lg:gap-y-[68px] pb-20 pt-[70px]">
-      <h2 className="font-medium lg:col-span-7 sm:col-span-full h2 max-lg:mb-6">
+      <h2 className="lg:col-span-7 sm:col-span-full h2 max-lg:mb-6 font-medium">
         Хотите использовать интерактивные тренажеры в обучении?
         <br />
         <span className="text-gradient">Давайте обсудим детали</span>
@@ -30,13 +30,13 @@ export function Contacts() {
             />
           </div>
         }
-        className="self-end row-start-2 px-6 py-4 lg:col-span-3 sm:max-lg:mb-20 max-sm:mb-14"
+        className="lg:col-span-3 sm:max-lg:mb-20 max-sm:mb-14 self-end row-start-2 px-6 py-4"
         width="full"
         onClick={() => setModal(<ModalWithForm />)}
       >
         Оставить заявку
       </Button>
-      <div className="space-y-3 lg:col-start-9 lg:col-span-4 sm:col-span-1 sm:col-start-1 max-sm:mb-8">
+      <div className="lg:col-start-9 lg:col-span-4 sm:col-span-1 sm:col-start-1 max-sm:mb-8 space-y-3">
         <h4 className="mb-1 text-xl font-medium">Свяжитесь с нами</h4>
         <Button
           color="secondary"
@@ -61,9 +61,9 @@ export function Contacts() {
           <span className="btn-text opacity-80">Позвонить</span>
         </Button>
       </div>
-      <div className="col-start-2 space-y-4 lg:col-start-9 lg:col-span-4 lg:row-start-2 sm:row-start-3 lg:self-end sm:flex sm:flex-col sm:justify-between">
-        <h4 className="font-medium h4">Социальные сети</h4>
-        <div className="flex gap-x-2">
+      <div className="lg:col-start-9 lg:col-span-4 lg:row-start-2 sm:row-start-3 lg:self-end sm:flex sm:flex-col sm:justify-between col-start-2 space-y-4">
+        <h4 className="h4 font-medium">Социальные сети</h4>
+        <div className="gap-x-2 flex">
           <Link
             to={'https://www.youtube.com/@GRAFFtech'}
             className="p-4 rounded-full opacity-80 border-[#3D425C] border hover:border-[#52587A] transition-all"
@@ -71,7 +71,7 @@ export function Contacts() {
             <YouTubeIcon />
           </Link>
           <Link
-            to={'https://vk.com/graff.interactive'}
+            to={'https://vk.com/graffinteractive?from=groups'}
             className="p-4 rounded-full opacity-80 border-[#3D425C] border hover:border-[#52587A] transition-all"
           >
             <VKIcon />

src/components/Main/Distance.tsx

@@ -7,25 +7,25 @@ export function Distance() {
       itemType="http://schema.org/Distance"
       className="lg:py-[100px] py-14"
     >
-      <Title className="mb-6 lg:w-4/5 lg:mb-14">
-        Платформа GRAFF.training поволяет осуществлять
+      <Title className="lg:w-4/5 lg:mb-14 mb-6">
+        Платформа GRAFF.training позволяет осуществлять
         <span className="text-gradient"> дистанционное обучение</span>{' '}
         с&nbsp;любого устройства
       </Title>
       <div className="sm:grid lg:grid-cols-12 gap-x-4 gap-y-6">
-        <p className="col-span-6 row-start-1 text-xl lg:col-start-1 max-sm:mb-6">
+        <p className="lg:col-start-1 max-sm:mb-6 col-span-6 row-start-1 text-xl">
           Обучающиеся будут получать доступ к системе с высоко детализированной
           3D графикой для прохождения сценариев на любом устройстве, без
           необходимости установки дополнительного ПО.
         </p>
-        <div className="self-stretch col-span-6 row-start-2 lg:col-start-1 max-sm:mb-4">
+        <div className="lg:col-start-1 max-sm:mb-4 self-stretch col-span-6 row-start-2">
           <img
             src="/images/distance/datamining_2.jpg"
             alt="дистанционное обучение с любого устройства"
             className="object-cover object-[bottom_-1px_left_-1px]"
           />
         </div>
-        <div className="self-stretch col-span-3 row-start-2 lg:col-start-7 lg:col-span-6">
+        <div className="lg:col-start-7 lg:col-span-6 self-stretch col-span-3 row-start-2">
           <img
             src="/images/distance/datamining_1.jpg"
             alt="дистанционное обучение с любого устройства"

src/components/Main/Teaching.tsx

@@ -9,7 +9,7 @@ export function Teaching() {
       className="lg:py-[100px] lg:mb-[60px] py-14 md:grid lg:grid-cols-12 gap-x-4"
     >
       <Title className="max-lg:hidden 2xl:mb-[38px] mb-8 top-20 h-fit col-span-5 row-span-full lg:sticky">
-        <span className="text-gradient">Тренинг модуль</span>
+        <span className="text-gradient">Тренинг-модуль</span>
         <br className="max-lg:hidden" />
         <span className="lg:hidden">&nbsp;</span>помогает осуществлять
         координацию между всеми участниками процесса
@@ -26,7 +26,7 @@ export function Teaching() {
 
 function TeachingFeaturesForDesktop() {
   return (
-    <div className="col-span-7 space-y-4 max-lg:hidden">
+    <div className="max-lg:hidden col-span-7 space-y-4">
       <div
         itemProp="processManagment"
         itemType="https://schema.org/ProcessManagment"
@@ -125,7 +125,7 @@ function TeachingFeaturesForDesktop() {
 
 function TeachingFeaturesForOtherScreens() {
   return (
-    <div className="flex flex-col -mx-4 lg:hidden sm:-mx-6">
+    <div className="lg:hidden sm:-mx-6 flex flex-col -mx-4">
       <div
         itemProp="processManagment"
         itemType="https://schema.org/ProcessManagment"

src/components/Main/Trainings.tsx

@@ -22,7 +22,7 @@ export function Trainings() {
         itemType="http://schema.org/TrainingsEquipmentsFeatures"
         itemScope
         itemProp="features"
-        className="grid-cols-8 sm:grid lg:grid-cols-12 gap-x-4"
+        className="sm:grid lg:grid-cols-12 gap-x-4 grid-cols-8"
       >
         <TrainingsFeature
           order={1}
@@ -34,7 +34,7 @@ export function Trainings() {
           order={2}
           src="/images/trainings/stand.png"
           title="Cтенды"
-          text="Отработки навыков вождение и управления техникой. Работа с панелями управления"
+          text="Отработки навыков вождения и управления техникой. Работа с панелями управления"
         />
         <TrainingsFeature
           order={3}
@@ -73,25 +73,25 @@ function TrainingsFeature({
         ref={ref}
         className="lg:first:h-[200px] lg:last:h-[200px] lg:h-[176px] sm:flex max-sm:space-y-[42px] items-stretch justify-between sm:py-10 max-sm:pt-5"
       >
-        <div className="col-span-1 sm:space-y-4 lg:w-1/3 sm:w-1/2">
-          <h3 className="font-medium max-sm:mb-2 h3">{title}</h3>
+        <div className="sm:space-y-4 lg:w-1/3 sm:w-1/2 col-span-1">
+          <h3 className="max-sm:mb-2 h3 font-medium">{title}</h3>
           <p className="opacity-60 l-text">{text}</p>
         </div>
-        <div className="flex items-end justify-between sm:hidden">
+        <div className="sm:hidden flex items-end justify-between">
           <p className="text-[#52587A] m-text mb-5">[0{order}]</p>
           <div className="flex flex-col items-center">
             <img src={src} alt={title} className="relative z-30 w-[50vw]" />
             <VrBacklightIcon className="absolute w-[36vw] h-fit" />
           </div>
         </div>
-        <div className="hidden md:flex">
+        <div className="md:flex hidden">
           <motion.div
             initial={{ opacity: 0, scale: 0.8 }}
             animate={{ opacity: +hovered, scale: 1 }}
             transition={{
               duration: 0.4,
             }}
-            className="items-center justify-center hidden -my-10 lg:flex"
+            className="lg:flex items-center justify-center hidden -my-10"
           >
             <img
               src={src}
@@ -100,7 +100,7 @@ function TrainingsFeature({
             />
             <VrBacklightIcon className="absolute w-[24vw]" />
           </motion.div>
-          <div className="flex items-center justify-center lg:hidden">
+          <div className="lg:hidden flex items-center justify-center">
             <img
               src={src}
               className="w-[27vw] relative z-20 h-[calc(27vw*0.6)]"
@@ -119,7 +119,7 @@ function TrainingsFeature({
         </p>
       </div>
       <AppearanceHr
-        className="hidden group-last:block"
+        className="group-last:block hidden"
         delay={0.5 * (order + 1)}
       />
     </div>