From 13d67ecc317146241db4d22432fe8cf11f5349f1 Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Fri, 12 Jul 2024 14:59:38 +0500
Subject: [PATCH] fixes

---
 src/assets/efficiency_backlight.svg           | 12 +++++++
 .../{lightning.svg => vr_backlight.svg}       |  0
 src/components/Main/Contacts.tsx              | 36 +++++++++++++------
 src/components/Main/Efficiency.tsx            | 22 ++----------
 src/components/Main/Teaching.tsx              |  2 +-
 src/components/Main/Trainings.tsx             | 12 +++++--
 src/ui/AppearanceHr.tsx                       |  2 +-
 src/ui/AppearanceText.tsx                     | 19 ++++++++--
 8 files changed, 68 insertions(+), 37 deletions(-)
 create mode 100644 src/assets/efficiency_backlight.svg
 rename src/assets/{lightning.svg => vr_backlight.svg} (100%)

diff --git a/src/assets/efficiency_backlight.svg b/src/assets/efficiency_backlight.svg
new file mode 100644
index 0000000..ab52765
--- /dev/null
+++ b/src/assets/efficiency_backlight.svg
@@ -0,0 +1,12 @@
+<svg width="368" height="262" viewBox="0 0 368 262" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f_2948_5674)">
+<ellipse cx="305.702" cy="203.24" rx="240.691" ry="156.503" transform="rotate(-6.77723 305.702 203.24)" fill="#5545AC"/>
+</g>
+<defs>
+<filter id="filter0_f_2948_5674" x="-434.031" y="-454.771" width="1479.47" height="1316.02" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="250" result="effect1_foregroundBlur_2948_5674"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/lightning.svg b/src/assets/vr_backlight.svg
similarity index 100%
rename from src/assets/lightning.svg
rename to src/assets/vr_backlight.svg
diff --git a/src/components/Main/Contacts.tsx b/src/components/Main/Contacts.tsx
index 2fbe10c..438f027 100644
--- a/src/components/Main/Contacts.tsx
+++ b/src/components/Main/Contacts.tsx
@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import useModalStore from '../../store/modal';
 import { Title } from '../../ui/Title';
 import ContactsForm from './ContactsForm';
