<repo_name>DenisSlipko/GTSPA<file_sep>/src/components/Map.jsx
function Map() {
  return (
    <div className="map-container">
      <p className="map_title">Где нас найти ?</p>
      <iframe
        title="map"
        className="g-map"
        style={{
          frameBorder: "0",
          scrolling: "no",
          marginHeight: "0",
          marginWidth: "0",
        }}
        src="https://maps.google.com/maps?width=100%25&amp;height=400&amp;hl=en&amp;q=dnipro,%20lyvarna%20sr%204+(Your%20Business%20Name)&amp;t=p&amp;z=17&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"
      ></iframe>
    </div>
  );
}
export default Map;
<file_sep>/src/components/Offer.jsx
function Offer() {
  return (
    <div className="offer-container">
      <p className="offer-title">ЗАЯВКА НА ПОДБОР ТУРА</p>
      <p className="offer-subtitle">
        Заполните заявку и наш менеджер свяжется с вами и подберет идеальные
        условия для вашего путешествия
      </p>
      <div className="input-container">
        <div className="first-input-wrapper">
          <input type="text" placeholder="Ваше имя" className="name-input" />
          <input
            type="text"
            placeholder="Ваш телефон"
            className="phone-input"
          />
        </div>
        <textarea
          type="text"
          placeholder="Ваш комментарий"
          className="coment-input"
        />
      </div>
      <div className="btn-offer-wrapper">
        <button className="btn-offer-send">Отправить</button>
        <p className="subtitle-btn">
          Нажимая на кнопку отправить вы соглашаетесь с условиями политики
          конфиденциальности и обработки персональных данных
        </p>
      </div>
    </div>
  );
}

export default Offer;
<file_sep>/src/components/WhyUs.jsx
import svgMap from "../img/svgMap.svg";

export default function WhyUs() {
  return (
    <div className="whyus-container">
      <div className="w-container">
        <p className="w-title">ПОЧЕМУ СТОИТ ВЫБРАТЬ НАС?</p>
        <p className="w-text light">
          Мы работаем с людьми, а не с турами.
          <br />
          Самое важное для нас решить задачи клиента
        </p>
        <div className="w-list">
          <div className="col-item">
            <div className="w-item">
              <img src="" alt="" className="w-logo" />
              <p className="w-item-text">Опыт в подборе туров чёто типа</p>
            </div>
            <div className="w-item">
              <img src="" alt="" className="w-logo" />
              <p className="w-item-text">Время на рынке</p>
            </div>
          </div>
          <div className="col-item">
            <div className="w-item">
              <img src="" alt="" className="w-logo" />
              <p className="w-item-text">
                Сопровождение и отзывчивость во время отдыха
              </p>
            </div>
            <div className="w-item">
              <img src="../img/.jpg" alt="" className="w-logo" />
              <p className="w-item-text">Хорошие цены</p>
            </div>
          </div>
        </div>
        <div className="btn-container">
          <button className="btn header about">Выбрать тур</button>
          <button className="btn header w about">Выбрать тур</button>
        </div>
      </div>
      <img
        src={svgMap}
        alt="map"
        style={{
          textAlign: "end",
          position: "absolute",
          opacity: "0.3",
          right: 0,
          marginTop: "100px",
        }}
      />
    </div>
  );
}
<file_sep>/src/components/Carousel.jsx
import React, { Component } from "react";
import Slider from "react-slick";
import "./style.css";
import img from "../img/bgimg.jpg";

export default class MultipleItems extends Component {
  render() {
    const settings = {
      dots: false,
      infinite: true,
      speed: 500,
      slidesToShow: 3,
      slidesToScroll: 1,
      initialSlide: 0,
      responsive: [
        {
          breakpoint: 925,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
            infinite: true,
            dots: true,
          },
        },
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
            initialSlide: 2,
          },
        },
        {
          breakpoint: 375,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: true,
          },
        },
      ],
    };
    const obj = [
      {
        text:
          "Вкус рождества в окружении чудесных пирамид, вы такое пробовали? Очутиться в жаркой стране посреди зимы - это то, что нужно!",
        title: "Каникулы в Египте",
        img: `${img}`,
      },
      {
        text:
          "Вкус рождества в окружении чудесных пирамид, вы такое пробовали? Очутиться в жаркой стране посреди зимы - это то, что нужно!",
        title: "Каникулы в Египте",
        img: `${img}`,
      },
      {
        text:
          "Вкус рождества в окружении чудесных пирамид, вы такое пробовали? Очутиться в жаркой стране посреди зимы - это то, что нужно!",
        title: "Каникулы в Египте",
        img: `${img}`,
      },
      {
        text:
          "Вкус рождества в окружении чудесных пирамид, вы такое пробовали? Очутиться в жаркой стране посреди зимы - это то, что нужно!",
        title: "Каникулы в Египте",
        img: `${img}`,
      },
    ];
    return (
      <div className="slider-container">
        <h2 style={{ textTransform: "uppercase", marginBottom: "60px" }}>
          {" "}
          Актуальные туры{" "}
        </h2>
        <Slider {...settings}>
          {obj.map((item) => (
            <div className="card-container">
              <div className="card-img">
                <img src={item.img} alt="" className="image" />
              </div>
              <p className="carousel-title">{item.title}</p>
              <p className="carousel-text">{item.text}</p>
            </div>
          ))}
        </Slider>
      </div>
    );
  }
}
<file_sep>/src/layout/Header.jsx
import { Link } from "react-router-dom";
import tgiconW from "../icons/tgiconW.svg";

