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

navbar, products, header, efficiency, products tabs, teaching grid, footer, contacts were fixed

Browse Source
This commit is contained in:
Lanskikh
2024-07-01 15:02:20 +05:00
parent 32d6de8c3e
commit 81f6fed96b
10 changed files with 100 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Layout/Footer.tsx
+11 -11
View File
@@ -1,35 +1,35 @@
export function Footer() {
return (
<footer className="desktop:flex">
<div className="flex px-10 py-[31px] border-t border-[#3D425C] justify-between desktop-figma:min-w-[880px] desktop:max-desktop-figma:gap-10">
<footer className="tablet:grid xl:grid-cols-[2fr_1fr_1fr] tablet:max-xl:grid-cols-2 tablet:max-xl:grid-rows-2">
<div className="flex tablet:items-center mobile:max-tablet:flex-col tablet:px-10 mobile:px-4 tablet:py-9 mobile:py-4 border-t border-[#3D425C] gap-6 tablet:max-xl:row-start-1 tablet:max-xl:col-span-2">
<div className="w-32 flex justify-between items-center">
<img src="src/assets/logo.svg" alt="" className="h-[50px]" />
<img src="src/assets/text_logo.svg" className="h-[33px]" alt="" />
</div>
<div className="flex flex-col gap-y-1 font-medium text-[#ffffff]">
<p className="flex gap-4 text-base">
<div className="desktop:text-sm mobile:text-xs flex flex-col gap-y-1 font-medium text-[#ffffff]">
<p className="flex gap-4 ">
Политика конфиденциальности <span>graff.tech</span>
</p>
<p className="text-base opacity-40">
<p className="opacity-40">
© 2024 GRAFF interactive. Все права защищены
</p>
</div>
</div>
<div className="px-10 py-[30px] flex items-center border-t border-x border-[#3D425C] flex-1 justify-between">
<div className="text-[#ffffff] text-lg font-medium">
<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>
<div className="text-sm text-[#ffffff] font-medium p-[14px] border border-[#3D425C] rounded-full">
<div className="dsektop:text-sm mobile:text-base text-[#ffffff] p-[14px] border border-[#3D425C] rounded-full">
RU
</div>
</div>
<div className="px-10 py-[30px] flex items-center border-t border-[#3D425C] flex-1 justify-between">
<div className="text-[#ffffff] text-lg">
<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>
<div className="text-sm text-[#ffffff] font-medium py-[14px] px-[10px] border border-[#3D425C] rounded-full">
<div className="text-sm text-[#ffffff] py-[14px] px-[10px] border border-[#3D425C] rounded-full">
UAE
</div>
</div>
src/components/Layout/Header.tsx
+32 -40
View File
@@ -1,48 +1,40 @@
import { useWindowWidth } from '../../hooks/useWindowWidth';
import { Marquee } from '../Main/Marquee';
export function Header() {
const width = useWindowWidth();
return (
<header className="text-[#ffffff]">
<div className="px-10 desktop:pt-28 tablet:pt-12 mobile:pt-14">
{width >= 1024 ? (
<h1 className="text-8xl pb-8 font-medium">
Создаем{' '}
<span
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
style={{
backgroundClip: 'text',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
интерактивные тренажеры
</span>{' '}
для промышленности и образования
</h1>
) : (
<h1 className="tablet:text-[64px] mobile:text-[40px] font-medium leading-[57px]">
Интерактивные тренажеры{' '}
<span
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
style={{
backgroundClip: 'text',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
для обучения сотрудников
</span>
</h1>
)}
{width >= 1024 && (
<h2 className="text-[32px] max-w-[768px] desktop:block">
Помогаем сократить затраты на обучение, повысить безопасность и
производительность
</h2>
)}
<div className="desktop:px-10 tablet:px-6 mobile:px-4 desktop:py-28 tablet:py-12 mobile:py-14">
<h1 className="text-8xl pb-8 font-medium desktop:block mobile:max-desktop:hidden">
Создаем{' '}
<span
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
style={{
backgroundClip: 'text',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
интерактивные тренажеры
</span>{' '}
для промышленности и образования
</h1>
<h1 className="tablet:text-[64px] mobile:text-[40px] font-medium tablet:leading-[57px] mobile:leading-9 desktop:hidden mobile:max-desktop:block">
Интерактивные тренажеры{' '}
<span
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
style={{
backgroundClip: 'text',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
для обучения сотрудников
</span>
</h1>
<h2 className="text-[32px] max-w-[768px] desktop:block mobile:max-desktop:hidden">
Помогаем сократить затраты на обучение, повысить безопасность и
производительность
</h2>
</div>
<Marquee />
</header>
src/components/Layout/Navbar.tsx
+4 -4
View File
@@ -2,7 +2,7 @@ import { NavLink } from '../../ui/NavLink';
export function Navbar() {
return (
<nav className="flex items-center justify-between text-[#ffffff] desktop:text-lg tablet:text-base font-semibold border-b border-[#3D425C] desktop:pl-10 t mobile:pl-4">
<nav className="flex items-stretch justify-between text-[#ffffff] desktop:text-lg tablet:text-base font-semibold border-b border-[#3D425C] desktop:pl-10 t mobile:pl-4">
<div className="flex w-[104px] justify-between items-center mobile:py-3">
<img src="src/assets/logo.svg" alt="" />
<img
@@ -11,19 +11,19 @@ export function Navbar() {
className="desktop:block mobile:hidden"
/>
</div>
<div className="items-center flex">
<div className="items-stretch flex">
<NavLink text="Типы тренажеров" route="/" />
<NavLink text="Варианты комплектации" route="/" />
<NavLink text="Проекты" route="/" />
<NavLink text="События" route="/" />
<button className="text-lg bg-gradient-to-r from-[#798FFF] to-[#D375FF] border border-[#3D425C] tablet:block mobile:hidden py-[30px] px-10">
<button className="text-lg bg-gradient-to-r from-[#798FFF] to-[#D375FF] border-x border-[#3D425C] tablet:block mobile:hidden py-[30px] px-10">
Оставить заявку
</button>
<button className="p-6 gap-x-1 items-center desktop:flex mobile:hidden">
<span>RU</span>
<img src="src/assets/arrow_down.svg" alt="" />
</button>
<button className="px-6 py-5 desktop:hidden mobile:block border-l border-[#3D425C]">
<button className="px-6 py-5 min-[1350px]:hidden mobile:block border-l border-[#3D425C]">
<img src="src/assets/burger.svg" alt="" />
</button>
</div>
src/components/Main/Efficiency.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ export function Effeciency() {
<div className="flex justify-between min-[1400px]:flex-row mobile:flex-col tablet:border-t border-[#3D425C] pt-5">
<MiniTitle text={'экономическая\nэффективность'} />
<div className="tablet:max-desktop-figma:mt-4 mobile:max-tablet:mt-2">
<div className="flex mobile:max-tablet:flex-col mobile:items-stretch gap-x-4 gap-y-2 mobile:max-tablet:py-5 tablet:pb-5 border-b border-[#3D425C] mb-9 w-fit tablet:border-t-0 mobile:border-t">
<div className="flex mobile:max-tablet:flex-col mobile: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}
src/components/Main/Marquee.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
export function Marquee() {
return (
<div className="flex items-stretch overflow-clip desktop:mt-28 tablet:mt-12 mobile:mt-14">
<div className="flex items-stretch overflow-clip">
<div className="desktop:min-w-[212px] tablet:min-w-[180px] mobile:min-w-[170px] flex border border-[#3D425C] py-[30px]">
<img src="src/assets/rosatom.svg" className="m-auto" alt="" />
</div>
src/components/Main/Pluses.tsx
+31 -39
View File
@@ -1,47 +1,39 @@
import { useWindowWidth } from '../../hooks/useWindowWidth';
import { MiniTitle } from '../../ui/MiniTitle';
export function Pluses() {
const width = useWindowWidth();
return (
<div className="desktop:py-[70px] mobile:py-14 desktop:px-10 tablet:px-6 mobile:px-4">
{width >= 640 ? (
<h1 className="desktop:text-[64px] tablet:text-[40px] font-medium desktop:leading-[57px] tablet:leading-10 text-[#ffffff]">
<span
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
style={{
backgroundClip: 'text',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
Достигайте положительный эффект
</span>{' '}
за счет снижения издержек
</h1>
) : (
<h1 className="text-[#ffffff] text-[28px] leading-[28px]">
<span
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
style={{
backgroundClip: 'text',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
Помогаем
</span>{' '}
сократить затраты на обучение, повысить безопасность и
производительность
</h1>
)}
<h1 className="desktop:text-[64px] tablet:text-[40px] font-medium desktop:leading-[57px] tablet:leading-10 text-[#ffffff] tablet:block mobile:max-tablet:hidden">
<span
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
style={{
backgroundClip: 'text',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
Достигайте положительный эффект
</span>{' '}
за счет снижения издержек
</h1>
<h1 className="text-[#ffffff] text-[28px] leading-[28px] tablet:hidden">
<span
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
style={{
backgroundClip: 'text',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
Помогаем
</span>{' '}
сократить затраты на обучение, повысить безопасность и
производительность
</h1>
<div className="flex tablet:flex-row mobile:flex-col justify-between gap-x-3 tablet:items-end 2xl:pl-[128px] min-[1600px]:pl-64 desktop:mt-14 mobile:mt-6">
{320 <= width && width <= 640 && (
<p className="flex text-[#ffffff] gap-x-1 mb-2">
<img src="src/assets/cube.svg" alt="" />
<span className="uppercase">снижение</span>
</p>
)}
<div className="tablet:hidden mb-2">
<MiniTitle text="снижение" />
</div>
<ul className="text-[#ffffff] xl:min-w-[752px] desktop:text-lg tablet:min-w-[318px] mobile:text-base mobile:mb-6">
<li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
<p>снижение количества несчастных случаев</p>
src/components/Main/Products.tsx
+4 -4
View File
@@ -20,7 +20,7 @@ export function Products() {
<div className="desktop:hidden">
<MiniTitle text="Продукты" />
</div>
<div className="flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 rounded-xl p-1 mb-2 w-fit max-w-full overflow-clip tablet:max-desktop:mt-[13px] mobile:mt-6">
<div className="flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 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%)]">
<TabButton text="Промышленные тренажеры" />
<TabButton text="Симуляторы управления техникой" />
<TabButton text="Тренажеры для учебных заведений" />
@@ -32,7 +32,7 @@ export function Products() {
function TabButton({ text }: { text: string }) {
return (
<button className="active:bg-[#798FFF] rounded-lg px-5 py-[13.5px] desktop:text-lg font-semibold desktop:leading-[18px] mobile:text-base tablet:leading-4 text-nowrap text-clip">
<button className="active:bg-[#798FFF] rounded-lg px-5 py-[13.5px] desktop:text-lg font-semibold desktop:leading-[18px] mobile:text-base tablet:leading-4 text-nowrap text-clip bg-text-gradient">
{text}
</button>
);
@@ -71,9 +71,9 @@ function TeachingItem({
function TeachingItems() {
return (
<div className="bg-[#3D425C4D] rounded-xl desktop:bg-[url('src/assets/mask_group.png')] desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 bg-no-repeat bg-right-bottom">
<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="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">
<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">
<h1 className="text-[#ffffff] desktop:text-[32px] tablet:text-2xl mobile:text-xl font-medium desktop:leading-[29px] tablet:leading-6 mobile:leading-6 tablet:mb-8">
Промышленные тренажеры виртуальной реальности
src/components/Main/Projects.tsx
+1 -1
View File
@@ -152,7 +152,7 @@ function Slider({
</button>
<div className="h-1 bg-[#3D425C] w-full">
<div
className="bg-[#ffffff] h-1"
className="bg-[#ffffff] h-1 duration-1000"
style={{ width: `${((slide + 1) / 3) * 100}%` }}
/>
</div>
src/components/Main/Teaching.tsx
+14 -12
View File
@@ -114,7 +114,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-[353px_354px] desktop:hidden tablet:max-tablet-figma:flex tablet:max-tablet-figma:flex-col">
<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">
<h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-2xl mobile:max-tablet:text-xl tablet:max-desktop:leading-6 mobile:max-tablet:leading-5 mb-1">
Управление
@@ -170,17 +170,19 @@ function TeachingFeaturesForOtherScreens() {
<br />
Отчет об ошибках
</p>
<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">
<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 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>
src/ui/NavLink.tsx
+1 -22
View File
@@ -1,32 +1,11 @@
import { Link } from 'react-router-dom';
import { useWindowWidth } from '../hooks/useWindowWidth';
export function NavLink({ text, route }: { text: string; route: string }) {
const width = useWindowWidth();
return (
<Link
className={
'border-x border-[#3D425C] desktop:block mobile:hidden py-[30px]'
'border-l border-[#3D425C] mobile:hidden py-[30px] px-10 min-[1350px]:block'
}
style={{
paddingLeft:
width <= 1600 && width >= 1024
? ((width - 1024) / (1600 - 1024)) * 25 + 15
: 40,
paddingRight:
width <= 1600 && width >= 1024
? ((width - 1024) / (1600 - 1024)) * 25 + 15
: 40,
paddingTop:
width <= 1600 && width >= 1024
? ((width - 1024) / (1600 - 1024)) * 3 + 27
: 30,
paddingBottom:
width <= 1600 && width >= 1024
? ((width - 1024) / (1600 - 1024)) * 3 + 27
: 30,
}}
to={route}
>
{text}