mikhail_lanskikh/graff.training
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fixes

Browse Source
This commit is contained in:
Lanskikh
2024-07-12 19:14:38 +05:00
parent c28b3197db
commit 361003c470
16 changed files with 89 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/3.svg
+6
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

src/assets/6.svg
+6
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

src/components/Layout/Footer.tsx
+3 -3
View File
@@ -9,12 +9,12 @@ export function Footer() {
<img src="src/assets/text_logo.svg" className="h-[33px]" alt="" />
</Link>
<div className="flex flex-col gap-y-1">
<a
href="https://graff.tech/privacypolicy"
<Link
to="https://graff.tech/privacypolicy"
className="text-[#ffffff] tablet:font-medium flex gap-4 m-text"
>
Политика конфиденциальности <span>graff.tech</span>
</a>
</Link>
<p className="opacity-40 text-[#ffffff] tablet:font-medium m-text">
© 2024 GRAFF interactive. Все права защищены
</p>
src/components/Layout/Header.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ export function Header() {
return (
<header className="text-[#ffffff]">
<div className="desktop:px-10 tablet:px-6 mobile:px-4 desktop:py-28 tablet:py-12 mobile:py-14">
<h1 className="pb-8 font-medium desktop:block mobile:max-desktop:hidden h1">
<h1 className="desktop-figma:mb-[38px] pb-8 font-medium desktop:block mobile:max-desktop:hidden h1">
Создаем{' '}
<span
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
src/components/Layout/Navbar.tsx
+44 -39
View File
@@ -1,3 +1,4 @@
import { motion } from 'framer-motion';
import { PropsWithChildren, useRef, useState } from 'react';
import { NavLink } from '../../ui/NavLink';
import { Link } from 'react-router-dom';
@@ -6,6 +7,7 @@ import { HashLink } from 'react-router-hash-link';
import { useOnClickOutside } from 'usehooks-ts';
import useModalStore from '../../store/modal';
import ContactsForm from '../Main/ContactsForm';
import Button from '../../ui/Button';
export function Navbar() {
const [menuOpen, setMenuOpen] = useState(false);
@@ -35,12 +37,12 @@ export function Navbar() {
<NavLink route="#trainings">Варианты комплектации</NavLink>
<NavLink route="#projects">Проекты</NavLink>
<NavLink route="#events">События</NavLink>
<button
<Button
onClick={() => setModal(<ContactsForm />)}
className="btn-text font-semibold text-[#ffffff] bg-gradient-to-r from-[#798FFF] to-[#D375FF] border-x border-[#3D425C] tablet:block mobile:hidden px-10"
className="rounded-none btn-text font-semibold tablet:block mobile:hidden px-10"
>
Оставить заявку
</button>
</Button>
<LangToggler lang={lang} />
<button
ref={menuBtnRef}
@@ -54,34 +56,36 @@ export function Navbar() {
</button>
</div>
</nav>
{menuOpen && (
<div
ref={menuRef}
onClick={() => 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)]' : '')
}
>
<BurgerLink route="#products">Типы тренажеров</BurgerLink>
<BurgerLink route="#trainings">Варианты комплектации</BurgerLink>
<BurgerLink route="#projects">Проекты</BurgerLink>
<BurgerLink route="#events">События</BurgerLink>
<div className="grid mobile:max-tablet:grid-cols-[216px_1fr_1fr] tablet:grid-cols-2">
<button
onClick={() => {
setMenuOpen(false);
setModal(<ContactsForm />);
}}
className="text-[#ffffff] tablet:hidden font-semibold btn-text bg-gradient-to-r from-[#798FFF] to-[#D375FF] py-[30px] px-10"
>
Оставить заявку
</button>
<ChooseLang lang="RU" />
<ChooseLang lang="EN" />
</div>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: +menuOpen }}
transition={{ duration: 0.2 }}
ref={menuRef}
onClick={() => 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)]' : '')
}
>
<BurgerLink route="#products">Типы тренажеров</BurgerLink>
<BurgerLink route="#trainings">Варианты комплектации</BurgerLink>
<BurgerLink route="#projects">Проекты</BurgerLink>
<BurgerLink route="#events">События</BurgerLink>
<div className="grid mobile:max-tablet:grid-cols-[216px_1fr_1fr] tablet:grid-cols-2">
<Button
onClick={() => {
setMenuOpen(false);
setModal(<ContactsForm />);
}}
width="full"
className="tablet:hidden font-semibold btn-text rounded-none"
>
Оставить заявку
</Button>
<ChooseLang lang="RU" />
<ChooseLang lang="EN" />
</div>
)}
</motion.div>
</>
);
}
@@ -145,15 +149,16 @@ function LangToggler({ lang }: { lang: Lang }) {
{lang}
<img src="src/assets/arrow_down.svg" alt="" />
</button>
{open && (
<div
className="absolute grid grid-cols-2 min-w-[101px] box-border"
onClick={() => setOpen(false)}
>
<ChooseLang isBordered lang={'RU'} />
<ChooseLang isBordered lang={'EN'} />
</div>
)}
<motion.div
className="absolute grid grid-cols-2 min-w-[101px] box-border"
onClick={() => setOpen(false)}
initial={{ opacity: 0 }}
animate={{ opacity: +open }}
transition={{ duration: 0.2 }}
>
<ChooseLang isBordered lang={'RU'} />
<ChooseLang isBordered lang={'EN'} />
</motion.div>
</div>
);
}
src/components/Main/Availables.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import { Title } from '../../ui/Title';
export function Availables() {
return (
<div className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-6 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]"
style={{
src/components/Main/Contacts.tsx
+1 -1
View File
@@ -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
src/components/Main/ContactsForm.tsx
+11 -1
View File
@@ -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();
src/components/Main/Decreasing.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export function Decreasing() {
сократить затраты на обучение, повысить безопасность и
производительность
</Title>
<div className="flex tablet-figma:flex-row mobile:max-tablet-figma:flex-col justify-normal desktop-figma:gap-x-[10vw] tablet-figma:max-desktop-figma:gap-x-[clamp(16px,16px+(100vw-1024px)/576*142,160px)] desktop-figma:max-w-[calc(70.8vw+256px)] desktop-figma:justify-between tablet:items-end xl:pl-64 desktop:mt-14 mobile:mt-6">
<div className="flex tablet-figma:flex-row mobile:max-tablet-figma:flex-col justify-normal desktop-figma:gap-x-[10vw] tablet-figma:max-desktop-figma:gap-x-[clamp(16px,16px+(100vw-1024px)/576*142,160px)] desktop-figma:max-w-[calc(70.8vw+256px)] desktop-figma:justify-between tablet:items-end xl:pl-64 desktop-figma:mt-[77px] desktop:mt-14 mobile:mt-6">
<ul className="xl:max-w-[47vw] w-full tablet:min-w-[318px] mobile:mb-6">
<AppearanceHr />
<li className="flex justify-between py-5 gap-x-4">
src/components/Main/Distance.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import { Title } from '../../ui/Title';
export function Distance() {
return (
<div className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-6 mobile:px-4">
<Title className="desktop:mb-14 tablet:mb-6 mobile:mb-4">
<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]"
src/components/Main/Products.tsx
+1 -1
View File
@@ -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]"
src/components/Main/Projects.tsx
+1 -1
View File
@@ -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={{
src/components/Main/Teaching.tsx
+2 -2
View File
@@ -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>
<Title className="desktop:hidden mobile:mb-6">
<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={{
src/components/Main/Trainings.tsx
+1 -1
View File
@@ -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]"
src/ui/AppearanceText.tsx
+6 -8
View File
@@ -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>
);
src/ui/Button.tsx
+3 -3
View File
@@ -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>
);
}