+//
+// {title}
+//
+//
,
+ icon: "/images/accordion-1.svg",
+ id: 1,
+ },
+ {
+ title: "AR",
+ description: "Дополненная реальность",
+ content:
,
+ icon: "/images/accordion-2.svg",
+ id: 2,
+ },
+ {
+ title: "Mobile App",
+ description: "Мобильные приложения",
+ content:
,
+ icon: "/images/accordion-3.svg",
+ id: 3,
+ },
+ {
+ title: "Touch-screen",
+ description: "3D графика для презентаций",
+ content:
,
+ icon: "/images/accordion-4.svg",
+ id: 4,
+ },
+ {
+ title: "WEB GL",
+ description: "3D для сайта и мобильных приложений",
+ content:
,
+ icon: "/images/accordion-5.svg",
+ id: 5,
+ },
+ {
+ title: "KINECT REAL SENSE",
+ description: "Презентации с бесконтактным управлением",
+ content:
,
+ icon: "/images/accordion-6.svg",
+ id: 6,
+ },
+];
+
+const AccordionsContainer = () => {
+ const [selected, setSelected] = useState
(null);
+
+ const handleOnClick = (accordion: AccordionType) => {
+ if (selected?.id === accordion.id) {
+ setSelected(null);
+ } else {
+ setSelected(accordion);
+ }
+ };
+
+ return (
+
+ {accordions.map((acc) => (
+
handleOnClick(acc)}
+ />
+ ))}
+
+
{title}
+
+ {advantages.map((adv) => (
+
+
{adv.title}
+
{adv.description}
+
+ ))}
+
+
+
+
+ Сегодня покупатель недвижимости платит не просто за квадратные метры –
+ он платит за уникальные характеристики дома – инфраструктуру, удобный
+ и комфортный двор, дизайн подъездов и холлов, вид из окон. Нужно
+ показать ему все преимущества жилого комплекса на любой стадии
+ строительства еще в офисе продаж.
+
+
+
+
+ Как это
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ KINECT REAL SENSE Technology - это продукт с технологиями
+ глубины и слежения, предназначенных для того, чтобы дать машинам и
+ устройствам возможности восприятия глубины. Технологии, используются в
+ автономных беспилотных летательных аппаратах, роботах, AR/VR,
+ устройствах умного дома и многих других продуктах широкого рынка.
+
+
+
+
+ Как это
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Показать продукцию потенциальному заказчику, даже на этапе разработки,
+ можно с помощью современных интерактивных технологий — виртуальной и
+ дополненной реальности, мультимедийных сенсорных панелей и мобильных
+ устройств.
+
+
+
+
+ Как это
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Сенсорные дисплеи и тач-панели - отличное решение для демонстрации
+ всех преимуществ продукта в рамках выставки или фестиваля.
+
+
+
+
+ Как это
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Сегодня покупатель недвижимости платит не просто за квадратные метры –
+ он платит за уникальные характеристики дома – инфраструктуру, удобный
+ и комфортный двор, дизайн подъездов и холлов, вид из окон. Нужно
+ показать ему все преимущества жилого комплекса на любой стадии
+ строительства еще в офисе продаж.
+
+
+
+
+ Как это
+
+
+
+
+
+
+
+
+ WebGL — это то, что «оживляет» веб-ресурс, позволяет обойтись без
+ флеш-плеера, так как она выполняется видеокартой и является «частью»
+ элемента «canvas» разметки HTML.
+
+
+
+
+ Как это
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {" "}
+
+ {" "}
+ {" "}
+
+ {" "}
+
+ {" "}
+ {" "}
+
+ {" "}
+ {" "}
+
+ {" "}
+ {" "}
+ {" "}
+
+ );
+};
+
+export default ApplicationMessageIcon;
diff --git a/client/src/icons/ArrowIcon.tsx b/client/src/icons/ArrowIcon.tsx
new file mode 100644
index 0000000..b1e095c
--- /dev/null
+++ b/client/src/icons/ArrowIcon.tsx
@@ -0,0 +1,20 @@
+const ArrowIcon = () => {
+ return (
+
+
+ );
+};
+
+export default ArrowIcon;
diff --git a/client/src/icons/CrossCircleIcon.tsx b/client/src/icons/CrossCircleIcon.tsx
new file mode 100644
index 0000000..a909f08
--- /dev/null
+++ b/client/src/icons/CrossCircleIcon.tsx
@@ -0,0 +1,36 @@
+type CrossCircleIconProps = {
+ isOpen: boolean;
+};
+
+const CrossCircleIcon = ({ isOpen }: CrossCircleIconProps) => {
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default CrossCircleIcon;
diff --git a/client/src/icons/FacebookIcon.tsx b/client/src/icons/FacebookIcon.tsx
new file mode 100644
index 0000000..51379ef
--- /dev/null
+++ b/client/src/icons/FacebookIcon.tsx
@@ -0,0 +1,22 @@
+const FacebookIcon = () => {
+ return (
+
+
+ );
+};
+
+export default FacebookIcon;
diff --git a/client/src/icons/InstagramIcon.tsx b/client/src/icons/InstagramIcon.tsx
new file mode 100644
index 0000000..9741c90
--- /dev/null
+++ b/client/src/icons/InstagramIcon.tsx
@@ -0,0 +1,22 @@
+const InstagramIcon = () => {
+ return (
+
+
+ );
+};
+
+export default InstagramIcon;
diff --git a/client/src/icons/LogoIcon.tsx b/client/src/icons/LogoIcon.tsx
new file mode 100644
index 0000000..b529be8
--- /dev/null
+++ b/client/src/icons/LogoIcon.tsx
@@ -0,0 +1,67 @@
+type LogoIconProps = {
+ width?: string;
+ height?: string;
+};
+
+const LogoIcon = ({ width = "50", height = "80" }: LogoIconProps) => {
+ return (
+
+ {" "}
+
+ {" "}
+
+ {" "}
+
+ {" "}
+ {" "}
+ {" "}
+
+ );
+};
+
+export default LogoIcon;
diff --git a/client/src/icons/LongArrowIcon.tsx b/client/src/icons/LongArrowIcon.tsx
new file mode 100644
index 0000000..62b73f9
--- /dev/null
+++ b/client/src/icons/LongArrowIcon.tsx
@@ -0,0 +1,18 @@
+const LongArrowIcon = () => {
+ return (
+
+
+ );
+};
+
+export default LongArrowIcon;
diff --git a/client/src/icons/ScrollToTopIcon.tsx b/client/src/icons/ScrollToTopIcon.tsx
new file mode 100644
index 0000000..1c681b2
--- /dev/null
+++ b/client/src/icons/ScrollToTopIcon.tsx
@@ -0,0 +1,31 @@
+const ScrollToTopIcon = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default ScrollToTopIcon;
diff --git a/client/src/icons/ShadowIcon.tsx b/client/src/icons/ShadowIcon.tsx
new file mode 100644
index 0000000..c5faabb
--- /dev/null
+++ b/client/src/icons/ShadowIcon.tsx
@@ -0,0 +1,42 @@
+const ShadowIcon = () => {
+ return (
+
+ {" "}
+
+ {" "}
+ {" "}
+
+ {" "}
+
+ {" "}
+ {" "}
+ {" "}
+
+ );
+};
+
+export default ShadowIcon;
diff --git a/client/src/icons/TechnologyCategoryIcon.tsx b/client/src/icons/TechnologyCategoryIcon.tsx
new file mode 100644
index 0000000..7481a3a
--- /dev/null
+++ b/client/src/icons/TechnologyCategoryIcon.tsx
@@ -0,0 +1,21 @@
+type TechnologyCategoryIconProps = {
+ title: string;
+ className?: string;
+};
+
+const TechnologyCategoryIcon = ({
+ title,
+ className,
+}: TechnologyCategoryIconProps) => {
+ return (
+
+ {title}
+
+ );
+};
+
+export default TechnologyCategoryIcon;
diff --git a/client/src/icons/VkIcon.tsx b/client/src/icons/VkIcon.tsx
new file mode 100644
index 0000000..9ccd70d
--- /dev/null
+++ b/client/src/icons/VkIcon.tsx
@@ -0,0 +1,22 @@
+const VkIcon = () => {
+ return (
+
+
+ );
+};
+
+export default VkIcon;
diff --git a/client/src/icons/YoutubeIcon.tsx b/client/src/icons/YoutubeIcon.tsx
new file mode 100644
index 0000000..8eaee5a
--- /dev/null
+++ b/client/src/icons/YoutubeIcon.tsx
@@ -0,0 +1,22 @@
+const YoutubeIcon = () => {
+ return (
+
+
+ );
+};
+
+export default YoutubeIcon;
diff --git a/client/src/index.css b/client/src/index.css
new file mode 100644
index 0000000..700db6d
--- /dev/null
+++ b/client/src/index.css
@@ -0,0 +1,86 @@
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
+@import url("https://gistcdn.githack.com/mfd/09b70eb47474836f25a21660282ce0fd/raw/e06a670afcb2b861ed2ac4a1ef752d062ef6b46b/Gilroy.css");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+ .font-title {
+ font-family: "Gilroy", sans-serif;
+ }
+ .right-arrow,
+ .left-arrow {
+ cursor: pointer;
+ display: inline-block;
+ font-family: Arial, Helvetica, sans-serif;
+ font-weight: bold;
+ padding: 10px 15px 10px 10px;
+ position: relative;
+ text-decoration: none;
+ }
+
+ .right-arrow:before,
+ .right-arrow:after {
+ border-right: 3px solid white;
+ border-radius: 999px;
+ content: "";
+ display: block;
+ height: 31px;
+ margin-top: -22px;
+ position: absolute;
+ -moz-transform: rotate(135deg);
+ -o-transform: rotate(135deg);
+ -webkit-transform: rotate(135deg);
+ transform: rotate(135deg);
+ right: 10px;
+ top: 50%;
+ width: 0;
+ }
+
+ .left-arrow:before,
+ .left-arrow:after {
+ border-right: 3px solid white;
+ border-radius: 999px;
+ content: "";
+ display: block;
+ height: 31px;
+ margin-top: -22px;
+ position: absolute;
+ -moz-transform: rotate(-135deg);
+ -o-transform: rotate(-135deg);
+ -webkit-transform: rotate(-135deg);
+ transform: rotate(-135deg);
+ right: 10px;
+ top: 50%;
+ width: 0;
+ }
+
+ .right-arrow:after {
+ margin-top: -1px;
+ -moz-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+ }
+
+ .left-arrow:after {
+ margin-top: -1px;
+ -moz-transform: rotate(-45deg);
+ -o-transform: rotate(-45deg);
+ -webkit-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+ }
+}
+
+.animate-ping-3s {
+ @apply animate-ping;
+ animation-duration: 3s;
+}
+
+body {
+ /* font-family: "Inter", sans-serif; */
+ font-family: "Gilroy", sans-serif;
+ background: #1e1530;
+}
diff --git a/client/src/main.tsx b/client/src/main.tsx
new file mode 100644
index 0000000..c1baa1a
--- /dev/null
+++ b/client/src/main.tsx
@@ -0,0 +1,32 @@
+import ReactDOM from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import Wrapper from "./components/Wrapper.tsx";
+import MainPage from "./pages/MainPage/MainPage.tsx";
+import TechnologyPage from "./pages/TechnologyPage/TechnologyPage.tsx";
+import DirectionPage from "./pages/DirectionsPage/DirectionsPage.tsx";
+import "./index.css";
+
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element:
+
+
+ );
+};
+
+export default DirectionPage;
diff --git a/client/src/pages/MainPage/MainPage.tsx b/client/src/pages/MainPage/MainPage.tsx
new file mode 100644
index 0000000..74d6b7d
--- /dev/null
+++ b/client/src/pages/MainPage/MainPage.tsx
@@ -0,0 +1,19 @@
+import MainPageSlider from "../../components/MainPage/Slider";
+import Services from "../../components/MainPage/Services";
+import LastProjects from "../../components/MainPage/LastProjects";
+import AboutUs from "../../components/MainPage/AboutUs";
+import Feedback from "../../components/MainPage/OftenQuestion";
+
+const MainPage = () => {
+ return (
+
+ );
+};
+
+export default MainPage;
diff --git a/client/src/pages/TechnologyPage/TechnologyPage.tsx b/client/src/pages/TechnologyPage/TechnologyPage.tsx
new file mode 100644
index 0000000..a830f86
--- /dev/null
+++ b/client/src/pages/TechnologyPage/TechnologyPage.tsx
@@ -0,0 +1,21 @@
+import SubmitApplication from "../../components/SubmitApplication";
+import HeaderTitle from "../../components/HeaderTitle";
+import AccordionsContainer from "../../components/TechnologyPage/AccordionContainer";
+
+const TechnologyPage = () => {
+ return (
+ <>
+
+
+ );
+};
+
+export default TechnologyPage;
diff --git a/client/src/store/store.ts b/client/src/store/store.ts
new file mode 100644
index 0000000..1807085
--- /dev/null
+++ b/client/src/store/store.ts
@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+interface StoreType {
+ modal: React.ReactNode | null;
+ setModal: (modal: React.ReactNode | null) => void;
+}
+
+const useStore = create((set) => ({
+ modal: null,
+ setModal: (modal) => set(() => ({ modal: modal })),
+}));
+
+export default useStore;
\ No newline at end of file
diff --git a/client/src/types.ts b/client/src/types.ts
new file mode 100644
index 0000000..bb5f2c7
--- /dev/null
+++ b/client/src/types.ts
@@ -0,0 +1,21 @@
+type AccordionType = {
+ title: string;
+ description: string;
+ content: JSX.Element;
+ icon: string;
+ id: number;
+}
+
+type AdvantageType = {
+ title: string;
+ description: string;
+}
+
+type DirectionImageType = {
+ title: string;
+ desctiption: string;
+ id: number;
+ image: string;
+}
+
+export type {AccordionType, AdvantageType, DirectionImageType}
\ No newline at end of file
diff --git a/client/src/vite-env.d.ts b/client/src/vite-env.d.ts
new file mode 100644
index 0000000..9bb54f9
--- /dev/null
+++ b/client/src/vite-env.d.ts
@@ -0,0 +1,10 @@
+/// 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+ {/* 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+