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

started fixed by edits

Browse Source
This commit is contained in:
Lanskikh
2024-07-08 15:12:01 +05:00
parent 0b850e6ae5
commit dd7308ba90
19 changed files with 170 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -13,6 +13,7 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.23.1",
"react-swipeable": "^7.0.1",
"zustand": "^4.5.4"
},
"devDependencies": {
src/components/Layout/Footer.tsx
+6 -15
View File
@@ -9,10 +9,10 @@ export function Footer() {
<img src="src/assets/text_logo.svg" className="h-[33px]" alt="" />
</div>
<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]">
<p className="text-[#ffffff] tablet:font-medium flex gap-4 m-text">
Политика конфиденциальности <span>graff.tech</span>
</p>
<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]">
<p className="opacity-40 text-[#ffffff] tablet:font-medium m-text">
© 2024 GRAFF interactive. Все права защищены
</p>
</div>
@@ -22,16 +22,16 @@ export function Footer() {
<Contact>info@graff.tech</Contact>
<Contact>+7 800 770 00 67</Contact>
</div>
<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]">
<div className="text-[#ffffff] font-medium p-[14px] border border-[#3D425C] rounded-full m-text">
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>
<Contact>sam@graff.tech</Contact>
<Contact>+971 058 506 0097</Contact>
<Contact>+971 58 506 0097</Contact>
</div>
<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]">
<div className="text-[#ffffff] font-medium py-[14px] px-[10px] border border-[#3D425C] rounded-full m-text">
UAE
</div>
</div>
@@ -43,14 +43,5 @@ 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>
);
return <p className={'text-[#ffffff] l-text ' + className}>{children}</p>;
}
src/components/Layout/Header.tsx
+4 -4
View File
@@ -4,7 +4,7 @@ export function Header() {
return (
<header className="text-[#ffffff]">
<div className="desktop:px-10 tablet:px-6 mobile:px-4 desktop:py-28 tablet:py-12 mobile:py-14">
<h1 className="pb-8 font-medium desktop:block mobile:max-desktop:hidden tablet-figma:text-[clamp(64px,64px+(100vw-768px)/832*32,96px)] tablet-figma:leading-[clamp(57.6px,57.6px+(100vw-768px)/832*29,86.54px)]">
<h1 className="pb-8 font-medium desktop:block mobile:max-desktop:hidden h1">
Создаем{' '}
<span
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
@@ -18,7 +18,7 @@ export function Header() {
</span>{' '}
для промышленности и образования
</h1>
<h1 className="font-medium desktop:hidden mobile:max-desktop:block mobile:max-tablet-figma:text-[clamp(40px,40px+(100vw-360px)/408*24,64px)] tablet-figma:text-[64px] mobile:max-tablet-figma:leading-[clamp(36px,36px+(100vw-360px)/408*21.6,57.6px)] tablet-figma:leading-[57.6px]">
<h1 className="font-medium desktop:hidden mobile:max-desktop:block h1">
Интерактивные тренажеры{' '}
<span
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
@@ -31,10 +31,10 @@ export function Header() {
для обучения сотрудников
</span>
</h1>
<h2 className="tablet-figma:text-[clamp(20px,20px+(100vw-768px)/832*12,32px)] max-w-[768px] desktop:block mobile:max-desktop:hidden tablet-figma:leading-[clamp(20px,20px+(100vw-768px)/832*12,32px)]">
<h3 className="max-w-[768px] desktop:block mobile:max-desktop:hidden h3">
Помогаем сократить затраты на обучение, повысить безопасность и
производительность
</h2>
</h3>
</div>
<Marquee />
</header>
src/components/Layout/Navbar.tsx
+5 -5
View File
@@ -23,7 +23,7 @@ export function Navbar() {
<NavLink text="Варианты комплектации" route="/" />
<NavLink text="Проекты" route="/" />
<NavLink text="События" route="/" />
<button className="tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] mobile:max-tablet-figma:text-base font-semibold text-[#ffffff] bg-gradient-to-r from-[#798FFF] to-[#D375FF] border-x border-[#3D425C] tablet:block mobile:hidden px-10">
<button className="btn-text font-semibold text-[#ffffff] bg-gradient-to-r from-[#798FFF] to-[#D375FF] border-x border-[#3D425C] tablet:block mobile:hidden px-10">
Оставить заявку
</button>
<LangToggler lang={lang} />
@@ -51,7 +51,7 @@ export function Navbar() {
<BurgerLink route="/" text="Проекты" />
<BurgerLink route="/" text="События" />
<div className="grid mobile:max-tablet:grid-cols-[216px_1fr_1fr] tablet:grid-cols-2">
<button className="text-[#ffffff] tablet:hidden font-semibold leading-4 bg-gradient-to-r from-[#798FFF] to-[#D375FF] py-[30px] px-10">
<button className="text-[#ffffff] tablet:hidden font-semibold btn-text bg-gradient-to-r from-[#798FFF] to-[#D375FF] py-[30px] px-10">
Оставить заявку
</button>
<ChooseLang lang="RU" />
@@ -67,7 +67,7 @@ function BurgerLink({ text, route }: { text: string; route: string }) {
return (
<Link
to={route}
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]"
className="flex items-center px-10 py-6 gap-1 text-[#ffffff] btn-text bg-[#14161F] w-full font-semibold border-[#3D425C] border-b hover:bg-[#3D425C] active:bg-[#14161F]"
>
<img src="src/assets/cube.svg" alt="" />
{text}
@@ -95,7 +95,7 @@ function ChooseLang({
<button
onClick={() => updateLang(lang)}
className={
'text-[#ffffff] w-full h-full tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] font-semibold bg-[#14161F] hover:bg-[#3D425C] active:bg-[#14161F] ' +
'text-[#ffffff] w-full h-full btn-text font-semibold bg-[#14161F] hover:bg-[#3D425C] active:bg-[#14161F] ' +
(isBordered ? 'border border-[#3D425C]' : '')
}
>
@@ -111,7 +111,7 @@ function LangToggler({ lang }: { lang: Lang }) {
<div className="min-w-[101px] mobile:max-[1349px]:hidden box-border border-r border-[#3D425C]">
<button
onClick={() => setOpen(prev => !prev)}
className="mx-6 h-full gap-x-1 items-center flex text-[#ffffff] font-semibold box-border text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)]"
className="mx-6 h-full gap-x-1 items-center flex text-[#ffffff] font-semibold box-border btn-text"
>
{lang}
<img src="src/assets/arrow_down.svg" alt="" />
src/components/Main/Availables.tsx
+3 -5
View File
@@ -35,13 +35,13 @@ export function Availables() {
text="координация действий между несколькими сотрудниками"
/>
</div>
<p className="text-[#ffffff] font-medium tablet-figma:max-w-[668px] tablet-figma:text-[clamp(28px,28px+(100vw-768px)/832*4,32px)] tablet-figma:leading-[clamp(28px,28px+(100vw-768px)/832*4,32px)] mobile:max-tablet-figma:text-[clamp(20px,20px+(100vw-360px)/408*8,28px)] mobile:max-tablet-figma:leading-[clamp(20px,20px+(100vw-360px)/408*8,28px)]">
<h3 className="text-[#ffffff] font-medium tablet-figma:max-w-[668px] h3">
В одном цифровом пространстве{' '}
<span className="opacity-60">
могут работать сотрудники, находящиеся в разных помещениях,
зданиях или городах
</span>
</p>
</h3>
</div>
</div>
</div>
@@ -52,9 +52,7 @@ 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]">
<img src={img} alt="" className="mb-14" />
<p className="tablet-figma:text-base tablet-figma:leading-[21.6px] 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)] text-[#ffffff]">
{text}
</p>
<p className="l-text text-[#ffffff]">{text}</p>
</div>
);
}
src/components/Main/Contacts.tsx
+5 -9
View File
@@ -18,30 +18,26 @@ 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 tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] mobile:max-tablet-figma:text-base mobile:max-tablet-figma:leading-4">
<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">
Оставить заявку <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]">
<h2 className="text-[#ffffff] mb-4 tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*4,20px)] tablet-figma:leding-[clamp(19.2px,19.2px+(100vw-768px)/832*4.8,24px)] mobile:max-tablet-figma:text-base mobile:max-tablet-figma:leading-4">
Свяжитесь с нами
</h2>
<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] tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] mobile:max-tablet-figma:text-base mobile:max-tablet-figma:leading-4">
<button className="text-[#ffffff] font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] btn-text">
Написать
<img src="src/assets/mail.svg" alt="" />
</button>
<button className="text-[#ffffff] font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] mobile:max-tablet-figma:text-base mobile:max-tablet-figma:leading-4">
<button className="text-[#ffffff] font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] btn-text">
Позвонить
<img src="src/assets/phone.svg" alt="" />
</button>
</div>
</div>
<div className="flex flex-col gap-y-4 tablet:max-desktop:justify-between tablet-figma:max-desktop:min-w-[332px] tablet:max-tablet-figma:min-w-[250px]">
<h2 className="font-semibold text-[#ffffff] tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*4,20px)] tablet-figma:leding-[clamp(19.2px,19.2px+(100vw-768px)/832*4.8,24px)] mobile:max-tablet-figma:text-base mobile:max-tablet-figma:leading-4">
Социальные сети
</h2>
<p className="font-semibold text-[#ffffff] l-text">Социальные сети</p>
<div className="flex gap-x-2">
<button className="rounded-full p-4 border border-[#3D425C]">
<img src="src/assets/youtube.svg" alt="" />
src/components/Main/Decreasing.tsx
+4 -14
View File
@@ -1,4 +1,3 @@
import { MiniTitle } from '../../ui/MiniTitle';
import { Title } from '../../ui/Title';
export function Decreasing() {
@@ -14,8 +13,8 @@ export function Decreasing() {
}}
>
Достигайте положительный эффект
</span>{' '}
за счет снижения издержек
</span>
<br /> за счет снижения издержек
</Title>
<Title className="tablet:hidden">
<span
@@ -32,7 +31,6 @@ 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">
<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">
<Plus text="снижение количества несчастных случаев" />
@@ -66,17 +64,9 @@ export function Decreasing() {
}
function Plus({ text }: { text: 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)] mobile:max-tablet-figma:text-[clamp(14px,14px+(100vw-360px)/408*2,16px)]">
{text}
</p>
);
return <p className="text-[#ffffff] l-text">{text}</p>;
}
function Number({ text }: { text: string }) {
return (
<p className="text-[#52587A] tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[clamp(16.8px,16px+(100vw-768px)/832*2.8),19.6px)] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[16.8px]">
{text}
</p>
);
return <p className="text-[#52587A] m-text">{text}</p>;
}
src/components/Main/Distance.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export function Distance() {
</Title>
<div className="xl:pl-64">
<div className="tablet:grid desktop:gap-x-4 desktop:gap-y-6 tablet:gap-x-3 tablet:gap-y-4 desktop:grid-cols-2 tablet-figma:max-[956px]:grid-cols-[446px_1fr]">
<p className="text-[#ffffff] row-start-1 mobile:max-tablet:mb-6 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)]">
<p className="text-[#ffffff] row-start-1 mobile:max-tablet:mb-6 l-text">
Обучающиеся будут получать доступ к системе с высоко
детализированной 3D графикой для прохождения сценариев на любом
устройстве, без необходимости установки дополнительного ПО.
src/components/Main/Efficiency.tsx
+3 -5
View File
@@ -23,13 +23,13 @@ export function Effeciency() {
title={'готовность к опасным ситуациямние выше на'}
/>
</div>
<p 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-[clamp(20px,20px+(100vw-768px)/832*4,24px)] mobile:max-tablet-figma:leading-[clamp(20px,20px+(100vw-768px)/832*4,24px)] mobile:text-xl mobile:leading-5 max-w-[752px]">
<h3 className="text-[#ffffff] font-medium h3 max-w-[752px]">
В тренажере человек принимает решения так же, как в реальном мире,{' '}
<span className="opacity-60">
активируя те же нейронные цепочки в мозгу. Это позволяет добиться
реальной производительность в работе.
</span>
</p>
</h3>
</div>
</div>
</div>
@@ -55,9 +55,7 @@ function Figure({
}}
>
<div className="text-[#ffffff] flex flex-col justify-between py-6">
<h6 className="desktop:font-medium tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] mobile:max-tablet-figma:text-xs tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-768px)/832*2.8,19.6px)] mobile:max-tablet-figma:leading-[16.8px]">
{title}
</h6>
<h6 className="desktop:font-medium m-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
+2 -9
View File
@@ -49,14 +49,7 @@ function EventTitle({
children,
}: PropsWithChildren<{ className?: string }>) {
return (
<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-[clamp(20px,20px+(100vw-360px)/408*4,24px)] mobile:max-tablet-figma:leading-[clamp(20px,20px+(100vw-360px)/408*4,24px)] ' +
className
}
>
{children}
</h1>
<h3 className={'text-[#ffffff] font-medium h3 ' + className}>{children}</h3>
);
}
@@ -64,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 tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[clamp(14px,14px+(100vw-768px)/832*0.4,14.4px)] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[14.4px] 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-[118px] 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
+66 -46
View File
@@ -1,11 +1,14 @@
import { useEffect, useReducer, useState } from 'react';
import { useEffect, useReducer, useRef, useState } from 'react';
import { MiniTitle } from '../../ui/MiniTitle';
import { Title } from '../../ui/Title';
import { useWindowWidth } from '../../hooks/useWindowWidth';
import { useSwipeable } from 'react-swipeable';
export function Products() {
const [curTab, setCurTab] = useState(0);
const ref = useRef<HTMLDivElement>(null);
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">
@@ -23,20 +26,41 @@ export function Products() {
</span>
</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%)]">
<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%)]"
ref={ref}
>
<TabButton
className={curTab === 0 ? 'bg-[#798FFF]' : ''}
onClick={() => setCurTab(0)}
onClick={e => {
ref.current?.scrollTo({
left: e.currentTarget.offsetLeft - 16,
behavior: 'smooth',
});
setCurTab(0);
}}
text="Промышленные тренажеры"
/>
<TabButton
className={curTab === 1 ? 'bg-[#798FFF]' : ''}
onClick={() => setCurTab(1)}
onClick={e => {
ref.current?.scrollTo({
left: e.currentTarget.offsetLeft - 16,
behavior: 'smooth',
});
setCurTab(1);
}}
text="Симуляторы управления техникой"
/>
<TabButton
className={curTab === 2 ? 'bg-[#798FFF]' : ''}
onClick={() => setCurTab(2)}
onClick={e => {
ref.current?.scrollTo({
left: e.currentTarget.offsetLeft - 16,
behavior: 'smooth',
});
setCurTab(2);
}}
text="Тренажеры для учебных заведений"
/>
</div>
@@ -60,7 +84,7 @@ function TabButton({
<button
onClick={onClick}
className={
'active:bg-[#798FFF] text-[#ffffff] font-semibold rounded-lg px-5 py-[13.5px] tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] mobile:max-tablet-figma:text-base mobile:max-tablet-figma:leading-4 text-nowrap text-clip bg-text-gradient ' +
'active:bg-[#798FFF] text-[#ffffff] font-semibold rounded-lg px-5 py-[13.5px] btn-text text-nowrap text-clip bg-text-gradient ' +
className
}
>
@@ -86,17 +110,15 @@ function TeachingItem({
className="mobile:max-tablet:hidden tablet:max-desktop:mb-[14px]"
/>
<div className="desktop:border-l border-[#3D425C] desktop:pl-4">
<p className="text-[#ffffff] flex items-center gap-x-2 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.2,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+(1000vw-360px)/408*2.4,19.2px)] mb-2">
<h4 className="text-[#ffffff] flex items-center gap-x-2 font-medium l-text mb-2">
<img
src={`src/assets/${iconType}_icon.svg`}
alt=""
className="tablet:hidden"
/>
{title}
</p>
<p className="text-[#ffffff] tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-768px)/832*2.6,19.6px)] mobile:text-xs mobile:leading-[16.8px]">
{text}
</p>
</h4>
<p className="text-[#ffffff] m-text opacity-60">{text}</p>
</div>
</div>
);
@@ -111,7 +133,7 @@ function TrainingsTab() {
<h1 className="text-[#ffffff] font-medium tablet:mb-8 tablet-figma:text-[clamp(24px,24px+(100vw-768px)/832*8,32px)] tablet-figma:leading-[clamp(24px,24px+(100vw-768px)/832*4.8,28.8px)] 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>
<p className="desktop:hidden tablet:max-desktop:mt-11 mobile:max-tablet:mt-2 text-xs text-[#ffffff]">
<p className="desktop:hidden tablet:max-desktop:mt-11 mobile:max-tablet:mt-2 m-text text-[#ffffff]">
Может быть еще какой-нибудь небольшой текст, а то мне не хватает
для балланса. Ну если не будет, то как-нибудь переживем
</p>
@@ -147,7 +169,6 @@ function TrainingsTab() {
function SimulatorsTab() {
const width = useWindowWidth();
const [slide, setSlide] = useState(0);
const [touchStart, setTouchStart] = useState(0);
const [sliderOffset, setSliderOffset] = useState(-width + 80);
const [order, dispatch] = useReducer(
@@ -178,13 +199,24 @@ function SimulatorsTab() {
setSliderOffset(-width + 80);
}, [order, slide, width]);
const handlers = useSwipeable({
onSwipedLeft: () => {
dispatch('next');
setSlide(prev => (prev === order.length - 3 ? 0 : prev + 1));
},
onSwipedRight: () => {
dispatch('prev');
setSlide(prev => (prev === 0 ? order.length - 3 : prev - 1));
},
});
return (
<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="bg-[#3D425C4D] rounded-xl desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 select-none">
<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-[clamp(20px,20px+(100vw-360px)/408*4,24px)] desktop:mb-8 tablet:mb-6 mobile:mb-5">
<h3 className="max-w-[455px] text-[#ffffff] font-medium h3 desktop:mb-8 tablet:mb-6 mobile:mb-5">
Интерактивные симуляторы управления техникой
</h1>
</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="погрузчики – ричстракеры" />
@@ -194,20 +226,20 @@ function SimulatorsTab() {
<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">
<h4 className="text-[#ffffff] font-medium l-text 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]">
</h4>
<p className="tablet:max-desktop:hidden text-[#ffffff] opacity-60 m-text">
модель позволяет производить расчеты характеристик работы,
отслеживать безопасность работы устройств и симулировать
внештатные ситуации.
</p>
</div>
</div>
<div className="tablet:max-desktop:max-w-[234px]">
<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 duration-1000"
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
? {
@@ -216,19 +248,7 @@ function SimulatorsTab() {
}
: {}
}
onTouchStart={e => setTouchStart(e.targetTouches[0].clientX)}
onTouchEnd={e => {
if (e.nativeEvent.changedTouches[0].clientX - touchStart > 100) {
dispatch('prev');
setSlide(prev => (prev === 0 ? order.length - 3 : prev - 1));
} else if (
e.nativeEvent.changedTouches[0].clientX - touchStart <
-100
) {
dispatch('next');
setSlide(prev => (prev === order.length - 3 ? 0 : prev + 1));
}
}}
{...handlers}
>
{width < 640 ? (
order.map((src, index) => (
@@ -269,7 +289,7 @@ function SimulatorsTab() {
</>
)}
</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 className="desktop:hidden mobile:max-tablet:hidden text-[#ffffff] opacity-60 m-text">
модель позволяет производить расчеты характеристик работы,
отслеживать безопасность работы устройств и симулировать внештатные
ситуации.
@@ -282,7 +302,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)] 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] desktop:px-5 desktop:py-2 mobile:px-4 mobile:py-[6px]">
{text}
</li>
);
@@ -292,9 +312,9 @@ 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)]">
<h3 className="text-[#ffffff] font-medium desktop:max-w-[455px] tablet:max-w-[326px] mobile:max-tablet:mb-5 h3">
Интерактивные тренажеры для учебных заведений
</h1>
</h3>
<img
src="src/assets/mask_group2.png"
className="tablet:hidden"
@@ -315,11 +335,11 @@ function ForTeachingTab() {
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]">
<h4 className="text-[#ffffff] font-medium h4">
cоздание обучающих VR систем
</h2>
</h4>
</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 className="text-[#ffffff] opacity-60 desktop:font-medium m-text">
Проведение виртуальных практических работ, создание учебных
мастерских и стендов
</p>
@@ -338,21 +358,21 @@ function ForTeachingTab() {
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]">
<h4 className="text-[#ffffff] font-medium h4">
cоздание VR лабораторий
</h2>
</h4>
</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 className="text-[#ffffff] opacity-60 desktop:font-medium m-text">
Тренажер для проведения лабораториных работ позволит избежать
поломки оборудования, а также экономить на расходных средствах
</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)]">
<h4 className="text-[#ffffff] font-medium desktop:max-w-[408px] h4">
Оснащение учебных классов и центров всем необходимым для современного
обучения под «ключ»
</p>
</h4>
</div>
);
}
src/components/Main/Projects.tsx
+15 -23
View File
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useReducer, useState } from 'react';
import { MiniTitle } from '../../ui/MiniTitle';
import { useWindowWidth } from '../../hooks/useWindowWidth';
import { Title } from '../../ui/Title';
import { useSwipeable } from 'react-swipeable';
export function Projects() {
return (
@@ -53,20 +54,18 @@ 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]">
<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-cover bg-center bg-no-repeat h-[340px] rounded-2xl"
style={{ backgroundImage: `url(${src})` }}
/>
<div className="p-5">
<h1 className="text-[#ffffff] font-medium tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[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,19.2px)]">
{title}
</h1>
<h4 className="text-[#ffffff] font-medium h4">{title}</h4>
<div className="flex gap-2 mt-4">
{tags.map(tag => (
<p
key={tag}
className="text-[#ffffff] opacity-80 font-medium rounded-3xl py-3 px-4 border border-[#798FFF] tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[16.8px,16.8px+(100vw-768px)/832*2.8,19.6px] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[16.8px]"
className="text-[#ffffff] opacity-80 font-medium rounded-3xl py-3 px-4 border border-[#798FFF] m-text"
>
{tag}
</p>
@@ -106,7 +105,16 @@ function Slider({
[projects[projects.length - 1], ...projects, projects[0]],
);
const [touchStart, setTouchStart] = useState(0);
const handlers = useSwipeable({
onSwipedLeft: () => {
setSlide(prev => (prev === order.length - 3 ? 0 : prev + 1));
dispatch('next');
},
onSwipedRight: () => {
setSlide(prev => (prev === 0 ? order.length - 3 : prev - 1));
dispatch('prev');
},
});
useEffect(() => {
setSliderOffset(-baseOffset);
@@ -120,23 +128,7 @@ function Slider({
transition: `${sliderOffset === 0 || sliderOffset === -baseOffset * 2 ? 0 : 0.4}s`,
transform: `translateX(${sliderOffset}px)`,
}}
onTouchStart={e => {
setTouchStart(e.targetTouches[0].clientX);
}}
onTouchEnd={e => {
if (e.nativeEvent.changedTouches[0].clientX - touchStart > 100) {
dispatch('prev');
setSlide(prev => (prev === 0 ? order.length - 3 : prev - 1));
return;
} else if (
e.nativeEvent.changedTouches[0].clientX - touchStart <
-100
) {
dispatch('next');
setSlide(prev => (prev === order.length - 3 ? 0 : prev + 1));
return;
}
}}
{...handlers}
>
{order.map((project, index) => (
<Project key={index} {...project} />
src/components/Main/Teaching.tsx
+4 -29
View File
@@ -190,14 +190,14 @@ function TeachingFeatureTitle({
className?: string;
}>) {
return (
<h1
<h3
className={
'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,24px+(100vw-360px)/408*4,24px)] mobile:max-tablet-figma:leading-[clamp(20px,24px+(100vw-360px)/408*4,24px)] desktop:mb-2 mobile:max-desktop:mb-1 font-medium text-[#ffffff] ' +
'h3 desktop:mb-2 mobile:max-desktop:mb-1 font-medium text-[#ffffff] ' +
className
}
>
{children}
</h1>
</h3>
);
}
@@ -207,30 +207,5 @@ function TeachingFeatureDescription({
}: PropsWithChildren<{
className?: string;
}>) {
return (
<p
className={
'tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*6,18px)] tablet-figma:leading-[16.8px,1.52vw,24.3px] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[16.8px] text-[#ffffff] ' +
className
}
>
{children}
</p>
);
return <p className={'l-text text-[#ffffff] ' + className}>{children}</p>;
}
// 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>
// );
// }
src/components/Main/Trainings.tsx
+6 -10
View File
@@ -55,29 +55,25 @@ function TrainingsFeature({
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 flex-col justify-between mobile:max-tablet:mb-[42px] tablet-figma:max-w-[495px]">
<h1 className="font-medium text-[#ffffff] mobile:max-tablet:mb-2 tablet-figma:text-[clamp(20px,20px+(100vw-768px)/832*12,32px)] tablet-figma:leading-[clamp(20px,20px+(100vw-768px)/832*12,32px)] mobile:max-tablet-figma:text-xl mobile:max-tablet-figma:leading-5">
<h3 className="font-medium text-[#ffffff] mobile:max-tablet:mb-2 h3">
{title}
</h1>
<p className="text-[#ffffff] opacity-60 tablet-figma:text-[clamp(14px,14px+(100vw-768px)/832*4,18px)] tablet-figma:leading-[clamp(18.9px,24.3px-(100vw-768px)/832*5.4,24.3px)] mobile:max-tablet-figma:text-sm mobile:max-tablet-figma:leading-[18.9px]">
{text}
</p>
</h3>
<p className="text-[#ffffff] opacity-60 l-text">{text}</p>
</div>
<div className="mobile:max-tablet:flex tablet:hidden justify-between items-end">
<p className="text-[#52587A] text-sm mb-5">{order}</p>
<p className="text-[#52587A] m-text mb-5">{order}</p>
<img src={src} alt="" className="w-[50vw]" />
</div>
<div className="tablet-figma:flex mobile:max-tablet-figma:hidden">
<img src={src} alt="" className="min-w-[calc(280/708*100%)]" />
<p className="text-[#52587A] desktop:font-medium desktop:leading-[19.6px] tablet:text-sm">
{order}
</p>
<p className="text-[#52587A] desktop:font-medium m-text">{order}</p>
</div>
<img
src={src}
className="mobile:max-tablet:hidden tablet-figma:hidden w-[calc(280/708*100%)]"
alt=""
/>
<p className="text-[#52587A] desktop:font-medium desktop:text-sm desktop:leading-[19.6px] tablet:text-sm mobile:max-tablet:hidden tablet-figma:hidden">
<p className="text-[#52587A] desktop:font-medium m-text mobile:max-tablet:hidden tablet-figma:hidden">
{order}
</p>
</div>
src/index.css
+37
View File
@@ -7,3 +7,40 @@
body {
font-family: 'TTHovesPro';
}
@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)];
}
.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)];
}
.h3 {
@apply leading-[100%] desktop-figma:text-[clamp(32px,2vw,40px)] desktop:max-desktop-figma:text-[clamp(28px,28px+(100vw-1024px)/576*4,32px)] tablet-figma:max-desktop:text-[clamp(24px,24px+(100vw-768px)/256*4,28px)] tablet:max-tablet-figma:text-[clamp(20px,20px+(100vw-640px)/128*4,24px)] mobile:max-tablet:text-[clamp(20px,20px+(100vw-360px)/280*4,24px)];
}
.h4 {
@apply leading-[120%] desktop-figma:text-[clamp(14px,0.875vw,16px)] desktop:max-desktop-figma:text-sm 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,18px)];
}
.l-text {
@apply leading-[135%] 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)];
}
.m-text {
@apply leading-[140%] desktop-figma:text-[clamp(14px,0.875vw,16px)] desktop:max-desktop-figma:text-sm tablet-figma:max-desktop:text-[clamp(12px,12px+(100vw-768px)/576*2,14px)] tablet:max-tablet-figma:text-xs mobile:max-tablet:text-[clamp(12px,12px+(100vw-360px)/280*2,14px)];
}
.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)];
}
.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)];
}
.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)];
}
}
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 tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] mobile:max-desktop:text-xs desktop:max-w-60 w-full ' +
'flex gap-1 items-center self-start text-[#ffffff] uppercase opacity-80 font-medium link desktop:max-w-60 w-full ' +
className
}
>
src/ui/NavLink.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ export function NavLink({ text, route }: { text: string; route: string }) {
return (
<Link
className={
'text-[#ffffff] desktop:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(16px,16px+(100vw-768px)/832*2,18px)] font-semibold border-l border-[#3D425C] mobile:hidden py-[30px] px-10 min-[1350px]:block hover:bg-[#3D425C] active:bg-[#14161F]'
'text-[#ffffff] btn-text font-semibold border-l border-[#3D425C] mobile:hidden py-[30px] px-10 min-[1350px]:block hover:bg-[#3D425C] active:bg-[#14161F]'
}
to={route}
>
src/ui/Title.tsx
+1 -8
View File
@@ -5,13 +5,6 @@ export function Title({
className = '',
}: PropsWithChildren<{ className?: string }>) {
return (
<h1
className={
'font-medium text-[#ffffff] tablet-figma:text-[clamp(40px,40px+(100vw-768px)/832*24,64px)] tablet-figma:leading-[clamp(40px,40px+(100vw-768px)/832*17.6,57.6px)] mobile:max-tablet-figma:text-[clamp(28px,28px+(100vw-360px)/408*12,40px)] mobile:max-tablet-figma:leading-[clamp(28px,28px+(100vw-360px)/408*12,40px)] ' +
className
}
>
{children}
</h1>
<h2 className={'font-medium text-[#ffffff] h2 ' + className}>{children}</h2>
);
}
yarn.lock
+5
View File
@@ -1784,6 +1784,11 @@ react-router@6.23.1:
dependencies:
"@remix-run/router" "1.16.1"
react-swipeable@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-7.0.1.tgz#cd299f5986c5e4a7ee979839658c228f660e1e0c"
integrity sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==
react@^18.3.1:
version "18.3.1"
resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"