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

tabs completed

Browse Source
This commit is contained in:
Lanskikh
2024-07-05 18:03:16 +05:00
parent 949f0bd320
commit e2c39fdc8e
2 changed files with 71 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/mask_group2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 444 KiB

src/components/Main/Products.tsx
+71 -2
View File
@@ -45,7 +45,7 @@ export function Products() {
) : curTab === 1 ? (
<SimulatorsTab />
) : (
<></>
<ForTeachingTab />
)}
</div>
);
@@ -182,7 +182,7 @@ function SimulatorsTab() {
<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 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-[clamp(20px,20px+(100vw-360px)/408*4,24px)] 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]">
@@ -286,3 +286,72 @@ function SimulatorsItem({ text }: { text: string }) {
</li>
);
}
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='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'>
<h1 className="text-[#ffffff] font-medium desktop:max-w-[455px] tablet:max-w-[326px] mobile:max-tablet:mb-5 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-[clamp(20px,20px+(100vw-360px)/408*4,24px)]">
Интерактивные тренажеры для учебных заведений
</h1>
<img
src="src/assets/mask_group2.png"
className="tablet:hidden"
alt=""
/>
</div>
<div className="flex desktop:flex-col mobile:max-tablet:flex-col desktop:gap-y-6 mobile:gap-y-4 desktop:mb-12 tablet:max-desktop:mb-8 mobile:max-tablet:mb-5 tablet:max-desktop:border-b border-[#3D425C] tablet:max-desktop:pb-8">
<div className="flex gap-x-7 items-stretch desktop:max-w-[437px] tablet:w-fit tablet:max-desktop:pr-3 mobile:max-tablet:pb-4 mobile:max-tablet:border-b border-[#3D425C]">
<img
src="src/assets/service_icon.svg"
className="mobile:max-desktop:hidden"
alt=""
/>
<div className="desktop:pl-4 tablet:pl-[13px] tablet:border-l border-[#3D425C]">
<div className="flex mobile:max-tablet:items-center tablet:items-start tablet:max-desktop:flex-col gap-x-2 mb-2">
<img
src="src/assets/service_icon.svg"
className="desktop:hidden"
alt=""
/>
<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-[16.8px,16.8px+(100vw-360px)/408*2.4,19.2px]">
cоздание обучающих VR систем
</h2>
</div>
<p className="text-[#ffffff] opacity-60 desktop:font-medium 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-3">
Проведение виртуальных практических работ, создание учебных
мастерских и стендов
</p>
</div>
</div>
<div className="flex gap-x-7 items-start desktop:max-w-[437px] tablet:w-fit tablet:max-desktop:pr-3 mobile:max-tablet:pb-4 mobile:max-tablet:border-b border-[#3D425C]">
<img
src="src/assets/service_icon.svg"
className="mobile:max-desktop:hidden"
alt=""
/>
<div className="desktop:pl-4 tablet:pl-[13px] tablet:border-l border-[#3D425C]">
<div className="flex mobile:max-tablet:items-center tablet:items-start tablet:max-desktop:flex-col gap-x-2 mb-2">
<img
src="src/assets/service_icon.svg"
className="desktop:hidden"
alt=""
/>
<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-[16.8px,16.8px+(100vw-360px)/408*2.4,19.2px]">
cоздание VR лабораторий
</h2>
</div>
<p className="text-[#ffffff] opacity-60 desktop:font-medium 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-3">
Тренажер для проведения лабораториных работ позволит избежать
поломки оборудования, а также экономить на расходных средствах
</p>
</div>
</div>
</div>
<p className="text-[#ffffff] font-medium desktop:max-w-[408px] 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)]">
Оснащение учебных классов и центров всем необходимым для современного
обучения под «ключ»
</p>
</div>
);
}