media compressed

public/efficiency/left_variance_figure.svg

@@ -1,6 +0,0 @@
-<svg width="104" height="241" viewBox="0 0 104 241"  xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.4">
-<path opacity="0.5" d="M0 24.0002C0 10.7454 10.7452 0.000244141 24 0.000244141C37.2548 0.000244141 48 10.7454 48 24.0002V241H0V24.0002Z" fill="#798FFF"/>
-<path d="M56 144.5C56 131.245 66.7452 120.5 80 120.5C93.2548 120.5 104 131.245 104 144.5V241H56V144.5Z" fill="#798FFF"/>
-</g>
-</svg>

public/efficiency/right_variance_figure.svg

@@ -1,6 +0,0 @@
-<svg width="104" height="241" viewBox="0 0 104 241"  xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.4">
-<path opacity="0.5" d="M0 196C0 182.745 10.7452 172 24 172C37.2548 172 48 182.745 48 196V241H0V196Z" fill="#798FFF"/>
-<path d="M56 25.0002C56 11.7454 66.7452 1.00024 80 1.00024C93.2548 1.00024 104 11.7454 104 25.0002V242H56V25.0002Z" fill="#798FFF"/>
-</g>
-</svg>

src/components/Layouts/Footer.tsx

@@ -3,7 +3,7 @@ import { LogoWithTextIcon } from '../icons/LogoWithTextIcon';
 
 export function Footer() {
   return (
-    <footer className="sm:grid xl:grid-cols-[2fr_1fr_1fr] sm:grid-cols-2 sm:max-xl:grid-rows-2 bg-[#14161F]">
+    <footer className="sm:grid xl:grid-cols-[2fr_1fr_1fr] sm:grid-cols-2 sm:max-xl:grid-rows-2">
       <div className="flex sm:items-center max-sm:flex-col lg:px-10 sm:px-6 px-4 sm:py-9 py-4 border-t border-[#3D425C] gap-6 sm:max-xl:row-start-1 sm:max-xl:col-span-2">
         <Link to={'/'} className="outline-none">
           <LogoWithTextIcon className="h-[50px]" />
@@ -23,7 +23,7 @@ export function Footer() {
       <div className="lg:px-10 sm:px-6 px-4 py-[30px] flex items-center border-t xl:border-l sm:border-r border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-1">
         <div>
           <Contact type="email" text="info@graff.tech" />
-          <Contact type="phone" text="+7 800 770 00 67" />
+          <Contact type="phone" text="8 800 770 00 67" />
         </div>
         <div className="font-medium p-[14px] border border-[#3D425C] rounded-full m-text">
           RU
@@ -58,7 +58,7 @@ function Contact({
         to={type === 'email' ? `mailto:${text}` : `tel:${formatedTel}`}
         className={'l-text outline-none ' + className}
       >
-        {formatedTel}
+        {text}
       </Link>
     </div>
   );

src/components/Layouts/Header.tsx

@@ -28,7 +28,7 @@ export function Header() {
   const width = useWindowWidth();
 
   return (
-    <header className="relative z-10s w-full bg-[#14161F]">
+    <header className="w-full">
       <nav className="flex justify-between border-b border-[#3D425C] lg:pl-10 pl-4 lg:max-h-[72px] min-h-16">
         <Link to={'/'} className="flex items-center outline-none">
           <LogoIcon className="lg:hidden" />

src/components/Main/Decreasing.tsx

@@ -31,7 +31,7 @@ export function Decreasing() {
             ))}
           </div>
           <Button
-            className="w-full py-4 text-xl font-bold xl:w-1/3 lg:w-1/3 sm:w-1/2"
+            className="w-full py-4 text-xl font-bold xl:w-1/2 lg:w-1/3 sm:w-1/2"
             icon={
               <div className="p-2 bg-white rounded-full">
                 <ClassNameWrapper
@@ -47,7 +47,7 @@ export function Decreasing() {
         </div>
         <div className="xl:col-start-2 col-span-full">
           <video
-            src="/decreasing/decreasing.mp4"
+            src="/video/decreasing.mp4"
             autoPlay
             playsInline
             muted

src/components/Main/Distance.tsx

@@ -18,16 +18,20 @@ export function Distance() {
           3D графикой для прохождения сценариев на любом устройстве, без
           необходимости установки дополнительного ПО.
         </p>
-        <img
-          src="/distance/datamining_2.jpg"
-          alt="дистанционное обучение с любого устройства"
-          className="self-stretch object-cover col-span-6 row-start-2 lg:col-start-1 max-sm:mb-4"
-        />
-        <img
-          src="/distance/datamining_1.jpg"
-          alt="дистанционное обучение с любого устройства"
-          className="self-stretch object-cover h-full col-span-3 row-start-2 lg:col-start-7 lg:col-span-6"
-        />
+        <div className="self-stretch col-span-6 row-start-2 lg:col-start-1 max-sm:mb-4">
+          <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">
+          <img
+            src="/images/distance/datamining_1.jpg"
+            alt="дистанционное обучение с любого устройства"
+            className="object-cover object-[bottom_-1px_left_50%] h-full"
+          />
+        </div>
       </div>
     </div>
   );

src/components/Main/Efficiency.tsx

@@ -63,7 +63,10 @@ function Figure({
   const figureRef = useRef<HTMLSpanElement>(null);
 
   const motionValue = useMotionValue<number>(0);
-  const springValue = useSpring(motionValue, { damping: 100, stiffness: 100 });
+  const springValue = useSpring(motionValue, {
+    damping: 100,
+    stiffness: 100,
+  });
   const isInView = useInView(root, { once: true, margin: '-200px' });
 
   useEffect(() => {
@@ -84,7 +87,7 @@ function Figure({
     <motion.div
       ref={root}
       initial={{
-        background: `bottom right / 45% url(/efficiency/${type}.png) no-repeat, bottom right / 0% url(/efficiency/efficiency_backlight.svg) no-repeat`,
+        background: `bottom right / 45% url(/images/efficiency/${type}.png) no-repeat, bottom right / 0% url(/images/efficiency/efficiency_backlight.svg) no-repeat`,
       }}
       whileHover={{
         backgroundSize: '45%,100%',

src/components/Main/Ellipse.tsx

@@ -36,7 +36,7 @@ export function Ellipse() {
     <div
       ref={ref}
       style={{ top: mousePos[1], left: mousePos[0] }}
-      className="fixed -z-[9] bg-[url('/Ellipse.png')] bg-cover bg-no-repeat bg-center -translate-y-[50%] -translate-x-[50%] aspect-[348.75/262.77] w-[21.75vw]"
+      className="fixed -z-[9] bg-[url('/Ellipse.png')] bg-transparent bg-cover bg-no-repeat bg-center -translate-y-[50%] -translate-x-[50%] aspect-[348.75/262.77] w-[21.75vw]"
     />
   );
 }

src/components/Main/MultiUser.tsx

@@ -17,7 +17,7 @@ export function MultiUser() {
         <br className="lg:hidden" />
         режим обучения
       </Title>
-      <div className="max-lg:hidden lg:col-span-6 col-start-1 lg:row-span-2 sm:col-span-3 lg:row-start-2 sm:row-start-3 sm:row-span-1 bg-[url(/availables/image.png)] bg-cover bg-no-repeat bg-left-top" />
+      <div className="max-lg:hidden lg:col-span-6 col-start-1 lg:row-span-2 sm:col-span-3 lg:row-start-2 sm:row-start-3 sm:row-span-1 bg-[url(/images/availables/image.jpg)] bg-cover bg-no-repeat bg-[left_bottom_-1px]" />
       <div
         itemProp="multiUserFeatures"
         itemScope
@@ -37,7 +37,7 @@ export function MultiUser() {
           text="координация действий между несколькими сотрудниками"
         />
       </div>
-      <div className="lg:hidden lg:col-span-6 col-start-1 lg:row-span-2 sm:col-span-3 lg:row-start-2 sm:row-start-3 sm:row-span-1 bg-[url(/availables/image.png)] bg-cover bg-no-repeat bg-center sm:aspect-[728/356] aspect-[3/2] max-sm:-mx-6" />
+      <div className="lg:hidden lg:col-span-6 col-start-1 lg:row-span-2 sm:col-span-3 lg:row-start-2 sm:row-start-3 sm:row-span-1 bg-[url(/images/availables/image.jpg)] bg-cover bg-no-repeat bg-center sm:aspect-[728/356] aspect-[3/2] max-sm:-mx-6" />
       <AppearanceText
         className="col-span-7 col-start-1 mt-8 lg:col-span-6 max-lg:mt-6"
         splits={[
@@ -74,7 +74,7 @@ function MultiUserFeature({
     <div
       itemProp={type}
       ref={ref}
-      className="max-sm:border-t max-sm:last:border-b sm:max-lg:border-y max-h-60 sm:max-lg:[&:not(:last-child)]:border-r bg-right-bottom bg-no-repeat flex flex-col bg-[url(/availables/highlight.png)] bg-[length:0%_0%] hover:bg-[length:100%_100%] transition-all sm:min-h-[280px] duration-300 w-full justify-between items-start px-10 py-6 lg:border-t lg:first:border-r lg:last:border-b border-[#3D425C] col-span-1 lg:last:col-span-2 max-sm:aspect-[3/2]"
+      className="max-sm:border-t max-sm:last:border-b sm:max-lg:border-y max-h-60 sm:max-lg:[&:not(:last-child)]:border-r bg-right-bottom bg-no-repeat flex flex-col bg-[url(/images/availables/highlight.jpg)] bg-[length:0%_0%] lg:hover:bg-[length:100%_100%] transition-all sm:min-h-[280px] duration-300 w-full justify-between items-start px-10 py-6 lg:border-t lg:first:border-r lg:last:border-b border-[#3D425C] col-span-1 lg:last:col-span-2 max-sm:aspect-[3/2]"
     >
       <div className="max-lg:hidden">
         {getIcon(type, hovered, 'mb-4 max-lg:hidden w-14 h-14')}

src/components/Main/Products/Products.tsx

@@ -64,7 +64,7 @@ export function Products() {
       id="products"
       itemScope
       itemType="http://schema.org/Products"
-      className="lg:pt-[100px] sm:max-lg:pt-[70px] max-sm:py-14 lg:-mx-10 sm:-mx-6 -mx-4 sm:space-y-[500px] space-y-10"
+      className="lg:pt-[100px] sm:max-lg:pt-[70px] max-sm:py-14 lg:-mx-10 sm:-mx-6 -mx-4 sm:space-y-[500px] space-y-10 overflow-clip"
     >
       <IndustrialTab ref={ref1} sticked={stiked1} />
       <SimulatorsTab ref={ref2} sticked={stiked2} />

src/components/Main/Products/Tabs/ForTeachingTab.tsx

@@ -1,5 +1,4 @@
 import { forwardRef, useRef } from 'react';
-import { useHover } from 'usehooks-ts';
 import { getIcon } from '../../../../utils/getIcon';
 import { useInView } from 'framer-motion';
 
@@ -21,7 +20,7 @@ export const ForTeachingTab = forwardRef<HTMLDivElement>((_, ref) => (
       <div className="lg:space-y-14 sm:space-y-10 space-y-6 sm:max-w-[calc(413/768*100vw)] lg:mt-14 sm:mt-10 mt-6">
         <div
           itemProp="creating"
-          className="lg:space-y-7 space-y-4 xl:max-w-[calc(507/1600*100vw)] lg:max-w-[40vw] flex-1"
+          className="lg:space-y-7 space-y-4 lg:max-w-[40vw] flex-1"
         >
           <ForTeachingOption
             title="cоздание обучающих VR систем"
@@ -41,12 +40,12 @@ export const ForTeachingTab = forwardRef<HTMLDivElement>((_, ref) => (
         </div>
       </div>
       <img
-        src="/products/teaching/teaching.png"
+        src="/images/products/teaching/teaching.png"
         className="max-sm:hidden w-[calc(685/1600*100vw)] sm:self-start"
         alt="обучение"
       />
       <img
-        src="/products/teaching/teaching_mobile.png"
+        src="/images/products/teaching/teaching_mobile.png"
         className="mt-5 -mx-6 sm:hidden"
         alt="обучение"
       />
@@ -64,7 +63,6 @@ function ForTeachingOption({
   type: 'labs' | 'teaching';
 }) {
   const ref = useRef<HTMLDivElement>(null);
-  const hovered = useHover(ref);
   const isInView = useInView(ref, {
     margin: `0px 0px ${(ref.current?.clientHeight ?? 0) - window.innerHeight}px`,
   });
@@ -74,10 +72,10 @@ function ForTeachingOption({
       ref={ref}
       className="flex sm:gap-x-7 items-start sm:max-lg:pr-3 max-sm:pb-4 max-sm:border-b border-[#3D425C]"
     >
-      {getIcon(type, hovered, 'max-sm:hidden min-w-11')}
-      <div className="lg:pl-4 sm:pl-[13px] sm:border-l border-[#3D425C] w-[80%]">
+      {getIcon(type, true, 'max-sm:hidden min-w-11')}
+      <div className="lg:pl-4 sm:pl-[13px] sm:border-l border-[#3D425C] w-[90%]">
         <div className="flex items-center mb-1 sm:items-start sm:max-lg:flex-col max-sm:gap-x-2">
-          {getIcon(type, hovered || isInView, 'sm:hidden min-w-11')}
+          {getIcon(type, isInView, 'sm:hidden min-w-11')}
           <h4 className="font-medium lg:text-2xl sm:text-xl">{title}</h4>
         </div>
         <p className="opacity-60 l-text">{description}</p>

src/components/Main/Products/Tabs/IndustrialTab.tsx

@@ -1,6 +1,5 @@
 import { forwardRef, useRef } from 'react';
 import { getIcon } from '../../../../utils/getIcon';
-import { useHover } from 'usehooks-ts';
 import { useInView } from 'framer-motion';
 
 function TeachingItem({
@@ -13,7 +12,7 @@ function TeachingItem({
   iconType: 'danger' | 'service' | 'safety';
 }) {
   const ref = useRef<HTMLDivElement>(null);
-  const hovered = useHover(ref);
+
   const isInView = useInView(ref, {
     margin: `0px 0px -${window.innerHeight - (ref.current?.clientHeight ?? 0)}px`,
   });
@@ -24,10 +23,10 @@ function TeachingItem({
       ref={ref}
       className="sm:border-l-0 max-sm:border-l-0 max-sm:first:border-t-0 max-sm:border-t border-[#3D425C] sm:flex lg:items-start sm:gap-x-7 max-sm:mr-4 max-sm:first:pt-0 max-sm:pt-4"
     >
-      {getIcon(iconType, hovered, 'max-sm:hidden sm:max-lg:mb-[14px] min-w-11')}
+      {getIcon(iconType, true, 'max-sm:hidden sm:max-lg:mb-[14px] min-w-11')}
       <div className="sm:border-l border-[#3D425C] sm:pl-4">
         <div className="flex items-center mb-2 max-sm:gap-x-2">
-          {getIcon(iconType, hovered || isInView, 'sm:hidden min-w-11')}
+          {getIcon(iconType, isInView, 'sm:hidden min-w-11')}
           <h4 className="font-medium lg:text-2xl sm:text-xl">{title}</h4>
         </div>
         <p className="l-text opacity-60">{text}</p>
@@ -82,7 +81,7 @@ export const IndustrialTab = forwardRef<HTMLDivElement, { sticked: boolean }>(
         </div>
       </div>
       <img
-        src="/products/trainings/trainings_desktop.png"
+        src="/images/products/trainings/trainings_desktop.png"
         className={
           'absolute right-0 top-[121px] object-cover lg:w-[calc(1000/1600*100vw)] xl:w-[calc(1152/1600*100vw)] max-lg:hidden ' +
           (sticked ? 'transition-opacity opacity-0' : 'opacity-100')
@@ -90,7 +89,7 @@ export const IndustrialTab = forwardRef<HTMLDivElement, { sticked: boolean }>(
         alt="тренажеры"
       />
       <img
-        src="/products/trainings/trainings_tablet.png"
+        src="/images/products/trainings/trainings_tablet.png"
         className={
           'absolute right-0 top-[120px] object-cover w-[calc(438/768*100vw)] hidden sm:max-lg:block ' +
           (sticked ? 'transition-opacity opacity-0' : 'opacity-100')
@@ -98,7 +97,7 @@ export const IndustrialTab = forwardRef<HTMLDivElement, { sticked: boolean }>(
         alt="тренажеры"
       />
       <img
-        src="/products/trainings/trainings_mobile.png"
+        src="/images/products/trainings/trainings_mobile.png"
         className="object-cover object-center sm:hidden"
         alt="тренажеры"
       />

src/components/Main/Products/Tabs/SimulatorsTab.tsx

@@ -15,7 +15,7 @@ export const SimulatorsTab = forwardRef<HTMLDivElement, { sticked: boolean }>(
       itemProp="simulators"
       itemType="http://schema.org/Simulators"
       ref={ref}
-      className="lg:ml-[65px] lg:h-[85dvh] lg:min-w-[calc(100vw-65px)] sm:h-[90dvh] min-w-[100vw] h-[100dvh] sm:sticky -z-20 lg:top-[15dvh] sm:top-[10dvh] top-0 bg-[#14161F] lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 lg:space-y-12 sm:space-y-10 space-y-6 lg:border-l border-t border-[#3D425C]"
+      className="lg:ml-[65px] lg:h-[85dvh] lg:min-w-[calc(100vw-65px)] sm:h-[90dvh] min-w-[100vw] sm:sticky -z-20 lg:top-[15dvh] sm:top-[10dvh] top-0 bg-[#14161F] lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 lg:space-y-12 sm:space-y-10 space-y-6 lg:border-l border-t border-[#3D425C]"
     >
       <div
         className={
@@ -53,7 +53,7 @@ export const SimulatorsTab = forwardRef<HTMLDivElement, { sticked: boolean }>(
       >
         <div className="space-y-[10px] lg:w-[calc(498.5/1600*100vw)] sm:w-[calc(331/768*100vw)]">
           <img
-            src="/products/simulators/rzhd2.jpg"
+            src="/images/products/simulators/rzhd2.jpg"
             className="object-cover sm:max-lg:aspect-[331/292] max-sm:aspect-[328/172]"
             alt="ржд"
           />
@@ -64,7 +64,7 @@ export const SimulatorsTab = forwardRef<HTMLDivElement, { sticked: boolean }>(
         </div>
         <div className="space-y-[10px] lg:w-[calc(498.5/1600*100vw)] sm:w-[calc(331/768*100vw)]">
           <img
-            src="/products/simulators/rzhd.jpg"
+            src="/images/products/simulators/rzhd.jpg"
             className="object-cover sm:max-lg:aspect-[331/292] max-sm:aspect-[328/172]"
             alt="ржд"
           />

src/components/Main/Project.tsx

@@ -19,12 +19,9 @@ export const Project = forwardRef<HTMLDivElement, IProject<Media>>(
             style={{ backgroundImage: `url(${src})` }}
           />
         ) : (
-          <div
-            className="relative flex-1 overflow-hidden bg-center bg-no-repeat bg-cover"
-            style={{ backgroundImage: `url(${src[1]})` }}
-          >
+          <div className="relative flex-1 overflow-hidden">
             <video
-              src={src[0]}
+              src={src}
               muted
               loop
               playsInline

src/components/Main/Showreel.tsx

@@ -16,14 +16,14 @@ export function Showreel() {
   }, [setModal]);
 
   return (
-    <div className="lg:mb-[100px] sm:mb-[70px] mb-14 w-full relative aspect-[1551/616] flex justify-center items-center group">
+    <div className="lg:mb-[100px] sm:mb-[70px] mb-14 w-full relative flex justify-center items-center group">
       <video
         src="/video/showreel.mp4"
         autoPlay
         loop
         muted
         playsInline
-        className="w-full aspect-[21/10] object-cover self-stretch"
+        className="self-stretch object-cover w-full"
       />
       <button
         className="absolute z-10 lg:p-8 sm:p-6 p-4 rounded-full border group-hover:block hidden bg-[#14161F33]"

src/components/Main/Teaching.tsx

@@ -30,7 +30,7 @@ function TeachingFeaturesForDesktop() {
       <div
         itemProp="processManagment"
         itemType="https://schema.org/ProcessManagment"
-        className="p-10 relative aspect-[752/400] border border-[#3D425C] bg-[url(/teaching/highlight_desktop.png)] bg-[length:0%] hover:bg-[length:100%] bg-no-repeat bg-right-top transition-all overflow-hidden flex justify-between"
+        className="p-10 relative aspect-[752/400] border border-[#3D425C] bg-[url(/images/teaching/highlight.png)] bg-[length:0%] hover:bg-[length:100%] bg-no-repeat bg-right-top transition-all overflow-hidden flex justify-between"
       >
         <div className="space-y-2 max-w-[calc(380/1600*100vw)]">
           <TeachingFeatureTitle>Управление процессом</TeachingFeatureTitle>
@@ -41,12 +41,12 @@ function TeachingFeaturesForDesktop() {
           </TeachingFeatureDescription>
         </div>
         <img
-          src="/teaching/master_card.jpg"
+          src="/images/teaching/master_card.jpg"
           className="rounded-lg absolute max-w-[calc(198/1600*100vw)] left-[calc(321/1600*100vw)] bottom-10 z-10"
           alt="Управление процессом"
         />
         <img
-          src="/teaching/schedule_mini.jpg"
+          src="/images/teaching/schedule_mini.jpg"
           className="rounded-tl-2xl max-w-[calc(406/1600*100vw)] absolute top-[calc(69/400*100%)] left-[calc(475/1600*100vw)]"
           alt="Управление процессом"
         />
@@ -55,7 +55,7 @@ function TeachingFeaturesForDesktop() {
       <div
         itemProp="usersManagment"
         itemType="https://schema.org/UsersManagment"
-        className="p-10 relative aspect-[752/400] border border-[#3D425C] bg-[url(/teaching/highlight_desktop.png)] bg-[length:0%] hover:bg-[length:100%] bg-no-repeat bg-right-top transition-all flex justify-between gap-x-3 overflow-hidden"
+        className="p-10 relative aspect-[752/400] border border-[#3D425C] bg-[url(/images/teaching/highlight.png)] bg-[length:0%] hover:bg-[length:100%] bg-no-repeat bg-right-top transition-all flex justify-between gap-x-3 overflow-hidden"
       >
         <div className="space-y-2 max-w-[calc(380/752*100%)]">
           <TeachingFeatureTitle>Управление пользователями</TeachingFeatureTitle>
@@ -65,7 +65,7 @@ function TeachingFeaturesForDesktop() {
           </TeachingFeatureDescription>
         </div>
         <img
-          src="/teaching/modal.png"
+          src="/images/teaching/modal.png"
           className="-mr-10 rounded-lg"
           alt="Управление пользователями"
         />
@@ -74,7 +74,7 @@ function TeachingFeaturesForDesktop() {
       <div
         itemProp="teachingVideoRecording"
         itemType="https://schema.org/TeachingVideoRecording"
-        className="p-10 relative border border-[#3D425C] aspect-[752/400] bg-[url(/teaching/highlight_desktop.png)] bg-[length:0%] hover:bg-[length:100%] bg-no-repeat bg-right-top transition-all flex justify-between overflow-hidden"
+        className="p-10 relative border border-[#3D425C] aspect-[752/400] bg-[url(/images/teaching/highlight.png)] bg-[length:0%] hover:bg-[length:100%] bg-no-repeat bg-right-top transition-all flex justify-between overflow-hidden"
       >
         <div className="space-y-2 max-w-[calc(410/752*100%)]">
           <TeachingFeatureTitle>Видеозапись обучения</TeachingFeatureTitle>
@@ -84,12 +84,12 @@ function TeachingFeaturesForDesktop() {
           </TeachingFeatureDescription>
         </div>
         <img
-          src="/teaching/manage_video.jpg"
+          src="/images/teaching/manage_video.jpg"
           className="rounded-lg absolute z-30 max-w-[calc(174.75/1600*100vw)] right-[calc(183/752*100%)] top-[calc(256/400*100%)]"
           alt="Видеозапись обучения"
         />
         <img
-          src="/teaching/pinned_windows.jpg"
+          src="/images/teaching/pinned_windows.jpg"
           className="rounded-tl-lg absolute max-w-[calc(281/752*100%)] right-0 bottom-0 z-10"
           alt="Видеозапись обучения"
         />
@@ -98,7 +98,7 @@ function TeachingFeaturesForDesktop() {
       <div
         itemProp="teachingStats"
         itemType="https://schema.org/TeachingStats"
-        className="p-10 relative aspect-[752/400] border border-[#3D425C] bg-[url(/teaching/highlight_desktop.png)] bg-[length:0%] hover:bg-[length:100%] bg-no-repeat bg-right-top transition-all flex justify-between overflow-hidden"
+        className="p-10 relative aspect-[752/400] border border-[#3D425C] bg-[url(/images/teaching/highlight.png)] bg-[length:0%] hover:bg-[length:100%] bg-no-repeat bg-right-top transition-all flex justify-between overflow-hidden"
       >
         <div className="space-y-2 max-w-[calc(350/752*100%)]">
           <TeachingFeatureTitle>Статистика обучения</TeachingFeatureTitle>
@@ -109,12 +109,12 @@ function TeachingFeaturesForDesktop() {
           </TeachingFeatureDescription>
         </div>
         <img
-          src="/teaching/current_schedule.jpg"
+          src="/images/teaching/current_schedule.jpg"
           className="rounded-lg absolute max-w-[calc(222/1600*100vw)] right-[calc(225/1600*100vw)] top-[calc(198/400*100%)]"
           alt="Расписание"
         />
         <img
-          src="/teaching/stats.jpg"
+          src="/images/teaching/stats.jpg"
           className="rounded-lg absolute max-w-[calc(222/1600*100vw)] right-[calc(34/1600*100vw)] top-[calc(88/400*100%)]"
           alt="Статистика"
         />
@@ -129,7 +129,7 @@ function TeachingFeaturesForOtherScreens() {
       <div
         itemProp="processManagment"
         itemType="https://schema.org/ProcessManagment"
-        className="sm:flex justify-between max-sm:relative sm:aspect-[768/240] aspect-[6/5] order-1 border-t border-[#3D425C] sm:bg-[url(/teaching/highlight_tablet.png)] bg-[url(/teaching/highlight_mobile.png)] bg-[length:0%] hover:bg-[length:100%] bg-no-repeat bg-bottom transition-all sm:pt-6 sm:px-6 pt-5 px-5 overflow-hidden"
+        className="sm:flex justify-between max-sm:relative sm:aspect-[768/240] aspect-[6/5] order-1 border-t border-[#3D425C] sm:pt-6 sm:px-6 pt-5 px-5 overflow-hidden"
       >
         <div className="space-y-1">
           <TeachingFeatureTitle>
@@ -141,7 +141,7 @@ function TeachingFeaturesForOtherScreens() {
           </TeachingFeatureDescription>
         </div>
         <img
-          src="/teaching/modal.png"
+          src="/images/teaching/modal.png"
           className="rounded-md max-sm:absolute sm:-bottom-1 max-sm:left-[calc(101/360*100vw)] top-[calc(97/300*100%)]"
           alt="Управление пользователями"
         />
@@ -150,7 +150,7 @@ function TeachingFeaturesForOtherScreens() {
       <div
         itemProp="usersManagment"
         itemType="https://schema.org/UsersManagment"
-        className="overflow-hidden relative flex sm:aspect-[768/240] aspect-[36/30] sm:order-2 order-3 border-t border-[#3D425C] sm:bg-[url(/teaching/highlight_tablet.png)] bg-[url(/teaching/highlight_mobile.png)] bg-[length:0%] hover:bg-[length:100%] bg-no-repeat bg-bottom transition-all sm:pt-6 sm:px-6 pt-5 px-5"
+        className="overflow-hidden relative flex sm:aspect-[768/240] aspect-[36/30] sm:order-2 order-3 border-t border-[#3D425C] sm:pt-6 sm:px-6 pt-5 px-5"
       >
         <div className="space-y-1">
           <TeachingFeatureTitle>Видеозапись обучения</TeachingFeatureTitle>
@@ -160,12 +160,12 @@ function TeachingFeaturesForOtherScreens() {
           </TeachingFeatureDescription>
         </div>
         <img
-          src="/teaching/pinned_windows_mini.jpg"
+          src="/images/teaching/pinned_windows_mini.jpg"
           className="rounded-md absolute sm:max-w-[50vw] sm:left-[calc(417/768*100vw)] left-[calc(83/360*100vw)] max-sm:top-[calc(119/300*100%)] sm:mt-3"
           alt="Видеозапись обучения"
         />
         <img
-          src="/teaching/manage_video.jpg"
+          src="/images/teaching/manage_video.jpg"
           className="rounded-lg absolute sm:max-w-[calc(130/768*100vw)] max-w-[calc(130/360*100vw)] bottom-5 sm:bottom-[calc(1/12*100%)] sm:left-[calc(350/768*100vw)]"
           alt="Видеозапись обучения"
         />
@@ -174,7 +174,7 @@ function TeachingFeaturesForOtherScreens() {
       <div
         itemProp="teachingVideoRecording"
         itemType="https://schema.org/TeachingVideoRecording"
-        className="flex relative sm:aspect-[768/240] aspect-[6/5] border-t border-[#3D425C] order-2 sm:order-3 sm:bg-[url(/teaching/highlight_tablet.png)] bg-[url(/teaching/highlight_mobile.png)] bg-[length:0%] hover:bg-[length:100%] bg-no-repeat bg-bottom transition-all sm:pt-6 sm:px-6 pt-5 px-5 overflow-hidden"
+        className="flex relative sm:aspect-[768/240] aspect-[6/5] border-t border-[#3D425C] order-2 sm:order-3 sm:pt-6 sm:px-6 pt-5 px-5 overflow-hidden"
       >
         <div className="space-y-1">
           <TeachingFeatureTitle>Управление процессом</TeachingFeatureTitle>
@@ -185,12 +185,12 @@ function TeachingFeaturesForOtherScreens() {
           </TeachingFeatureDescription>
         </div>
         <img
-          src="/teaching/schedule.jpg"
+          src="/images/teaching/schedule.jpg"
           className="rounded-tl-xl absolute sm:max-w-[calc(351/768*100vw)] max-w-[calc(304.5/360*100vw)] max-sm:left-[calc(132/360*100vw)] sm:right-0 max-sm:top-[calc(119/300*100%)]"
           alt="Расписание"
         />
         <img
-          src="/teaching/master_card.jpg"
+          src="/images/teaching/master_card.jpg"
           className="rounded-md absolute sm:max-w-[calc(148/768*100vw)] max-w-[calc(148/360*100vw)] sm:bottom-[calc(17/240*100%)] sm:left-[calc(306/768*100vw)] max-sm:bottom-5"
           alt="Управление процессом"
         />
@@ -199,7 +199,7 @@ function TeachingFeaturesForOtherScreens() {
       <div
         itemProp="teachingStats"
         itemType="https://schema.org/TeachingStats"
-        className="flex justify-between items-start relative sm:aspect-[768/240] aspect-[36/30] border-y order-4 border-[#3D425C] sm:bg-[url(/teaching/highlight_tablet.png)] bg-[url(/teaching/highlight_mobile.png)] bg-[length:0%] hover:bg-[length:100%] bg-no-repeat bg-bottom transition-all sm:py-6 sm:px-6 py-5 px-5 overflow-hidden"
+        className="flex justify-between items-start relative sm:aspect-[768/240] aspect-[36/30] border-y order-4 border-[#3D425C] sm:py-6 sm:px-6 py-5 px-5 overflow-hidden"
       >
         <div className="space-y-1">
           <TeachingFeatureTitle>Статистика обучения</TeachingFeatureTitle>
@@ -209,12 +209,12 @@ function TeachingFeaturesForOtherScreens() {
           </TeachingFeatureDescription>
         </div>
         <img
-          src="/teaching/stats.jpg"
+          src="/images/teaching/stats.jpg"
           className="rounded-lg absolute sm:right-6 sm:max-w-[calc(166/768*100vw)] max-w-[calc(166/360*100vw)] max-sm:left-[calc(142/360*100vw)] max-sm:bottom-[calc(34/320*100%)]"
           alt="Статистика обучения"
         />
         <img
-          src="/teaching/current_schedule.jpg"
+          src="/images/teaching/current_schedule.jpg"
           className="rounded-lg absolute sm:bottom-6 sm:right-[calc(162.5/768*100vw)] sm:max-w-[calc(166.5/768*100vw)] max-w-[calc(166/360*100vw)] bottom-5"
           alt="Расписание"
         />

src/components/Main/Trainings.tsx

@@ -26,19 +26,19 @@ export function Trainings() {
       >
         <TrainingsFeature
           order={1}
-          src="/trainings/vr.png"
+          src="/images/trainings/vr.png"
           title="VR - тренажеры"
           text="Обучение навыкам работы с инструментами и оборудованием. Пешее хождение по территории или между оборудованием"
         />
         <TrainingsFeature
           order={2}
-          src="/trainings/stand.png"
+          src="/images/trainings/stand.png"
           title="Cтенды"
           text="Отработки навыков вождение и управления техникой. Работа с панелями управления"
         />
         <TrainingsFeature
           order={3}
-          src="/trainings/classroom.png"
+          src="/images/trainings/classroom.png"
           title="Учебные классы"
           text="Оснащение учебных классов и центров всем необходимым для современного обучения и профессиональной подготовки кадров"
         />

src/consts/clients.ts

@@ -2,39 +2,39 @@ import { IClient } from '../types/IClient';
 
 export const clients: IClient[] = [
   {
-    src: '/clients/aircraft_industries.png',
+    src: '/images/clients/aircraft_industries.png',
     title: 'Aircraft Industries',
   },
   {
-    src: '/clients/mintrans.png',
+    src: '/images/clients/mintrans.png',
     title: 'Министерство транспорта Российской Федерации',
   },
   {
-    src: '/clients/moscow_government.png',
+    src: '/images/clients/moscow_government.png',
     title: 'Правительство Москвы',
   },
-  { src: '/clients/npoa.png', title: 'НПО Автоматики' },
-  { src: '/clients/elem.png', title: 'Elem' },
+  { src: '/images/clients/npoa.png', title: 'НПО Автоматики' },
+  { src: '/images/clients/elem.png', title: 'Elem' },
   {
-    src: '/clients/RussianRailways.png',
+    src: '/images/clients/RussianRailways.png',
     title: 'Российские железные дороги',
   },
-  { src: '/clients/uralvagonzavod.png', title: 'Уралвагонзавод' },
+  { src: '/images/clients/uralvagonzavod.png', title: 'Уралвагонзавод' },
   {
-    src: '/clients/electro_him_pribor.png',
+    src: '/images/clients/electro_him_pribor.png',
     title: 'комбинат Электрозимприбор',
   },
-  { src: '/clients/rosatom.png', title: 'Росатом' },
-  { src: '/clients/croc.png', title: 'Croc' },
-  { src: '/clients/uralhimmash.png', title: 'Уралхиммаш' },
+  { src: '/images/clients/rosatom.png', title: 'Росатом' },
+  { src: '/images/clients/croc.png', title: 'Croc' },
+  { src: '/images/clients/uralhimmash.png', title: 'Уралхиммаш' },
   {
-    src: '/clients/urfu.png',
+    src: '/images/clients/urfu.png',
     title: 'Уральский федеральный университет',
   },
   {
-    src: '/clients/uztm.png',
+    src: '/images/clients/uztm.png',
     title: 'Уральский завод тяжелого машиностроения',
   },
-  { src: '/clients/dubai_police.png', title: 'Dubai Police' },
-  { src: '/clients/ugmk.png', title: 'УГМК' },
+  { src: '/images/clients/dubai_police.png', title: 'Dubai Police' },
+  { src: '/images/clients/ugmk.png', title: 'УГМК' },
 ];