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

fixed teaching faetures

Browse Source
This commit is contained in:
Lanskikh
2024-07-04 15:05:54 +05:00
parent 54b313e9f1
commit a593d1af7b
4 changed files with 144 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Layout/Footer.tsx
+29 -11
View File
@@ -1,3 +1,5 @@
import { PropsWithChildren } from 'react';
export function Footer() {
return (
<footer className="tablet:grid xl:grid-cols-[2fr_1fr_1fr] tablet:max-xl:grid-cols-2 tablet:max-xl:grid-rows-2">
@@ -6,33 +8,49 @@ export function Footer() {
<img src="src/assets/logo.svg" alt="" className="h-[50px]" />
<img src="src/assets/text_logo.svg" className="h-[33px]" alt="" />
</div>
<div className="desktop:text-sm mobile:text-xs flex flex-col gap-y-1 font-medium text-[#ffffff]">
<p className="flex gap-4 tablet-figma:text-[12px,12px+(100vw-768px)/832*2,14px] tablet-figma:leading-[]">
<div className="flex flex-col gap-y-1">
<p className="text-[#ffffff] tablet:font-medium flex gap-4 tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[clamp(16.8px,19.6px-(100vw-768px)/832*2.8,19.6px)] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[16.8px]">
Политика конфиденциальности <span>graff.tech</span>
</p>
<p className="opacity-40">
<p className="opacity-40 text-[#ffffff] tablet:font-medium tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[clamp(16.8px,19.6px-(100vw-768px)/832*2.8,19.6px)] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[16.8px]">
© 2024 GRAFF interactive. Все права защищены
</p>
</div>
</div>
<div className="px-10 py-[30px] flex items-center border-t xl:border-l tablet:border-r border-[#3D425C] flex-1 justify-between tablet:max-xl:row-start-2 tablet:max-xl:col-start-1">
<div className="text-[#ffffff] desktop:text-lg tablet:text-base mobile:text-xs">
<p>info@graff.tech</p>
<p>+7 800 770 00 67</p>
<div>
<Contact>info@graff.tech</Contact>
<Contact>+7 800 770 00 67</Contact>
</div>
<div className="dsektop:text-sm mobile:text-base text-[#ffffff] p-[14px] border border-[#3D425C] rounded-full">
<div className="text-[#ffffff] font-medium p-[14px] border border-[#3D425C] rounded-full tablet-figma:text-[clamp(14px,16px-(100vw-768px)/832*2,16px)] tablet-figma:leading-[clamp(19.2px,19.6px-(100vw-768px)/832*2.8,19.6px)] mobile:max-tablet-figma:text-base mobile:max-tablet-figma:leading-[19.2px]">
RU
</div>
</div>
<div className="px-10 py-[30px] flex items-center border-t border-[#3D425C] flex-1 justify-between tablet:max-xl:row-start-2 tablet:max-xl:col-start-2">
<div className="text-[#ffffff] desktop:text-lg tablet:text-base mobile:text-xs">
<p>info@graff.tech</p>
<p>+7 800 770 00 67</p>
<div>
<Contact>sam@graff.tech</Contact>
<Contact>+971 058 506 0097</Contact>
</div>
<div className="text-sm text-[#ffffff] py-[14px] px-[10px] border border-[#3D425C] rounded-full">
<div className="text-[#ffffff] font-medium py-[14px] px-[10px] border border-[#3D425C] rounded-full tablet-figma:text-[clamp(14px,16px-(100vw-768px)/832*2,16px)] tablet-figma:leading-[clamp(19.2px,19.6px-(100vw-768px)/832*2.8,19.6px)] mobile:max-tablet-figma:text-base mobile:max-tablet-figma:leading-[19.2px]">
UAE
</div>
</div>
</footer>
);
}
function Contact({
children,
className = '',
}: PropsWithChildren<{ className?: string }>) {
return (
<p
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),24.3px)] mobile:max-tablet-figma:text-base mobile:max-tablet-figma:leading-[21.6px] ' +
className
}
>
{children}
</p>
);
}
src/components/Layout/Navbar.tsx
+1 -1
View File
@@ -67,7 +67,7 @@ function BurgerLink({ text, route }: { text: string; route: string }) {
return (
<Link
to={route}
className="flex px-10 py-6 gap-1 text-[#ffffff] mobile:text-base mobile:leading-4 tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] bg-[#14161F] w-full font-semibold border-[#3D425C] border-b hover:bg-[#3D425C] active:bg-[#14161F]"
className="flex items-center px-10 py-6 gap-1 text-[#ffffff] mobile:text-base mobile:leading-4 tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] bg-[#14161F] w-full font-semibold border-[#3D425C] border-b hover:bg-[#3D425C] active:bg-[#14161F]"
>
<img src="src/assets/cube.svg" alt="" />
{text}
src/components/Main/Decreasing.tsx
+6 -2
View File
@@ -31,7 +31,7 @@ export function Decreasing() {
сократить затраты на обучение, повысить безопасность и
производительность
</Title>
<div className="flex tablet:flex-row mobile:flex-col justify-between gap-x-3 tablet:items-end desktop:pl-64 desktop:mt-14 mobile:mt-6">
<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">
<MiniTitle text="снижение" className="tablet:hidden mb-2" />
<ul className="xl:max-w-[752px] w-full tablet:min-w-[318px] mobile:mb-6">
<li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
@@ -55,7 +55,11 @@ export function Decreasing() {
<Number text="[05]" />
</li>
</ul>
<img src="src/assets/effect.png" alt="" />
<img
src="src/assets/effect.png"
className="mobile:max-tablet-figma:self-center mobile:max-tablet-figma:w-full"
alt=""
/>
</div>
</div>
);
src/components/Main/Teaching.tsx
+108 -100
View File
@@ -39,11 +39,9 @@ export function Teaching() {
function TeachingFeaturesForDesktop() {
return (
<div className="mobile:max-desktop:hidden desktop:flex-col gap-y-4 flex-wrap desktop:flex">
<div className="max-w-[880px] desktop:p-10 tablet:p-6 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex desktop:min-w-[880px] desktop:min-h-[400px] bg-auto bg-[url(src/assets/schedule_big.svg)] bg-no-repeat bg-right-bottom">
<div className="">
<TeachingFeatureTitle className="">
Управление процессом
</TeachingFeatureTitle>
<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="mb-[85px] max-w-[380px]">
<TeachingFeatureTitle>Управление процессом</TeachingFeatureTitle>
<TeachingFeatureDescription className="max-w-[361px]">
Назначение сценария обучения
<br />
@@ -52,53 +50,53 @@ function TeachingFeaturesForDesktop() {
</div>
<img
src="src/assets/master_card.svg"
className="rounded-lg w-fit mt-[197px] -ml-[75px]"
className="rounded-lg w-fit m-auto"
alt=""
/>
</div>
<div className="max-w-[880px] p-10 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-w-[880px] min-h-[400px]">
<div className="">
<TeachingFeatureTitle className="">
<div className="p-10 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-h-[400px]">
<div className="w-fit">
<TeachingFeatureTitle className="w-fit">
Управление пользователями
</TeachingFeatureTitle>
<TeachingFeatureDescription className="max-w-[200px]">
<TeachingFeatureDescription className="w-fit">
Добавление, удаление
<br />и назначение ролей
</TeachingFeatureDescription>
</div>
<img src="src/assets/modal.svg" className="rounded-lg" alt="" />
<img
src="src/assets/modal.svg"
className="rounded-lg w-[calc(468/880*100%)] object-cover object-left"
alt=""
/>
</div>
<div className="max-w-[880px] p-10 pb-[18px] bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-w-[880px] min-h-[400px] bg-[url(src/assets/pinned_windows.svg)] bg-no-repeat bg-right-bottom">
<div className="text-[#ffffff]">
<TeachingFeatureTitle className="">
Видеозапись обучения
</TeachingFeatureTitle>
<TeachingFeatureDescription className="max-w-[361px]">
<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="max-w-1/2">
<TeachingFeatureTitle>Видеозапись обучения</TeachingFeatureTitle>
<TeachingFeatureDescription className="max-w-[50%]">
Фиксация и хранение сессий обучения, тренировки и тестирования.
Ретроспектива по пройденной сессии вместе с инструктором
</TeachingFeatureDescription>
</div>
<img
src="src/assets/manage_video.svg"
className="rounded-lg mt-[216px]"
className="rounded-lg mx-auto"
alt=""
/>
</div>
<div className="max-w-[880px] p-10 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-w-[880px] min-h-[400px] flex justify-between">
<div className="">
<TeachingFeatureTitle className="">
Статистика обучения
</TeachingFeatureTitle>
<TeachingFeatureDescription className="max-w-[280px]">
<div className="p-10 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-h-[400px] flex">
<div className="max-w-[351px]">
<TeachingFeatureTitle>Статистика обучения</TeachingFeatureTitle>
<TeachingFeatureDescription>
Фиксация правильных и неправильных действий.
<br />
Отчет об ошибках
</TeachingFeatureDescription>
</div>
<div className="flex">
<div className="flex absolute right-10 mt-10">
<img
src="src/assets/schedule.svg"
className="rounded-lg self-end relative"
@@ -115,6 +113,76 @@ 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">
<TeachingFeatureTitle>
Управление
<br /> пользователями
</TeachingFeatureTitle>
<TeachingFeatureDescription className="tablet:max-desktop:-mb-[18px]">
Добавление, удаление и назначение ролей
</TeachingFeatureDescription>
<img
src="src/assets/modal.svg"
className="relative mobile:max-tablet:w-[351px] tablet-figma:max-desktop:top-7 tablet:max-tablet-figma:top-11 mobile:max-tablet:top-5 mobile:max-tablet:left-[92px] self-end tablet:max-tablet-figma:m-auto"
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 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">
<TeachingFeatureTitle>Управление процессом</TeachingFeatureTitle>
<TeachingFeatureDescription>
Назначение сценария обучения
<br />
Выбор режима: обучение, тренировка, тестирование{' '}
</TeachingFeatureDescription>
<img
src="src/assets/master_card.svg"
className="rounded-lg mb-11 h-[92px] mt-[166px] tablet:max-tablet-figma:mx-auto"
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 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">
<TeachingFeatureTitle>Видеозапись обучения</TeachingFeatureTitle>
<TeachingFeatureDescription>
Фиксация и хранение сессий обучения, тренировки и тестирования.
Ретроспектива по пройденной сессии вместе с инструктором
</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]"
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">
<TeachingFeatureTitle>Статистика обучения</TeachingFeatureTitle>
<TeachingFeatureDescription className="mobile:max-tablet-figma:mb-5">
Фиксация правильных и неправильных действий. <br />
Отчет об ошибках
</TeachingFeatureDescription>
<div className="flex flex-col">
<div className="flex items-end mobile:max-tablet-figma:justify-center tablet-figma:max-desktop:overflow-hidden mt-0.5 mobile:max-tablet:pl-11 mx-auto">
<img
src="src/assets/schedule.svg"
className="rounded-lg mobile:max-desktop:w-[166px] tablet:max-desktop:relative z-10"
alt=""
/>
<img
src="src/assets/stats.svg"
className="rounded-lg relative tablet-figma:max-desktop:right-[27px] tablet:max-tablet-figma:right-[31px] mobile:max-desktop:w-[166px] tablet:max-tablet-figma:bottom-[27px] mobile:max-tablet:bottom-[14px] mobile:max-tablet:right-11"
alt=""
/>
</div>
</div>
</div>
</div>
);
}
function TeachingFeatureTitle({
children,
className = '',
@@ -151,78 +219,18 @@ function TeachingFeatureDescription({
);
}
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">
<TeachingFeatureTitle className="">
Управление
<br /> пользователями
</TeachingFeatureTitle>
<TeachingFeatureDescription className="tablet:max-desktop:-mb-[18px]">
Добавление, удаление и назначение ролей
</TeachingFeatureDescription>
<img
src="src/assets/modal.svg"
className="relative mobile:max-tablet:w-[351px] tablet-figma:max-desktop:top-7 tablet:max-tablet-figma:top-11 mobile:max-tablet:top-5 mobile:max-tablet:left-[92px] self-end tablet:max-tablet-figma:m-auto"
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 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">
<TeachingFeatureTitle className="">
Управление процессом
</TeachingFeatureTitle>
<TeachingFeatureDescription className="">
Назначение сценария обучения
<br />
Выбор режима: обучение, тренировка, тестирование{' '}
</TeachingFeatureDescription>
<img
src="src/assets/master_card.svg"
className="rounded-lg mb-11 h-[92px] mt-[166px] tablet:max-tablet-figma:mx-auto"
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 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">
<TeachingFeatureTitle className="">
Видеозапись обучения
</TeachingFeatureTitle>
<TeachingFeatureDescription className="">
Фиксация и хранение сессий обучения, тренировки и тестирования.
Ретроспектива по пройденной сессии вместе с инструктором
</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]"
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">
<TeachingFeatureTitle className="">
Статистика обучения
</TeachingFeatureTitle>
<TeachingFeatureDescription className="mobile:max-tablet-figma:mb-5">
Фиксация правильных и неправильных действий. <br />
Отчет об ошибках
</TeachingFeatureDescription>
<div className="flex flex-col">
<div className="flex items-end mobile:max-tablet-figma:justify-center tablet-figma:max-desktop:overflow-hidden mt-0.5 mobile:max-tablet:pl-11 mx-auto">
<img
src="src/assets/schedule.svg"
className="rounded-lg mobile:max-desktop:w-[166px] tablet:max-desktop:relative z-10"
alt=""
/>
<img
src="src/assets/stats.svg"
className="rounded-lg relative tablet-figma:max-desktop:right-[27px] tablet:max-tablet-figma:right-[31px] mobile:max-desktop:w-[166px] tablet:max-tablet-figma:bottom-[27px] mobile:max-tablet:bottom-[14px] mobile:max-tablet:right-11"
alt=""
/>
</div>
</div>
</div>
</div>
);
}
// function TeachingFeature({
// className = '',
// children,
// }: PropsWithChildren<{ className?: string }>) {
// return (
// <div
// className={
// 'p-10 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex desktop:min-h-[400px] ' +
// className
// }
// >
// {children}
// </div>
// );
// }