function Header() {
  const handleColorClick = () => {
    document.querySelector(".brand-text").style = "color: #595959";
    document.querySelector(".brand-text-small").style = "color: #595959";
    document
      .querySelectorAll(".nav-link")
      .forEach((el) => (el.style = "color: #595959"));
    document.querySelector(".header-phone").style = "color: #595959";
  };
  const handleReverseColor = () => {
    document.querySelector(".brand-text").style = "color: white";
    document.querySelector(".brand-text-small").style = "color: white";
    document
      .querySelectorAll(".nav-link")
      .forEach((el) => (el.style = "color: white"));
    document.querySelector(".header-phone").style = "color: white";
  };

  const handleMenuClick = () => {
    let element = document.querySelector(".navbar-toggler");
    element.classList.toggle("open");
  };

  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <div className="container-fluid">
        <Link
          className="navbar-brand"
          to="/"
          onClick={() => handleReverseColor()}
        >
          <div className="brand-container">
            <div className="brand-text"><NAME></div>
            <p className="brand-text-small">туристическая фирма</p>
          </div>
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNavDropdown"
          aria-controls="navbarNavDropdown"
          aria-expanded="false"
          aria-label="Toggle navigation"
          onClick={() => handleMenuClick()}
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNavDropdown">
          <ul className="navbar-nav ml-auto">
            <li className="nav-item">
              <Link
                className="nav-link"
                aria-current="page"
                to="/"
                onClick={() => handleReverseColor()}
              >
                Главная
              </Link>
            </li>
            <li className="nav-item">
              <Link
                className="nav-link"
                to="/about"
                onClick={() => handleColorClick()}
              >
                О нас
              </Link>
            </li>
            <li className="nav-item">
              <Link
                className="nav-link"
                to="/places"
                onClick={() => handleColorClick()}
              >
                Страны
              </Link>
            </li>
            <li className="nav-item last">
              <Link
                className="nav-link"
                to="/offer"
                onClick={() => handleColorClick()}
              >
                Оставить запрос
              </Link>
            </li>
          </ul>
          <a href="#!" className="tg-icon-link">
            <img className="header-icon-tg" src={tgiconW} alt="telegram" />
          </a>
          <div className="white-space-container"></div>
          <p className="header-phone">+38 (067) 749-80-55</p>
          <button className="btn header">Перезвонить мне</button>
          <p className="location-header">
            Украина, Днепр,
            <br /> ул. Литейная 4
          </p>
        </div>
      </div>
    </nav>
  );
}

export default Header;
<file_sep>/src/components/Card.jsx
import { useState } from "react";
import img from "../img/background.jpg";
import img2 from "../img/backgroundHP.jpg";
import ModalWindow from "./ModalWindow";

