main

src/components/Main/Card.js

@@ -0,0 +1,46 @@
+
+
+const Card = ({city}) => {
+    return ( 
+        <div style={{
+            height: 257,
+            width: 400,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundImage: '',
+        }}>
+            <div style={{
+                height: 179,
+                width: 371,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-evenly',
+                alignItems: 'center',
+            }}>
+                <span style={{
+                    color: '#000',
+                    fontSize: 20,
+                    fontWeight: 700
+                }}>Туристическая карта г.{city}</span>
+                <span style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                }}>Приехали в город? <p>Узнай, где выгоднее остановиться, куда</p> <p>сходить и что посмотреть</p></span>
+                <button style={{
+                    width: 240,
+                    height: 46,
+                    backgroundColor: '#4B60AE',
+                    borderRadius: 10,
+                    color: '#fff',
+                    fontSize: 16,
+                    fontWeight: 400,
+                    border: 'none'
+                }}>Построить маршрут</button>
+            </div>
+        </div>
+     );
+}
+ 
+export default Card;

src/components/Main/Header.js

@@ -0,0 +1,40 @@
+const Header = () => {
+    return ( 
+        <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingLeft: '10px',
+            height: 79,
+            width: 400,
+            backgroundColor: '#ffffff',
+        }}>
+            <div style={{
+                display: 'flex',
+                alignItems: 'center',
+            }}>
+                <img src="./logo5121.png" alt="#" style={{
+                height: 53,
+                width: 53,
+            }}/>
+            <span style={{
+                color: '#F68C43',
+                width: '60%',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'start',
+                fontWeight: 700,
+                fontFamily: 'Raleway',
+                fontSize: '20px',
+            }}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
+            </div>
+            <img src="./menu.png" alt="#" style={{
+                height: 20,
+                width: 32,
+                marginRight: 10
+            }}/>
+        </div>
+     );
+}
+ 
+export default Header;

src/components/Main/Main.js

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
+import Header from "./Header";
+import Card from "./Card";
 
 const Main = ({ userData }) => {
 
@@ -49,24 +51,30 @@ const Main = ({ userData }) => {
     console.log(userData.unique);
 
     return (
+        <div>
+        <Header />
+        <Card city={userData.selectedCity}/>
         <div style={{
-            overflow: 'auto',
+            overflow: 'hidden',
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
         }}>
-            <h2>Фильмы в г.{userData.selectedCity}</h2>
+            <h2>Кино по пушкинской карте</h2>
             <div style={{
                 width: '100%',
                 overflowX: 'auto',
+                display: 'flex',
+                justifyContent: 'center',
             }}>
                 <ul style={{
                     display: 'flex',
-                    padding: 0, // Убираем внутренние отступы у списка
+                    listStyle: 'none',
+                    padding: 0,
                 }}>
                     {films.map((film, index) => (
                         <li key={index} style={{
-                            marginRight: '10px', // Добавляем небольшой отступ между фильмами
+                            marginRight: '10px',
                         }}>
                             <div key={index} style={{
                                 height: 200,
@@ -92,20 +100,21 @@ const Main = ({ userData }) => {
             </ul>
             </div>
 
-            <h2>Guides in {userData.selectedCity}</h2>
+            <h2>Тур. гиды г.{userData.selectedCity}</h2>
             <ul>
                 {gits.map((guide, index) => (
                     <li key={index}>{guide.name}</li>
                 ))}
             </ul>
 
-            <h2>Museums in {userData.selectedCity}</h2>
+            <h2>Музеи г.{userData.selectedCity}</h2>
             <ul>
                 {museum.map((museumItem, index) => (
                     <li key={index}>{museumItem.name}</li>
                 ))}
             </ul>
         </div>
+        </div>
     );
 }