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-15 14:28:29 +05:00
parent 361003c470
commit c055eb6f89
11 changed files with 60 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Main/Efficiency.tsx
+10 -2
View File
@@ -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 (
<div className="bg-[url(src/assets/left_variance_figure.svg)] desktop:hover:bg-[url(src/assets/left_variance_figure.svg),url(src/assets/efficiency_backlight.svg)] last:bg-[url(src/assets/right_variance_figure.svg)] desktop: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]">
<motion.div
whileHover={{
backgroundImage:
'url(src/assets/left_variance_figure.svg),url(src/assets/efficiency_backlight.svg)',
transition: { duration: 1 },
}}
className="bg-[url(src/assets/left_variance_figure.svg)] last:bg-[url(src/assets/right_variance_figure.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}
@@ -61,6 +69,6 @@ function Figure({ title, percents }: { percents: number; title: string }) {
</span>
</h1>
</div>
</div>
</motion.div>
);
}
src/components/Main/Events.tsx
+11 -4
View File
@@ -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<HTMLAnchorElement>(null);
const hovered = useHover(ref);
return (
<div className="w-fit">
<div className="w-fit self-start">
<Link
to={href}
ref={ref}
@@ -75,9 +77,14 @@ function LinkButton({ href }: { href: string }) {
>
как это было <img src="src/assets/arrow_insert.svg" alt="" />
</Link>
{hovered && (
<AppearanceHr className="w-full border-[#ffffff] opacity-60" />
)}
<AnimatePresence>
{hovered && (
<AppearanceHr
delay={0}
className="w-full border-[#ffffff] opacity-60"
/>
)}
</AnimatePresence>
</div>
);
}
src/components/Main/Marquee.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ function MarqueeHalf() {
function MarqueeItem({ src }: { src: string }) {
return (
<div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border-l border-y border-[#3D425C] first:py-[30px]">
<div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border-l border-y border-[#3D425C] desktop:first:py-[30px]">
<img src={src} className="m-auto" alt="" />
</div>
);
src/components/Main/ProductTabs/ForTeachingTab.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
export function ForTeachingTab() {
return (
<div className="desktop:bg-[url('src/assets/mask_group2.png')] bg-[#3D425C4D] bg-no-repeat desktop:p-10 tablet:p-7 mobile:p-5 rounded-xl 2xl:bg-contain bg-[right] desktop:max-2xl:bg-[length:50%]">
<div className="desktop:bg-[url('src/assets/mask_group2.png')] desktop:aspect-[1520/546] tablet:max-desktop:aspect-[720/460] w-full desktop:h-[max(534px,34vw)] tablet:max-desktop:h-[max(460px,60vw)] mobile:max-tablet:h-[clamp(671px,186vw,745px)] bg-[#3D425C4D] bg-no-repeat desktop:p-10 tablet:p-7 mobile:p-5 rounded-xl 2xl:bg-contain bg-right desktop:max-2xl:bg-[length:50%]">
<div className='tablet:max-desktop:bg-[url("src/assets/mask_group2.png")] bg-no-repeat bg-right bg-[length:50%] tablet:max-desktop:pb-[55px] mobile:max-desktop:border-b border-[#3D425C] tablet:mb-8 mobile:mb-4'>
<h3 className="text-[#ffffff] font-medium desktop:max-w-[455px] tablet:max-w-[326px] mobile:max-tablet:mb-5 h3">
Интерактивные тренажеры для учебных заведений
src/components/Main/ProductTabs/SimulatorsTab.tsx
+7 -9
View File
@@ -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 (
<div className="bg-[#3D425C4D] rounded-xl desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 select-none overflow-hidden">
<div className="tablet:flex justify-between gap-x-2">
<div className="desktop:max-w-[539px] tablet:max-w-[50vw]">
<h3 className="max-w-[455px] text-[#ffffff] font-medium h3 desktop:mb-8 tablet:mb-6 mobile:mb-5">
<div className="bg-[#3D425C4D] rounded-xl flex desktop:aspect-[1520/546] tablet:max-desktop:aspect-[720/460] mobile:max-tablet:max-h-[clamp(671px,186vw,745px)] w-full desktop:h-[max(534px,34vw)] tablet:max-desktop:h-[max(460px,60vw)] desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 select-none mobile:max-tablet:overflow-hidden">
<div className="tablet:flex justify-between w-full items-center gap-x-2">
<div className="desktop:max-w-[539px] tablet:max-w-[50vw] self-start">
<h3 className="tablet:max-desktop:max-w-[455px] text-[#ffffff] font-medium h3 desktop:mb-8 tablet:mb-6 mobile:mb-5">
Интерактивные симуляторы управления техникой
</h3>
<ul className="flex flex-wrap gap-2 desktop:mb-12 tablet:max-desktop:mb-10 mobile:mb-5 tablet:max-desktop:max-w-[325px]">
@@ -64,7 +62,7 @@ export function SimulatorsTab() {
<SimulatorsItem text="вертолетная техника" />
<SimulatorsItem text="горные самосвалы и экскаваторы" />
</ul>
<div className="max-w-[455px] mobile:max-tablet:mb-5">
<div className="tablet:max-desktop:max-w-[455px] mobile:max-tablet:mb-5">
<h4 className="text-[#ffffff] font-medium l-text desktop:mb-2 mobile:max-tablet:mb-3">
В основу симуляторов заложена математическая модель, полностью
соответствующая работе настоящего оборудования
@@ -95,7 +93,7 @@ export function SimulatorsTab() {
<img
key={index}
src={src}
className="rounded-lg mobile:max-tablet:min-w-[clamp(280px,100vw-80px,559px)] object-cover pointer-events-none"
className="rounded-lg object-cover container pointer-events-none"
alt=""
/>
))
src/components/Main/ProductTabs/TrainingsTab.tsx
+7 -7
View File
@@ -1,13 +1,13 @@
export function TrainingsTab() {
return (
<div className="bg-[#3D425C4D] rounded-xl desktop:bg-[url('src/assets/mask_group.png')] desktop-figma:bg-[length:70%] bg-right-bottom desktop:bg-[length:55%] desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 bg-no-repeat">
<div className="bg-[#3D425C4D] rounded-xl desktop:aspect-[1520/546] tablet:aspect-[720/460] desktop:h-[max(534px,34vw)] tablet:max-desktop:h-[max(460px,60vw)] mobile:max-tablet:max-h-[clamp(671px,186vw,745px)] w-full desktop:bg-[url('src/assets/mask_group.png')] desktop-figma:bg-[length:70%] bg-right-bottom desktop:bg-[length:55%] desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 bg-no-repeat">
<div className="desktop:max-w-[455px]">
<div className="tablet:max-desktop:border-b border-[#3D425C] pb-5 tablet:max-desktop:bg-[url('src/assets/mask_group.png')] bg-no-repeat bg-contain bg-right-bottom tablet:max-tablet-figma:bg-[length:40%]">
<div className="tablet:max-desktop:border-b border-[#3D425C] tablet:max-desktop:bg-[url('src/assets/mask_group.png')] bg-no-repeat bg-contain bg-right-bottom tablet:max-tablet-figma:bg-[length:40%]">
<div className="tablet:max-desktop:max-w-[326px] mobile:max-tablet:border-b border-[#3D425C]">
<h1 className="text-[#ffffff] font-medium tablet:mb-8 tablet-figma:text-[clamp(24px,24px+(100vw-768px)/832*8,32px)] tablet-figma:leading-[clamp(24px,24px+(100vw-768px)/832*4.8,28.8px)] mobile:max-tablet-figma:text-[clamp(20px,20px+(100vw-360px)/408*4,24px)] mobile:max-tablet-figma:leading-[clamp(20px,20px+(100vw-360px)/408*4,24px)]">
<h3 className="text-[#ffffff] font-medium desktop:mb-8 h3">
Промышленные тренажеры виртуальной реальности
</h1>
<p className="desktop:hidden tablet:max-desktop:mt-11 mobile:max-tablet:mt-2 m-text text-[#ffffff]">
</h3>
<p className="desktop:hidden tablet:max-desktop:mt-11 mobile:max-tablet:mt-2 tablet:max-desktop:mb-5 m-text text-[#ffffff]">
Может быть еще какой-нибудь небольшой текст, а то мне не хватает
для балланса. Ну если не будет, то как-нибудь переживем
</p>
@@ -18,7 +18,7 @@ export function TrainingsTab() {
/>
</div>
</div>
<div className="flex desktop:flex-col tablet:max-desktop:mt-8 desktop:gap-y-6 mobile:max-tablet:flex-col mobile:max-tablet:gap-y-4 tablet:max-desktop:gap-x-3">
<div className="desktop:flex mobile:max-tablet:flex desktop:flex-col tablet:grid grid-cols-3 desktop:gap-y-6 tablet:max-desktop:mt-8 mobile:max-tablet:mt-4 h-full mobile:max-tablet:flex-col mobile:max-tablet:gap-y-4 tablet:max-desktop:gap-x-3">
<TeachingItem
iconType="danger"
text="Отработка проведения технологических операций: оказание первой помощи, работы на высоте, работа с доменной печью и т.п."
@@ -50,7 +50,7 @@ function TeachingItem({
iconType: 'danger' | 'service' | 'safety';
}) {
return (
<div className="desktop:border-l-0 tablet:border-l mobile:max-tablet:first:border-t-0 mobile:max-tablet:border-t border-[#3D425C] desktop:flex desktop:items-start desktop:gap-x-7 tablet:max-desktop:pl-3 mobile:max-tablet:pt-4">
<div className="desktop:border-l-0 tablet:border-l mobile:max-tablet:first:border-t-0 mobile:max-tablet:border-t border-[#3D425C] desktop:flex desktop:items-start desktop:gap-x-7 tablet:max-desktop:pl-3 mobile:max-tablet:first:pt-0 mobile:max-tablet:pt-4">
<img
src={`src/assets/${iconType}_icon.svg`}
alt=""
src/components/Main/Products.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export function Products() {
продуктами GRAFF.training
</span>
</Title>
<div className="desktop-figma:pl-64">
<div className="">
<MiniTitle className="desktop:hidden" text="Продукты" />
<div
className={
src/components/Main/Teaching.tsx
+3 -3
View File
@@ -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">
<div className="desktop:py-[70px] desktop:mb-[60px] 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 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]"
@@ -13,9 +13,9 @@ export function Teaching() {
WebkitTextFillColor: 'transparent',
}}
>
Тренинг модуль{' '}
Тренинг модуль
</span>
помогает осуществлять координацию между всеми участниками процесса
&nbsp;помогает осуществлять координацию между всеми участниками процесса
</Title>
<Title className="desktop-figma:mb-[29px] desktop:hidden mobile:mb-6">
<span
src/components/Main/Trainings.tsx
+3 -6
View File
@@ -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}
src/components/icons/Close2Icon.tsx
+3 -3
View File
@@ -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>
);
src/ui/AppearanceHr.tsx
+13 -6
View File
@@ -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'}
/>
);
}