first commit

2022-08-25 11:55:26 +05:00
commit 73b082d874
77 changed files with 36497 additions and 0 deletions
@@ -0,0 +1,3 @@
+.App {    
+    
+}
@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
@@ -0,0 +1,47 @@
+import "./App.css";
+import { Header } from "./components/header/header";
+import React, { useState } from "react";
+import moment, { Moment } from "moment";
+import "moment/locale/ru";
+import { Mapblock } from "./components/mapblock/mapblock";
+import { SliderComponent } from "./components/sliderComponent/sliderComponent";
+import { Calendar } from "./components/calendar/calendar";
+import { Multiplayer } from "./components/multiplayer/multiplayer";
+import { Devices } from "./components/devices/devices";
+import { Analytics } from "./components/analytics/analytics";
+export type TObjct = {
+  calendar: boolean;
+  timePicker: boolean;
+  form: boolean;
+};
+function App() {
+  const [time, setTime] = useState(moment());
+  const [next, setNext] = useState({
+    calendar: true,
+    timePicker: false,
+    form: false,
+  });
+
+  function updateTime(value: Moment) {
+    setTime(value);
+  }
+  function navigationHandler(value: TObjct) {
+    setNext(value);
+  }
+
+  console.log(time);
+
+  return (
+    <div className="App">
+      <Header />
+      <Mapblock />
+      <SliderComponent />
+      <Calendar setOpen={navigationHandler} open={next} time={time} onUpdate={updateTime}></Calendar>
+      <Multiplayer />
+      <Devices />
+      <Analytics />
+    </div>
+  );
+}
+
+export default App;
@@ -0,0 +1,5 @@
+.analytics__container {
+  background: #141414;
+  border-radius: 32px;
+  padding: 120px 32px 80px;
+}
@@ -0,0 +1,24 @@
+import "../../styles/styles.css";
+import "../multiplayer/multiplayer.css";
+import "./analytics.css"
+
+export const Analytics: React.FC = ({}) => {
+  return (
+    <div className="analytics__container">
+      <div className="main-block__container">
+        <div>
+          <p className="main-block__title main-block__title_small">
+            Graff.estate stream{" "}
+          </p>
+          <p className="main-block__title_gardient main-block__title_gardient_small">
+            передать на устройство пользователя впечатляющий уровень графики.{" "}
+          </p>
+        </div>
+        <p className="main-block__caption multiplayer__caption">
+          Для работы с интерактивной презентацией покупателю достаточно
+          смартфона и мобильного интернета.
+        </p>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 12H1M1 12L8.2 5M1 12L8.2 19" stroke="#EBEBEB" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 12H23M23 12L15.8 5M23 12L15.8 19" stroke="#EBEBEB" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="4" cy="4" r="4" fill="#EBEBEB"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="4" cy="4" r="4" fill="#567ECE"/>
+</svg>
@@ -0,0 +1,232 @@
+.title_small {
+  font-size: 40px;
+}
+.button__arrow_back {
+  cursor: pointer;
+}
+.point {
+  margin-right: 8px;
+}
+
+.caption {
+  font-size: 14px;
+}
+.appointment__block {
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+  margin-top: 16px;
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 130%;
+
+}
+.calendar__container {
+  padding-top: 160px;
+  margin-bottom: 160px;
+}
+
+.appointment__caption_active {
+  color: #567ECE;
+
+}
+
+.line {
+  width: 100%;
+  background-color: #454545;
+  height: 1px;
+  margin-top: 16px;
+  margin-bottom: 21px;
+}
+
+.calendar {
+  display: flex;
+  flex-direction: column;
+
+  color: #ebebeb;
+  box-sizing: border-box;
+  width: 385px;
+  background: #141414;
+  border-radius: 16px;
+  padding: 24px 32px;
+  box-sizing: border-box;
+  opacity: 0.5;
+  pointer-events: none;
+  transition: opacity ease-in 0.5s;
+}
+
+.calendar_active {
+  display: flex;
+  flex-direction: column;
+  color: #ebebeb;
+  box-sizing: border-box;
+  width: 385px;
+  background: #141414;
+  border-radius: 16px;
+  padding: 24px 32px;
+  box-sizing: border-box;
+  opacity: 1;
+  transition: opacity ease-in 0.5s;
+}
+
+@media screen and (max-width: 1152px) {
+  .calendar {
+    width: 100%;
+  }
+}
+
+.caption__container {
+  display: flex;
+  align-items: center;
+  gap: 17px;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 25px;
+  margin-bottom: 80px;
+}
+
+.calendar__header {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-content: center;
+}
+
+.calendar__caption {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 140%;
+  /* or 25px */
+}
+
+@media screen and (max-width: 480px) {
+  .calendar__caption {
+    font-size: 16px;
+  }
+}
+
+.date__container {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 27px;
+  align-items: center;
+}
+
+.date {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 110%;
+  /* or 14px */
+}
+
+.date_time {
+  margin-bottom: 24px;
+}
+
+@media screen and (max-width: 480px) {
+  .date {
+    font-size: 16px;
+  }
+}
+
+.calendar__table {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: 4px;
+  justify-content: center;
+  border-radius: 4px;
+
+  background-color: transparent;
+}
+
+.calendar__table:nth-child(even) {
+  background: rgba(86, 126, 206, 0.1);
+}
+
+@media screen and (max-width: 1152px) {
+  .calendar__table {
+    grid-template-columns: repeat(7, 1fr);
+  }
+}
+
+@media screen and (max-width: 832px) {
+  .calendar__table {
+    grid-template-columns: repeat(7, 1fr);
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .calendar__table {
+    grid-template-columns: repeat(7, 1fr);
+  }
+}
+
+.calendar__cell {
+  font-family: "Gilroy";
+  font-style: normal;
+  padding: 3px 5px;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 130%;
+  cursor: pointer;
+  height: 30px;
+  transition: all 0.3s ease;
+  /* identical to box height, or 29px */
+}
+
+.calendar__cell_none {
+  visibility: hidden;
+}
+
+@media screen and (max-width: 480px) {
+  .calendar__cell {
+    font-size: 14px;
+    height: 40px;
+  }
+}
+
+.calendar__cell_active {
+  color: #567ece;
+}
+
+.calendar__cell_nopoint {
+  pointer-events: none;
+}
+
+.weekday__cell {
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 130%;
+  height: 30px;
+  color: #ebebeb;
+  /* identical to box height, or 29px */
+}
+
+@media screen and (max-width: 480px) {
+  .weekday__cell {
+    font-size: 14px;
+    height: 40px;
+  }
+}
+
+.calendar_none {
+  display: none;
+}
@@ -0,0 +1,187 @@
+import React from "react";
+import "../sliderComponent/sliderComponent.css";
+import "../calendar/calendar.css";
+import moment, { Moment } from "moment";
+import "moment/locale/ru";
+import { useEffect, useState } from "react";
+import left from "./Arrow_Left.svg";
+import right from "./Arrow_Right.svg";
+import point0 from "./Ellipse0.svg";
+import point1 from "./Ellipse1.svg";
+import Timepicker from "../timepicker/timepicker";
+import Form from "../form/form";
+import { TObjct } from "../../App";
+import "../../styles/styles.css";
+
+export type TProps = {
+  time: Moment;
+  onUpdate: (value: Moment) => void;
+  setOpen: (value: TObjct) => void;
+  open: TObjct;
+};
+
+export const Calendar: React.FC<TProps> = ({
+  time,
+  onUpdate,
+  setOpen,
+  open,
+}) => {
+  const [calendar, setCalendar] = useState<any[]>([]);
+  const [value, setValue] = useState(time);
+  const currDate = moment();
+  const startDay = value.clone().startOf("month").startOf("week");
+  const endDay = value.clone().endOf("month").endOf("week");
+  const weekDays = ["пн", "вт", "ср", "чт", "пт", "сб", "вс"];
+
+  useEffect(() => {
+    const day = startDay.clone().subtract("1", "day");
+    const a: any = [];
+    while (day.isBefore(endDay, "day")) {
+      a.push(
+        Array(7)
+          .fill(0)
+          .map(() => day.add(1, "day").clone())
+      );
+    }
+    setCalendar(a);
+  }, [value]);
+  console.log(value);
+
+  function hide(day: object) {
+    if (value.isSame(day, "month")) {
+      if (currDate.isSame(day, "day")) {
+        const cellClass = "calendar__cell_active calendar__cell";
+        return cellClass;
+      }
+      return "calendar__cell";
+    } else {
+      return "calendar__cell_none";
+    }
+  }
+
+  function prevMonth() {
+    return value.clone().subtract(1, "month");
+  }
+
+  function nextMonth() {
+    return value.clone().add(1, "month").startOf("month");
+  }
+
+  function thisMonth() {
+    return value.isSame(new Date(), "month");
+  }
+
+  function updateDay(day: Moment) {
+    const temp = currDate.clone().subtract(1, "day");
+    if (day.isBefore(temp)) {
+      return;
+    } else {
+      onUpdate(day);
+      setOpen({
+        calendar: false,
+        timePicker: true,
+        form: false,
+      });
+    }
+  }
+
+  return (
+    <div className="calendar__container">
+      <div className="main-block__container">
+        <div>
+          <p className="main-block__title main-block__title_small">
+            Graff.estate stream{" "}
+          </p>
+          <p className="main-block__title_gardient main-block__title_gardient_small">
+            легко встраивается в существующую цепочку продаж.
+          </p>
+        </div>
+        <p className=" main-block__caption_color">
+          Проведение виртуальных экскурсий сотрудниками офиса продаж.
+        </p>
+        <p className="main-block__caption">
+          Покупателю доступна возможность самостоятельно записаться на просмотр
+          в удобное для него время, а менеджер отдела продаж удаленно поможет
+          выбрать планировку и забронировать квартиру.
+        </p>
+      </div>
+      <div className="wrapper">
+        <div className={open.calendar ? "calendar_active" : "calendar"}>
+          <div className="calendar__header">
+            <span className="calendar__caption calendar__caption_calendar">
+              Выбор даты
+            </span>
+            <div className="line"></div>
+          </div>
+          <div className="form__block">
+            <div className="date__container">
+              <img
+                alt="back"
+                src={left}
+                className="button__arrow"
+                onClick={() => !thisMonth() && setValue(prevMonth())}
+              ></img>
+              <span className="date">
+                {value.format("MMMM")}, {value.format("YYYY")}
+              </span>
+              <img
+                alt="next"
+                src={right}
+                className="button__arrow"
+                onClick={() => setValue(nextMonth())}
+              ></img>
+            </div>
+            <div className="calendar__table">
+              {weekDays.map((day, i) => (
+                <div key={i} className="weekday__cell">
+                  {day}
+                </div>
+              ))}
+            </div>
+            {calendar.map((week, i) => (
+              <div key={i} className="calendar__table">
+                {week.map((day: any, i: number) => (
+                  <div
+                    key={i}
+                    onClick={() => updateDay(day)}
+                    className={hide(day)}
+                  >
+                    {day.format("D")}
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+          <div className="appointment__block">
+            <div>
+              <img className="point" src={point1}></img>
+              <span className="appointment__caption_active">Запись есть</span>
+            </div>
+            <div>
+              <img className="point" src={point0}></img>
+              <span className="appointment__caption" >Записи нет</span>
+            </div>
+          </div>
+        </div>
+        <Timepicker
+          open={open}
+          setOpen={setOpen}
+          onUpdate={onUpdate}
+          time={time}
+        ></Timepicker>
+        <Form
+          open={open}
+          setOpen={setOpen}
+          onUpdate={onUpdate}
+          time={time}
+        ></Form>
+      </div>
+      <div className="main-block__subblock-container">
+        <div className="main-block_subblock">
+          Процесс записи может быть встроен на сайт жилого комплекса, на который
+          была настроена реклама.
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,55 @@
+.devices__contaner {
+    margin-bottom: 160px;
+}
+
+.card__container {
+  display: flex;
+  gap: 30px;
+  margin-bottom: 80px;
+}
+
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 32px;
+  background: #141414;
+  border-radius: 16px;
+  height: 388px;
+  width: 380px;
+}
+
+.card__name {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 100%;
+  /* identical to box height, or 24px */
+
+  /* Landing/White */
+
+  color: #ebebeb;
+
+  opacity: 0.8;
+}
+
+.card__image {
+  width: 292px;
+  height: 271px;
+}
+
+.card__image_type {
+  position: relative;
+  width: 211px;
+  top: 72px;
+  left: -17px;
+
+}
+
+.card__image_type1 {
+  position: absolute;
+  top: 111px;
+  right: 35px;
+  width: 192px;
+}
@@ -0,0 +1,52 @@
+import "../../styles/styles.css";
+import "./devices.css";
+import "../multiplayer/multiplayer.css";
+import touchscreen from "./image.png";
+import imac from "./image1.png";
+import iphone from "./iPhone.png";
+import ipad from "./iPad.png";
+
+export const Devices: React.FC = ({}) => {
+  return (
+    <div className="devices__contaner">
+      <div className="main-block__container">
+        <div>
+          <p className="main-block__title main-block__title_small">
+            Graff.estate stream{" "}
+          </p>
+          <p className="main-block__title_gardient main-block__title_gardient_small">
+            доступен на любых устройствах.{" "}
+          </p>
+        </div>
+        <p className="main-block__caption multiplayer__caption">
+          Приложение легко адаптируется под экран любого размера и одинаково
+          хорошо выглядит на мобильном телефоне или на большом сенсорном экране
+          в отделе продаж застройщика.{" "}
+        </p>
+      </div>
+      <div className="card__container">
+        <div className="card">
+          <p className="card__name">Interactive display</p>
+          <img src={touchscreen} className="card__image"></img>
+        </div>
+        <div className="card">
+          <p className="card__name">Desktop</p>
+          <img src={imac} className="card__image"></img>
+        </div>
+        <div className="card">
+          <p className="card__name">Mobile</p>
+          <img src={iphone} className="card__image_type"></img>
+          <img src={ipad} className="card__image_type1"></img>
+        </div>
+      </div>
+      <div className="main-block__subblock-container">
+        <div className="main-block_subblock">
+          <button className="main-block__button">
+            Демоверсия
+            <div className="main-block__icon"></div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,239 @@
+.form__container {
+  width: 385px;
+  color: #ebebeb;
+  display: grid;
+  margin: 0 auto;
+  grid-template-rows: auto 1fr;
+  padding: 24px 32px;
+  box-sizing: border-box;
+  background: #141414;
+  border-radius: 16px;
+  opacity: 0.5;
+  pointer-events: none;
+  transition:  opacity ease-in 0.5s;
+
+}
+
+.form__container_active {
+  width: 385px;
+  color: #ebebeb;
+  display: grid;
+  margin: 0 auto;
+  grid-template-rows: auto 1fr;
+  padding: 24px 32px;
+  box-sizing: border-box;
+  background: #141414;
+  border-radius: 16px;
+  opacity: 1;
+  transition:  opacity ease-in 0.5s;
+
+}
+
+.form__block {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+}
+
+@media screen and (max-width: 1152px) {
+  .form__block {
+    padding: 0 20px 20px;
+  }
+}
+
+@media screen and (max-width: 832px) {
+  .form__block {
+    display: block;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .form__block {
+    display: flex;
+  }
+}
+
+@media screen and (max-width: 1152px) {
+  .form__container {
+    width: 100%;
+  }
+}
+
+.form__container_none {
+  display: none;
+}
+
+.form {
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  outline: none;
+  border-color: none;
+}
+
+.form__input {
+  padding: 16px 16px 12px;
+  gap: 8px;
+  color: #ebebeb;
+  width: 321px;
+  height: 44px;
+  border: none;
+  background: rgba(86, 126, 206, 0.1);
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+.button__submit {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 125%;
+  background: #567ece;
+  border-radius: 8px;
+  color: #EBEBEB;
+  padding: 2px 0px 0px;
+  cursor: pointer;
+  height: 48px;
+  width: 100%;
+}
+
+.form__input_error:focus {
+  height: 60px;
+  background: #e9e9e9;
+  outline: none;
+  border: none;
+  width: 100%;
+  padding: 20px 20px 19px;
+  box-sizing: border-box;
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 17px;
+  line-height: 21px;
+  border: 1px solid #eb5757;
+  color: #eb5757;
+}
+
+@media screen and (max-width: 832px) {
+  .form__input :last-of-type {
+    margin-bottom: 80px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .confirm {
+    padding: 15px 20px 14px;
+  }
+}
+
+.form__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+@media screen and (max-width: 1152px) {
+  .form__header {
+    margin: 30px 12px 43px;
+  }
+}
+
+@media screen and (max-width: 832px) {
+  .form__header {
+    margin: 40px 12px 43px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .form__header {
+    margin: 20px 10px 19px;
+  }
+}
+
+.confirm {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 150px 40px 0;
+  height: 100%;
+}
+
+@media screen and (max-width: 1152px) {
+  .confirm {
+    padding: 140px 20px 0;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .confirm {
+    padding: 80px 10px 20px;
+  }
+}
+
+.confirm__none {
+  display: none;
+}
+
+.confirm__title {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 40px;
+  line-height: 110%;
+  color: #333333;
+  margin: 0;
+}
+
+.confirm__caption {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 130%;
+  margin: 25px 0 40px;
+  color: #333333;
+}
+
+@media screen and (max-width: 480px) {
+  .confirm__caption {
+    font-size: 16px;
+  }
+}
+
+.confirm__button {
+  width: 380px;
+  height: 59px;
+  color: #ffffff;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  padding: 0;
+  background: #333333;
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 17px;
+  line-height: 21px;
+}
+
+@media screen and (max-width: 480px) {
+  .confirm__button {
+    width: 100%;
+  }
+}
+
+.warning {
+  margin-left: 20px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  color: #eb5757;
+  height: 30px;
+  visibility: hidden;
+}
+
+.warning_on {
+  visibility: visible;
+}
@@ -0,0 +1,57 @@
+import left from "../calendar/Arrow_Left.svg";
+import React, { useEffect, useState } from "react";
+import moment from "moment";
+import "./form.css";
+import { TProps } from "../calendar/calendar";
+
+export const Form: React.FC<TProps> = ({ time, open, setOpen }) => {
+  function goBack() {
+    setOpen({
+      calendar: false,
+      timePicker: true,
+      form: false,
+    });
+  }
+
+  return (
+    <div className={open.form ? "form__container_active" : "form__container"}>
+      <div className="timepicker__header">
+        <div className="caption__container">
+          <img onClick={() => goBack()} className="button__arrow_back" alt="left" src={left}></img>
+          <span className="calendar__caption">Выбор времени</span>
+        </div>
+        <div className="line line_time"></div>
+        <div className="date">{time.format("DD MMM, LT")}</div>
+      </div>
+      <div className="form__block">
+        <div>
+          <form className="form">
+            <input
+              name="tel"
+              className="form__input"
+              type="text"
+              placeholder="Номер телефона"
+            ></input>
+            <input
+              name="email"
+              className="form__input"
+              type="text"
+              placeholder="E-mail"
+            ></input>
+            <input
+              name="name"
+              className="form__input"
+              type="text"
+              placeholder="Ваше имя"
+            ></input>
+          </form>
+        </div>
+        <button type="submit" className="button__submit">
+          Запланировать
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Form;
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.0001 12.6666L10.6667 8L6.0001 3.33334" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,55 @@
+.header-container {
+    display: flex;
+    padding: 35px 40px;
+    box-sizing: border-box;
+    color: #FFFFFF;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.header-logo {
+    width: 31px;
+    height: 50px;
+}
+
+.header-buttons {
+    display: flex;
+    gap: 40px;
+}
+
+.header-button {
+    background-color: transparent;
+    border: none;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 125%;
+    color: #FFFFFF;  
+    cursor: pointer;  
+}
+
+.header-lang-button {
+    display: flex;
+    align-items: center;
+    padding: 6px 12px;
+    justify-content: space-between;
+    box-sizing: border-box;
+    font-weight: 400;
+    font-size: 11px;
+    line-height: 13px;
+    color: #EBEBEB;
+    background-color: transparent;
+    border-radius: 50px;
+    border: 2px solid #EBEBEB;
+}
+
+.header-lang-button-text {
+    display: flex;
+    align-self: center;
+}
+
+.header-lang-button-icon {
+    width: 16px;
+    height: 16px;
+    background: url('chevronIcon.svg') 50% 50% no-repeat;
+    background-size: 100% 100%;
+}
@@ -0,0 +1,17 @@
+import React from "react";
+import logo from './logoIcon.svg';
+import './header.css';
+
+export const Header:React.FC = React.memo(() => {
+    return <div className="header-container">
+        <img className="header-logo" alt="company-logo" src={logo} />
+        <div className="header-buttons">
+            <button className="header-button">Контакты</button>
+            <button className="header-button">О компании</button>
+            <button className="header-lang-button">
+                <span className="header-lang-button-text">RU</span>
+                <span className="header-lang-button-icon"></span>
+            </button>
+        </div>
+    </div>
+})
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6L18 12L12 18" stroke="#EBEBEB" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 6L13 12L7 18" stroke="#EBEBEB" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,77 @@
+.mapblock__container {
+  color: #ebebeb;
+  background-image: url(./Map.svg);
+  background-repeat: no-repeat;
+  height: 780px;
+  background-position: 300px;
+  margin-bottom: 160px;
+}
+
+.title__container {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  padding-top: 175px;
+}
+
+.title {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 96px;
+  line-height: 80%;
+  margin: 0;
+  color: #ebebeb;
+}
+
+.title__gardient {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 96px;
+  line-height: 80%;
+  margin: 0;
+  background-image: linear-gradient(#d375ff, #798fff);
+  background-size: 100%;
+  background-repeat: repeat;
+  background-color: transparent;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-background-clip: text;
+  -moz-text-fill-color: transparent;
+}
+
+.button__demo {
+  box-sizing: border-box;
+
+  background-color: transparent;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 14px 14px 12px 20px;
+  gap: 4px;
+  border: 1px solid #454545;
+  border-radius: 32px;
+  color: #ebebeb;
+  width: 156px;
+  margin-top: 31px;
+}
+
+.title__caption {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 150%;
+  /* or 21px */
+
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+
+  /* Landing/White */
+
+  color: #ebebeb;
+
+  opacity: 0.8;
+}
@@ -0,0 +1,28 @@
+import React from "react";
+import "./mapblock.css";
+import chevron from "./chevron.svg";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+
+export const Mapblock: React.FC = React.memo(() => {
+  return (
+    <div className="mapblock__container">
+      <div className="title__container">
+        <div>
+          <p className="title">Graff.estate </p>
+          <p className="title__gardient">stream</p>
+        </div>
+        <span className="title__caption">
+          Технология удаленной демонстрации жилого комплекса.
+        </span>
+        <button className="button__demo">
+          Демоверсия
+          <img src={chevron}></img>
+        </button>
+      </div>
+      <div className="swiper__container">
+        
+      </div>
+    </div>
+  );
+});
@@ -0,0 +1,29 @@
+.multiplayer__container {
+  background: #141414;
+  border-radius: 32px;
+  padding: 120px 32px 80px;
+  margin-bottom: 160px;
+}
+
+.caption {
+  margin-top: 40px;
+}
+
+.multiplayer__photo-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+  margin-bottom: 80px;
+}
+
+.multiplayer__image {
+  width: 553px;
+  filter: drop-shadow(0px -2px 8px rgba(128, 128, 128, 0.15))
+    drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.8));
+  border-radius: 16px;
+}
+
+.multiplayer__caption {
+  margin-top: 40px;
+
+}
@@ -0,0 +1,43 @@
+import "../../styles/styles.css";
+import "./multiplayer.css";
+import photo from "./Photo.png";
+import photo1 from "./Photo1.png";
+import photo2 from "./Photo2.png";
+import photo3 from "./Photo3.png";
+
+export const Multiplayer: React.FC = ({}) => {
+  return (
+    <div className="multiplayer__container">
+      <div className="main-block__container">
+        <div>
+          <p className="main-block__title main-block__title_small">
+            Graff.estate stream
+          </p>
+          <p className="main-block__title_gardient main-block__title_gardient_small">
+            для совместной работы.
+          </p>
+        </div>
+        <p className="main-block__caption multiplayer__caption">
+          Покупатель может вместе с близкими людьми осмотреть жилой комплекс.
+          Это совершенно новый опыт в процессе выбора квартиры.
+        </p>
+      </div>
+      <div className="multiplayer__photo-container">
+        <img src={photo} className="multiplayer__image" />
+        <img src={photo1} className="multiplayer__image" />
+        <img src={photo2} className="multiplayer__image" />
+        <img src={photo3} className="multiplayer__image" />
+      </div>
+      <div className="main-block__subblock-container">
+        <div className="main-block_subblock">
+          Осмотр жилого комплекса доступен в любой <br></br> момент, без
+          необходимости предварительной <br></br> записи на просмотр.
+          <button className="main-block__button">
+            Демоверсия
+            <div className="main-block__icon"></div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,83 @@
+.slider-container {
+  width: 1200px;
+  background: #141414;
+  border-radius: 32px;
+  padding-top: 120px;
+  padding-bottom: 80px;
+}
+
+.slider__block {
+  background: #141414;
+  border-radius: 32px;
+  margin: 0 auto;
+  padding-top: 120px;
+  padding-bottom: 85px;
+}
+
+.text_container {
+  width: 416px;
+  margin: 0 auto 80px;
+  flex-direction: column;
+  justify-content: center;
+  gap: 20px;
+}
+
+.slider__caption {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 140%;
+  /* or 25px */
+
+  /* Landing/White */
+  margin: 0;
+  color: #ebebeb;
+}
+
+.slider__caption_color {
+  margin-top: 40px;
+  margin-bottom: 20px;
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 150%;
+  /* or 21px */
+  color: #ebebeb;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: #d375ff;
+}
+
+.slider__gardient {
+  width: 358px;
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 64px;
+  line-height: 100%;
+
+  margin: 0;
+  background-image: linear-gradient(#d375ff, #798fff);
+  background-size: 100%;
+  background-repeat: repeat;
+  background-color: transparent;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-background-clip: text;
+  -moz-text-fill-color: transparent;
+}
+
+.slider__title {
+  width: 358px;
+
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 64px;
+  line-height: 100%;
+  color: #ebebeb;
+
+  margin: 0;
+}
@@ -0,0 +1,37 @@
+import React from "react";
+import "./sliderComponent.css";
+import "../../styles/styles.css"
+import { Swiper, SwiperSlide } from "swiper/react";
+import SwiperCentred from "../swiper/swiper";
+
+export const SliderComponent: React.FC = React.memo(() => {
+  return (
+    <div className="slider-container">
+      <div className="slider">
+        <div className="main-block__container">
+          <div>
+            <p className="main-block__title">Graff.estate </p>
+            <p className="main-block__title_gardient">stream</p>
+          </div>
+          <p className=" main-block__caption_color">
+            бескомпромиссный уровень графики и полное погружение покупателя в
+            процесс выбора квартиры.
+          </p>
+          <p className="main-block__caption">
+            Покажем все преимущества вашего жилого комплекса клиенту из любого
+            конца мира. Местоположение и устройство значения не имеют. Нужен
+            только интернет.
+          </p>
+        </div>
+        <SwiperCentred
+          slidesPerView={""}
+          centeredSlides={false}
+          spaceBetween={0}
+          modules={[]}
+          className={""}
+          children={undefined}
+        ></SwiperCentred>
+      </div>
+    </div>
+  );
+});
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 12H1M1 12L8.2 5M1 12L8.2 19" stroke="#EBEBEB" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 12H23M23 12L15.8 5M23 12L15.8 19" stroke="#EBEBEB" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,88 @@
+.image__slider {
+  width: 100%;
+  height: 428px;
+  object-fit: cover;
+  opacity: 0.5;
+  border-radius: 16px;
+}
+
+.image__slider_active {
+  width: 100%;
+  height: 428px;
+  object-fit: cover;
+  opacity: 1;
+  border-radius: 16px;
+}
+
+.button__container {
+  margin-top: 45px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 340px;
+}
+
+.slider__info {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.swiper__caption {
+  margin: 0;
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 150%;
+  /* identical to box height, or 21px */
+
+  letter-spacing: 0.02em;
+
+  /* Landing/White */
+
+  color: #ebebeb;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  gap: 18px;
+  align-items: center;
+}
+
+.button {
+  width: 22px;
+  height: 14px;
+  cursor: pointer;
+}
+
+.container1 {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 150%;
+  /* identical to box height, or 21px */
+
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+
+  /* Landing/White */
+
+  color: #ebebeb;
+
+  display: flex;
+  color: #ebebeb !important;
+}
+
+.swiper__caption {
+  margin: 0;
+  color: #888888;
+}
+
+.pagination__container {
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 16px;
+}
@@ -0,0 +1,102 @@
+import React, { useRef, useState } from "react";
+// Import Swiper React components
+import { Swiper, SwiperSlide, useSwiperSlide } from "swiper/react";
+
+// Import Swiper styles
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+
+// import required modules
+import { Pagination, Navigation } from "swiper";
+
+import img from "./images/Architecture1.png";
+import img1 from "./images/Floor1.png";
+import img2 from "./images/Infrastructure1.png";
+import img3 from "./images/Outside.png";
+import "./swiper.css";
+import arrowLeft from "./images/Arrow_Left.svg";
+import arrowRight from "./images/Arrow_Right.svg";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+
+type propsTypes = {
+  slidesPerView: string;
+  centeredSlides: boolean;
+  spaceBetween: number;
+  modules: Array<any>;
+  className: string;
+  children: React.ReactNode; // 👈️ added type for children
+};
+
+export default function SwiperCentred(props: propsTypes) {
+  const swiperSlide = useSwiperSlide();
+
+  return (
+    <>
+      <Swiper
+        centeredSlides={true}
+        spaceBetween={20}
+        initialSlide={1}
+        slidesPerView={2}
+        modules={[Navigation, Pagination]}
+        navigation={{
+          nextEl: ".button_next",
+          prevEl: ".button_prev",
+        }}
+        pagination={{
+          el: ".container1",
+          type: "fraction",
+        }}
+      >
+        <SwiperSlide>
+          {({ isActive }) => (
+            <img
+              className={isActive ? "image__slider_active" : "image__slider"}
+              src={img1}
+            />
+          )}
+        </SwiperSlide>
+        <SwiperSlide>
+          {({ isActive }) => (
+            <img
+              className={isActive ? "image__slider_active" : "image__slider"}
+              src={img}
+            />
+          )}
+        </SwiperSlide>
+        <SwiperSlide>
+          {({ isActive }) => (
+            <img
+              className={isActive ? "image__slider_active" : "image__slider"}
+              src={img2}
+            />
+          )}
+        </SwiperSlide>
+        <SwiperSlide>
+          {({ isActive }) => (
+            <img
+              className={isActive ? "image__slider_active" : "image__slider"}
+              src={img3}
+            />
+          )}
+        </SwiperSlide>
+        <div className="slider__info">
+          <div className="button__container">
+            <div className="container">
+              <img className="button button_prev" src={arrowLeft}></img>
+              <img className="button button_next" src={arrowRight}></img>
+            </div>
+            <div className="pagination__container">
+              <div className="container1">
+                <p className="swiper__caption"></p>
+              </div>
+              <p className="swiper__caption">Архитектура</p>
+            </div>
+          </div>
+        </div>
+      </Swiper>
+    </>
+  );
+}
@@ -0,0 +1,56 @@
+.timepicker__header {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-content: center;
+}
+
+.timepicker__table {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.timepicker__table:last-of-type {
+  margin-bottom: 0;
+} 
+
+.timpicker__cell {
+  font-family: "Gilroy";
+  font-style: normal;
+  padding: 3px 5px;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 130%;
+  cursor: pointer;
+  height: 30px;
+  transition: all 0.3s ease;
+}
+
+@media screen and (max-width: 480px) {
+  .timpicker__cell {
+    font-size: 14px;
+    height: 40px;
+  }
+}
+
+
+
+.line_time {
+  margin-bottom: 24px;
+}
+
+.timpicker__cell {
+  background: rgba(86, 126, 206, 0.1);
+  border-radius: 4px;
+}
+
+.appointment__block_time {
+  margin-top: 21px;
+
+}
@@ -0,0 +1,93 @@
+import left from "../calendar/Arrow_Left.svg";
+import { useEffect, useState } from "react";
+import moment, { Moment } from "moment";
+import "moment/locale/ru";
+import "./timepicker.css";
+import "../calendar/calendar.css";
+import point0 from "../calendar/Ellipse0.svg";
+import point1 from "../calendar/Ellipse1.svg";
+import { TProps } from "../calendar/calendar";
+
+export const Timepicker: React.FC<TProps> = ({
+  time,
+  onUpdate,
+  open,
+  setOpen,
+}) => {
+
+  const [timePicker, settimePicker] = useState<any[]>([]);
+  const startTime = time.clone().hours(8).minutes(0);
+  const endTime = time.clone().hours(19).minutes(0);
+
+  useEffect(() => {
+    const temp = startTime.clone().subtract("30", "minute");
+    const a: any = [];
+    while (temp.isBefore(endTime, "minute")) {
+      a.push(
+        Array(8)
+          .fill(0)
+          .map(() => temp.add(30, "minutes").clone())
+      );
+    }
+    settimePicker(a);
+  }, [time]);
+
+  function updateTime(time: Moment) {
+    onUpdate(time);
+    setOpen({
+      calendar: false,
+      timePicker: false,
+      form: true,
+    });
+  }
+
+  function goBack() {
+    setOpen({
+      calendar: true,
+      timePicker: false,
+      form: false,
+    });
+  }
+
+
+
+  return (
+    <div className={open.timePicker ? "calendar_active" : "calendar"}>
+      <div className="timepicker__header">
+        <div className="caption__container">
+          <img onClick={() => goBack()} className="button__arrow_back" alt="left" src={left}></img>
+          <span className="calendar__caption">Выбор времени</span>
+        </div>
+        <div className="line line_time"></div>
+        <div className="date date_time">{time.format("DD MMMM")}</div>
+      </div>
+      <div className="form__block">
+        {timePicker.map((date, i) => (
+          <div key={i} className="timepicker__table">
+            {date.map((time: any, i: number) => (
+              <div
+                key={i}
+                onClick={() => updateTime(time)}
+                className="timpicker__cell"
+              >
+                {time.format("LT")}
+              </div>
+            ))}
+          </div>
+        ))}
+        <div className="appointment__block appointment__block_time">
+          <div>
+            <img className="point" src={point1}></img>
+            <span className="appointment__caption_active">Запись есть</span>
+          </div>
+          <div>
+            <img className="point" src={point0}></img>
+            <span>Записи нет</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Timepicker;
@@ -0,0 +1,37 @@
+@font-face {
+    font-family: 'Gilory';
+    font-style:  normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("./Gilroy_Regular.woff2") format("woff2"),
+    url("./Gilroy_Regular.woff2") format("woff");
+  }
+  
+  @font-face {
+    font-family: 'Gilory';
+    font-style:  normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url("./Gilroy_Medium.woff2") format("woff2"),
+    url("./Gilroy_Medium.woff") format("woff");
+  }
+  
+  @font-face {
+    font-family: 'Gilory';
+    font-style:  normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url("./Gilroy_SemiBold.woff2") format("woff2"),
+    url("./Gilroy_SemiBold.woff") format("woff");
+  }
+
+  @font-face {
+    font-family: 'Gilory';
+    font-style:  normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url("./Gilroy_Light.woff2") format("woff2"),
+    url("./Gilroy_Light.woff") format("woff");
+  }
+  
+  
@@ -0,0 +1,25 @@
+@import url(./fonts/fonts.css);
+
+body {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 100%;
+  /* identical to box height, or 24px */
+
+  /* Landing/White */
+
+  color: #ebebeb;
+  margin: 0 auto;
+  font-family: -apple-system, BlinkMacSystemFont, "Gilroy", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  width: 1200px;
+  background: #0e0e0e;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.35356 9.35355C5.1583 9.54881 4.84171 9.54882 4.64645 9.35356C4.45119 9.1583 4.45118 8.84171 4.64644 8.64645L5.35356 9.35355ZM9 4.99993L9.35355 4.64637C9.44732 4.74014 9.5 4.86731 9.5 4.99992C9.5 5.13253 9.44732 5.25971 9.35356 5.35348L9 4.99993ZM4.64645 1.35356C4.45119 1.1583 4.45118 0.841714 4.64644 0.64645C4.8417 0.451186 5.15829 0.451183 5.35355 0.646443L4.64645 1.35356ZM1 5.49993C0.723858 5.49993 0.5 5.27607 0.5 4.99993C0.5 4.72378 0.723858 4.49993 1 4.49993V5.49993ZM4.64644 8.64645L8.64644 4.64638L9.35356 5.35348L5.35356 9.35355L4.64644 8.64645ZM8.64645 5.35348L4.64645 1.35356L5.35355 0.646443L9.35355 4.64637L8.64645 5.35348ZM9 5.49993H1V4.49993H9V5.49993Z" fill="white"/>
+</svg>
@@ -0,0 +1,121 @@
+.main-block__container {
+  width: 416px;
+  margin: 0 auto 80px;
+  flex-direction: column;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 80px;
+}
+
+.main-block__subblock-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.main-block_subblock {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  width: 416px;
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 140%;
+  /* or 25px */
+
+  /* Landing/White */
+
+  color: #ebebeb;
+}
+
+.main-block__title {
+  width: 358px;
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 64px;
+  line-height: 100%;
+  color: #ebebeb;
+  margin: 0;
+}
+
+.main-block__title_small {
+  font-size: 40px;
+}
+
+.main-block__title_gardient {
+  width: 358px;
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 64px;
+  line-height: 100%;
+  margin: 0;
+  background-image: linear-gradient(#d375ff, #798fff);
+  background-size: 100%;
+  background-repeat: repeat;
+  background-color: transparent;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.main-block__title_gardient_small {
+  font-size: 40px;
+}
+
+.main-block__caption {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 140%;
+  margin: 0;
+  color: #ebebeb;
+}
+
+.main-block__caption_color {
+  margin-top: 40px;
+  margin-bottom: 20px;
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 150%;
+  color: #ebebeb;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: #d375ff;
+}
+
+.main-block__button {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: center;
+  align-items: center;
+  padding: 14px 14px 12px 20px;
+  gap: 8px;
+
+  width: 156px;
+  height: 40px;
+
+  border: 1px solid #454545;
+  border-radius: 32px;
+  background-color: transparent;
+  color: #ebebeb;
+  cursor: pointer;
+}
+
+.main-block__icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 100%;
+  border: 1px solid #ffffff;
+}
+
+.main-block__button:hover > div {
+    background-image: url(./iconButton.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>