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 18:42:55 +05:00
parent c055eb6f89
commit cb95269c4c
5 changed files with 69 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Main/Efficiency.tsx
+24 -5
View File
@@ -21,6 +21,7 @@ export function Effeciency() {
/>
<Figure
percents={90}
type="right"
title={'готовность к опасным ситуациямние выше на'}
/>
</div>
@@ -48,15 +49,33 @@ export function Effeciency() {
);
}
function Figure({ title, percents }: { percents: number; title: string }) {
function Figure({
title,
percents,
type = 'left',
}: {
percents: number;
title: string;
type?: 'left' | 'right';
}) {
return (
<motion.div
whileHover={{
backgroundImage:
'url(src/assets/left_variance_figure.svg),url(src/assets/efficiency_backlight.svg)',
transition: { duration: 1 },
backgroundImage: `url(src/assets/${type}_variance_figure.svg),url(src/assets/efficiency_backlight.svg)`,
backgroundSize: 'auto,100% 100%',
}}
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]"
initial={{
backgroundImage: `url(src/assets/${type}_variance_figure.svg)`,
WebkitBorderRadius: 16,
MozBorderRadius: 16,
borderRadius: 16,
}}
animate={{
backgroundImage: `url(src/assets/${type}_variance_figure.svg),url(src/assets/efficiency_backlight.svg)`,
backgroundSize: 'auto,0% 0%',
}}
transition={{ duration: 0.075 }}
className="bg-[url(src/assets/left_variance_figure.svg)] hover:bg-[url(src/assets/left_variance_figure.svg),url(src/assets/efficiency_backlight.svg)] last:hover:bg-[url(src/assets/right_variance_figure.svg),url(src/assets/efficiency_backlight.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-[position:bottom_right_24px,bottom_right] 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%]">
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')] 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="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-figma:max-desktop:h-[min(460px,60vw)] tablet:max-tablet-figma:h-[max(460px,60vw)] mobile:max-tablet:min-h-[746pxsdf] 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
+38 -27
View File
@@ -5,7 +5,7 @@ import { useSwipeable } from 'react-swipeable';
export function SimulatorsTab() {
const width = useWindowWidth();
const [slide, setSlide] = useState(0);
const [sliderOffset, setSliderOffset] = useState(-width + 80);
const [sliderOffset, setSliderOffset] = useState(0);
const [order, dispatch] = useReducer(
(state: string[], action: string) => {
@@ -30,7 +30,7 @@ export function SimulatorsTab() {
);
useEffect(() => {
setSliderOffset(-width + 80);
setSliderOffset(-0);
}, [order, slide, width]);
const handlers = useSwipeable({
@@ -48,26 +48,28 @@ export function SimulatorsTab() {
});
return (
<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]">
<SimulatorsItem text="авиационные симуляторы" />
<SimulatorsItem text="погрузчики – ричстракеры" />
<SimulatorsItem text="тяговые составы железной дороги" />
<SimulatorsItem text="грузовые краны" />
<SimulatorsItem text="вертолетная техника" />
<SimulatorsItem text="горные самосвалы и экскаваторы" />
</ul>
<div className="tablet:max-desktop:max-w-[455px] mobile:max-tablet:mb-5">
<div className="bg-[#3D425C4D] rounded-xl flex desktop:aspect-[1520/546] tablet:max-desktop:aspect-[720/460] mobile:max-tablet:min-h-[746psfgx] w-full desktop:h-[max(534px,34vw)] tablet-figma:max-desktop:h-[min(460px,60vw)] tablet:max-tablet-figma: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="flex tablet:justify-between w-full h-full mobile:max-tablet:flex-col mobile:max-tablet:justify-between items-center gap-x-2">
<div className="desktop:max-w-[539px] tablet:max-w-[50vw] self-start flex flex-col tablet:max-desktop:justify-between tablet:max-desktop:h-full">
<div className="flex flex-col">
<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 mobile:max-tablet:grid desktop:gap-2 mobile:max-desktop:gap-1 desktop:mb-12 mobile:max-tablet:mb-5 tablet:max-desktop:max-w-[325px]">
<SimulatorsItem text="авиационные симуляторы" />
<SimulatorsItem text="погрузчики – ричстракеры" />
<SimulatorsItem text="тяговые составы железной дороги" />
<SimulatorsItem text="грузовые краны" />
<SimulatorsItem text="вертолетная техника" />
<SimulatorsItem text="горные самосвалы и экскаваторы" />
</ul>
</div>
<div className="tablet:max-desktop:max-w-[455px]">
<h4 className="text-[#ffffff] font-medium l-text desktop:mb-2 mobile:max-tablet:mb-3">
В основу симуляторов заложена математическая модель, полностью
соответствующая работе настоящего оборудования
</h4>
<p className="tablet:max-desktop:hidden text-[#ffffff] opacity-60 m-text">
<p className="tablet:max-desktop:hidden text-[#ffffff] mb-5 opacity-60 m-text">
модель позволяет производить расчеты характеристик работы,
отслеживать безопасность работы устройств и симулировать
внештатные ситуации.
@@ -77,12 +79,12 @@ export function SimulatorsTab() {
<div className="self-center tablet:max-desktop:max-w-[234px]">
<div {...handlers}>
<div
className="flex desktop:justify-end select-none mobile:max-tablet:relative xl:max-desktop-figma:max-w-[clamp(553px,553px+(100vw-1280px)/320*160,713px)] desktop-figma:max-w-[calc((100vw-256px)*0.53)] desktop:max-xl:max-w-[300px] tablet:max-desktop:flex-col tablet:flex-wrap gap-2 tablet:max-desktop:mb-10 mobile:max-tablet:duration-1000"
className="flex h-full desktop:justify-end select-none mobile:max-tablet:relative xl:max-desktop-figma:max-w-[clamp(553px,553px+(100vw-1280px)/320*160,713px)] desktop-figma:max-w-[calc((100vw-256px)*0.53)] desktop:max-xl:max-w-[300px] tablet:max-desktop:flex-col tablet:flex-wrap gap-2 tablet:max-desktop:mb-10 mobile:max-tablet:duration-1000"
style={
width < 640
? {
transform: `translateX(${sliderOffset}px)`,
transition: `${sliderOffset === 0 || sliderOffset === (-width + 80) * 2 ? 0 : 0.4}s`,
transition: `${sliderOffset === 0 || sliderOffset === -width * 2 ? 0 : 0.4}s`,
}
: {}
}
@@ -90,12 +92,21 @@ export function SimulatorsTab() {
>
{width < 640 ? (
order.map((src, index) => (
<img
key={index}
src={src}
className="rounded-lg object-cover container pointer-events-none"
alt=""
/>
<div
className="bg-no-repeat rounded-lg aspect-[280/176] pointer-events-none h-full w-min bg-cover"
style={{
minWidth: width - 80,
backgroundImage: `url(${src})`,
}}
>
<img
key={index}
src={src}
width={width - 80}
className="invisible rounded-lg object-contain h-full"
alt=""
/>
</div>
))
) : (
<>
@@ -141,7 +152,7 @@ export function SimulatorsTab() {
function SimulatorsItem({ text }: { text: string }) {
return (
<li className="text-[#ffffff] l-text bg-[#3D425C4D] rounded-[44px] desktop:px-5 desktop:py-2 mobile:px-4 mobile:py-[6px]">
<li className="text-[#ffffff] l-text bg-[#3D425C4D] rounded-[44px] w-fit desktop:px-5 desktop:py-2 mobile:px-4 mobile:py-[6px]">
{text}
</li>
);
src/components/Main/ProductTabs/TrainingsTab.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
export function TrainingsTab() {
return (
<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="bg-[#3D425C4D] rounded-xl desktop:aspect-[1520/546] tablet:aspect-[720/460] desktop:h-[max(534px,34vw)] tablet-figma:max-desktop:h-[min(460px,60vw)] tablet:max-tablet-figma:h-[max(460px,60vw)] mobile:max-tablet: 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-[max(455px,28vw)]">
<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]">
<div className="tablet:max-desktop:max-w-[51vw] mobile:max-tablet:border-b border-[#3D425C]">
<h3 className="text-[#ffffff] font-medium desktop:mb-8 h3">
Промышленные тренажеры виртуальной реальности
</h3>
src/components/Main/Teaching.tsx
+3 -1
View File
@@ -15,7 +15,9 @@ export function Teaching() {
>
Тренинг модуль
</span>
&nbsp;помогает осуществлять координацию между всеми участниками процесса
<br className="mobile:max-desktop:hidden" />
<span className="desktop:hidden">&nbsp;</span>помогает осуществлять
координацию между всеми участниками процесса
</Title>
<Title className="desktop-figma:mb-[29px] desktop:hidden mobile:mb-6">
<span