Updated file structure

src/App.css

@@ -1,32 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.test.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
-});

src/components/App.js

@@ -1,13 +1,12 @@
 import React, { Component } from 'react';
-import Header from './components/Header';
+import Header from './Header';
 import {
   BrowserRouter as Router, Route,
   Switch,
 } from 'react-router-dom';
-import Map from './components/Map';
+import Map from './Map';
-import Vegetables from './components/Vegetables';
+import Home from './Home';
-
+import Vegetables from './Vegetables';
-import './App.css';
 
 class App extends Component {
   constructor(props) {
@@ -42,7 +41,8 @@ class App extends Component {
         <Header></Header>
         <Router>
           <Switch>
-            <Route exact path="/" component={Map} />
+            <Route exact path="/" component={Home} />
+            <Route exact path="/carte" component={Map} />
             <Route exact path="/vegetaux" component={Vegetables} />
             <Route exact path="/vegetaux/:id-:slug" component={Vegetables} />
           </Switch>

src/components/Header.js

@@ -27,6 +27,7 @@ import {
 } from 'react-notifications';
 import strToSlug from '../StrToSlug';
 
+import '../css/Header.css'
 
 export default class Header extends React.Component {
   constructor(props) {
@@ -71,7 +72,7 @@ export default class Header extends React.Component {
           <Collapse isOpen={this.state.isOpen} navbar>
             <Nav className="ml-auto" navbar>
               <NavItem>
-                <NavLink href="/">Carte</NavLink>
+                <NavLink href="/carte">Carte</NavLink>
               </NavItem>
               <UncontrolledDropdown nav inNavbar>
                 <DropdownToggle nav caret>

src/components/Home.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  Container,
+  Row,
+  Col
+} from 'reactstrap';
+
+import '../css/Home.css';
+
+export default class Home extends React.Component {
+
+  render() {
+    return (
+      <Container>
+        <Row>
+          <Col xs="12" className=" with-border with-background">
+            <img src="/logo.png" className="logo float-left" alt="RodiVert" />
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id arcu varius sem pulvinar porta eget at felis. Curabitur euismod libero erat, id sagittis nunc hendrerit vitae. Nulla facilisis lobortis quam sit amet pellentesque. Vestibulum eget justo ut enim pretium iaculis sit amet eu ex. Suspendisse potenti. Curabitur ac justo ligula. Proin molestie vestibulum metus, eget dignissim enim euismod in. Nam at neque nisi.
+            </p>
+            <p>
+              Pellentesque luctus dignissim orci a tempus. Nam eget sem consectetur, dignissim ante sed, laoreet mi. Ut efficitur at nibh quis efficitur. Ut accumsan ultricies felis id sodales. Fusce hendrerit mi neque, eget consequat nibh lobortis at. Nunc ligula elit, efficitur id mauris a, congue aliquet nibh. In congue enim metus, a mattis velit vehicula id. Nunc commodo magna sit amet vulputate condimentum. Integer vitae pretium dui. Vestibulum ut convallis velit. Pellentesque vehicula finibus viverra. Nam a elit sapien. Praesent laoreet est ac nisl dapibus, non porttitor est placerat. Aenean vitae tellus convallis, venenatis felis in, venenatis augue. Maecenas id finibus arcu, vitae dignissim tellus. Duis eget metus turpis.
+            </p>
+            <p>
+              Nulla sed mauris non mi efficitur suscipit. Praesent tincidunt metus in justo viverra, non condimentum lectus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Quisque non tempus ligula, non fermentum velit. Nunc metus ipsum, luctus quis venenatis sed, efficitur ut eros. Nullam vitae risus at orci fringilla faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pharetra at mi hendrerit blandit. Praesent tempus at massa in finibus. Suspendisse id lacus auctor, pretium erat varius, scelerisque neque. Etiam tincidunt et est ac cursus. Sed nec neque fringilla, mollis enim sit amet, tristique massa. Aliquam erat volutpat. Suspendisse semper aliquam diam sit amet porttitor. Praesent eget elit vel tortor iaculis ornare ac congue lacus.
+            </p>
+            <p>
+              Suspendisse semper, orci non porttitor semper, elit ligula euismod turpis, sed facilisis ligula eros eget urna. Praesent facilisis nulla interdum mauris cursus cursus. In massa sapien, condimentum eget est eleifend, varius pellentesque velit. Nunc vitae eros sed ex mollis lacinia vitae vel augue. Proin sed metus velit. Aliquam eget justo ornare, dictum ipsum vitae, fermentum purus. Curabitur mollis arcu sed libero porta, et porta ante interdum. Integer non viverra purus.
+            </p>
+          </Col>
+        </Row>
+      </Container>
+    );
+  }
+}

src/components/Map.js

@@ -21,6 +21,7 @@ import {
 } from 'react-router-dom';
 import strToSlug from '../StrToSlug'
 
+import '../css/Map.css'
 
 const MapDimensions = {
   width: 734,
@@ -135,8 +136,8 @@ export default class Map extends React.Component {
       <Container>
         <NotificationContainer />
         <Row>
-          <Col xs="8">
+          <Col xs="12" sm="8">
-            <Row>
+            <Row className="with-margin">
               <Col className="with-border with-background">
                 <div id="MapContainer">
                   <div className="map" style={{ width: this.state.Map.width, height: this.state.Map.height }}>
@@ -164,9 +165,11 @@ export default class Map extends React.Component {
               </Col>
             </Row>
           </Col>
-          <Col xs="4">
+          <Col xs="12" sm="4">
             <Row>
-              <Col className="with-border with-background" xs="12">
+              <Col xs="6" sm="12">
+                <div className="with-margin">
+                  <div className=" with-border with-background">
                     <ListGroup className='vegetables--types--group'>
                       {
                         this.state.types.map((type, key) =>
@@ -181,8 +184,12 @@ export default class Map extends React.Component {
                         )
                       }
                     </ListGroup>
+                  </div>
+                </div>
               </Col>
-              <Col className="with-border with-background" xs="12">
+              <Col xs="6" sm="12">
+                <div className="with-margin">
+                  <div className=" with-border with-background">
                     <ListGroup className='vegetables--types--group'>
                       {
                         this.state.selectedType &&
@@ -196,6 +203,8 @@ export default class Map extends React.Component {
                         )
                       }
                     </ListGroup>
+                  </div>
+                </div>
               </Col>
             </Row>
           </Col>

src/css/Header.css

@@ -0,0 +1,21 @@
+.navbar-collapse {
+  flex-grow: unset !important;
+}
+
+.nav-item {
+  padding: 0 16px;
+  border-left: 1px solid #ccc;
+}
+
+.navbar.navbar-expand-md.navbar-light.bg-light {
+  box-shadow: 0 2px 2px #a7a7a7;
+  margin-bottom: 16px;
+}
+
+.nav-link .text {
+  padding-right: 32px;
+}
+.nav-link .badge {
+  position: absolute;
+  right: 24px;
+}

src/css/Home.css

@@ -0,0 +1,3 @@
+.logo {
+  margin: 0 16px 16px 0;
+}

src/css/Map.css

@@ -0,0 +1,49 @@
+
+.map {
+  width: 734px;
+  height: 530px;
+  background: url('/plan.jpg');
+  background-size: cover;
+  position: relative;
+}
+.mapMarker {
+position: absolute;
+left: 25%;
+top: 33%;
+}
+
+.mapMarker svg {
+  color: #dc3545;
+  font-size: 2rem;
+  cursor: pointer;
+}
+
+.mapMarker.selected svg {
+  color: #007bff;
+  animation: bounce 0.7s ease 5;
+}
+
+@keyframes bounce{
+  from {margin-top: 0;}
+  50%  {margin-top: 8px;}
+  to   {margin-top: 0;}
+}
+
+.vegetables--types--group li {
+  cursor: pointer;
+  text-align: left;
+}
+
+.vegetables--types--group li:hover {
+  background: #fafafa;
+  opacity: 0.6;
+}
+
+.vegetables--types--group li.selected {
+  background: #f1f1f1;
+  font-weight: bold;
+}
+
+.vegetables--types--group .badge {
+  margin-left: 8px;
+}

src/css/index.css

@@ -0,0 +1,38 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: url('/background/1.jpg') no-repeat fixed;
+  background-size: cover;
+  background-position: center center;
+}
+
+.with-border {
+  box-shadow: 4px 4px 6px #a7a7a7;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  /* margin: 16px; */
+  padding: 8px;
+}
+
+.with-margin {
+  margin: 8px;
+}
+
+@media (max-width: 575.98px) { 
+  .with-margin {
+    margin: 8px 0;
+  }
+}
+
+.with-background {
+  background-color: rgba(248,249,250, 0.7) !important;
+}
+
+.container {
+  margin-top: 116px;
+}

src/index.css

@@ -1,108 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background: url('/background/1.jpg') no-repeat fixed;
-  background-size: cover;
-  background-position: center center;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
-
-
-.navbar-collapse {
-  flex-grow: unset !important;
-}
-
-.nav-item {
-  padding: 0 16px;
-  border-left: 1px solid #ccc;
-}
-
-.navbar.navbar-expand-md.navbar-light.bg-light {
-  /* background-color: rgba(248,249,250, 0.8) !important; */
-  box-shadow: 0 2px 2px #a7a7a7;
-  margin-bottom: 16px;
-}
-
-.with-border {
-  box-shadow: 4px 4px 6px #a7a7a7;
-  border-radius: 8px;
-  border: 1px solid #ccc;
-  margin: 16px;
-  padding: 8px;
-}
-
-.with-background {
-  /* background: #f8f9fa; */
-  background-color: rgba(248,249,250, 0.7) !important;
- 
-}
-
-.container {
-  margin-top: 116px;
-}
-
-.nav-link .text {
-  padding-right: 32px;
-}
-.nav-link .badge {
-  position: absolute;
-  right: 24px;
-}
-
-.vegetables--types--group li {
-  cursor: pointer;
-  text-align: left;
-}
-
-.vegetables--types--group li:hover {
-  background: #fafafa;
-  opacity: 0.6;
-}
-
-.vegetables--types--group li.selected {
-  background: #f1f1f1;
-  font-weight: bold;
-}
-
-.vegetables--types--group .badge {
-  margin-left: 8px;
-}
-
-.map {
-  width: 734px;
-  height: 530px;
-  background: url('/plan.jpg');
-  background-size: cover;
-  position: relative;
-}
-.mapMarker {
-position: absolute;
-left: 25%;
-top: 33%;
-}
-
-.mapMarker svg {
-  color: #dc3545;
-  font-size: 2rem;
-  cursor: pointer;
-}
-
-.mapMarker.selected svg {
-  color: #007bff;
-  animation: bounce 0.7s ease 5;
-}
-
-@keyframes bounce{
-  from {margin-top: 0;}
-  50%  {margin-top: 8px;}
-  to   {margin-top: 0;}
-}

src/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import App from './components/App';
 import * as serviceWorker from './serviceWorker';
 
 import 'react-notifications/lib/notifications.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import './index.css';
+import './css/index.css';
 
 ReactDOM.render(<App />, document.getElementById('root'));
 

src/logo.svg

@@ -1,7 +0,0 @@
-<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>