imgs fixes

index.html

@@ -25,7 +25,7 @@
     <meta property="og:url" content="https://graff.event" />
     <meta
       property="og:image"
-      content="http://192.168.1.250:5174/src/assets/promotion/exhibitions/1.png"
+      content="http://192.168.1.250:5174/images/promotion/exhibitions/1.png"
     />
     <meta property="og:image:width" content="300" />
     <meta property="og:image:height" content="200" />

src/components/Form.tsx

@@ -14,41 +14,25 @@ export function Form() {
         <div className="max-sm:hidden absolute lg:bottom-0 lg:-right-[min(136px,calc(136/1600*100vw))] sm:-right-[min(196px,calc(196/768*100vw))] animate-[spin_10s_linear_infinite]">
           <div className="relative lg:w-[calc(512/1600*100vw)] sm:w-[calc(512/768*100vw)] aspect-square flex justify-center transition-all duration-500 lg::w-[calc(446/1600*100vw)] origin-center">
             <div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute">
-              <img src="/src/assets/form/1_1.png" alt="" />
-              <img src="/src/assets/form/1_2.png" alt="" />
+              <img src="/images/form/1_1.png" alt="" />
+              <img src="/images/form/1_2.png" alt="" />
             </div>
             <div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-45">
-              <img
-                src="/src/assets/form/2_1.png"
-                className="-rotate-45"
-                alt=""
-              />
-              <img
-                src="/src/assets/form/2_2.png"
-                className="-rotate-45"
-                alt=""
-              />
+              <img src="/images/form/2_1.png" className="-rotate-45" alt="" />
+              <img src="/images/form/2_2.png" className="-rotate-45" alt="" />
             </div>
             <div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-90">
-              <img
-                src="/src/assets/form/3_1.png"
-                className="-rotate-90"
-                alt=""
-              />
-              <img
-                src="/src/assets/form/3_2.png"
-                className="-rotate-90"
-                alt=""
-              />
+              <img src="/images/form/3_1.png" className="-rotate-90" alt="" />
+              <img src="/images/form/3_2.png" className="-rotate-90" alt="" />
             </div>
             <div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-[135deg]">
               <img
-                src="/src/assets/form/4_1.png"
+                src="/images/form/4_1.png"
                 className="-rotate-[135deg]"
                 alt=""
               />
               <img
-                src="/src/assets/form/4_2.png"
+                src="/images/form/4_2.png"
                 className="-rotate-[135deg]"
                 alt=""
               />

src/components/InteractionsWithClients/Slider/InteractionsSlide.tsx

@@ -8,13 +8,14 @@ export const InteractionSlide = forwardRef<
   const videoRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
+    console.log(video, active);
     if (active) {
       videoRef.current?.play();
     } else {
       videoRef.current?.pause();
       videoRef.current!.currentTime = 0;
     }
-  }, [active]);
+  }, [active, video]);
 
   return (
     <div
@@ -22,7 +23,7 @@ export const InteractionSlide = forwardRef<
       className="p-8 space-y-9 border border-[#3D425C] sm:min-w-[calc(100vw-48px)] min-w-[calc(100vw-32px)] select-none"
     >
       <p className="font-medium h3">{title}</p>
-      <video src={video} muted loop ref={videoRef} />
+      <video src={video} muted autoPlay loop ref={videoRef} />
     </div>
   );
 });

src/components/InteractionsWithClients/Slider/InteractionsSlider.tsx

@@ -3,15 +3,19 @@ import { interactions } from '../../../consts/interactions';
 import { SliderControls } from '../../ui/SliderControls';
 import { InteractionSlide } from './InteractionsSlide';
 import { useSwipeable } from 'react-swipeable';
+import { useWindowWidth } from '../../../hooks/useWindowWidth';
 
 export function InteractionsSlider() {
+  const width = useWindowWidth();
+
   const currentSlideRef = useRef<HTMLDivElement>(null);
   const controlsRef = useRef<{ left(): void; right(): void }>({
     left() {},
     right() {},
   });
 
-  const baseoffset = -(currentSlideRef.current?.clientWidth || 0) + 8;
+  const baseoffset =
+    width >= 640 ? (-width / 768) * 720 - 8 : (-width / 360) * 328 - 5;
 
   const [slide, setSlide] = useState(0);
   const [sliderOffset, setSliderOffset] = useState(baseoffset);
@@ -80,7 +84,7 @@ export function InteractionsSlider() {
                 title={title}
                 video={video}
                 ref={slide === index ? currentSlideRef : null}
-                active={slide === index}
+                active={index === 1}
               />
             );
           })}

src/components/InteractionsWithClients/index.tsx

@@ -9,7 +9,7 @@ export function InteractionsWithClients() {
 
   return (
     <div className="space-y-10">
-      <Title className="text-[64px]">
+      <Title>
         Создаем систему для{' '}
         <span className="text-gradient">
           эффективного взаимодействия с клиентами

src/components/Layout/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('src/assets/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('images/Ellipse.png')] bg-cover bg-no-repeat bg-center -translate-y-[50%] -translate-x-[50%] aspect-[348.75/262.77] w-[21.75vw]"
     />
   );
 }

src/components/Promotion.tsx

@@ -85,7 +85,7 @@ function DesktopFeature({
   return (
     <div
       id={hashes.get(number)}
-      className="p-7 border-t border-x border-[#3D425C] last:border-b bg-[url(/src/assets/promotion/Ellipse.png)] bg-[length:0%_0%] hover:bg-[length:100%_100%] transition-all bg-no-repeat bg-top"
+      className="p-7 border-t border-x border-[#3D425C] last:border-b bg-[url(/images/promotion/Ellipse.png)] bg-[length:0%_0%] hover:bg-[length:100%_100%] transition-all bg-no-repeat bg-top"
     >
       <motion.div
         ref={ref}

src/components/Showreel.tsx

@@ -3,7 +3,7 @@ import { FullScreenIcon } from './icons/FullScreenIcon';
 
 export function Showreel() {
   return (
-    <div className="lg:aspect-[1552/616] sm:aspect-[720/440] aspect-[328/204] [background:linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),center/cover_url(src/assets/motivation/Showreel.png)_no-repeat] flex justify-center items-center">
+    <div className="lg:aspect-[1552/616] sm:aspect-[720/440] aspect-[328/204] [background:linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),center/cover_url(images/motivation/Showreel.png)_no-repeat] flex justify-center items-center">
       <button className="sm:p-[22px] p-3 aspect-square rounded-full border bg-[#14161F33]">
         <ClassNameWrapper
           className="max-sm:w-5 max-sm:h-5"