From 4d402f9abfa430e5789b70fb98be30720784a0aa Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Fri, 6 Sep 2024 16:37:43 +0500
Subject: [PATCH] fixes

---
 src/components/Layout/FeedbackForm.tsx |  4 +-
 src/components/Layout/Header.tsx       | 14 ++---
 src/components/Promotion.tsx           | 85 +++++++++-----------------
 src/components/SelectPhoneCode.tsx     | 12 ++--
 4 files changed, 44 insertions(+), 71 deletions(-)

diff --git a/src/components/Layout/FeedbackForm.tsx b/src/components/Layout/FeedbackForm.tsx
index f51646c..27fd81f 100644
--- a/src/components/Layout/FeedbackForm.tsx
+++ b/src/components/Layout/FeedbackForm.tsx
@@ -150,7 +150,7 @@ export function FeedbackForm({
                 value={phone}
                 placeholder={placeholder}
                 onChange={e => setPhone(e.target.value.replace(/ /g, ''))}
-                className="bg-transparent rounded-none outline-none transition-all w-full h4 placeholder:h4 placeholder:font-medium placeholder:select-none peer"
+                className="transition-all bg-transparent rounded-none outline-none h4 placeholder:h4 placeholder:font-medium placeholder:select-none peer"
               />
               <div className="bottom-0 absolute w-full border-b border-[#3D425C] peer-focus:border-white -mb-px" />
             </div>
@@ -188,7 +188,7 @@ export function FeedbackForm({
                 className="relative w-5 h-5 animate-spin"
               />
             ) : (
-              <div className="p-2 rounded-full bg-white">
+              <div className="p-2 bg-white rounded-full">
                 <ClassNameWrapper
                   element={<ArrowRightIcon />}
                   className="w-5 h-5 text-black"
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index ae5df5b..78bfb24 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -28,14 +28,14 @@ export function Header() {
       <Link to={'/'}>
         <ClassNameWrapper
           element={<Logo />}
-          className="lg:h-10 h-8 max-sm:hidden"
+          className="h-8 lg:h-10 max-sm:hidden"
         />
         <ClassNameWrapper
           element={<LogoWithoutText />}
           className="h-8 sm:hidden"
         />
       </Link>
-      <nav className="mx-auto self-stretch flex max-lg:hidden">
+      <nav className="flex self-stretch mx-auto max-lg:hidden">
         {[
           { path: '/#products', text: 'Продукты' },
           { path: '/#devices', text: 'Оборудование' },
@@ -45,16 +45,16 @@ export function Header() {
           <HashLink key={link.path} {...link} />
         ))}
       </nav>
-      <div className="lg:-mr-6 -mr-4 flex h-full">
+      <div className="flex h-full -mr-4 lg:-mr-6">
         <Button
-          className="rounded-none h-full lg:px-10 px-6 btn-text"
+          className="h-full px-6 rounded-none lg:px-10 btn-text"
           onClick={() => setModal(<ModalWithForm />)}
         >
           Оставить заявку
         </Button>
         <button
           ref={menuBtnRef}
-          className="p-3 mr-0 aspect-square h-full lg:hidden"
+          className="h-full p-3 mr-0 aspect-square lg:hidden"
           onClick={() => setMenuOpen(prev => !prev)}
         >
           <ClassNameWrapper
@@ -90,7 +90,7 @@ export function Header() {
               setModal(<ModalWithForm />);
             }}
             width="full"
-            className="sm:hidden font-semibold btn-text rounded-none outline-none"
+            className="font-semibold rounded-none outline-none sm:hidden btn-text"
           >
             Оставить заявку
           </Button>
@@ -105,7 +105,7 @@ export function Header() {
 function HashLink({ path, text }: { path: string; text: string }) {
   return (
     <Link
-      className="border-l lg:last:border-r border-[#3D425C] px-10 self-stretch lg:text-[#9299BD] content-center hover:bg-[#3D425C] max-lg:flex max-lg:py-6 btn-text bg-[#14161F] w-full max-lg:[&:not(:last-child)]:border-b"
+      className="border-l lg:last:border-r border-[#3D425C] px-10 self-stretch font-medium lg:text-[#9299BD] content-center hover:bg-[#3D425C] max-lg:flex max-lg:py-6 btn-text bg-[#14161F] w-full max-lg:[&:not(:last-child)]:border-b"
       to={path}
     >
       {text}
diff --git a/src/components/Promotion.tsx b/src/components/Promotion.tsx
index f005162..8f39d8c 100644
--- a/src/components/Promotion.tsx
+++ b/src/components/Promotion.tsx
@@ -1,7 +1,7 @@
 import { AnimatePresence, motion } from 'framer-motion';
 import { Title } from './ui/Title';
 import { promotionFeatures } from '../consts/promotionFeatures';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { useHover } from 'usehooks-ts';
 import { useLocation } from 'react-router-dom';
 import { hashes } from '../consts/motivationHashes';
@@ -27,7 +27,7 @@ export function Promotion() {
       </Title>
       <div>
         {promotionFeatures.map((feature, index) =>
-          width >= 1024 ? (
+          width >= 1280 ? (
             <DesktopFeature
               key={feature.title}
               number={index + 1}
@@ -57,6 +57,8 @@ function DesktopFeature({
 
   const ref = useRef<HTMLDivElement>(null);
 
+  const width = useWindowWidth();
+
   const hovered = useHover(ref);
 
   return (
@@ -70,49 +72,38 @@ function DesktopFeature({
         transition={{ duration: 0.7 }}
         animate={
           hovered || hash.slice(1) === hashes.get(number)
-            ? { height: 424 }
-            : { height: 140 }
+            ? { height: 0.265 * width }
+            : { height: 0.0875 * width }
         }
       >
-        <div className="max-w-[calc(540/1600*100vw)]">
-          <div
-            className={
-              'mb-6' +
-              (hovered || hash.slice(1) === hashes.get(number)
-                ? ' space-y-[220px]'
-                : '')
-            }
-          >
-            <p className="l-text text-[#52587A] font-medium">[0{number}]</p>
-            <p
-              className={
-                'h3 font-medium mt-12 transition-all duration-700' +
-                (hovered || hash.slice(1) === hashes.get(number)
-                  ? ' mt-[220px]'
-                  : '')
-              }
-            >
+        <div className="max-w-[calc(540/1600*100vw)]s max-w-[40vw] flex flex-col justify-between">
+          <p className="l-text text-[#52587A] font-medium">[0{number}]</p>
+          <div className="space-y-6">
+            <p className="text-[32px] leading-none mt-12 font-medium transition-all duration-700">
               {title}
             </p>
+            {(hovered || hash.slice(1) === hashes.get(number)) && (
+              <motion.p
+                className="font-medium h4 opacity-60"
+                animate={
+                  hovered || hash.slice(1) === hashes.get(number)
+                    ? { opacity: 0.6 }
+                    : { opacity: 0 }
+                }
+                transition={{ delay: 1 }}
+              >
+                {description}
+              </motion.p>
+            )}
           </div>
-          <motion.p
-            className="font-medium h4 opacity-60"
-            animate={
-              hovered || hash.slice(1) === hashes.get(number)
-                ? { opacity: 0.6, transition: { delay: 0.5 } }
-                : { opacity: 0 }
-            }
-          >
-            {description}
-          </motion.p>
         </div>
         <motion.div
-          className="flex items-start justify-end flex-1 gap-x-2"
+          className="flex items-start justify-end gap-x-2"
           transition={{ duration: 1 }}
           animate={{
             translateX:
               hovered || hash.slice(1) === hashes.get(number)
-                ? (images.length - 1) * 240 + (images.length - 2) * 8
+                ? (images.length - 1) * width * 0.15 + (images.length - 2) * 8
                 : 0,
           }}
         >
@@ -123,13 +114,13 @@ function DesktopFeature({
                 src={image}
                 alt=""
                 transition={{ duration: 0.5 }}
-                className="transition-[height] h-full"
+                className="h-full "
                 animate={{
                   maxHeight:
                     (hovered || hash.slice(1) === hashes.get(number)) &&
                     index === 0
-                      ? 424
-                      : 140,
+                      ? 0.265 * width
+                      : 0.0875 * width,
                 }}
               />
             </AnimatePresence>
@@ -153,25 +144,9 @@ function Feature({
 }) {
   const [expanded, setExpanded] = useState(false);
 
-  const [descriptionHeight, setDescriptionHeight] = useState(0);
-
-  const root = useRef<HTMLDivElement>(null);
-  const descriptionRef = useRef<HTMLParagraphElement>(null);
-  // const imgRef = useRef<HTMLImageElement>(null);
-
-  useEffect(() => {
-    setDescriptionHeight(descriptionRef.current?.clientHeight ?? 0);
-  }, [expanded, descriptionRef]);
-
   return (
     <motion.div
       id={hashes.get(number)}
-      ref={root}
-      animate={{
-        height: expanded
-          ? (root.current?.clientHeight ?? 0) + descriptionHeight + 16
-          : 'auto',
-      }}
       className="sm:py-4 py-2 sm:space-y-8 space-y-4 border-t border-[#3D425C] last:border-b flex flex-col justify-between relative"
       onClick={() => setExpanded(prev => !prev)}
     >
@@ -185,8 +160,7 @@ function Feature({
       <AnimatePresence>
         {expanded && (
           <motion.p
-            ref={descriptionRef}
-            className="absolute font-medium top- l-text"
+            className="font-medium l-text"
             transition={{ delay: 1 }}
             initial={{ opacity: 0 }}
             animate={
@@ -220,7 +194,6 @@ function Feature({
         ))}
       </div>
       <img
-        // ref={imgRef}
         src={images[0]}
         className="object-cover w-full sm:hidden"
         alt={title}
diff --git a/src/components/SelectPhoneCode.tsx b/src/components/SelectPhoneCode.tsx
index 4aea671..73413ed 100644
--- a/src/components/SelectPhoneCode.tsx
+++ b/src/components/SelectPhoneCode.tsx
@@ -24,9 +24,9 @@ export function SelectPhoneCode({
   useOnClickOutside(ref, () => setOpen(false));
 
   return (
-    <div ref={ref} className="relative flex flex-col sm:w-1/3 max-w-[350px]">
+    <div ref={ref} className="relative flex flex-col min-w-[75px]">
       <button
-        className="flex gap-x-1 justify-between items-center relative"
+        className="relative flex items-center justify-between gap-x-1"
         onClick={e => {
           e.preventDefault();
           setOpen(prev => !prev);
@@ -34,7 +34,7 @@ export function SelectPhoneCode({
       >
         <img
           src={countries.find(c => c.iso === currentCountry)?.flag}
-          className="sm:w-6 w-4"
+          className="w-4 sm:w-6"
           alt=""
         />
         <p className="h4">{currentPhoneCode}</p>
@@ -44,7 +44,7 @@ export function SelectPhoneCode({
         />
       </button>
       {open && (
-        <div className="space-y-1 absolute z-10 bg-[#14161F] top-[100%] -left-1 border border-t-0 rounded-b-lg border-[#3D425C] max-h-[300px] overflow-y-auto overflow-x-hidden">
+        <div className="space-y-1 absolute w-[120%] z-10 bg-[#14161F] top-[100%] -left-1 border border-t-0 rounded-b-lg border-[#3D425C] max-h-[300px] overflow-y-auto overflow-x-hidden">
           {getCountries()
             .map(country => [`+${getCountryCallingCode(country)}`, country])
             .filter(
@@ -63,9 +63,9 @@ export function SelectPhoneCode({
                 <img
                   src={countries.find(c => c.iso === country)?.flag}
                   alt=""
-                  className="sm:w-6 w-4"
+                  className="w-4 sm:w-6"
                 />
-                <p className="flex-1 h4 cursor-pointer py-1">{phoneCode}</p>
+                <p className="flex-1 py-1 cursor-pointer h4">{phoneCode}</p>
               </div>
             ))}
         </div>