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

fixed by edits, todo fixed wide products tabs content

Browse Source
This commit is contained in:
Lanskikh
2024-07-08 19:55:37 +05:00
parent dd7308ba90
commit 616badbc7b
14 changed files with 137 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/cube.svg
+4 -4
View File
@@ -1,5 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.8">
<path d="M18.1371 6H10.1532L6 10.4296V18.1075H13.6882L18.1371 13.9732V6Z" fill="white"/>
</g>
<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.15322 0.946289H12.1371V8.91949H4.15322V0.946289Z" fill="white"/>
<path d="M12.1371 8.91949H4.15322L0 13.0537H7.68817L12.1371 8.91949Z" fill="white"/>
<path d="M4.15322 8.91949V0.946289L0 5.37585V13.0537L4.15322 8.91949Z" fill="white"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 215 B

After

Width:  |  Height:  |  Size: 351 B

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

After

Width:  |  Height:  |  Size: 2.0 MiB

src/components/Main/Availables.tsx
+3 -3
View File
@@ -18,7 +18,7 @@ export function Availables() {
<br />
режим обучения
</Title>
<div className="flex mobile:max-desktop:flex-col items-start desktop:w-fit gap-x-4 tablet:pt-5 tablet:border-t border-[#3D425C]">
<div className="flex mobile:max-desktop:flex-col items-start desktop:w-fit tablet:pt-5 tablet:border-t border-[#3D425C]">
<MiniTitle text="возможности" />
<div className="tablet:max-desktop-figma:mt-4 mobile:max-tablet:mt-[9px]">
<div className="grid tablet:grid-cols-3 mobile:max-tablet:gap-y-2 desktop:gap-x-4 tablet:max-desktop:gap-x-3 border-b border-[#3D425C] tablet:pb-5 mobile:pb-2 mb-6 justify-stretch mobile:max-tablet:border-t mobile:max-tablet:pt-2">
@@ -35,7 +35,7 @@ export function Availables() {
text="координация действий между несколькими сотрудниками"
/>
</div>
<h3 className="text-[#ffffff] font-medium tablet-figma:max-w-[668px] h3">
<h3 className="text-[#ffffff] font-medium tablet-figma:max-w-[668px] desktop-figma:max-w-[39.25vw] h3">
В одном цифровом пространстве{' '}
<span className="opacity-60">
могут работать сотрудники, находящиеся в разных помещениях,
@@ -50,7 +50,7 @@ export function Availables() {
function MultiUserFeature({ text, img }: { text: string; img: string }) {
return (
<div className="flex flex-col justify-between items-start p-6 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:max-w-[367px] desktop:min-h-[214px] tablet:min-h-[240px] mobile:min-h-[220px]">
<div className="flex flex-col justify-between items-start p-6 bg-[#3D425C4D] rounded-2xl desktop:max-w-[30vw] desktop:min-h-[214px] tablet:min-h-[240px] mobile:min-h-[220px]">
<img src={img} alt="" className="mb-14" />
<p className="l-text text-[#ffffff]">{text}</p>
</div>
src/components/Main/Contacts.tsx
+4 -4
View File
@@ -2,7 +2,7 @@ import { Title } from '../../ui/Title';
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">
<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">
Хотите использовать интерактивные тренажеры в обучении?
@@ -18,12 +18,12 @@ export function Contacts() {
Давайте обсудим детали.
</span>
</Title>
<button className="bg-gradient-to-r from-[#798FFF] to-[#D375FF] rounded-[104px] py-4 px-6 flex font-semibold text-[#ffffff] justify-between desktop:min-w-[368px] tablet:max-desktop:min-w-[332px] mobile:max-tablet:w-full items-center btn-text">
<button className="bg-gradient-to-r from-[#798FFF] to-[#D375FF] rounded-[104px] py-4 px-6 flex font-semibold text-[#ffffff] justify-between desktop-figma:min-w-[23vw] desktop:max-desktop-figma:min-w-[368px] tablet:max-desktop:min-w-[332px] mobile:max-tablet:w-full items-center btn-text">
Оставить заявку <img src="src/assets/send.svg" alt="" />
</button>
</div>
<div className="desktop-figma:min-w-[507px] tablet:max-desktop:flex items-stretch justify-between">
<div className="tablet-figma:max-desktop:min-w-[332px] tablet:max-tablet-figma:min-w-[250px]">
<div className="min-w-[31.69vw] tablet:max-desktop:flex items-stretch justify-between gap-x-4">
<div className="desktop:min-w-[20.75vw] tablet:w-full">
<p className="text-[#ffffff] mb-4 l-text">Свяжитесь с нами</p>
<div className="flex flex-col gap-y-3 desktop:mb-20 mobile:max-tablet:mb-6">
<button className="text-[#ffffff] font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] btn-text">
src/components/Main/Decreasing.tsx
+3 -3
View File
@@ -30,8 +30,8 @@ export function Decreasing() {
сократить затраты на обучение, повысить безопасность и
производительность
</Title>
<div className="flex tablet-figma:flex-row mobile:max-tablet-figma:flex-col justify-between gap-x-3 tablet:items-end desktop:pl-64 desktop:mt-14 mobile:mt-6">
<ul className="xl:max-w-[752px] w-full tablet:min-w-[318px] mobile:mb-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:mt-14 mobile:mt-6">
<ul className="xl:max-w-[47vw] w-full tablet:min-w-[318px] mobile:mb-6">
<li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
<Plus text="снижение количества несчастных случаев" />
<Number text="[01]" />
@@ -55,7 +55,7 @@ export function Decreasing() {
</ul>
<img
src="src/assets/effect.png"
className="mobile:max-tablet-figma:self-center mobile:max-tablet-figma:w-full"
className="mobile:max-tablet-figma:self-center mobile:max-tablet-figma:w-full object-contain"
alt=""
/>
</div>
src/components/Main/Distance.tsx
+2 -2
View File
@@ -27,12 +27,12 @@ export function Distance() {
<img
src="src/assets/datamining_2.png"
alt=""
className="row-start-2 mobile:max-tablet:mb-4"
className="row-start-2 mobile:max-tablet:mb-4 w-full"
/>
<img
src="src/assets/datamining_1.png"
alt=""
className="row-start-2 col-start-2 h-full"
className="row-start-2 col-start-2 h-full w-full"
/>
</div>
</div>
src/components/Main/Efficiency.tsx
+4 -4
View File
@@ -4,9 +4,9 @@ export function Effeciency() {
return (
<div className="desktop:py-[70px] mobile:py-14 desktop:px-10 tablet:px-6 mobile:px-4">
<div className="flex mobile:max-desktop:flex-col tablet:border-t border-[#3D425C] pt-5 tablet:gap-4">
<MiniTitle text={'экономическая эффективность'} className="min-w-60" />
<MiniTitle text={'экономическая эффективность'} />
<div className="mobile:max-tablet:mt-4">
<div className="flex mobile:max-tablet:flex-col desktop:w-[clamp(728px,728px+(100vw-1024px)/576*405,1133px)] justify-stretch items-stretch gap-x-4 gap-y-2 mobile:max-tablet:py-5 tablet:pb-5 border-b border-[#3D425C] mb-9 tablet:border-t-0 mobile:border-t">
<div className="flex mobile:max-tablet:flex-col desktop-figma:w-[70.8vw] desktop:max-desktop-figma:w-[clamp(728px,728px+(100vw-1024px)/576*405,1133px)] justify-stretch items-stretch gap-x-4 gap-y-2 mobile:max-tablet:py-5 tablet:pb-5 border-b border-[#3D425C] mb-9 tablet:border-t-0 mobile:border-t">
<Figure
variance={'left'}
percents={50}
@@ -23,7 +23,7 @@ export function Effeciency() {
title={'готовность к опасным ситуациямние выше на'}
/>
</div>
<h3 className="text-[#ffffff] font-medium h3 max-w-[752px]">
<h3 className="text-[#ffffff] font-medium h3 max-w-[752px] desktop-figma:max-w-[47vw]">
В тренажере человек принимает решения так же, как в реальном мире,{' '}
<span className="opacity-60">
активируя те же нейронные цепочки в мозгу. Это позволяет добиться
@@ -55,7 +55,7 @@ function Figure({
}}
>
<div className="text-[#ffffff] flex flex-col justify-between py-6">
<h6 className="desktop:font-medium m-text">{title}</h6>
<h6 className="desktop:font-medium l-text">{title}</h6>
<h1 className="font-medium flex items-center tablet-figma:text-[clamp(64px,64px+(100vw-768px)/832*32,96px)] tablet-figma:leading-[clamp(57.6px,57.6px+(100vw-768px)/832*28.8,86.4px)] mobile:text-[64px] mobile:leading-[57.6px]">
{percents}
<span className="tablet-figma:text-[clamp(32px,32px+(100vw-768px)/832*32,64px)] tablet-figma:leading-[clamp(32px,32px+(100vw-768px)/832*25.6,57.6px)] mobile:text-[32px] mobile:leading-8">
src/components/Main/Events.tsx
+4 -4
View File
@@ -5,10 +5,10 @@ import { PropsWithChildren } from 'react';
export function Events() {
return (
<div className="desktop:py-[70px] desktop:px-10 tablet:py-14 tablet:px-6 mobile:px-4">
<div className="flex desktop:border-t mobile:max-desktop:flex-col border-[#3D425C] pt-5 gap-x-4 desktop:max-w-[clamp(944px,944px+(100vw-768px)/832*445,1389px)] w-full">
<div className="flex desktop:border-t mobile:max-desktop:flex-col border-[#3D425C] pt-5 gap-x-4 w-full">
<MiniTitle text="события" className="mobile:max-tablet:mb-2" />
<div className="desktop:min-w-[clamp(688px,688px+(100vw-1024px)/576*425,1133px)] w-full">
<div className="py-5 tablet:border-b mobile:max-tablet:border-t border-[#3D425C] flex justify-between mobile:max-tablet:flex-col items-start gap-x-4 w-full">
<div className="desktop:max-desktop-figma:min-w-[clamp(688px,688px+(100vw-1024px)/576*425,1133px)] desktop-figma:min-w-[70.9vw]">
<div className="py-5 tablet:border-b mobile:max-tablet:border-t border-[#3D425C] flex justify-between mobile:max-tablet:flex-col items-start gap-x-4">
<div className="w-fit">
<EventTitle className="tablet:mb-8 w-fit">
Макет кабины машиниста «Иволга» на выставке ВДНХ
@@ -57,7 +57,7 @@ function LinkButton({ href }: { href: string }) {
return (
<Link
to={href}
className="text-[#ffffff] opacity-60 uppercase flex items-center gap-2 desktop:min-w-[133px] tablet:max-desktop:min-w-[118px] mobile:max-tablet:self-end link mobile:max-tablet:mt-4"
className="text-[#ffffff] opacity-60 uppercase flex items-center gap-2 desktop:min-w-[133px] tablet:max-desktop:min-w-[140px] mobile:max-tablet:self-end link mobile:max-tablet:mt-4"
>
как это было <img src="src/assets/arrow_insert.svg" alt="" />
</Link>
src/components/Main/Products.tsx
+65 -60
View File
@@ -11,7 +11,7 @@ export function Products() {
return (
<div 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 -tracking-[.02em] desktop:block mobile:hidden">
<Title className="mb-14 desktop:block mobile:hidden">
Процесс обучения сотрудников станет безопасней и эффективней с
<span
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
@@ -27,7 +27,7 @@ export function Products() {
</Title>
<MiniTitle className="desktop:hidden" text="Продукты" />
<div
className="flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 scrollbar scrollbar-track-inherit scrollbar-thumb-rounded-[4px] scrollbar-h-1 scrollbar-thumb-[#798fff] rounded-xl p-1 mb-2 w-fit max-w-full overflow-auto tablet:max-desktop:mt-[13px] mobile:mt-6 mobile:max-[912px]:[-webkit-mask-image:_linear-gradient(to_left,rgba(32,35,50,0)_0%,rgba(32,35,50,1)_20%)]"
className="flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 scrollbar-none rounded-xl p-1 mb-2 w-fit max-w-full overflow-auto tablet:max-desktop:mt-[13px] mobile:mt-6 mobile:max-[912px]:[-webkit-mask-image:_linear-gradient(to_left,rgba(32,35,50,0)_0%,rgba(32,35,50,1)_20%)]"
ref={ref}
>
<TabButton
@@ -126,7 +126,7 @@ function TeachingItem({
function TrainingsTab() {
return (
<div className="bg-[#3D425C4D] rounded-xl desktop:bg-[url('src/assets/mask_group.png')] 2xl:bg-contain bg-right-bottom desktop:max-2xl:bg-[length:60%] desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 bg-no-repeat">
<div className="bg-[#3D425C4D] rounded-xl desktop:bg-[url('src/assets/mask_group.png')] desktop-figma:bg-contain bg-right-bottom 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:max-w-[326px] mobile:max-tablet:border-b border-[#3D425C]">
@@ -138,8 +138,8 @@ function TrainingsTab() {
для балланса. Ну если не будет, то как-нибудь переживем
</p>
<img
src="src/assets/mask_group.png"
className="tablet:hidden mt-4"
src="src/assets/mask_group_big.svg"
className="tablet:hidden mt-4 object-cover w-full"
alt=""
/>
</div>
@@ -208,10 +208,13 @@ function SimulatorsTab() {
dispatch('prev');
setSlide(prev => (prev === 0 ? order.length - 3 : prev - 1));
},
trackMouse: true,
preventScrollOnSwipe: true,
touchEventOptions: { passive: true },
});
return (
<div className="bg-[#3D425C4D] rounded-xl desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 select-none">
<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">
@@ -238,56 +241,58 @@ function SimulatorsTab() {
</div>
</div>
<div className="self-center tablet:max-desktop:max-w-[234px]">
<div
className="flex desktop:justify-end mobile:max-tablet:relative xl:max-w-[clamp(553px,553px+(100vw-1280px)/320*160,713px)] 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`,
}
: {}
}
{...handlers}
>
{width < 640 ? (
order.map((src, index) => (
<img
key={index}
src={src}
className="rounded-lg mobile:max-tablet:min-w-[clamp(280px,100vw-80px,559px)] object-cover"
alt=""
/>
))
) : (
<>
<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 {...handlers}>
<div
className="flex desktop:justify-end select-none mobile:max-tablet:relative xl:max-w-[clamp(553px,553px+(100vw-1280px)/320*160,713px)] 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`,
}
: {}
}
{...handlers}
>
{width < 640 ? (
order.map((src, index) => (
<img
key={index}
src={src}
className="rounded-lg mobile:max-tablet:min-w-[clamp(280px,100vw-80px,559px)] object-cover select-none pointer-events-none"
alt=""
/>
))
) : (
<>
<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>
</div>
<p className="desktop:hidden mobile:max-tablet:hidden text-[#ffffff] opacity-60 m-text">
модель позволяет производить расчеты характеристик работы,
@@ -322,7 +327,7 @@ function ForTeachingTab() {
/>
</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]">
<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"
@@ -335,7 +340,7 @@ function ForTeachingTab() {
className="desktop:hidden"
alt=""
/>
<h4 className="text-[#ffffff] font-medium h4">
<h4 className="text-[#ffffff] font-medium l-text">
cоздание обучающих VR систем
</h4>
</div>
@@ -358,7 +363,7 @@ function ForTeachingTab() {
className="desktop:hidden"
alt=""
/>
<h4 className="text-[#ffffff] font-medium h4">
<h4 className="text-[#ffffff] font-medium l-text">
cоздание VR лабораторий
</h4>
</div>
@@ -369,7 +374,7 @@ function ForTeachingTab() {
</div>
</div>
</div>
<h4 className="text-[#ffffff] font-medium desktop:max-w-[408px] h4">
<h4 className="text-[#ffffff] font-medium desktop:max-w-[408px] l-text">
Оснащение учебных классов и центров всем необходимым для современного
обучения под «ключ»
</h4>
src/components/Main/Projects.tsx
+17 -13
View File
@@ -54,7 +54,7 @@ function Project({
tags: string[];
}) {
return (
<div className="bg-[#3D425C] bg-opacity-50 rounded-2xl box-border desktop:min-w-[624px] tablet:min-w-[520px] mobile:min-w-[328px] duration-1000 select-none desktop:translate-x-[264px] select-none">
<div className="bg-[#3D425C] bg-opacity-50 rounded-2xl box-border desktop:min-w-[624px] tablet:min-w-[520px] mobile:min-w-[328px] duration-1000 desktop:translate-x-[264px] pointer-events-none">
<div
className="bg-cover bg-center bg-no-repeat h-[340px] rounded-2xl"
style={{ backgroundImage: `url(${src})` }}
@@ -114,6 +114,9 @@ function Slider({
setSlide(prev => (prev === 0 ? order.length - 3 : prev - 1));
dispatch('prev');
},
trackMouse: true,
preventScrollOnSwipe: true,
touchEventOptions: { passive: false },
});
useEffect(() => {
@@ -122,19 +125,20 @@ function Slider({
return (
<div className="flex flex-col desktop:mt-4 tablet:mt-3 mobile:mt-2">
<div
className="flex gap-2 overflow-visible relative mb-[18px] -mr-10"
style={{
transition: `${sliderOffset === 0 || sliderOffset === -baseOffset * 2 ? 0 : 0.4}s`,
transform: `translateX(${sliderOffset}px)`,
}}
{...handlers}
>
{order.map((project, index) => (
<Project key={index} {...project} />
))}
<div className="" {...handlers}>
<div
className="flex gap-2 overflow-visible relative mb-[18px] -mr-10 select-none"
style={{
transition: `${sliderOffset === 0 || sliderOffset === -baseOffset * 2 ? 0 : 0.4}s`,
transform: `translateX(${sliderOffset}px)`,
}}
>
{order.map((project, index) => (
<Project key={index} {...project} />
))}
</div>
</div>
<div className="flex items-center gap-4 desktop:w-[clamp(720px,100vw-465px,1135px)] mobile:w-full self-start desktop:ml-64">
<div className="flex items-center gap-4 desktop:max-desktop-figma:w-[clamp(720px,100vw-465px,1135px)] desktop-figma:w-[70.9vw] mobile:w-full self-start desktop:ml-64">
<button
onClick={() => {
dispatch('prev');
src/components/Main/Teaching.tsx
+15 -16
View File
@@ -39,7 +39,7 @@ export function Teaching() {
function TeachingFeaturesForDesktop() {
return (
<div className="mobile:max-desktop:hidden desktop:flex-col gap-y-4 flex-wrap desktop:flex">
<div className="p-10 bg-[#3D425C4D] flex flex-col pr-20 bg-opacity-30 rounded-2xl desktop:min-h-[400px] bg-[url(src/assets/schedule_big.svg)] bg-no-repeat bg-right-bottom bg-[length:50%] desktop:min-w-[clamp(614px,614px+(100vw-1024px)/576*266,880px)]">
<div className="p-10 bg-[#3D425C4D] flex flex-col pr-20 rounded-2xl desktop:min-h-[400px] bg-[url(src/assets/schedule_big.svg)] bg-no-repeat bg-[right_bottom] bg-[length:50%] desktop:max-desktop-figma:min-w-[clamp(614px,614px+(100vw-1024px)/576*266,880px)] desktop-figma:min-w-[55vw]">
<div className="mb-[85px] max-w-[380px]">
<TeachingFeatureTitle>Управление процессом</TeachingFeatureTitle>
<TeachingFeatureDescription className="max-w-[361px]">
@@ -55,7 +55,7 @@ function TeachingFeaturesForDesktop() {
/>
</div>
<div className="p-10 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-h-[400px]">
<div className="p-10 bg-[#3D425C4D] rounded-2xl desktop:flex min-h-[400px]">
<div className="w-fit">
<TeachingFeatureTitle className="w-fit">
Управление пользователями
@@ -72,7 +72,7 @@ function TeachingFeaturesForDesktop() {
/>
</div>
<div className="p-10 pb-[18px] bg-[#3D425C4D] bg-opacity-30 rounded-2xl flex flex-col justify-between items-start min-h-[400px] bg-[url(src/assets/pinned_windows.svg)] bg-[length:45%] bg-no-repeat bg-[right_bottom]">
<div className="p-10 pb-[18px] bg-[#3D425C4D] rounded-2xl flex flex-col justify-between items-start min-h-[400px] bg-[url(src/assets/pinned_windows.svg)] bg-[length:45%] bg-no-repeat bg-[right_bottom]">
<div className="max-w-1/2">
<TeachingFeatureTitle>Видеозапись обучения</TeachingFeatureTitle>
<TeachingFeatureDescription className="max-w-[50%]">
@@ -87,7 +87,7 @@ function TeachingFeaturesForDesktop() {
/>
</div>
<div className="p-10 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-h-[400px] flex">
<div className="p-10 bg-[#3D425C4D] rounded-2xl desktop:flex min-h-[400px] flex">
<div className="max-w-[351px]">
<TeachingFeatureTitle>Статистика обучения</TeachingFeatureTitle>
<TeachingFeatureDescription>
@@ -116,7 +116,7 @@ function TeachingFeaturesForDesktop() {
function TeachingFeaturesForOtherScreens() {
return (
<div className="mobile:max-tablet:flex mobile:max-tablet:flex-col mobile:max-tablet:gap-y-2 tablet-figma:max-desktop:grid grid-rows-[272px_113px_249px] gap-3 grid-cols-2 desktop:hidden tablet:max-tablet-figma:flex tablet:max-tablet-figma:flex-col">
<div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 overflow-hidden row-start-1 col-start-1 mobile:max-tablet:flex mobile:max-tablet:flex-col">
<div className="bg-[#3D425C4D] rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 overflow-hidden row-start-1 col-start-1 mobile:max-tablet:flex mobile:max-tablet:flex-col">
<TeachingFeatureTitle>
Управление
<br /> пользователями
@@ -131,7 +131,7 @@ function TeachingFeaturesForOtherScreens() {
/>
</div>
<div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 bg-[url(src/assets/schedule_big.svg)] tablet-figma:max-desktop:bg-contain mobile:max-tablet:bg-contain mobile:max-tablet:bg-[140px_130px] tablet:max-tablet-figma:bg-[length:50%] bg-no-repeat tablet-figma:max-desktop:bg-[73px_102px] tablet:max-tablet-figma:bg-right-bottom row-start-1 row-span-2 col-start-2">
<div className="bg-[#3D425C4D] rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 bg-[url(src/assets/schedule_big.svg)] tablet-figma:max-desktop:bg-contain mobile:max-tablet:bg-contain mobile:max-tablet:bg-[140px_150px] tablet:max-tablet-figma:bg-[length:50%] bg-no-repeat tablet-figma:max-desktop:bg-[73px_130px] tablet:max-tablet-figma:bg-right-bottom row-start-1 row-span-2 col-start-2">
<TeachingFeatureTitle>Управление процессом</TeachingFeatureTitle>
<TeachingFeatureDescription>
Назначение сценария обучения
@@ -145,7 +145,7 @@ function TeachingFeaturesForOtherScreens() {
/>
</div>
<div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 bg-[url(src/assets/pinned_windows_mini.svg)] tablet:max-tablet-figma:bg-[100%_100%] tablet-figma:max-desktop:bg-contain bg-no-repeat tablet-figma:max-desktop:bg-[67px_119px] mobile:max-tablet:bg-[100%_119px] mobile:max-tablet:flex mobile:max-tablet:flex-col row-start-2 row-span-2 col-start-1">
<div className="bg-[#3D425C4D] rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 bg-[url(src/assets/pinned_windows_mini.svg)] tablet:max-tablet-figma:bg-[100%_100px] tablet-figma:max-desktop:bg-contain bg-no-repeat tablet-figma:max-desktop:bg-[67px_150px] mobile:max-tablet:bg-[100%_120px] mobile:max-tablet:flex mobile:max-tablet:flex-col row-start-2 row-span-2 col-start-1">
<TeachingFeatureTitle>Видеозапись обучения</TeachingFeatureTitle>
<TeachingFeatureDescription>
Фиксация и хранение сессий обучения, тренировки и тестирования.
@@ -153,12 +153,12 @@ function TeachingFeaturesForOtherScreens() {
</TeachingFeatureDescription>
<img
src="src/assets/manage_video.svg"
className="rounded-lg h-[94px] mt-[147px] mb-6 tablet:max-tablet-figma:mx-auto tablet:max-tablet-figma:mr-[200px] self-end mr-[168px]"
className="rounded-lg h-[94px] mt-[120px] tablet:max-tablet-figma:mx-auto tablet:max-tablet-figma:mr-[200px] self-end mr-[168px]"
alt=""
/>
</div>
<div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 tablet:max-tablet-figma:pb-6 mobile:max-tablet:pb-5 overflow-hidden row-start-3 col-start-2">
<div className="bg-[#3D425C4D] rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 tablet:max-tablet-figma:pb-6 mobile:max-tablet:pb-5 overflow-hidden row-start-3 col-start-2">
<TeachingFeatureTitle>Статистика обучения</TeachingFeatureTitle>
<TeachingFeatureDescription className="mobile:max-tablet-figma:mb-5">
Фиксация правильных и неправильных действий. <br />
@@ -190,12 +190,7 @@ function TeachingFeatureTitle({
className?: string;
}>) {
return (
<h3
className={
'h3 desktop:mb-2 mobile:max-desktop:mb-1 font-medium text-[#ffffff] ' +
className
}
>
<h3 className={'h3 mb-2 font-medium text-[#ffffff] ' + className}>
{children}
</h3>
);
@@ -207,5 +202,9 @@ function TeachingFeatureDescription({
}: PropsWithChildren<{
className?: string;
}>) {
return <p className={'l-text text-[#ffffff] ' + className}>{children}</p>;
return (
<p className={'l-text text-[#ffffff] opacity-60 ' + className}>
{children}
</p>
);
}
src/components/Main/Trainings.tsx
+1 -1
View File
@@ -53,7 +53,7 @@ function TrainingsFeature({
order: string;
}) {
return (
<div className="tablet:flex items-stretch justify-between tablet:py-10 desktop:max-w-[clamp(557px,557px+(100vw-1024px)/576*576,1133px)] border-b border-[#3D425C] first:border-t mobile:max-tablet:pt-5">
<div className="tablet:flex items-stretch justify-between tablet:py-10 desktop:max-desktop-figma:max-w-[clamp(557px,557px+(100vw-1024px)/576*576,1133px)] desktop-figma:w-[70.8vw] border-b border-[#3D425C] first:border-t mobile:max-tablet:pt-5">
<div className="tablet:flex flex-col justify-between mobile:max-tablet:mb-[42px] tablet-figma:max-w-[495px]">
<h3 className="font-medium text-[#ffffff] mobile:max-tablet:mb-2 h3">
{title}
src/index.css
+5 -5
View File
@@ -10,10 +10,10 @@ body {
@layer components {
.h1 {
@apply leading-[90%] desktop-figma:text-[clamp(96px,6vw,112px)] desktop:max-desktop-figma:text-[clamp(76px,76px+(100vw-1024px)/576*20,96px)] tablet-figma:max-desktop:text-[clamp(64px,64px+(100vw-768px)/256*16,80px)] tablet:max-tablet-figma:text-[clamp(56px,56px+(100vw-640px)/128*8,64px)] mobile:max-tablet:text-[clamp(40px,40px+(100vw-360px)/280*4,44px)];
@apply -tracking-[.02em] leading-[90%] desktop-figma:text-[clamp(96px,6vw,112px)] desktop:max-desktop-figma:text-[clamp(76px,76px+(100vw-1024px)/576*20,96px)] tablet-figma:max-desktop:text-[clamp(64px,64px+(100vw-768px)/256*16,80px)] tablet:max-tablet-figma:text-[clamp(56px,56px+(100vw-640px)/128*8,64px)] mobile:max-tablet:text-[clamp(40px,40px+(100vw-360px)/280*4,44px)];
}
.h2 {
@apply desktop:leading-[90%] mobile:max-desktop:leading-[100%] desktop-figma:text-[clamp(64px,4vw,72px)] desktop:max-desktop-figma:text-[clamp(56px,56px+(100vw-1024px)/576*8,64px)] tablet-figma:max-desktop:text-[clamp(40px,40px+(100vw-768px)/256*12,52px)] tablet:max-tablet-figma:text-[clamp(32px,32px+(1000vw-640px)/128*8,40px)] mobile:max-tablet:text-[clamp(28px,28px+(100vw-360px)/280*4,32px)];
@apply -tracking-[.02em] desktop:leading-[90%] mobile:max-desktop:leading-[100%] desktop-figma:text-[clamp(64px,4vw,72px)] desktop:max-desktop-figma:text-[clamp(56px,56px+(100vw-1024px)/576*8,64px)] tablet-figma:max-desktop:text-[clamp(40px,40px+(100vw-768px)/256*12,52px)] tablet:max-tablet-figma:text-[clamp(32px,32px+(1000vw-640px)/128*8,40px)] mobile:max-tablet:text-[clamp(28px,28px+(100vw-360px)/280*4,32px)];
}
.h3 {
@@ -33,14 +33,14 @@ body {
}
.btn-text {
@apply leading-[100%] desktop-figma:text-[clamp(18px,1.125vw,20px)] desktop:max-desktop-figma:text-[clamp(16px,16px+(100vw-1024px)/576*2,18px)] tablet-figma:max-desktop:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] tablet:max-tablet-figma:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] mobile:max-tablet:text-[clamp(14px,14px+(100vw-360px)/280*2,16px)];
@apply -tracking-[.02em] leading-[100%] desktop-figma:text-[clamp(18px,1.125vw,20px)] desktop:max-desktop-figma:text-[clamp(16px,16px+(100vw-1024px)/576*2,18px)] tablet-figma:max-desktop:text-[clamp(16px,16px+(100vw-768px)/256*2,18px)] tablet:max-tablet-figma:text-[clamp(14px,14px+(100vw-640px)/128*2,16px)] mobile:max-tablet:text-[clamp(14px,14px+(100vw-360px)/280*2,16px)];
}
.link {
@apply leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] desktop:max-desktop-figma:text-[clamp(12px,12px+(100vw-1024px)/576*2,14px)] tablet-figma:max-desktop:text-[clamp(12px,12px+(100vw-768px)/256*2,14px)] tablet:max-tablet-figma:text-xs mobile:max-tablet:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
@apply tracking-[.02em] leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] desktop:max-desktop-figma:text-[clamp(12px,12px+(100vw-1024px)/576*2,14px)] tablet-figma:max-desktop:text-[clamp(12px,12px+(100vw-768px)/256*2,14px)] tablet:max-tablet-figma:text-xs mobile:max-tablet:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
}
.descriptor {
@apply leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] desktop:max-desktop-figma:text-[clamp(12px,12px+(100vw-1024px)/576*2,14px)] tablet-figma:max-desktop:text-[clamp(12px,12px+(100vw-640px)/256*2,14px)] tablet:max-tablet-figma:text-xs mobile:max-tablet:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
@apply tracking-[.02em] leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] desktop:max-desktop-figma:text-[clamp(12px,12px+(100vw-1024px)/576*2,14px)] tablet-figma:max-desktop:text-[clamp(12px,12px+(100vw-640px)/256*2,14px)] tablet:max-tablet-figma:text-xs mobile:max-tablet:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
}
}
src/ui/MiniTitle.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ export function MiniTitle({
return (
<h2
className={
'flex gap-1 items-center self-start text-[#ffffff] uppercase opacity-80 font-medium link desktop:max-w-60 w-full ' +
'flex gap-1 items-start self-start text-[#ffffff] uppercase opacity-80 font-medium link desktop:max-w-64 xl:w-full ' +
className
}
>