From 6b9004d4b1733d2b2836b0dcc39735a5a627be37 Mon Sep 17 00:00:00 2001 From: Lanskikh Date: Wed, 4 Sep 2024 16:49:55 +0500 Subject: [PATCH] continued adaptive --- src/components/{Feedback.tsx => Contacts.tsx} | 2 +- src/components/Form.tsx | 22 +-- src/components/Layout/FeedbackForm.tsx | 11 +- src/components/Layout/Header.tsx | 18 ++- src/components/Layout/index.tsx | 11 +- src/components/Motivation.tsx | 6 +- src/components/Projects.tsx | 10 +- src/components/Promotion.tsx | 83 +++++++++- src/components/SelectPhoneCode.tsx | 9 +- src/components/Showreel.tsx | 10 +- src/components/Stands.tsx | 14 +- src/components/Statistics.tsx | 124 +++++++++------ src/components/icons/LogoWithoutText.tsx | 149 ++++++++++++++++++ src/consts/statistics.ts | 34 ++++ src/pages/MainPage.tsx | 2 +- src/types/IStatisticsItem.ts | 6 + tailwind.config.js | 2 +- 17 files changed, 421 insertions(+), 92 deletions(-) rename src/components/{Feedback.tsx => Contacts.tsx} (98%) create mode 100644 src/components/icons/LogoWithoutText.tsx create mode 100644 src/consts/statistics.ts create mode 100644 src/types/IStatisticsItem.ts diff --git a/src/components/Feedback.tsx b/src/components/Contacts.tsx similarity index 98% rename from src/components/Feedback.tsx rename to src/components/Contacts.tsx index 6d5ce22..a7d5420 100644 --- a/src/components/Feedback.tsx +++ b/src/components/Contacts.tsx @@ -7,7 +7,7 @@ import { VKIcon } from './icons/VKIcon'; import { YoutubeIcon } from './icons/YoutubeIcon'; import { Link } from 'react-router-dom'; -export function Feedback() { +export function Contacts() { return (
- + <div className="py-6 lg:space-y-20 sm:space-y-10 space-y-8"> + <Title className="lg:max-w-[58vw]"> Хотите интерактивное решение для выставки? - <br /> - <span className="text-gradient">Давайте обсудим детали.</span> + <br className="max-lg:hidden" /> + <span className="text-gradient"> Давайте обсудим детали.</span> -
+
-
-
-
+
+
+
-
+
-
+
-
+
@@ -171,7 +176,7 @@ export function FeedbackForm({
-
+
diff --git a/src/components/Showreel.tsx b/src/components/Showreel.tsx index 0573c33..c97ccdd 100644 --- a/src/components/Showreel.tsx +++ b/src/components/Showreel.tsx @@ -1,10 +1,14 @@ +import { ClassNameWrapper } from '../hocs/ClassNameWrapper'; import { FullScreenIcon } from './icons/FullScreenIcon'; export function Showreel() { return ( -
-
); diff --git a/src/components/Stands.tsx b/src/components/Stands.tsx index 96c4c5d..85df1ab 100644 --- a/src/components/Stands.tsx +++ b/src/components/Stands.tsx @@ -3,10 +3,13 @@ import { stands } from '../consts/stands'; import { IStand } from '../types/IStand'; import { SliderWithScaling } from './ui/SliderWithScaling'; import { Title } from './ui/Title'; +import { useWindowWidth } from '../hooks/useWindowWidth'; export function Stands() { + const width = useWindowWidth(); + return ( -
+
Мы разработчики с собственной <span className="text-gradient"> @@ -18,7 +21,14 @@ export function Stands() { <SliderWithScaling slides={stands} SlideElement={Stand} - slideSizes={['31.6vw', '31.8vw', '48vw', '48vw']} + className="space-y-8 pb-20" + slideSizes={ + width >= 1024 + ? ['31.6vw', '31.8vw', '48vw', '48vw'] + : width >= 640 + ? ['93.75vw', '93.75vw', '93.75vw', '93.75vw'] + : ['91.11vw', '91.11vw', '91.11vw', '91.11vw'] + } childClassName="flex flex-col justify-stretch h-full" controlsPosition={'bottom'} /> diff --git a/src/components/Statistics.tsx b/src/components/Statistics.tsx index d4dc0eb..aba4c61 100644 --- a/src/components/Statistics.tsx +++ b/src/components/Statistics.tsx @@ -1,25 +1,32 @@ import { motion, useInView, useMotionValue, useSpring } from 'framer-motion'; import { Title } from './ui/Title'; import { useEffect, useRef } from 'react'; +import { IStatisticsItem } from '../types/IStatisticsItem'; +import { statistics } from '../consts/statistics'; export function Statistics() { return ( - <div className="space-y-20 border-b border-[#3D425C]"> + <div className="lg:space-y-20 sm:space-y-10 border-b border-[#3D425C]"> <Title> За 15 лет работы cоздали более <br /> <span className="text-gradient"> 250 интерактивных проектов </span>с 3D графикой -
+
{statistics.map(stat => (
))}
+
+ {statistics.map(stat => ( + + ))} +
); } -function Figure({ color, percents, columnHeight, title }: StatisticsItem) { +function Figure({ color, percents, size, title }: IStatisticsItem) { const percentsValue = useMotionValue(0); const percentsSpringValue = useSpring(percentsValue, { damping: 100, @@ -54,9 +61,9 @@ function Figure({ color, percents, columnHeight, title }: StatisticsItem) { useEffect(() => { if (inView) { - columnHeightValue.set(columnHeight); + columnHeightValue.set(size); } - }, [columnHeight, columnHeightValue, inView]); + }, [size, columnHeightValue, inView]); useEffect(() => { columnHeightSpringValue.on('change', prev => { @@ -84,7 +91,7 @@ function Figure({ color, percents, columnHeight, title }: StatisticsItem) { />

{percents}

@@ -92,42 +99,71 @@ function Figure({ color, percents, columnHeight, title }: StatisticsItem) { ); } -interface StatisticsItem { - title: string; - color: string; - percents: number; - columnHeight: number; -} +function MobileFigure({ color, percents, size, title }: IStatisticsItem) { + const percentsValue = useMotionValue(0); + const percentsSpringValue = useSpring(percentsValue, { + damping: 100, + stiffness: 100, + }); -const statistics: StatisticsItem[] = [ - { - color: '#D375FF', - percents: 15, - title: 'AR', - columnHeight: 224, - }, - { - color: '#79FFA6', - percents: 62, - title: 'VR', - columnHeight: 301, - }, - { - color: '#9E75FF', - percents: 97, - title: '3D интерактив', - columnHeight: 373, - }, - { - color: '#FF7575', - percents: 64, - title: 'Интеактивные макеты', - columnHeight: 301, - }, - { - color: '#8F95FF', - percents: 12, - title: 'Мобильные приложения', - columnHeight: 246, - }, -]; + const columnWidthValue = useMotionValue(0); + const columnWidthSpringValue = useSpring(columnWidthValue, { + damping: 100, + stiffness: 100, + }); + + const figureRef = useRef(null); + const columnRef = useRef(null); + const root = useRef(null); + + const inView = useInView(root); + + useEffect(() => { + if (inView) { + percentsValue.set(percents); + } + }, [percentsValue, inView, percents]); + + useEffect(() => { + percentsSpringValue.on('change', prev => { + if (figureRef.current) { + figureRef.current.textContent = prev.toFixed(0); + } + }); + }, [figureRef, percentsSpringValue]); + + useEffect(() => { + if (inView) { + columnWidthValue.set(size); + } + }, [size, columnWidthValue, inView]); + + useEffect(() => { + columnWidthSpringValue.on('change', prev => { + if (columnRef.current) { + columnRef.current!.style.width = `${prev}px`; + } + }); + }, [columnWidthSpringValue, columnRef, percentsSpringValue]); + return ( + +

+ {title} +

+ +

+ {percents} +

+ + ); +} diff --git a/src/components/icons/LogoWithoutText.tsx b/src/components/icons/LogoWithoutText.tsx new file mode 100644 index 0000000..c66b142 --- /dev/null +++ b/src/components/icons/LogoWithoutText.tsx @@ -0,0 +1,149 @@ +export function LogoWithoutText() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/consts/statistics.ts b/src/consts/statistics.ts new file mode 100644 index 0000000..02b9f1f --- /dev/null +++ b/src/consts/statistics.ts @@ -0,0 +1,34 @@ +import { IStatisticsItem } from '../types/IStatisticsItem'; + +export const statistics: IStatisticsItem[] = [ + { + color: '#D375FF', + percents: 15, + title: 'AR', + columnWidth: 224, + }, + { + color: '#79FFA6', + percents: 62, + title: 'VR', + columnWidth: 301, + }, + { + color: '#9E75FF', + percents: 97, + title: '3D интерактив', + columnWidth: 373, + }, + { + color: '#FF7575', + percents: 64, + title: 'Интеактивные макеты', + columnWidth: 301, + }, + { + color: '#8F95FF', + percents: 12, + title: 'Мобильные приложения', + columnWidth: 246, + }, +]; diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 9ac0e1a..c3571b1 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -8,7 +8,7 @@ import { Devices } from '../components/Devices'; export function MainPage() { return ( -
+
diff --git a/src/types/IStatisticsItem.ts b/src/types/IStatisticsItem.ts new file mode 100644 index 0000000..fc1ca85 --- /dev/null +++ b/src/types/IStatisticsItem.ts @@ -0,0 +1,6 @@ +export interface IStatisticsItem { + title: string; + color: string; + percents: number; + size: number; +} diff --git a/tailwind.config.js b/tailwind.config.js index 0760593..4130911 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,7 +4,7 @@ export default { theme: { extend: { animation: { - 'infinite-scroll': 'infinite-scroll 25s linear infinite', + 'infinite-scroll': 'infinite-scroll 30s linear infinite', }, keyframes: { 'infinite-scroll': {