create map using map box

package.json

@@ -11,6 +11,7 @@
     "classnames": "^2.2.6",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-map-gl": "^6.1.6",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",

src/App.js

@@ -15,6 +15,7 @@ import Error404 from "./components/error-404/Error404";
 import BlogDetails from "./pages/BlogDetails";
 import RegistrationPage from "./pages/Registration";
 import LoginPage from "./pages/Login";
+import ContactUs from "./pages/ContactUs";
 
 function App() {
   return (
@@ -31,7 +32,8 @@ function App() {
         <Route path="/blogs" component={BlogPage} exact />
         <Route path="/blogs/:id" component={BlogDetails} exact />
         <Route path="/registration" component={RegistrationPage} exact />
-        <Route path="/login" component={LoginPage}/>
+        <Route path="/login" component={LoginPage} />
+        <Route path="/contact" component={ContactUs} exact />
         <Route component={Error404} />
       </Switch>
       <Footer />

src/components/contact-us/GetInTouch.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Row, Col } from 'antd';
+import styles from './GetInTouch.module.css'
+import image01 from '../../assets/images/address-icon.png'
+import image02 from '../../assets/images/phone-icon.png'
+import image03 from '../../assets/images/mail-icon.png'
+const getInTouchData = [
+    {
+        id: 1,
+        imageUrl: image01,
+        option: 'Address',
+        title: 'Find Us',
+        location: '1Hd- 50, 010 Avenue, NY 90001'
+    },
+    {
+        id: 2,
+        imageUrl: image02,
+        option: 'phone',
+        title: 'Make a Call',
+        location: '009-215-5596 (toll free)'
+    },
+    {
+        id: 3,
+        imageUrl: image03,
+        option: 'email',
+        title: 'Send Email',
+        location: 'contact@example.com'
+    },
+
+];
+
+
+function GetInTouch() {
+    return (
+        <div className={styles.container}>
+            <Row gutter={[24, 24]} justify="center">
+                {getInTouchData.map((element) => {
+                    return (
+                        <Col span={8} key={element.id} xs={24} sm={22} md={20} lg={8} xl={8}>
+                            <div className={styles.headStyle}>
+                                <div className={styles.bodyStyle}>
+                                    <img src={element.imageUrl} alt={element.option} className={styles.imgStyle} />
+                                    <h2 className={styles.titleStyle}>{element.title}</h2>
+                                    <span>{element.location}</span>
+                                </div>
+                            </div>
+                        </Col>
+                    )
+                })}
+            </Row>
+        </div>
+    )
+}
+
+export default GetInTouch;

src/components/contact-us/GetInTouch.module.css

@@ -0,0 +1,18 @@
+.container {
+  max-width: 1170px;
+  margin: 50px auto;
+  text-align: center;
+}
+.imgStyle {
+  width: 40%;
+  height: 40%;
+  margin-bottom: 20px;
+}
+.headStyle {
+  padding: 10px;
+}
+.bodyStyle {
+  border: 2px solid rgb(239, 240, 240);
+  overflow: hidden;
+  padding: 40px 40px;
+}

src/components/contact-us/MapInfo.js

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import ReactMapGl, { Marker } from 'react-map-gl'
+import mapMarker from '../../assets/images/map-marker-icon.png'
+
+const MapboxAccessToken = 'pk.eyJ1IjoicmFpaGFuMzIiLCJhIjoiY2tremQ5Y3FiMHAwbjJxcDAwcTdvOHptayJ9.tYflkgHrEN-IEa5LwSd1TA'
+const markerStyle = {
+    width: '50px',
+    height: '50px'
+}
+const MapInfo = () => {
+    const [viewport, setViewport] = useState({
+        latitude: 23.810651,
+        longitude: 90.4126466,
+        zoom: 10,
+        width: '100vw',
+        height: '60vh'
+    })
+    return (
+        <ReactMapGl
+            {...viewport}
+            onViewportChange={(viewport) => setViewport(viewport)}
+            mapboxApiAccessToken={MapboxAccessToken} >
+            <Marker latitude={viewport.latitude} longitude={viewport.longitude}>
+                <img src={mapMarker} alt='map-marker' style={markerStyle} />
+            </Marker>
+        </ReactMapGl>
+    )
+}
+export default MapInfo;

src/components/navbar/navbarInfo.js

@@ -12,7 +12,7 @@ const navbarMenus = {
   blogUrl: "/blogs",
 
   contact: "contact",
-  contactUrl: "",
+  contactUrl: "/contact",
 
   loginUrl: "",
   cartUrl: "/cart",

src/pages/ContactUs.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import MessageForm from "../components/contact-us/MessageForm"
+import MainHeader from "../components/main-header/MainHeader";
+import GetInTouch from "../components/contact-us/GetInTouch"
+function ContactUs() {
+    return (
+        <div>
+            <MainHeader name="Get In Touch" sub="" />
+            <GetInTouch />
+            <MessageForm />
+        </div>
+
+    )
+}
+export default ContactUs;