From 143cb0361fdcc1eafe193bd81fddc2187944257e Mon Sep 17 00:00:00 2001 From: Lanskikh Date: Thu, 5 Sep 2024 17:39:34 +0500 Subject: [PATCH] fixes and updates --- src/app/page.tsx | 7 +- src/components/pages/MainPage/Clients.tsx | 31 ++++--- .../pages/MainPage/ProjectManagment.tsx | 2 +- src/components/pages/MainPage/Streaming.tsx | 93 +++++++++++++++++++ src/components/pages/MainPage/Technology.tsx | 85 ----------------- src/ui/MiniTitle.tsx | 21 +++++ tailwind.config.ts | 2 +- 7 files changed, 137 insertions(+), 104 deletions(-) create mode 100644 src/components/pages/MainPage/Streaming.tsx delete mode 100644 src/components/pages/MainPage/Technology.tsx create mode 100644 src/ui/MiniTitle.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index 27150e14..96d906d4 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,7 +2,6 @@ import { Ellipse } from '@/components/Layout/Ellipse'; import { AvailablesSlider } from '@/components/pages/MainPage/Availables/AvailablesSlider'; import { Calculator } from '@/components/pages/MainPage/Calculator/Calculator'; import { Clients } from '@/components/pages/MainPage/Clients'; -import { Demoversions } from '@/components/pages/MainPage/Demoversions'; import { IntegrationsSlider } from '@/components/pages/MainPage/Integrations/IntegrationsSlider'; import { Motivation } from '@/components/pages/MainPage/Motivation'; import { ProjectManagment } from '@/components/pages/MainPage/ProjectManagment'; @@ -10,7 +9,7 @@ import { Projects } from '@/components/pages/MainPage/Projects'; import { Reviews } from '@/components/pages/MainPage/Reviews'; import { Showreel } from '@/components/pages/MainPage/Showreel'; import { Statistics } from '@/components/pages/MainPage/Statistics'; -import { Technology } from '@/components/pages/MainPage/Technology'; +import { Streaming } from '@/components/pages/MainPage/Streaming'; import { Winners } from '@/components/pages/MainPage/Winners'; export default function Home() { @@ -61,8 +60,8 @@ export default function Home() { }, ]} /> - - + + {/* */} diff --git a/src/components/pages/MainPage/Clients.tsx b/src/components/pages/MainPage/Clients.tsx index 16e13bfa..859f7757 100644 --- a/src/components/pages/MainPage/Clients.tsx +++ b/src/components/pages/MainPage/Clients.tsx @@ -1,14 +1,13 @@ import { clients } from '@/consts/clients'; -import Image from 'next/image'; export function Clients() { return ( -
-
+
+
-
+
-
+
@@ -36,18 +35,24 @@ function MarqueeHalf({ return (
{items.map(client => ( - {client.src} + className="border-l border-[#3D425C] w-[312px] h-[124px] flex justify-center items-center relative" + > + {client.src} +
))}
); diff --git a/src/components/pages/MainPage/ProjectManagment.tsx b/src/components/pages/MainPage/ProjectManagment.tsx index 75aa73a4..980c67bd 100644 --- a/src/components/pages/MainPage/ProjectManagment.tsx +++ b/src/components/pages/MainPage/ProjectManagment.tsx @@ -3,7 +3,7 @@ import Image from 'next/image'; export function ProjectManagment() { return ( -
+
Cобираем данные о пользователе и его поведении, для прогнозирования спроса{' '} diff --git a/src/components/pages/MainPage/Streaming.tsx b/src/components/pages/MainPage/Streaming.tsx new file mode 100644 index 00000000..3e50f3b3 --- /dev/null +++ b/src/components/pages/MainPage/Streaming.tsx @@ -0,0 +1,93 @@ +'use client'; + +import { api } from '@/api'; +import { ArrowMoreIcon } from '@/components/icons/ArrowMoreIcon'; +import { IProject } from '@/types/IProject'; +import { MiniTitle } from '@/ui/MiniTitle'; +import { Title } from '@/ui/Title'; +import Image from 'next/image'; +import { useEffect, useState } from 'react'; + +export function Streaming() { + const [streamingProjects, setSteramingProjects] = useState<IProject[]>([]); + + useEffect(() => { + getStreamingProjects(); + }, []); + + async function getStreamingProjects() { + try { + const projects: IProject[] = await api.get('projects').json(); + setSteramingProjects( + projects.filter(project => project.devices.includes('stream')), + ); + } catch (error) { + alert(`Error: ${error}`); + } + } + + return ( + <div className="pt-[200px] space-y-20"> + <Title> + Уникальная технология удаленной демонстрации{' '} + <span className="text-gradient"> + дает возможность презентовать объект покупателю из любой точки мира + </span> + +
+
+

+ Graff.estate stream доступен + на любых устройствах. +

+

+ Высокий уровень графики и полное погружение покупателя в процесс + выбора квартиры +

+
+
+
+
+ +

+ Местоположение и устройство не имеют значения. Нужен только интернет +

+
+
+ {streamingProjects.map(streamingProject => ( + + ))} +
+
+
+ ); +} + +function StreamingProject({ city, name, image }: IProject) { + return ( +
+ {''} +
+ {' '} +
+

{name}

+

Россия, {city}

+
+ +
+
+ ); +} diff --git a/src/components/pages/MainPage/Technology.tsx b/src/components/pages/MainPage/Technology.tsx deleted file mode 100644 index f98aad54..00000000 --- a/src/components/pages/MainPage/Technology.tsx +++ /dev/null @@ -1,85 +0,0 @@ -'use client'; - -import { ArrowMoreIcon } from '@/components/icons/ArrowMoreIcon'; -import { PauseIcon } from '@/components/icons/PauseIcon'; -import { PlayIcon } from '@/components/icons/PlayIcon'; -import { PlusIcon } from '@/components/icons/PlusIcon'; -import { ClassNameWrapper } from '@/hocs/ClassNameWrapper'; -import Link from 'next/link'; -import { useRef, useState } from 'react'; - -export function Technology() { - const [playing, setPlaying] = useState(true); - - const videoRef = useRef(null); - - return ( -
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-

- Уникальная технология удаленной демонстрации дает возможность - презентовать объект покупателю из любой точки мира -

-
-
-
-

- Высокий уровень графики и полное погружение покупателя в процесс - выбора квартиры -

- -

О технологии

- } - /> - -
-
-
- -
-
-
- ); -} diff --git a/src/ui/MiniTitle.tsx b/src/ui/MiniTitle.tsx new file mode 100644 index 00000000..ebd10ca2 --- /dev/null +++ b/src/ui/MiniTitle.tsx @@ -0,0 +1,21 @@ +import { CubeIcon } from '../components/icons/CubeIcon'; + +export function MiniTitle({ + text, + className = '', +}: { + text: string; + className?: string; +}) { + return ( +

+ + {text} +

+ ); +} diff --git a/tailwind.config.ts b/tailwind.config.ts index bc76a54d..ecf860e4 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -13,7 +13,7 @@ const config: Config = { 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', }, animation: { - 'infinite-scroll': 'infinite-scroll 25s linear infinite', + 'infinite-scroll': 'infinite-scroll 35s linear infinite', 'highlight-product': 'highlight-product 0.1s ease-in 0s', }, keyframes: {