function Card() {
  const obj = [
    {
      text:
        "Вкус рождества в окружении чудесных пирамид, вы такое пробовали? Очутиться в жаркой стране посреди зимы - это то, что нужно!",
      full_text: `Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных. \n Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных.Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных. Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных`,
      title: "Каникулы в Египте",
      imgBig: `${img}`,
      imgSmall1: `${img}`,
      imgSmall2: `${img2}`,
      imgSmall3: `${img2}`,
      imgSmall4: `${img2}`,
    },
    {
      text:
        "Вкус рождества в окружении чудесных пирамид, вы такое пробовали? Очутиться в жаркой стране посреди зимы - это то, что нужно!",
      full_text:
        "Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных. Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных.Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных. Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных",
      title: "Каникулы в Египте",
      imgBig: `${img}`,
    },
    {
      text:
        "Вкус рождества в окружении чудесных пирамид, вы такое пробовали? Очутиться в жаркой стране посреди зимы - это то, что нужно!",
      full_text: `Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных.\n Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных. \n Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных. Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных`,
      title: "Каникулы в Египте",
      imgBig: `${img}`,
    },
    {
      text:
        "Вкус рождества в окружении чудесных пирамид, вы такое пробовали? Очутиться в жаркой стране посреди зимы - это то, что нужно!",
      title: "Каникулы в Египте",
      imgBig: `${img}`,
    },
    {
      text:
        "Вкус рождества в окружении чудесных пирамид, вы такое пробовали? Очутиться в жаркой стране посреди зимы - это то, что нужно!",
      full_text:
        "Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных. Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных.Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных. Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных",
      title: "Каникулы в Египте",
      imgBig: `${img}`,
    },
    {
      text:
        "Вкус рождества в окружении чудесных пирамид, вы такое пробовали? Очутиться в жаркой стране посреди зимы - это то, что нужно!",
      full_text:
        "Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных. Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных.Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных. Нажимая на кнопку отправить вы соглашаетесь с условиями политики конфиденциальности и обработки персональных данных",
      title: "Каникулы в Египте",
      imgBig: `${img}`,
    },
  ];
  const [modalActive, setModalActive] = useState(false);
  const [modalText, setModalText] = useState("");
  const [modalTitle, setModalTitle] = useState("");
  const [modalBigImg, setModalBigImg] = useState("");
  const [modalFullText, setModalFullText] = useState("");
  const [modalImg1, setModalImg1] = useState("");
  const [modalImg2, setModalImg2] = useState("");
  const [modalImg3, setModalImg3] = useState("");
  const [modalImg4, setModalImg4] = useState("");
  return (
    <>
      <div className="card-container">
        <p className="card-text">Популярные Направления</p>
        <div className="card-wrapper">
          {obj.map((item) => (
            <>
              <div
                className="card"
                onClick={() => {
                  setModalActive(true);
                  setModalText(item.text);
                  setModalTitle(item.title);
                  setModalBigImg(item.imgBig);
                  setModalFullText(item.full_text);
                  setModalImg1(item.imgSmall1);
                  setModalImg2(item.imgSmall2);
                  setModalImg3(item.imgSmall3);
                  setModalImg4(item.imgSmall4);
                }}
              >
                <div className="card-text-container">
                  <img src={item.imgBig} alt="" className="card-img" />
                  <p className="card-title">{item.title}</p>
                </div>
                <p className="card-subtitle">{item.text}</p>
              </div>
            </>
          ))}
        </div>
      </div>
      <ModalWindow
        active={modalActive}
        setActive={setModalActive}
        text={modalText}
        title={modalTitle}
        imgBig={modalBigImg}
        fullText={modalFullText}
        imgSmall1={modalImg1}
        imgSmall2={modalImg2}
        imgSmall3={modalImg3}
        imgSmall4={modalImg4}
      />
    </>
  );
}

export default Card;
<file_sep>/src/pages/About.jsx
import ComentCarousel from "../components/ComentCarousel";
import Map from "../components/Map";

function About() {
  return (
    <>
      <ComentCarousel />
      <Map />
    </>
  );
}

export default About;
<file_sep>/src/pages/Homepage.jsx
import Carousel from "../components/Carousel";
import "./style.css";
import Card from "../components/Card";
import WhyUs from "../components/WhyUs";
import Offer from "../components/Offer";
import ComentCarousel from "../components/ComentCarousel";
import Map from "../components/Map";

function Homepage() {
  return (
    <>
      <div className="home-container">
        <div className="text">
          <p className="pre-title">Незабываемые туры в разные страны</p>
          <p className="main-title">ГРАНД ТУР</p>
          <p className="post-title">
            Хотите посетить новые уголки мира и оставить яркие впечатления?{" "}
            <br /> Тогда вы по адресу!
          </p>
          <button className="btn main" style={{ marginTop: "50px" }}>
            Посмотреть предложения
          </button>
        </div>
      </div>
      <div className="carousel-container">
        <Carousel />
      </div>
      <WhyUs />
      <Card />
      <Offer />
      <ComentCarousel />
      <Map />
    </>
  );
}

export default Homepage;
<file_sep>/src/components/ComentCarousel.jsx
import React, { Component } from "react";
import Slider from "react-slick";
import "./style.css";
import img from "../img/bgimg.jpg";
import tgicon from "../icons/tgicon.svg";

