diff --git a/src/components/Main/Efficiency.tsx b/src/components/Main/Efficiency.tsx index 53ab03e..01a6368 100644 --- a/src/components/Main/Efficiency.tsx +++ b/src/components/Main/Efficiency.tsx @@ -1,5 +1,6 @@ import { MiniTitle } from '../../ui/MiniTitle'; import { AppearanceText } from '../../ui/AppearanceText'; +import { motion } from 'framer-motion'; import AppearanceHr from '../../ui/AppearanceHr'; export function Effeciency() { @@ -49,7 +50,14 @@ export function Effeciency() { function Figure({ title, percents }: { percents: number; title: string }) { return ( -
+
{title} @@ -61,6 +69,6 @@ function Figure({ title, percents }: { percents: number; title: string }) {
-
+ ); } diff --git a/src/components/Main/Events.tsx b/src/components/Main/Events.tsx index 57f4306..13428b3 100644 --- a/src/components/Main/Events.tsx +++ b/src/components/Main/Events.tsx @@ -3,6 +3,7 @@ import { MiniTitle } from '../../ui/MiniTitle'; import { PropsWithChildren, useRef } from 'react'; import AppearanceHr from '../../ui/AppearanceHr'; import { useHover } from 'usehooks-ts'; +import { AnimatePresence } from 'framer-motion'; export function Events() { return ( @@ -66,8 +67,9 @@ function EventTitle({ function LinkButton({ href }: { href: string }) { const ref = useRef(null); const hovered = useHover(ref); + return ( -
+
как это было - {hovered && ( - - )} + + {hovered && ( + + )} +
); } diff --git a/src/components/Main/Marquee.tsx b/src/components/Main/Marquee.tsx index ab60f9d..208b222 100644 --- a/src/components/Main/Marquee.tsx +++ b/src/components/Main/Marquee.tsx @@ -38,7 +38,7 @@ function MarqueeHalf() { function MarqueeItem({ src }: { src: string }) { return ( -
+
); diff --git a/src/components/Main/ProductTabs/ForTeachingTab.tsx b/src/components/Main/ProductTabs/ForTeachingTab.tsx index 3705b3e..cabdc09 100644 --- a/src/components/Main/ProductTabs/ForTeachingTab.tsx +++ b/src/components/Main/ProductTabs/ForTeachingTab.tsx @@ -1,6 +1,6 @@ export function ForTeachingTab() { return ( -
+

Интерактивные тренажеры для учебных заведений diff --git a/src/components/Main/ProductTabs/SimulatorsTab.tsx b/src/components/Main/ProductTabs/SimulatorsTab.tsx index b031f8c..c59f359 100644 --- a/src/components/Main/ProductTabs/SimulatorsTab.tsx +++ b/src/components/Main/ProductTabs/SimulatorsTab.tsx @@ -21,12 +21,10 @@ export function SimulatorsTab() { } }, [ - 'src/assets/rzhd2.png', + 'src/assets/winda.png', 'src/assets/train.png', 'src/assets/dispatcher.png', 'src/assets/winda.png', - 'src/assets/rzhd.png', - 'src/assets/rzhd2.png', 'src/assets/train.png', ], ); @@ -50,10 +48,10 @@ export function SimulatorsTab() { }); return ( -
-
-
-

+
+
+
+

Интерактивные симуляторы управления техникой

    @@ -64,7 +62,7 @@ export function SimulatorsTab() {
-
+

В основу симуляторов заложена математическая модель, полностью соответствующая работе настоящего оборудования @@ -95,7 +93,7 @@ export function SimulatorsTab() { )) diff --git a/src/components/Main/ProductTabs/TrainingsTab.tsx b/src/components/Main/ProductTabs/TrainingsTab.tsx index 9a7ae6a..1f129a5 100644 --- a/src/components/Main/ProductTabs/TrainingsTab.tsx +++ b/src/components/Main/ProductTabs/TrainingsTab.tsx @@ -1,13 +1,13 @@ export function TrainingsTab() { return ( -
+
-
+
-

+

Промышленные тренажеры виртуальной реальности -

-

+

+

Может быть еще какой-нибудь небольшой текст, а то мне не хватает для балланса. Ну если не будет, то как-нибудь переживем

@@ -18,7 +18,7 @@ export function TrainingsTab() { />
-
+
+
-
+
+
<span className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]" @@ -13,9 +13,9 @@ export function Teaching() { WebkitTextFillColor: 'transparent', }} > - Тренинг модуль{' '} + Тренинг модуль </span> - помогает осуществлять координацию между всеми участниками процесса +  помогает осуществлять координацию между всеми участниками процесса <span diff --git a/src/components/Main/Trainings.tsx b/src/components/Main/Trainings.tsx index a4fbaf8..b8fe98d 100644 --- a/src/components/Main/Trainings.tsx +++ b/src/components/Main/Trainings.tsx @@ -83,14 +83,11 @@ function TrainingsFeature({ <div className="tablet-figma:flex mobile:max-tablet-figma:hidden"> <motion.div initial={{ opacity: 0, scale: 0.8 }} - animate={{ opacity: 1, scale: 1 }} + animate={{ opacity: +hovered, scale: 1 }} transition={{ - duration: 0.25, + duration: 0.4, }} - className={ - '-my-10 mobile:max-desktop:hidden flex items-center justify-center ' + - (hovered ? 'visible' : 'invisible') - } + className="-my-10 mobile:max-desktop:hidden flex items-center justify-center " > <img src={src} diff --git a/src/components/icons/Close2Icon.tsx b/src/components/icons/Close2Icon.tsx index 887dee8..d40a4a1 100644 --- a/src/components/icons/Close2Icon.tsx +++ b/src/components/icons/Close2Icon.tsx @@ -11,9 +11,9 @@ export function Close2Icon({ className = '' }: { className?: string }) { <path d="M12.0002 11.9999L17.6572 6.34331M12.0002 11.9999L6.34337 6.34302M12.0002 11.9999L17.6571 17.6567M12.0002 11.9999L6.34326 17.6568" stroke="currentColor" - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round" /> </svg> ); diff --git a/src/ui/AppearanceHr.tsx b/src/ui/AppearanceHr.tsx index cada997..ebc1d2b 100644 --- a/src/ui/AppearanceHr.tsx +++ b/src/ui/AppearanceHr.tsx @@ -1,22 +1,29 @@ import { useInView } from 'framer-motion'; import { useRef } from 'react'; +import { motion } from 'framer-motion'; export default function AppearanceHr({ className = '', + delay = 0.2, }: { className?: string; + delay?: number; }) { const ref = useRef<HTMLHRElement>(null); const isInView = useInView(ref, { once: true }); return ( - <hr + <motion.hr ref={ref} - className={ - className + - ' border-[#3D425C] h-0.5 duration-500 origin-left delay-200 ' + - (isInView ? 'scale-x-1' : 'scale-x-0') - } + initial={{ scaleX: 0 }} + animate={{ scaleX: isInView ? 1 : 0 }} + transition={{ + duration: 0.75, + delay, + type: 'just', + }} + exit={{ scaleX: 0, type: 'just' }} + className={className + ' border-[#3D425C] h-0.5 origin-left'} /> ); }