@@ -32,28 +33,43 @@ export function Contacts() {
         <div className="desktop:min-w-[20.75vw] tablet:w-full">
           <p className="text-[#ffffff] mb-4 l-text">Свяжитесь с нами</p>
           <div className="flex flex-col gap-y-3 desktop:mb-20 mobile:max-tablet:mb-6">
-            <button className="text-[#ffffff] font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] btn-text">
+            <Link
+              to={'mailto:info@graff.tech'}
+              className="text-[#ffffff] font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] btn-text"
+            >
               Написать
               <img src="src/assets/mail.svg" alt="" />
-            </button>
-            <button className="text-[#ffffff] font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] btn-text">
+            </Link>
+            <Link
+              to={'tel:+780077700067'}
+              className="text-[#ffffff] font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] btn-text"
+            >
               Позвонить
               <img src="src/assets/phone.svg" alt="" />
-            </button>
+            </Link>
           </div>
         </div>
         <div className="flex flex-col gap-y-4 tablet:max-desktop:justify-between tablet-figma:max-desktop:min-w-[332px] tablet:max-tablet-figma:min-w-[250px]">
           <p className="font-semibold text-[#ffffff] l-text">Социальные сети</p>
           <div className="flex gap-x-2">
-            <button className="rounded-full p-4 border border-[#3D425C]">
+            <Link
+              to={'https://www.youtube.com/@GRAFFtech'}
+              className="rounded-full p-4 border border-[#3D425C]"
+            >
               <img src="src/assets/youtube.svg" alt="" />
-            </button>
-            <button className="rounded-full p-4 border border-[#3D425C]">
+            </Link>
+            <Link
+              to={'https://vk.com/graff.interactive'}
+              className="rounded-full p-4 border border-[#3D425C]"
+            >
               <img src="src/assets/vk.svg" alt="" />
-            </button>
-            <button className="rounded-full p-4 border border-[#3D425C]">
+            </Link>
+            <Link
+              to={'https://t.me/GRAFFinteractive'}
+              className="rounded-full p-4 border border-[#3D425C]"
+            >
               <img src="src/assets/tg.svg" alt="" />
-            </button>
+            </Link>
           </div>
         </div>
       </div>
diff --git a/src/components/Main/Efficiency.tsx b/src/components/Main/Efficiency.tsx
index ddda1e8..5489615 100644
--- a/src/components/Main/Efficiency.tsx
+++ b/src/components/Main/Efficiency.tsx
@@ -11,17 +11,14 @@ export function Effeciency() {
         <div className="mobile:max-tablet:mt-4">
           <div className="flex mobile:max-tablet:flex-col desktop:max-desktop-figma:w-[clamp(728px,728px+(100vw-1024px)/576*405,1133px)] justify-stretch gap-x-4 gap-y-2 mobile:max-tablet:py-5 tablet:pb-5">
             <Figure
-              variance={'left'}
               percents={50}
               title={'сокращение бюджета на обучение сотрудников'}
             />
             <Figure
-              variance={'left'}
               percents={30}
               title={'сокращение времени обучения сотрудников'}
             />
             <Figure
-              variance={'right'}
               percents={90}
               title={'готовность к опасным ситуациямние выше на'}
             />
@@ -50,24 +47,9 @@ export function Effeciency() {
   );
 }
 
-function Figure({
-  variance,
-  title,
-  percents,
-}: {
-  variance: 'left' | 'right';
-  percents: number;
-  title: string;
-}) {
+function Figure({ title, percents }: { percents: number; title: string }) {
   return (
-    <div
-      className={
-        'flex px-6 bg-[#3D425C4D] desktop-figma:max-w-[22vw] w-full rounded-2xl pt-6 bg-no-repeat bg-auto xl:bg-[bottom_right_24px] tablet:max-xl:bg-[bottom_right_12px] mobile:bg-[bottom_right_24px] h-[262px]'
-      }
-      style={{
-        backgroundImage: `url(src/assets/${variance}_variance_figure.svg)`,
-      }}
-    >
+    <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="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}
diff --git a/src/components/Main/Teaching.tsx b/src/components/Main/Teaching.tsx
index 18d7c15..d70ad44 100644
--- a/src/components/Main/Teaching.tsx
+++ b/src/components/Main/Teaching.tsx
@@ -3,7 +3,7 @@ import { Title } from '../../ui/Title';
 
 export function Teaching() {
   return (
-    <div className="desktop:py-[70px] desktop:px-10 tablet:max-desktop:px-6 mobile:max-tablet:px-4 mobile:max-desktop:py-14 desktop:flex gap-x-4 overflow-hidden">
+    <div className="desktop:py-[70px] desktop:px-10 tablet:max-desktop:px-6 mobile:max-tablet:px-4 mobile:max-desktop:py-14 desktop:flex gap-x-4">
       <Title className="mobile:max-desktop:hidden mb-8 desktop:sticky top-14 h-fit max-w-[45vw]">
         <span
           className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
diff --git a/src/components/Main/Trainings.tsx b/src/components/Main/Trainings.tsx
index 2409ff3..fc74ee3 100644
--- a/src/components/Main/Trainings.tsx
+++ b/src/components/Main/Trainings.tsx
@@ -2,6 +2,7 @@ import { useHover } from 'usehooks-ts';
 import { Title } from '../../ui/Title';
 import { useRef } from 'react';
 import AppearanceHr from '../../ui/AppearanceHr';
+import { motion } from 'framer-motion';
 
 export function Trainings() {
   return (
@@ -81,7 +82,14 @@ function TrainingsFeature({
         </div>
         <div className="tablet-figma:flex mobile:max-tablet-figma:hidden">
           {hovered && (
-            <div className="-my-10 mobile:max-desktop:hidden flex items-center justify-center">
+            <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=""
@@ -92,7 +100,7 @@ function TrainingsFeature({
                 src="src/assets/lightning.svg"
                 alt=""
               />
-            </div>
+            </motion.div>
           )}
           <div className="desktop:hidden flex items-center justify-center">
             <img
diff --git a/src/ui/AppearanceHr.tsx b/src/ui/AppearanceHr.tsx
index c7b62ad..cada997 100644
--- a/src/ui/AppearanceHr.tsx
+++ b/src/ui/AppearanceHr.tsx
@@ -7,7 +7,7 @@ export default function AppearanceHr({
   className?: string;
 }) {
   const ref = useRef<HTMLHRElement>(null);
-  const isInView = useInView(ref);
+  const isInView = useInView(ref, { once: true });
 
   return (
     <hr
diff --git a/src/ui/AppearanceText.tsx b/src/ui/AppearanceText.tsx
index e42a8ef..aa5d21d 100644
--- a/src/ui/AppearanceText.tsx
+++ b/src/ui/AppearanceText.tsx
@@ -1,11 +1,20 @@
-import { motion, useScroll, useMotionValueEvent } from 'framer-motion';
+import {
+  motion,
+  useScroll,
+  useMotionValueEvent,
+  useInView,
+} from 'framer-motion';
 import { useRef, useState } from 'react';
 
 function AppearanceItem({ text }: { text: string }) {
   const ref = useRef<HTMLSpanElement>(null);
   const [isShowed, setIsShowed] = useState(false);
 
-  const { scrollY } = useScroll();
+  const { scrollY } = useScroll({});
+  const isInView = useInView(ref, {
+    once: true,
+    margin: `0px 0px -${window.innerHeight / 3}px`,
+  });
 
   useMotionValueEvent(scrollY, 'change', latest => {
     setIsShowed(
@@ -16,7 +25,11 @@ function AppearanceItem({ text }: { text: string }) {
   return (
     <motion.span
       ref={ref}
-      className={'duration-700 ' + (isShowed ? 'opacity-100' : 'opacity-[6%]')}
+      viewport={{ once: true }}
+      className={
+        'duration-700 ' +
+        (isShowed || isInView ? 'opacity-100' : 'opacity-[6%]')
+      }
     >
       {text}
     </motion.span>