diff --git a/src/assets/3.svg b/src/assets/3.svg new file mode 100644 index 0000000..0709b58 --- /dev/null +++ b/src/assets/3.svg @@ -0,0 +1,6 @@ + + + diff --git a/src/assets/6.svg b/src/assets/6.svg new file mode 100644 index 0000000..6638976 --- /dev/null +++ b/src/assets/6.svg @@ -0,0 +1,6 @@ + + + diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index 40347bd..9196b35 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -9,12 +9,12 @@ export function Footer() {
- Политика конфиденциальности graff.tech - +

© 2024 GRAFF interactive. Все права защищены

diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx index db885a4..cbdbc18 100644 --- a/src/components/Layout/Header.tsx +++ b/src/components/Layout/Header.tsx @@ -4,7 +4,7 @@ export function Header() { return (
-

+

Создаем{' '} Варианты комплектации Проекты События - +

- {menuOpen && ( -
setMenuOpen(false)} - className={ - 'absolute z-50 w-full min-[1350px]:hidden tablet:max-[1350px]:max-w-[340px] right-0 tablet:border-l border-b border-[#3D425C]' + - (menuOpen ? ' shadow-[0_0_0_9999px_rgba(0,0,0,.4)]' : '') - } - > - Типы тренажеров - Варианты комплектации - Проекты - События -
- - - -
+ setMenuOpen(false)} + className={ + 'absolute z-50 w-full min-[1350px]:hidden tablet:max-[1350px]:max-w-[340px] right-0 tablet:border-l border-b border-[#3D425C]' + + (menuOpen ? ' shadow-[0_0_0_9999px_rgba(0,0,0,.4)]' : '') + } + > + Типы тренажеров + Варианты комплектации + Проекты + События +
+ + +
- )} + ); } @@ -145,15 +149,16 @@ function LangToggler({ lang }: { lang: Lang }) { {lang} - {open && ( -
setOpen(false)} - > - - -
- )} + setOpen(false)} + initial={{ opacity: 0 }} + animate={{ opacity: +open }} + transition={{ duration: 0.2 }} + > + + +
); } diff --git a/src/components/Main/Availables.tsx b/src/components/Main/Availables.tsx index 22b20db..c52700c 100644 --- a/src/components/Main/Availables.tsx +++ b/src/components/Main/Availables.tsx @@ -6,7 +6,7 @@ import { Title } from '../../ui/Title'; export function Availables() { return (
- + <Title className="desktop-figma:mb-[77px] desktop:mb-14 mobile:mb-6"> <span className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]" style={{ diff --git a/src/components/Main/Contacts.tsx b/src/components/Main/Contacts.tsx index 438f027..6f99549 100644 --- a/src/components/Main/Contacts.tsx +++ b/src/components/Main/Contacts.tsx @@ -8,7 +8,7 @@ export function Contacts() { return ( <div className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-6 mobile:px-4 desktop:flex justify-between gap-x-4"> <div className="tablet:max-desktop:mb-20 mobile:mb-14"> - <Title className="desktop:mb-[68px] desktop-figma:max-w-[899px] desktop:max-w-[720px] mobile:mb-6"> + <Title className="desktop-figma:mb-[77px] desktop:mb-[68px] desktop-figma:max-w-[899px] desktop:max-w-[720px] mobile:mb-6"> Хотите использовать интерактивные тренажеры в обучении? <br /> <span diff --git a/src/components/Main/ContactsForm.tsx b/src/components/Main/ContactsForm.tsx index e762aa2..4b2521e 100644 --- a/src/components/Main/ContactsForm.tsx +++ b/src/components/Main/ContactsForm.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, FormEvent, useState } from 'react'; +import { ChangeEvent, FormEvent, useEffect, useState } from 'react'; import api from '../../api/contactsFormInstance'; import { Close2Icon } from '../icons/Close2Icon'; import { AsteriskIcon } from '../icons/AstreskIcon'; @@ -18,6 +18,16 @@ function ContactsForm() { const [isSend, setIsSend] = useState(false); const setModal = useModalStore(state => state.setModal); + useEffect(() => { + const listener = (e: KeyboardEvent) => { + if (e.key === 'Escape') { + setModal(false); + } + }; + document.addEventListener('keydown', listener); + return () => document.removeEventListener('keydown', listener); + }, [setModal]); + function handleSubmit(e: FormEvent<HTMLFormElement>) { e.preventDefault(); diff --git a/src/components/Main/Decreasing.tsx b/src/components/Main/Decreasing.tsx index 0c1f486..f65de03 100644 --- a/src/components/Main/Decreasing.tsx +++ b/src/components/Main/Decreasing.tsx @@ -31,7 +31,7 @@ export function Decreasing() { сократить затраты на обучение, повысить безопасность и производительность -
+
  • diff --git a/src/components/Main/Distance.tsx b/src/components/Main/Distance.tsx index 616ef56..ac3ac6f 100644 --- a/src/components/Main/Distance.tsx +++ b/src/components/Main/Distance.tsx @@ -3,7 +3,7 @@ import { Title } from '../../ui/Title'; export function Distance() { return (
    - + <Title className="desktop-figma:mb-[77px] desktop:mb-14 tablet:mb-6 mobile:mb-4"> Платформа GRAFF.training поволяет осуществлять{' '} <span className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]" diff --git a/src/components/Main/Products.tsx b/src/components/Main/Products.tsx index c17c38a..271fa36 100644 --- a/src/components/Main/Products.tsx +++ b/src/components/Main/Products.tsx @@ -27,7 +27,7 @@ export function Products() { id="products" className="desktop:py-[70px] tablet:max-desktop:pt-14 tablet:max-desktop:pb-8 mobile:max-tablet:py-14 desktop:px-10 tablet:max-desktop:px-6 mobile:max-tablet:px-4" > - <Title className="mb-14 desktop:block mobile:hidden"> + <Title className="desktop-figma:mb-[77px] mb-14 desktop:block mobile:hidden"> Процесс обучения сотрудников станет безопасней и эффективней с <span className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]" diff --git a/src/components/Main/Projects.tsx b/src/components/Main/Projects.tsx index ebcafb3..d1770d7 100644 --- a/src/components/Main/Projects.tsx +++ b/src/components/Main/Projects.tsx @@ -10,7 +10,7 @@ export function Projects() { id="projects" className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-6 mobile:px-5 overflow-hidden select-none" > - <Title className="desktop:mb-14 mobile:mb-6"> + <Title className="desktop-figma:mb-[77px] desktop:mb-14 mobile:mb-6"> <span className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]" style={{ diff --git a/src/components/Main/Teaching.tsx b/src/components/Main/Teaching.tsx index d70ad44..18277ce 100644 --- a/src/components/Main/Teaching.tsx +++ b/src/components/Main/Teaching.tsx @@ -4,7 +4,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"> - <Title className="mobile:max-desktop:hidden mb-8 desktop:sticky top-14 h-fit max-w-[45vw]"> + <Title className="mobile:max-desktop:hidden desktop-figma:mb-[38px] mb-8 desktop:sticky top-14 h-fit max-w-[45vw]"> <span className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]" style={{ @@ -17,7 +17,7 @@ export function Teaching() { </span> помогает осуществлять координацию между всеми участниками процесса - + <Title className="desktop-figma:mb-[29px] desktop:hidden mobile:mb-6"> <span className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]" style={{ diff --git a/src/components/Main/Trainings.tsx b/src/components/Main/Trainings.tsx index a8a0ba8..a4fbaf8 100644 --- a/src/components/Main/Trainings.tsx +++ b/src/components/Main/Trainings.tsx @@ -10,7 +10,7 @@ export function Trainings() { id="trainings" className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-7 mobile:px-4" > - <Title className="desktop:mb-14 mobile:mb-6"> + <Title className="desktop-figma:mb-[77px] desktop:mb-14 mobile:mb-6"> Предлагаем различные{' '} <span className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]" diff --git a/src/ui/AppearanceText.tsx b/src/ui/AppearanceText.tsx index aa5d21d..2694021 100644 --- a/src/ui/AppearanceText.tsx +++ b/src/ui/AppearanceText.tsx @@ -6,7 +6,7 @@ import { } from 'framer-motion'; import { useRef, useState } from 'react'; -function AppearanceItem({ text }: { text: string }) { +function AppearanceItem({ text, order }: { text: string; order: number }) { const ref = useRef<HTMLSpanElement>(null); const [isShowed, setIsShowed] = useState(false); @@ -25,11 +25,9 @@ function AppearanceItem({ text }: { text: string }) { return ( <motion.span ref={ref} - viewport={{ once: true }} - className={ - 'duration-700 ' + - (isShowed || isInView ? 'opacity-100' : 'opacity-[6%]') - } + initial={{ opacity: 0 }} + animate={{ opacity: isShowed || isInView ? 1 : 0.06 }} + transition={{ duration: 0.9, delay: 0.1 * order }} > {text} </motion.span> @@ -45,8 +43,8 @@ export function AppearanceText({ }) { return ( <h3 className={'text-[#ffffff] font-medium h3 ' + className}> - {splits.map(text => ( - <AppearanceItem key={text} text={text} /> + {splits.map((text, index) => ( + <AppearanceItem key={text} text={text} order={index} /> ))} </h3> ); diff --git a/src/ui/Button.tsx b/src/ui/Button.tsx index 6f3d3a4..d285caf 100644 --- a/src/ui/Button.tsx +++ b/src/ui/Button.tsx @@ -30,11 +30,11 @@ function Button({ (color === 'secondary' ? 'outline outline-1 outline-[#3D425C]' : '') } ${ icon ? 'pr-4' : '' - } flex justify-between gap-1 items-center overflow-hidden w-${width} ${className}`} + } flex gap-1 items-center overflow-hidden w-${width} ${className}`} > <span className="group-hover:opacity-10 opacity-0 bg-black transition-opacity absolute top-0 left-0 w-full h-full"></span> - <span className="relative font-medium">{children}</span> - <span className="relative ">{icon}</span> + <span className="relative font-medium m-auto">{children}</span> + <span className="relative">{icon}</span> </button> ); }