diff --git a/src/Layout.tsx b/src/Layout.tsx index 91a51b0..aa7c8e4 100644 --- a/src/Layout.tsx +++ b/src/Layout.tsx @@ -1,7 +1,7 @@ import { Outlet } from 'react-router-dom'; -import { Header } from './components/Header'; +import { Header } from './components/Layout/Header'; import { Navbar } from './components/Layout/Navbar'; -import { Footer } from './components/Footer'; +import { Footer } from './components/Layout/Footer'; export default function Layout() { return ( diff --git a/src/assets/helicopter.jpg b/src/assets/helicopter.jpg new file mode 100644 index 0000000..13d3477 Binary files /dev/null and b/src/assets/helicopter.jpg differ diff --git a/src/assets/left_slide.svg b/src/assets/left_slide.svg new file mode 100644 index 0000000..2d987d8 --- /dev/null +++ b/src/assets/left_slide.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/repair.png b/src/assets/repair.png new file mode 100644 index 0000000..b1b82fe Binary files /dev/null and b/src/assets/repair.png differ diff --git a/src/assets/right_slide.svg b/src/assets/right_slide.svg new file mode 100644 index 0000000..16bb7ce --- /dev/null +++ b/src/assets/right_slide.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/tank.png b/src/assets/tank.png new file mode 100644 index 0000000..4168044 Binary files /dev/null and b/src/assets/tank.png differ diff --git a/src/assets/train.png b/src/assets/train.png new file mode 100644 index 0000000..bb8fe2b Binary files /dev/null and b/src/assets/train.png differ diff --git a/src/assets/vr_1.png b/src/assets/vr_1.png new file mode 100644 index 0000000..ecd55ac Binary files /dev/null and b/src/assets/vr_1.png differ diff --git a/src/assets/vr_2.png b/src/assets/vr_2.png new file mode 100644 index 0000000..3db2962 Binary files /dev/null and b/src/assets/vr_2.png differ diff --git a/src/assets/vr_3.png b/src/assets/vr_3.png new file mode 100644 index 0000000..c3474f1 Binary files /dev/null and b/src/assets/vr_3.png differ diff --git a/src/components/Expirience.tsx b/src/components/Expirience.tsx deleted file mode 100644 index faef1c7..0000000 --- a/src/components/Expirience.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export function Expirience() { - return
; -} diff --git a/src/components/Footer.tsx b/src/components/Layout/Footer.tsx similarity index 100% rename from src/components/Footer.tsx rename to src/components/Layout/Footer.tsx diff --git a/src/components/Header.tsx b/src/components/Layout/Header.tsx similarity index 94% rename from src/components/Header.tsx rename to src/components/Layout/Header.tsx index 2e32aba..9517072 100644 --- a/src/components/Header.tsx +++ b/src/components/Layout/Header.tsx @@ -1,5 +1,5 @@ -import { useWindowWidth } from '../hooks/useWindowWidth'; -import { Marquee } from './Main/Marquee'; +import { useWindowWidth } from '../../hooks/useWindowWidth'; +import { Marquee } from '../Main/Marquee'; export function Header() { const width = useWindowWidth(); diff --git a/src/components/Main/Projects.tsx b/src/components/Main/Projects.tsx new file mode 100644 index 0000000..17ef3eb --- /dev/null +++ b/src/components/Main/Projects.tsx @@ -0,0 +1,131 @@ +import { useReducer, useState } from 'react'; + +export function Projects() { + return ( +
+

+ + Большой опыт в работе + {' '} + с промышленными предприятиями и учебными заведениями +

+

+ + РЕАЛИЗОВАННЫЕ ПРОЕКТЫ +

+ +
+ ); +} + +function Project({ + src, + title, + tags, +}: { + src: string; + title: string; + tags: string[]; +}) { + return ( +
+
+
+

{title}

+
+ {tags.map(tag => ( +

+ {tag} +

+ ))} +
+
+
+ ); +} + +function Slider({ + projects, +}: { + projects: { src: string; title: string; tags: string[] }[]; +}) { + const [order, dispatch] = useReducer( + (state: typeof projects, action: string) => + action === 'next' + ? [...state.slice(1), state[2]] + : action === 'prev' + ? [state[state.length - 3], ...state.slice(0, -1)] + : state, + [projects[projects.length - 1], ...projects, projects[0]], + ); + + const [slide, setSlide] = useState(0); + + return ( +
+
+ {order.map((project, index) => ( + + ))} +
+
+ +
+
+
+ +
+
+ ); +} diff --git a/src/components/Main/Trainings.tsx b/src/components/Main/Trainings.tsx new file mode 100644 index 0000000..3d6d52c --- /dev/null +++ b/src/components/Main/Trainings.tsx @@ -0,0 +1,83 @@ +export function Trainings() { + return ( +
+

+ Предлагаем различные{' '} + + варианты комплектации тренажеров + + , основываясь на специфике вашего тренировочного процесса +

+
+ + + +
+
+ ); +} + +function TrainingsFeature({ + src, + title, + text, + order, +}: { + title: string; + text: string; + src: string; + order: string; +}) { + return ( +
+
+

+ {title} +

+

+ {text} +

+
+
+

{order}

+ +
+
+ +

+ {order} +

+
+ +

+ {order} +

+
+ ); +} diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 2a3676b..170b166 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -5,6 +5,8 @@ import { Products } from '../components/Main/Product'; import { Teaching } from '../components/Main/Teaching'; import { Distance } from '../components/Main/Distance'; import { MultiUser } from '../components/Main/MultiUser'; +import { Projects } from '../components/Main/Projects'; +import { Trainings } from '../components/Main/Trainings'; export function MainPage() { return ( @@ -16,6 +18,8 @@ export function MainPage() { + + ); }