fixes

2024-09-06 16:37:43 +05:00
parent d7e178b520
commit 4d402f9abf
4 changed files with 44 additions and 71 deletions
@@ -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"
@@ -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}
@@ -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}
@@ -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>