diff --git a/src/Layout.tsx b/src/Layout.tsx index 145907e..f2273ed 100644 --- a/src/Layout.tsx +++ b/src/Layout.tsx @@ -1,14 +1,14 @@ import { Outlet } from 'react-router-dom'; +import { Motivation } from './components/Layout/Motivation'; import { Header } from './components/Layout/Header'; -import { Navbar } from './components/Layout/Navbar'; import { Footer } from './components/Layout/Footer'; import ModalContainer from './components/Main/ModalContainer'; export default function Layout() { return (
-
+
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx index fc12dbe..84ceb5c 100644 --- a/src/components/Layout/Header.tsx +++ b/src/components/Layout/Header.tsx @@ -1,42 +1,156 @@ -import { Marquee } from '../Main/Marquee'; +import { motion } from 'framer-motion'; +import { PropsWithChildren, useRef, useState } from 'react'; +import { Anchor } from '../../ui/NavLink'; +import { Link } from 'react-router-dom'; +import { Lang, useLang } from '../../store/languageStore'; +import { HashLink } from 'react-router-hash-link'; +import { useOnClickOutside } from 'usehooks-ts'; +import useModalStore from '../../store/modalStore'; +import ModalWithForm from '../Main/ModalWithForm'; +import Button from '../../ui/Button'; export function Header() { + const [menuOpen, setMenuOpen] = useState(false); + const { value: lang } = useLang(); + const setModal = useModalStore(state => state.setModal); + + const menuRef = useRef(null); + const menuBtnRef = useRef(null); + useOnClickOutside( + [menuRef, menuBtnRef], + () => setMenuOpen(false), + ); + return ( -
-
-

- Создаем{' '} - +

-

- Интерактивные тренажеры{' '} - + +

-

- Помогаем сократить затраты на обучение, повысить безопасность и - производительность -

-
- - + + + + + setMenuOpen(false)} + className={ + 'absolute z-50 w-full min-[1350px]:hidden sm:max-[1350px]:max-w-[340px] right-0' + + (menuOpen ? ' shadow-[0_0_0_9999px_rgba(0,0,0,.4)]' : '') + } + > +
+ Типы тренажеров + Варианты комплектации + Проекты + События +
+
+ + + +
+ + + ); +} + +function BurgerAnchor({ + children, + route, +}: PropsWithChildren<{ route: string }>) { + return ( + + + {children} + + ); +} + +function ChooseLang({ lang }: { lang: 'RU' | 'EN' }) { + const { updateLang, value } = useLang(); + return ( + + ); +} + +function LangToggler({ lang }: { lang: Lang }) { + const [open, setOpen] = useState(false); + const langTogglerRef = useRef(null); + useOnClickOutside(langTogglerRef, () => setOpen(false)); + + return ( +
+ + setOpen(false)} + initial={{ opacity: 0 }} + animate={{ opacity: +open }} + transition={{ duration: 0.2 }} + > + + + +
); } diff --git a/src/components/Layout/Motivation.tsx b/src/components/Layout/Motivation.tsx new file mode 100644 index 0000000..a7937a3 --- /dev/null +++ b/src/components/Layout/Motivation.tsx @@ -0,0 +1,42 @@ +import { Marquee } from '../Main/Marquee'; + +export function Motivation() { + return ( +
+
+

+ Создаем{' '} + + интерактивные тренажеры + {' '} + для промышленности и образования +

+

+ Интерактивные тренажеры{' '} + + для обучения сотрудников + +

+

+ Помогаем сократить затраты на обучение, повысить безопасность и + производительность +

+
+ + + ); +} diff --git a/src/components/Layout/Navbar.tsx b/src/components/Layout/Navbar.tsx deleted file mode 100644 index 58ae3ec..0000000 --- a/src/components/Layout/Navbar.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import { motion } from 'framer-motion'; -import { PropsWithChildren, useRef, useState } from 'react'; -import { NavLink } from '../../ui/NavLink'; -import { Link } from 'react-router-dom'; -import { Lang, useLang } from '../../store/language'; -import { HashLink } from 'react-router-hash-link'; -import { useOnClickOutside } from 'usehooks-ts'; -import useModalStore from '../../store/modal'; -import ModalWithForm from '../Main/ModalWithForm'; -import Button from '../../ui/Button'; - -export function Navbar() { - const [menuOpen, setMenuOpen] = useState(false); - const { value: lang } = useLang(); - const setModal = useModalStore(state => state.setModal); - - const menuRef = useRef(null); - const menuBtnRef = useRef(null); - useOnClickOutside( - [menuRef, menuBtnRef], - () => setMenuOpen(false), - ); - - return ( - <> - - setMenuOpen(false)} - className={ - 'absolute z-50 w-full min-[1350px]:hidden sm:max-[1350px]:max-w-[340px] right-0 sm:border-l border-b border-[#3D425C]' + - (menuOpen ? ' shadow-[0_0_0_9999px_rgba(0,0,0,.4)]' : '') - } - > - Типы тренажеров - Варианты комплектации - Проекты - События -
- - - -
- - - ); -} - -function BurgerLink({ children, route }: PropsWithChildren<{ route: string }>) { - return ( - - - {children} - - ); -} - -function ChooseLang({ - lang, - isBordered = false, -}: { - lang: 'RU' | 'EN'; - isBordered?: boolean; -}) { - const { updateLang, value } = useLang(); - return ( -
- -
- ); -} - -function LangToggler({ lang }: { lang: Lang }) { - const [open, setOpen] = useState(false); - const langTogglerRef = useRef(null); - useOnClickOutside(langTogglerRef, () => setOpen(false)); - - return ( -
- - setOpen(false)} - initial={{ opacity: 0 }} - animate={{ opacity: +open }} - transition={{ duration: 0.2 }} - > - - - -
- ); -} diff --git a/src/components/Main/ModalContainer.tsx b/src/components/Main/ModalContainer.tsx index e832923..caf1f54 100644 --- a/src/components/Main/ModalContainer.tsx +++ b/src/components/Main/ModalContainer.tsx @@ -1,4 +1,4 @@ -import useModalStore from '../../store/modal'; +import useModalStore from '../../store/modalStore'; export default function ModalContainer() { const modal = useModalStore(state => state.modal); diff --git a/src/components/Main/ModalWithForm.tsx b/src/components/Main/ModalWithForm.tsx index 06761b1..007bdea 100644 --- a/src/components/Main/ModalWithForm.tsx +++ b/src/components/Main/ModalWithForm.tsx @@ -1,6 +1,6 @@ import { useEffect } from 'react'; import { Close2Icon } from '../icons/Close2Icon'; -import useModalStore from '../../store/modal'; +import useModalStore from '../../store/modalStore'; import ContactsForm from './ContactsForm'; function ModalWithForm() { diff --git a/src/components/Main/Projects.tsx b/src/components/Main/Projects.tsx index 562a7b9..d8e21d3 100644 --- a/src/components/Main/Projects.tsx +++ b/src/components/Main/Projects.tsx @@ -116,8 +116,6 @@ function Slider({ setSliderOffset(-baseOffset); }, [order, baseOffset, slide]); - useEffect(() => console.log(sliderOffset), [sliderOffset]); - return (
diff --git a/src/components/Main/Trainings.tsx b/src/components/Main/Trainings.tsx index e424f22..1c2d3b3 100644 --- a/src/components/Main/Trainings.tsx +++ b/src/components/Main/Trainings.tsx @@ -78,7 +78,14 @@ function TrainingsFeature({

{order}

- +
+ + +