From 1c82028e54ed36a3a4d5e89c07b81661603bbf37 Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Thu, 12 Sep 2024 14:46:41 +0500
Subject: [PATCH] slider without auto, fixes

---
 src/components/Layouts/Footer.tsx     |  2 +-
 src/components/Layouts/Header.tsx     |  6 +++---
 src/components/Main/Contacts.tsx      |  6 ++++++
 src/components/Main/Efficiency.tsx    |  4 +++-
 src/components/Main/Ellipse.tsx       | 18 ++++++++----------
 src/components/Main/ModalWithForm.tsx |  9 +++++++--
 src/ui/SliderWithScaling.tsx          | 25 +++++++------------------
 7 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/components/Layouts/Footer.tsx b/src/components/Layouts/Footer.tsx
index abfaebc..a99921e 100644
--- a/src/components/Layouts/Footer.tsx
+++ b/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">
+    <footer className="sm:grid xl:grid-cols-[2fr_1fr_1fr] sm:grid-cols-2 sm:max-xl:grid-rows-2 bg-[#14161F]">
       <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]" />
diff --git a/src/components/Layouts/Header.tsx b/src/components/Layouts/Header.tsx
index 029de8c..70dae90 100644
--- a/src/components/Layouts/Header.tsx
+++ b/src/components/Layouts/Header.tsx
@@ -17,7 +17,7 @@ import { ChevronDownIcon } from '../icons/ChevronDownIcon';
 
 export function Header() {
   const [menuOpen, setMenuOpen] = useState(false);
-  const { lang } = useLanguageStore();
+  // const { lang } = useLanguageStore();
   const setModal = useModalStore(state => state.setModal);
 
   const menuRef = useRef<HTMLDivElement>(null);
@@ -30,7 +30,7 @@ export function Header() {
   const width = useWindowWidth();
 
   return (
-    <header className="w-full">
+    <header className="relative z-10s w-full bg-[#14161F]">
       <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" />
@@ -47,7 +47,7 @@ export function Header() {
         >
           Оставить заявку
         </Button>
-        <LangToggler lang={lang} />
+        {/* <LangToggler lang={lang} /> */}
         <button
           ref={menuBtnRef}
           onClick={() => setMenuOpen(prev => !prev)}
diff --git a/src/components/Main/Contacts.tsx b/src/components/Main/Contacts.tsx
index ffc9954..551b980 100644
--- a/src/components/Main/Contacts.tsx
+++ b/src/components/Main/Contacts.tsx
@@ -43,6 +43,9 @@ export function Contacts() {
           className="py-4"
           width="full"
           icon={<MailIcon />}
+          onClick={() => {
+            window.location.href = 'mailto:info@graff.tech';
+          }}
         >
           <span className="btn-text opacity-80">Написать</span>
         </Button>
@@ -51,6 +54,9 @@ export function Contacts() {
           className="py-4"
           width="full"
           icon={<PhoneIcon />}
+          onClick={() => {
+            window.location.href = 'tel:88007700067';
+          }}
         >
           <span className="btn-text opacity-80">Позвонить</span>
         </Button>
diff --git a/src/components/Main/Efficiency.tsx b/src/components/Main/Efficiency.tsx
index 3915fbf..2644b4f 100644
--- a/src/components/Main/Efficiency.tsx
+++ b/src/components/Main/Efficiency.tsx
@@ -93,7 +93,9 @@ function Figure({
       className="flex lg:px-10 px-6 w-full pt-6 bg-no-repeat min-h-[240px] max-sm:border-t max-sm:last:border-b lg:aspect-[532.67/360] relative lg:border-y sm:max-lg:border-t sm:max-lg:last:border-b lg:border-r sm:first:border-r last:border-r-0 border-[#3D425C] sm:max-lg:last:col-span-2 sm:max-lg:row-start-1 sm:max-lg:last:row-start-2"
     >
       <div className="flex flex-col justify-between pb-6 max-sm:max-w-[50vw]">
-        <h3 className="lg:font-medium l-text 2xl:max-w-[70%]">{title}</h3>
+        <h3 className="lg:font-medium text-xl leading-[22px] 2xl:max-w-[70%]">
+          {title}
+        </h3>
         <h1 className="font-medium flex lg:items-center items-end md:text-[clamp(64px,64px+(100vw-768px)/832*32,96px)] md:leading-[clamp(57.6px,57.6px+(100vw-768px)/832*28.8,86.4px)] text-[64px] leading-[57.6px]">
           <span ref={figureRef}>{percents}</span>
           <span className="md:text-[clamp(32px,32px+(100vw-768px)/832*32,64px)] md:leading-[clamp(32px,32px+(100vw-768px)/832*25.6,57.6px)] text-[32px] leading-8">
diff --git a/src/components/Main/Ellipse.tsx b/src/components/Main/Ellipse.tsx
index 3bd68b6..78b2b4c 100644
--- a/src/components/Main/Ellipse.tsx
+++ b/src/components/Main/Ellipse.tsx
@@ -7,18 +7,16 @@ export function Ellipse() {
   const y = useRef(0);
   const [mousePos, setMousePos] = useState([0, 0]);
 
-  function handleMouseMove(e: MouseEvent) {
-    x.current =
-      e.clientX - (e.currentTarget as HTMLElement).getBoundingClientRect().left;
-    y.current =
-      e.clientY - (e.currentTarget as HTMLElement).getBoundingClientRect().top;
-  }
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    x.current = e.clientX;
+    y.current = e.clientY;
+  }, []);
 
   const animate = useCallback(() => {
     if (ref.current) {
       setMousePos(([prevX, prevY]) => [
-        prevX + (x.current - prevX) / 15,
-        prevY + (y.current - prevY) / 15,
+        prevX + (x.current - prevX) / 10,
+        prevY + (y.current - prevY) / 10,
       ]);
     }
     requestRef.current = requestAnimationFrame(animate);
@@ -32,13 +30,13 @@ export function Ellipse() {
       cancelAnimationFrame(requestRef.current!);
       document.body?.removeEventListener('mousemove', handleMouseMove);
     };
-  }, [animate]);
+  }, [animate, handleMouseMove]);
 
   return (
     <div
       ref={ref}
       style={{ top: mousePos[1], left: mousePos[0] }}
-      className="absolute -z-[9] bg-[url('src/assets/Ellipse.png')] bg-cover bg-no-repeat bg-center -translate-y-[75%] -translate-x-[50%] aspect-[348.75/262.77] w-[21.75vw]"
+      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]"
     />
   );
 }
diff --git a/src/components/Main/ModalWithForm.tsx b/src/components/Main/ModalWithForm.tsx
index 3d555d8..cb438e4 100644
--- a/src/components/Main/ModalWithForm.tsx
+++ b/src/components/Main/ModalWithForm.tsx
@@ -10,7 +10,6 @@ import ReactInputMask from 'react-input-mask';
 import { ArrowRightIcon } from '../icons/ArrowRightIcon';
 import { CloseIcon } from '../icons/CloseIcon';
 import { LoaderIcon } from '../icons/LoaderIcon';
-import { MailIcon } from '../icons/MailIcon';
 import { api } from '../../api/contactsFormInstance';
 import { Button } from '../../ui/Button';
 import { useModalStore } from '../../store/modalStore';
@@ -18,6 +17,7 @@ import { SelectPhoneCode } from './SelectPhoneCode';
 import { Country } from 'react-phone-number-input';
 import { getExampleNumber } from 'libphonenumber-js';
 import examples from 'libphonenumber-js/mobile/examples';
+import { ClassNameWrapper } from '../../hocs/ClassNameWrapper';
 
 export function ModalWithForm() {
   const { setModal } = useModalStore();
@@ -204,7 +204,12 @@ export function ModalWithForm() {
                 isLoading ? (
                   <LoaderIcon className="relative w-6 h-6 animate-spin" />
                 ) : (
-                  <MailIcon className="relative w-6 h-6" />
+                  <div className="p-2 bg-white rounded-full">
+                    <ClassNameWrapper
+                      element={<ArrowRightIcon />}
+                      className="text-black"
+                    />
+                  </div>
                 )
               }
             >
diff --git a/src/ui/SliderWithScaling.tsx b/src/ui/SliderWithScaling.tsx
index 81a0e5b..773e61d 100644
--- a/src/ui/SliderWithScaling.tsx
+++ b/src/ui/SliderWithScaling.tsx
@@ -1,5 +1,5 @@
 import { useWindowWidth } from '../hooks/useWindowWidth';
-import { delay, motion, cancelFrame } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { ReactNode, useEffect, useReducer, useRef, useState } from 'react';
 import { useSwipeable } from 'react-swipeable';
 import { SliderControls } from '../components/Main/SliderControls';
@@ -24,7 +24,7 @@ export function SliderWithScaling<T extends { title: string }>({
   const width = useWindowWidth();
   const baseoffset =
     width >= 1024
-      ? (-width / 1600) * 507 + 8
+      ? (-width / 1600) * 507 + 32
       : (-width * +minWidth.slice(0, -2)) / 100 + 8;
 
   const [slide, setSlide] = useState(0);
@@ -77,16 +77,6 @@ export function SliderWithScaling<T extends { title: string }>({
     setSliderOffset(baseoffset);
   }, [baseoffset, order, slide]);
 
-  useEffect(() => {
-    const timeout = delay(overshoot => {
-      controlsRef.current.right();
-    }, 10000);
-
-    return () => {
-      cancelFrame(timeout);
-    };
-  }, [slide]);
-
   const handlers = useSwipeable({
     onSwipedLeft: controlsRef.current.right,
     onSwipedRight: controlsRef.current.left,
@@ -120,10 +110,9 @@ export function SliderWithScaling<T extends { title: string }>({
                 initial={
                   currentSliding === 'next' && index === 0
                     ? { minWidth: minWidthScaled, minHeight: minHeightScaled }
-                    : { minWidth, minHeight }
-                  // index === 3
-                  //   ?
-                  //   : {}
+                    : index === 3
+                      ? { minWidth, minHeight }
+                      : {}
                 }
                 transition={{ duration: 1, type: 'just' }}
                 animate={
@@ -135,7 +124,7 @@ export function SliderWithScaling<T extends { title: string }>({
                     : {
                         minWidth,
                         minHeight,
-                        // transition: { duration: index === 3 ? 0.0001 : 1 },
+                        transition: { duration: index === 3 ? 0.0001 : 1 },
                       }
                 }
                 className={'pointer-events-none ' + childClassName}
@@ -158,7 +147,7 @@ export function SliderWithScaling<T extends { title: string }>({
           'absolute ' +
           (controlsPosition === 'top'
             ? 'top-[75px]'
-            : 'lg:bottom-20 -bottom-10 sm:self-end self-center')
+            : 'lg:bottom-16 -bottom-10 sm:self-end self-center')
         }
       />
     </div>