fixes

2024-07-12 17:01:01 +05:00
parent 13d67ecc31
commit c28b3197db
4 changed files with 80 additions and 63 deletions
@@ -49,7 +49,7 @@ export function Effeciency() {

 function Figure({ title, percents }: { percents: number; title: string }) {
  return (
-    <div className="bg-[url(src/assets/left_variance_figure.svg)] hover:bg-[url(src/assets/left_variance_figure.svg),url(src/assets/efficiency_backlight.svg)] last:bg-[url(src/assets/right_variance_figure.svg)] last:hover:bg-[url(src/assets/right_variance_figure.svg),url(src/assets/efficiency_backlight.svg)] flex px-6 bg-[#3D425C4D] desktop-figma:max-w-[22vw] w-full rounded-2xl pt-6 bg-no-repeat bg-[length:auto,100%_100%] xl:bg-[position:bottom_right_24px,top_left] tablet:max-xl:bg-[position:bottom_right_24px,top_left] mobile:max-tablet:bg-[position:bottom_right_24px,top_left] h-[262px]">
+    <div className="bg-[url(src/assets/left_variance_figure.svg)] desktop:hover:bg-[url(src/assets/left_variance_figure.svg),url(src/assets/efficiency_backlight.svg)] last:bg-[url(src/assets/right_variance_figure.svg)] desktop:last:hover:bg-[url(src/assets/right_variance_figure.svg),url(src/assets/efficiency_backlight.svg)] flex px-6 bg-[#3D425C4D] desktop-figma:max-w-[22vw] w-full rounded-2xl pt-6 bg-no-repeat bg-[length:auto,100%_100%] xl:bg-[position:bottom_right_24px,top_left] tablet:max-xl:bg-[position:bottom_right_24px,top_left] mobile:max-tablet:bg-[position:bottom_right_24px,top_left] h-[262px]">
      <div className="text-[#ffffff] flex flex-col justify-between py-6 mobile:max-tablet:max-w-[50vw]">
        <h6 className="desktop:font-medium l-text desktop-figma:max-w-[70%]">
          {title}
@@ -1,7 +1,8 @@
 import { Link } from 'react-router-dom';
 import { MiniTitle } from '../../ui/MiniTitle';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useRef } from 'react';
 import AppearanceHr from '../../ui/AppearanceHr';
+import { useHover } from 'usehooks-ts';

 export function Events() {
  return (
@@ -63,12 +64,20 @@ function EventTitle({
 }

 function LinkButton({ href }: { href: string }) {
+  const ref = useRef<HTMLAnchorElement>(null);
+  const hovered = useHover(ref);
  return (
-    <Link
-      to={href}
-      className="text-[#ffffff] opacity-60 uppercase flex items-center gap-2 desktop:min-w-[133px] tablet:max-desktop:min-w-[140px] mobile:max-tablet:self-end link mobile:max-tablet:mt-4"
-    >
-      как это было <img src="src/assets/arrow_insert.svg" alt="" />
-    </Link>
+    <div className="w-fit">
+      <Link
+        to={href}
+        ref={ref}
+        className="text-[#ffffff] text-nowrap opacity-60 uppercase flex items-center w-fit desktop:min-w-[min(133px,fit)] gap-x-2 tablet:max-desktop:min-w-[140px] mobile:max-tablet:self-end link mobile:max-tablet:mt-4"
+      >
+        как это было <img src="src/assets/arrow_insert.svg" alt="" />
+      </Link>
+      {hovered && (
+        <AppearanceHr className="w-full border-[#ffffff] opacity-60" />
+      )}
+    </div>
  );
 }
@@ -1,3 +1,4 @@
+import { motion } from 'framer-motion';
 import { useRef, useState } from 'react';
 import { MiniTitle } from '../../ui/MiniTitle';
 import { Title } from '../../ui/Title';
@@ -6,10 +7,21 @@ import { SimulatorsTab } from './ProductTabs/SimulatorsTab';
 import { TrainingsTab } from './ProductTabs/TrainingsTab';

 export function Products() {
-  const [curTab, setCurTab] = useState(0);
+  const [curTab, setCurTab] = useState<0 | 1 | 2>(0);

  const ref = useRef<HTMLDivElement>(null);

+  const handleClick = (
+    e: React.MouseEvent<HTMLButtonElement>,
+    newTab: typeof curTab,
+  ) => {
+    ref.current?.scrollTo({
+      left: e.currentTarget.offsetLeft / 2,
+      behavior: 'smooth',
+    });
+    setCurTab(newTab);
+  };
+
  return (
    <div
      id="products"
@@ -32,40 +44,27 @@ export function Products() {
      <div className="desktop-figma:pl-64">
        <MiniTitle className="desktop:hidden" text="Продукты" />
        <div
-          className="flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 scrollbar-none rounded-xl p-1 mb-2 w-fit max-w-full overflow-auto tablet:max-desktop:mt-[13px] mobile:mt-6 mobile:max-[912px]:[-webkit-mask-image:_linear-gradient(to_left,rgba(32,35,50,0)_0%,rgba(32,35,50,1)_20%)]"
+          className={
+            'flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 scrollbar-none rounded-xl p-1 mb-2 w-fit max-w-full overflow-auto tablet:max-desktop:mt-[13px] mobile:mt-6' +
+            (curTab !== 2
+              ? ' mobile:max-[912px]:[-webkit-mask-image:_linear-gradient(to_left,rgba(32,35,50,0)_0%,rgba(32,35,50,1)_20%)]'
+              : '')
+          }
          ref={ref}
        >
          <TabButton
-            className={curTab === 0 ? 'bg-[#798FFF]' : ''}
-            onClick={e => {
-              ref.current?.scrollTo({
-                left: e.currentTarget.offsetLeft - 16,
-                behavior: 'smooth',
-              });
-              setCurTab(0);
-            }}
+            selected={curTab === 0}
+            onClick={e => handleClick(e, 0)}
            text="Промышленные тренажеры"
          />
          <TabButton
-            className={curTab === 1 ? 'bg-[#798FFF]' : ''}
-            onClick={e => {
-              ref.current?.scrollTo({
-                left: e.currentTarget.offsetLeft - 16,
-                behavior: 'smooth',
-              });
-              setCurTab(1);
-            }}
+            selected={curTab === 1}
+            onClick={e => handleClick(e, 1)}
            text="Симуляторы управления техникой"
          />
          <TabButton
-            className={curTab === 2 ? 'bg-[#798FFF]' : ''}
-            onClick={e => {
-              ref.current?.scrollTo({
-                left: e.currentTarget.offsetLeft - 16,
-                behavior: 'smooth',
-              });
-              setCurTab(2);
-            }}
+            selected={curTab === 2}
+            onClick={e => handleClick(e, 2)}
            text="Тренажеры для учебных заведений"
          />
        </div>
@@ -85,16 +84,24 @@ function TabButton({
  text,
  className,
  onClick,
-}: { text: string } & React.HTMLProps<HTMLButtonElement>) {
+  selected,
+}: { text: string; selected: boolean } & React.HTMLProps<HTMLButtonElement>) {
  return (
    <button
      onClick={onClick}
      className={
-        'active:bg-[#798FFF] text-[#ffffff] font-semibold rounded-lg px-5 py-[13.5px] btn-text text-nowrap text-clip bg-text-gradient ' +
+        'text-[#ffffff] font-semibold rounded-lg px-5 py-[13.5px] btn-text text-nowrap text-clip bg-text-gradient relative ' +
        className
      }
    >
-      {text}
+      {selected && (
+        <motion.span
+          layoutId="bubble"
+          className="absolute inset-0 z-10 bg-[#798FFF] rounded-lg"
+          transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
+        />
+      )}
+      <span className="z-30 relative">{text}</span>
    </button>
  );
 }
@@ -68,9 +68,9 @@ function TrainingsFeature({
      <AppearanceHr />
      <div
        ref={ref}
-        className="desktop:first:h-[200px] desktop:last:h-[200px] desktop:h-[176px] tablet:flex items-stretch justify-between tablet:py-10 mobile:max-tablet:pt-5 "
+        className="desktop:first:h-[200px] desktop:last:h-[200px] desktop:h-[176px] tablet:flex items-stretch justify-between tablet:py-10 mobile:max-tablet:pt-5"
      >
-        <div className="tablet:flex flex-col gap-y-4 mobile:max-tablet:mb-[42px] tablet-figma:max-w-[43.7%]">
+        <div className="tablet:flex flex-col gap-y-4 mobile:max-tablet:mb-[42px] tablet-figma:w-[43.7%] tablet:max-tablet-figma:min-w-[76%]">
          <h3 className="font-medium text-[#ffffff] mobile:max-tablet:mb-2 h3">
            {title}
          </h3>
@@ -81,27 +81,28 @@ function TrainingsFeature({
          <img src={src} alt="" className="w-[50vw]" />
        </div>
        <div className="tablet-figma:flex mobile:max-tablet-figma:hidden">
-          {hovered && (
-            <motion.div
-              initial={{ opacity: 0, scale: 0.8 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{
-                duration: 0.25,
-              }}
-              className="-my-10 mobile:max-desktop:hidden flex items-center justify-center"
-            >
-              <img
-                src={src}
-                alt=""
-                className="relative z-20 w-[27vw/1120*843] h-[calc(27vw*0.6)]"
-              />
-              <img
-                className="absolute w-[24vw]"
-                src="src/assets/lightning.svg"
-                alt=""
-              />
-            </motion.div>
-          )}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{
+              duration: 0.25,
+            }}
+            className={
+              '-my-10 mobile:max-desktop:hidden flex items-center justify-center ' +
+              (hovered ? 'visible' : 'invisible')
+            }
+          >
+            <img
+              src={src}
+              alt=""
+              className="relative z-20 w-[27vw/1120*843] h-[calc(27vw*0.6)]"
+            />
+            <img
+              className="absolute w-[24vw]"
+              src="src/assets/vr_backlight.svg"
+              alt=""
+            />
+          </motion.div>
          <div className="desktop:hidden flex items-center justify-center">
            <img
              src={src}
@@ -110,16 +111,16 @@ function TrainingsFeature({
            />
            <img
              className="absolute w-[24vw]"
-              src="src/assets/lightning.svg"
+              src="src/assets/vr_backlight.svg"
              alt=""
            />
          </div>
          <p className="text-[#52587A] desktop:font-medium m-text">{order}</p>
        </div>
-        <div className="w-[calc(280/708*100%)] mobile:max-tablet:hidden tablet-figma:hidden flex justify-center items-center">
+        <div className="w-[calc(280/768*100%)] mobile:max-tablet:hidden tablet-figma:hidden flex justify-center items-center">
          <img src={src} className="relative z-20" alt="" />
          <img
-            src="src/assets/lightning.svg"
+            src="src/assets/vr_backlight.svg"
            className="absolute w-[24vw]"
            alt=""
          />