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

slider in process

Browse Source
This commit is contained in:
Lanskikh
2024-09-11 16:43:26 +05:00
parent fa5e13b0e9
commit 6693ea7b07
10 changed files with 77 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/decreasing/decreasing.mp4
BIN
View File
Binary file not shown.
src/components/Layouts/Footer.tsx
+3 -3
View File
@@ -4,7 +4,7 @@ import { LogoWithTextIcon } from '../icons/LogoWithTextIcon';
export function Footer() {
return (
<footer className="sm:grid xl:grid-cols-[2fr_1fr_1fr] sm:grid-cols-2 sm:max-xl:grid-rows-2">
<div className="flex sm:items-center max-sm:flex-col sm:px-10 px-4 sm:py-9 py-4 border-t border-[#3D425C] gap-6 sm:max-xl:row-start-1 sm:max-xl:col-span-2">
<div className="flex sm:items-center max-sm:flex-col lg:px-10 sm:px-6 px-4 sm:py-9 py-4 border-t border-[#3D425C] gap-6 sm:max-xl:row-start-1 sm:max-xl:col-span-2">
<Link to={'/'} className="outline-none">
<LogoWithTextIcon className="h-[50px]" />
</Link>
@@ -20,7 +20,7 @@ export function Footer() {
</p>
</div>
</div>
<div className="px-10 py-[30px] flex items-center border-t xl:border-l sm:border-r border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-1">
<div className="lg:px-10 sm:px-6 px-4 py-[30px] flex items-center border-t xl:border-l sm:border-r border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-1">
<div>
<Contact type="email" text="info@graff.tech" />
<Contact type="phone" text="+7 800 770 00 67" />
@@ -29,7 +29,7 @@ export function Footer() {
RU
</div>
</div>
<div className="px-10 py-[30px] flex items-center border-t border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-2">
<div className="lg:px-10 sm:px-6 px-4 py-[30px] flex items-center border-t border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-2">
<div>
<Contact type="email" text="info@graff.tech" />
<Contact type="phone" text="+971 58 506 0097" />
src/components/Main/Contacts.tsx
+15 -2
View File
@@ -2,12 +2,17 @@ import { Button } from '../../ui/Button';
import { Link } from 'react-router-dom';
import { MailIcon } from '../icons/MailIcon';
import { PhoneIcon } from '../icons/PhoneIcon';
import { SendIcon } from '../icons/SendIcon';
import { TelegramIcon } from '../icons/TelegramIcon';
import { VKIcon } from '../icons/VKIcon';
import { YouTubeIcon } from '../icons/YoutubeIcon';
import { useModalStore } from '../../store/modalStore';
import { ModalWithForm } from './ModalWithForm';
import { ArrowRightIcon } from '../icons/ArrowRightIcon';
import { ClassNameWrapper } from '../../hocs/ClassNameWrapper';
export function Contacts() {
const setModal = useModalStore(state => state.setModal);
return (
<div className="sm:grid lg:grid-cols-12 sm:grid-cols-2 lg:gap-x-4 sm:gap-x-14 lg:gap-y-[68px] pb-20 pt-[70px]">
<h2 className="font-medium lg:col-span-7 sm:col-span-full h2 max-lg:mb-6">
@@ -17,9 +22,17 @@ export function Contacts() {
</h2>
<Button
color="primary"
icon={<SendIcon />}
icon={
<div className="p-2 bg-white rounded-full">
<ClassNameWrapper
element={<ArrowRightIcon />}
className="text-black"
/>
</div>
}
className="self-end row-start-2 px-6 py-4 lg:col-span-3 sm:max-lg:mb-20 max-sm:mb-14"
width="full"
onClick={() => setModal(<ModalWithForm />)}
>
Оставить заявку
</Button>
src/components/Main/Decreasing.tsx
+47 -16
View File
@@ -1,39 +1,70 @@
import { ClassNameWrapper } from '../../hocs/ClassNameWrapper';
import { useModalStore } from '../../store/modalStore';
import { AppearanceHr } from '../../ui/AppearanceHr';
import { Button } from '../../ui/Button';
import { Title } from '../../ui/Title';
import { ArrowRightIcon } from '../icons/ArrowRightIcon';
import { ModalWithForm } from './ModalWithForm';
export function Decreasing() {
const setModal = useModalStore(state => state.setModal);
return (
<div className="lg:py-[100px] py-14">
<Title className="">
<div className="lg:py-[100px] sm:py-[70px] py-14">
<Title>
<span className="text-gradient">
Помогаем предприятиям снизить издержки,
</span>{' '}
сделать обучение сотрудников безопасней и эффективней
</Title>
<div className="sm:grid lg:grid-cols-12 sm:max-lg:grid-cols-9 grid-cols-2 2xl:mt-[77px] max-sm:space-y-6 items-center lg:mt-14 mt-6 gap-x-4">
<div className="w-full lg:col-start-1 sm:max-lg:col-start-1 lg:col-span-6 sm:col-span-5">
{[
'снижение количества несчастных случаев',
'уменьшение количества ошибок при ТО и ППР',
'меньше случаев внеплановой остановки оборудования',
'снижение расходов на закупку реальной техники и оборудования для обучения',
'сокращение сроков обучения',
].map((text, index) => (
<DecreasingOption key={index} text={text} number={index + 1} />
))}
<div className="grid grid-cols-2 mt-6 lg:mt-14 gap-x-4 gap-y-6">
<div className="col-span-2 space-y-10 lg:col-start-1 sm:max-lg:col-start-1 xl:col-span-1">
<div>
{[
'снижение количества несчастных случаев',
'уменьшение количества ошибок при ТО и ППР',
'меньше случаев внеплановой остановки оборудования',
'снижение расходов на закупку реальной техники и оборудования для обучения',
'сокращение сроков обучения',
].map((text, index) => (
<DecreasingOption key={index} text={text} number={index + 1} />
))}
</div>
<Button
className="w-full py-4 xl:w-1/2 lg:w-1/3 sm:w-1/2"
icon={
<div className="p-2 bg-white rounded-full">
<ClassNameWrapper
element={<ArrowRightIcon />}
className="text-black"
/>
</div>
}
onClick={() => setModal(<ModalWithForm />)}
>
Обсудить проект
</Button>
</div>
<div className="xl:col-start-2 col-span-full">
<video
src="src/assets/decreasing/decreasing.mp4"
autoPlay
muted
loop
className="object-cover w-full"
/>
</div>
<div className="lg:col-start-9 sm:col-start-6 max-sm:aspect-[720/462] sm:max-lg:ml-5 col-span-full bg-[url(src/assets/decreasing/effect.jpg)] bg-no-repeat bg-cover bg-center items-stretch h-full w-full" />
</div>
</div>
);
}
function Plus({ text }: { text: string }) {
return <p className="l-text">{text}</p>;
return <p className="text-2xl leading-[28.8px]">{text}</p>;
}
function Number({ number }: { number: number }) {
return <p className="text-[#52587A] m-text">[0{number}]</p>;
return <p className="text-[#52587A] text-sm">[0{number}]</p>;
}
function DecreasingOption({ text, number }: { text: string; number: number }) {
src/components/Main/Efficiency.tsx
+1 -1
View File
@@ -63,7 +63,7 @@ function Figure({
const figureRef = useRef<HTMLSpanElement>(null);
const motionValue = useMotionValue<number>(0);
const springValue = useSpring(motionValue, { damping: 100, stiffness: 100 });
const springValue = useSpring(motionValue, { damping: 5, stiffness: 100 });
const isInView = useInView(root, { once: true, margin: '-200px' });
useEffect(() => {
src/components/Main/Project.tsx
+2 -2
View File
@@ -37,8 +37,8 @@ export const Project = forwardRef<HTMLDivElement, IProject<Media>>(
)}
<div className="flex flex-col justify-between gap-2 my-4">
<div className="flex justify-between">
<h4 className="font-medium h4">{title}</h4>
<p className="font-medium h4">{year}</p>
<h4 className="text-xl font-medium">{title}</h4>
<p className="text-xl font-medium">{year}</p>
</div>
<div className="flex gap-2">
{tags.map(tag => (
src/components/Main/Showreel.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export function Showreel() {
}, [setModal]);
return (
<div className="lg:mb-[200px] w-full relative aspect-[1551/616] flex justify-center items-center group">
<div className="lg:mb-[100px] sm:mb-[70px] mb-14 w-full relative aspect-[1551/616] flex justify-center items-center group">
<video
src="/src/assets/video/showreel.mp4"
autoPlay
src/components/Main/SliderControls.tsx
-1
View File
@@ -2,7 +2,6 @@ import { forwardRef, useImperativeHandle, useRef } from 'react';
import { ArrowLeftIcon } from '../icons/ArrowLeftIcon';
import { ArrowRightIcon } from '../icons/ArrowRightIcon';
import { delay } from 'framer-motion';
// import { delay } from 'framer-motion';
export const SliderControls = forwardRef<
{ left: () => void; right: () => void },
src/components/icons/ArrowRightIcon.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ export function ArrowRightIcon({ className = '' }: { className?: string }) {
fillRule="evenodd"
clipRule="evenodd"
d="M5 12C5 12.5523 5.44771 13 6 13L15.4817 13L10.9504 17.2724C10.5485 17.6513 10.5299 18.2842 10.9088 18.686C11.2876 19.0879 11.9205 19.1065 12.3224 18.7276L18.686 12.7276C18.8864 12.5387 19 12.2754 19 12C19 11.7246 18.8864 11.4614 18.686 11.2724L12.3224 5.27241C11.9205 4.89354 11.2876 4.91215 10.9088 5.31399C10.5299 5.71583 10.5485 6.34872 10.9504 6.72759L15.4817 11L6 11C5.44772 11 5 11.4477 5 12Z"
fill="white"
fill="currentColor"
/>
</svg>
);
src/ui/SliderWithScaling.tsx
+7 -3
View File
@@ -1,5 +1,5 @@
import { useWindowWidth } from '../hooks/useWindowWidth';
import { delay, motion } from 'framer-motion';
import { delay, motion, cancelFrame } from 'framer-motion';
import { ReactNode, useEffect, useReducer, useRef, useState } from 'react';
import { useSwipeable } from 'react-swipeable';
import { SliderControls } from '../components/Main/SliderControls';
@@ -78,9 +78,13 @@ export function SliderWithScaling<T extends { title: string }>({
}, [baseoffset, order, slide]);
useEffect(() => {
delay(() => {
const timeout = delay(overshoot => {
controlsRef.current.right();
}, 2000);
}, 10000);
return () => {
cancelFrame(timeout);
};
}, [slide]);
const handlers = useSwipeable({