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

started fixed slider, todo other tabs for products

Browse Source
This commit is contained in:
Lanskikh
2024-07-05 14:07:53 +05:00
parent 3b28b606b5
commit 161b1a1d67
3 changed files with 73 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Layout/Navbar.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export function Navbar() {
{!menuOpen && <LangToggler lang={lang} />}
<button
onClick={() => setMenuOpen(prev => !prev)}
className="px-6 py-5 min-[1350px]:hidden mobile:block"
className="px-6 py-5 min-[1350px]:hidden mobile:block border-[#3D425C] mobile:max-tablet:border-l"
>
<img
src={`src/assets/${menuOpen ? 'cross' : 'burger'}.svg`}
src/components/Main/Products.tsx
+68 -30
View File
@@ -39,7 +39,13 @@ export function Products() {
text="Тренажеры для учебных заведений"
/>
</div>
<TrainingsTab />
{curTab === 0 ? (
<TrainingsTab />
) : curTab === 1 ? (
<SimulatorsTab />
) : (
<></>
)}
</div>
);
}
@@ -139,34 +145,66 @@ function TrainingsTab() {
function SimulatorsTab() {
return (
<div className="flex">
<div className="desktop:max-w-[584px]">
<h1 className="text-[#ffffff] font-medium tablet-figma:text-[clamp(24px,24px+(100vw-768px)/832*8,32px)] tablet-figma:leading-[clamp(24px,24px+(100vw-768px)/832*8,32px)] mobile:max-tablet-figma:text-2xl mobile:max-tablet-figma:leading-6">
Интерактивные симуляторы управления техникой
</h1>
<ul>
<SimulatorsItem text="авиационные симуляторы" />
<SimulatorsItem text="погрузчики – ричстракеры" />
<SimulatorsItem text="тяговые составы железной дороги" />
<SimulatorsItem text="грузовые краны" />
<SimulatorsItem text="вертолетная техника" />
<SimulatorsItem text="горные самосвалы и экскаваторы" />
</ul>
<h2 className="text-[#ffffff] font-medium tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(19.2px,19.2px+(100vw-768px)/832*2.4,21.6px)] mobile:max-tablet-figma:text-[clamp(14px,14px+(100vw-360px)/408*2,16px)] mobile:max-tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-360px)/408*2.4,19.2px)]">
В основу симуляторов заложена математическая модель, полностью
соответствующая работе настоящего оборудования
</h2>
<p className="text-[#ffffff] opacity-60 tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-768px)/832*2.8,19.6px)] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[16.8px]">
модель позволяет производить расчеты характеристик работы, отслеживать
безопасность работы устройств и симулировать внештатные ситуации.
</p>
</div>
<div className="flex">
<img src="src/assets/train.png" alt="" />
<img src="src/assets/dispatcher.png" alt="" />
<img src="src/assets/winda.png" alt="" />
<img src="src/assets/rzhd.png" alt="" />
<img src="src/assets/rzhd2.png" alt="" />
<div className="bg-[#3D425C4D] rounded-xl desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 desktop:max-h-[546px] overflow-hidden">
<div className="tablet:flex justify-between gap-x-2">
<div className="desktop:max-w-[539px] tablet:max-w-[50vw]">
<h1 className="max-w-[455px] text-[#ffffff] font-medium tablet-figma:text-[clamp(24px,24px+(100vw-768px)/832*8,32px)] tablet-figma:leading-[clamp(24px,24px+(100vw-768px)/832*8,32px)] mobile:max-tablet-figma:text-[clamp(20px,20px+(100vw-360px)/408*4,24px)] mobile:max-tablet-figma:leading-6 desktop:mb-8 tablet:mb-6 mobile:mb-5">
Интерактивные симуляторы управления техникой
</h1>
<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="max-w-[455px] mobile:max-tablet:mb-5">
<h2 className="text-[#ffffff] font-medium tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(19.2px,19.2px+(100vw-768px)/832*2.4,21.6px)] mobile:max-tablet-figma:text-[clamp(14px,14px+(100vw-360px)/408*2,16px)] mobile:max-tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-360px)/408*2.4,19.2px)] desktop:mb-2 mobile:max-tablet:mb-3">
В основу симуляторов заложена математическая модель, полностью
соответствующая работе настоящего оборудования
</h2>
<p className="tablet:max-desktop:hidden text-[#ffffff] opacity-60 tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-768px)/832*2.8,19.6px)] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[16.8px]">
модель позволяет производить расчеты характеристик работы,
отслеживать безопасность работы устройств и симулировать
внештатные ситуации.
</p>
</div>
</div>
<div className="tablet:max-desktop:max-w-[234px]">
<div className="flex desktop:justify-end mobile:max-tablet:relative xl:max-w-[clamp(552px,552px+(100vw-1280px)/320*160,712px)] desktop:max-xl:max-w-[300px] tablet:max-desktop:flex-col tablet:flex-wrap gap-2 tablet:max-desktop:mb-10">
<img
src="src/assets/train.png"
className="rounded-lg xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
alt=""
/>
<img
src="src/assets/dispatcher.png"
className="xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
alt=""
/>
<img
src="src/assets/winda.png"
className="xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
alt=""
/>
<img
src="src/assets/rzhd.png"
className="xl:w-[clamp(272px,272px+(100vw-1280px)/320*80,352px)]"
alt=""
/>
<img
src="src/assets/rzhd2.png"
className="xl:w-[clamp(272px,272px+(100vw-1280px)/320*80,352px)]"
alt=""
/>
</div>
<p className="desktop:hidden mobile:max-tablet:hidden text-[#ffffff] opacity-60 tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-768px)/832*2.8,19.6px)] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[16.8px]">
модель позволяет производить расчеты характеристик работы,
отслеживать безопасность работы устройств и симулировать внештатные
ситуации.
</p>
</div>
</div>
</div>
);
@@ -174,7 +212,7 @@ function SimulatorsTab() {
function SimulatorsItem({ text }: { text: string }) {
return (
<li className="text-[#ffffff] tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(21.6px,21.6px+(100vw-768px)/832*2.7,24.3px)] mobile:max-tablet-figma:text-[clamp(14px,14px+(100vw-360px)/408*2,16px)] mobile:max-tablet-figma:leading-[clamp(18.9px,18.9px+(100vw-360px)/408*2.7,21.6px)]">
<li className="text-[#ffffff] tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(21.6px,21.6px+(100vw-768px)/832*2.7,24.3px)] mobile:max-tablet-figma:text-[clamp(14px,14px+(100vw-360px)/408*2,16px)] mobile:max-tablet-figma:leading-[clamp(18.9px,18.9px+(100vw-360px)/408*2.7,21.6px)] bg-[#3D425C4D] rounded-[44px] desktop:px-5 desktop:py-2 mobile:px-4 mobile:py-[6px]">
{text}
</li>
);
src/components/Main/Projects.tsx
+4 -3
View File
@@ -5,7 +5,7 @@ import { Title } from '../../ui/Title';
export function Projects() {
return (
<div className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-6 mobile:px-4 overflow-hidden select-none">
<div 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">
<span
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
@@ -96,6 +96,7 @@ function Slider({
setSliderOffset(prev => prev + baseOffset);
return [...state.slice(1), state[2]];
}
1;
if (action === 'prev') {
setSliderOffset(-baseOffset * 2);
return [state[state.length - 3], ...state.slice(0, -1)];
@@ -109,7 +110,7 @@ function Slider({
useEffect(() => {
setSliderOffset(-baseOffset);
}, [order, baseOffset]);
}, [order, baseOffset, slide]);
return (
<div className="flex flex-col desktop:mt-4 tablet:mt-3 mobile:mt-2">
@@ -159,8 +160,8 @@ function Slider({
</div>
<button
onClick={() => {
dispatch('next');
setSlide(prev => (prev === order.length - 3 ? 0 : prev + 1));
dispatch('next');
}}
className="mobile:max-tablet:hidden"
>