export default class ComentCarousel extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      initialSlide: 0,
      responsive: [
        {
          breakpoint: 925,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            infinite: true,
            dots: true,
          },
        },
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            initialSlide: 2,
          },
        },
        {
          breakpoint: 375,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: true,
          },
        },
      ],
    };
    const obj = [
      {
        text:
          "Вкус рождества в окружении чудесных пирамид, вы такое пробовали? Очутиться в жаркой стране посреди зимы - это то, что нужно!",
        personName: "<NAME>",
        img: `${img}`,
        tgIcon: `${tgicon}`,
        instIcon: `${tgicon}`,
      },
      {
        text:
          "Вкус рождества в окружении чудесных пирамид, вы такое пробовали? Очутиться в жаркой стране посреди зимы - это то, что нужно!",
        personName: "<NAME>",
        img: `${img}`,
        tgIcon: `${tgicon}`,
        instIcon: `${tgicon}`,
      },
      {
        text:
          "Вкус рождества в окружении чудесных пирамид, вы такое пробовали? Очутиться в жаркой стране посреди зимы - это то, что нужно!",
        personName: "<NAME>",
        img: `${img}`,
        tgIcon: `${tgicon}`,
        instIcon: `${tgicon}`,
      },
      {
        text:
          "Вкус рождества в окружении чудесных пирамид, вы такое пробовали? Очутиться в жаркой стране посреди зимы - это то, что нужно!",
        personName: "<NAME>",
        img: `${img}`,
        tgIcon: `${tgicon}`,
        instIcon: `${tgicon}`,
      },
    ];
    return (
      <div className="coment-slider">
        <Slider {...settings} style={{ width: "40%" }}>
          {obj.map((item) => (
            <div className="coment-container">
              <div className="info-coment">
                <img src={img} alt="" className="person-photo" />
                <div className="info-person">
                  <p className="person-name">{item.personName}</p>
                  <div className="ntw-container">
                    <a href="#!">
                      <img
                        className="tg-icon"
                        src={item.tgIcon}
                        alt="telegram"
                      />
                    </a>
                    <a href="#!">
                      <img
                        className="inst-icon"
                        src={item.instIcon}
                        alt="telegram"
                      />
                    </a>
                  </div>
                </div>
              </div>
              <div className="coment-text">{item.text}</div>
            </div>
          ))}
        </Slider>
      </div>
    );
  }
}
<file_sep>/src/App.js
import { useTransition, animated } from "react-spring";
import { Route, Switch, useLocation } from "react-router-dom";

import Header from "./layout/Header";
import Footer from "./layout/Footer";

import About from "./pages/About";
import AboutPlaces from "./pages/AboutPlaces";
import Homepage from "./pages/Homepage";
import Offer from "./pages/Offer";

function App() {
  const location = useLocation();
  const transitions = useTransition(location, (location) => location.pathname, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
  });

  return (
    <>
      <Header />
      <main className="main-container">
        {transitions.map(({ item, props, key }) => (
          <animated.div key={key} style={props}>
            <div style={{ position: "absolute", width: "100%" }}>
              <Switch location={item}>
                <Route exact path="/" component={Homepage} />
                <Route exact path="/about" component={About} />
                <Route exact path="/places" component={AboutPlaces} />
                <Route exact path="/offer" component={Offer} />
              </Switch>
            </div>
          </animated.div>
        ))}
      </main>
      <Footer />
    </>
  );
}

export default App;
<file_sep>/src/components/ModalWindow.jsx
import React from "react";
import "./style.css";

const ChangeImg = (str) => {
  document.getElementById("modal__img__id").setAttribute("src", str);
};

const ModalWindow = ({
  active,
  setActive,
  fullText,
  imgBig,
  imgSmall1,
  imgSmall2,
  imgSmall3,
  imgSmall4,
  title,
}) => {
  return (
    <div
      className={active ? "modal_w active" : "modal_w"}
      onClick={() => setActive(false)}
      style={{ padding: "20px 200px" }}
    >
      <div
        className={active ? "modal__content active" : "modal__content"}
        onClick={(e) => e.stopPropagation()}
      >
        <button
          onClick={() => setActive(false)}
          className="btn_exit_modal"
        ></button>
        <div className="img__container">
          <div className="small__img__container">
            <img
              src={imgSmall1}
              alt=""
              className="small__modal__img"
              onClick={() => ChangeImg(imgSmall1)}
            />
            <img
              src={imgSmall2}
              alt=""
              className="small__modal__img"
              onClick={() => ChangeImg(imgSmall2)}
            />
            <img
              src={imgSmall3}
              alt=""
              className="small__modal__img"
              onClick={() => ChangeImg(imgSmall3)}
            />
            <img
              src={imgSmall4}
              alt=""
              className="small__modal__img"
              onClick={() => ChangeImg(imgSmall4)}
            />
          </div>
          <img
            src={imgBig}
            alt=""
            style={{ width: "70%", marginBottom: "12px" }}
            className="modal__img"
            id="modal__img__id"
          />
        </div>

        <div className="modal__text__container">
          <p className="modal__title">{title}</p>
          <p className="modal__text">{fullText}</p>
        </div>
      </div>
    </div>
  );
};

export default ModalWindow;
