Structure de base

front/package.json

@@ -6,8 +6,12 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.2.2",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.6.0",
     "react-dom": "^18.2.0",
+    "react-router": "^6.4.3",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

front/public/gare aixr.jpg:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://www.iloveimg.com/
+HostUrl=https://api3.iloveimg.com/v1/download/c274zryjfb8gqg7098knqbbw2scfp2tkb28p7zjj6lkfrzw782h4hd0f9mg8955qt5y9bk9lbvAn74bvfjw8zbkd6gmjzqrAjg10l2qndnjbrpxtrsrv2r4mkft1gvwnlrch3s6v4h325nz1509lw3rjkbqnl1phpkwlt51dmntyAjl4hkt1

front/public/index.html

@@ -15,6 +15,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

front/public/rtm.jpg:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://118500.fr/uploads/content/rtm-bus2.jpg
+HostUrl=https://118500.fr/uploads/content/rtm-bus2.jpg

front/src/App.js

@@ -1,25 +1,42 @@
-import logo from './logo.svg';
+
+import * as React from "react";
 import './App.css';
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+} from "react-router-dom";
+
+import NavBar from "./components/Navbar";
+import AllCardTransports from './components/transport/AllCardTransports';
+import AllCardLodgings from './components/lodging/AllCardLodgings';
+import AllCardRestaurations from './components/restauration/AllCardRestaurations';
+import AllCardSports from './components/sport/AllCardSports';
+import Footer from './components/Footer';
+import Home from "./components/Home";
+import PageError from "./components/PageError";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Router>
+        <NavBar />
+        <Routes>
+        <Route exact path="*"  element={<PageError/>}/>      
+          <Route exact path="/"  element={<Home/>}/>      
+          <Route exact path="/transport"  element={<AllCardTransports/>}/>      
+          <Route path="/hebergements" element={<AllCardLodgings/>} />   
+          <Route path="/restauration"element={<AllCardRestaurations/>} />
+          <Route path="/sport" element={<AllCardSports/>} />
+        </Routes>
+        <Footer/>
+      </Router>
+
     </div>
-  );
+
+);
 }
 
+
 export default App;
+

front/src/components/AllCard.js

@@ -0,0 +1,76 @@
+import React from "react";
+
+function AllCard() {
+    return(<div className="componentBg">
+
+
+<div className="box ">
+    <div className="container">
+     	<div className="row">
+
+				<div className="col-lg-4 col-md-4 col-sm-4 col-xs-12">
+
+					<div className="box-part text-center">
+
+                        <i className="fa fa-pinterest-p fa-3x" aria-hidden="true"></i>
+
+						<div className="title">
+							<h4>Restauration</h4>
+						</div>
+
+						<div className="text">
+							<span>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.</span>
+						</div>
+
+						<a href="#">Learn More</a>
+
+					 </div>
+				</div>	 
+
+				 <div className="col-lg-4 col-md-4 col-sm-4 col-xs-12">
+
+					<div className="box-part text-center">
+
+					    <i className="fa fa-google-plus fa-3x" aria-hidden="true"></i>
+
+						<div className="title">
+							<h4>Restauration2</h4>
+						</div>
+
+						<div className="text">
+							<span>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.</span>
+						</div>
+
+						<a href="#">Learn More</a>
+
+					 </div>
+				</div>	 
+
+				 <div className="col-lg-4 col-md-4 col-sm-4 col-xs-12">
+
+					<div className="box-part text-center">
+
+                        <i className="fa fa-github fa-3x" aria-hidden="true"></i>
+
+						<div className="title">
+							<h4>Restauration3</h4>
+						</div>
+
+						<div className="text">
+							<span>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.</span>
+						</div>
+
+						<a href="#">Learn More</a>
+
+					 </div>
+				</div>
+
+		</div>		
+    </div>
+</div>
+
+
+    </div>);
+
+}
+export default AllCard;

front/src/components/Card.js

@@ -0,0 +1,29 @@
+import Button from 'react-bootstrap/Button';
+import Card from 'react-bootstrap/Card';
+import data from "../data.json"
+
+function Cards(props) {
+
+  // console.log(data);
+
+  return (
+
+    <>
+      <Card style={{ width: '18rem' }}>
+      <Card.Img variant="top" src="holder.js/100px180" />
+      <Card.Body>
+        <Card.Title>{props.name}</Card.Title>
+        <Card.Text>
+          {props.description}
+        </Card.Text>
+        <Button variant="primary">Go somewhere</Button>
+      </Card.Body>
+    </Card>
+
+    </>
+  );
+}
+
+
+
+export default Cards;

front/src/components/Footer.js

@@ -0,0 +1,28 @@
+function Footer() {
+
+    return (
+        <footer className="footer">
+            <a href="https://www.departement13.fr/" target="_blank">
+                <img src="img/footer/d13.png" alt="d13" />
+            </a>
+            <a href="https://www.voyage-prive.com" target="_blank">
+                <img src="img/footer/voyageprive.png" alt="voyage privé" />
+            </a>
+            <a href="https://inco-group.co/" target="_blank">
+                <img className="smaller" src="img/footer/inco.png" alt="inco" />
+            </a>
+            <a href="https://www.myprovence.fr/" target="_blank">
+                <img src="img/footer/provencetourisme.png" alt="my provence" />
+            </a>
+            <a href="https://code4marseille.fr/" target="_blank">
+                <img src="img/footer/code4marseille.png" alt="code4marseille" />
+            </a>
+
+            <a href="https://aws.amazon.com/fr/" target="_blank">
+                <img src="img/footer/AWS.png" alt="aws" />
+            </a>
+        </footer>
+    );
+}
+
+export default Footer;

front/src/components/Header.js

@@ -0,0 +1,2 @@
+
+

front/src/components/Home.js

@@ -0,0 +1,14 @@
+function Home() {
+
+    return(
+        <main className=" homeBg d-flex flex-column align-items-center">
+                <h1 className="mt-5 mb-2">Marseille terre d'accueil</h1>
+                <br></br>
+                <h2 className="mt-2">Les jeux olympiques</h2>
+        </main>
+    )
+
+
+}
+
+export default Home;

front/src/components/Navbar.js

@@ -0,0 +1,49 @@
+
+// import Button from 'react-bootstrap/Button';
+import Container from 'react-bootstrap/Container';
+// import Form from 'react-bootstrap/Form';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+// import NavDropdown from 'react-bootstrap/NavDropdown';
+import Offcanvas from 'react-bootstrap/Offcanvas';
+
+function NavBar() {
+  return (
+    <>
+      {[false].map((expand) => (
+        <Navbar key={expand} bg="light" expand={expand} >
+          <Container fluid>
+          <Navbar.Brand href="/">
+            <img
+              alt=""
+              src="logonoir.png"
+              width="300"
+              height="70"
+              className="d-inline-block align-top logo"
+            />{' '}
+          </Navbar.Brand>
+            <Navbar.Toggle aria-controls={`offcanvasNavbar-expand-${expand}`} />
+            <Navbar.Offcanvas
+              id={`offcanvasNavbar-expand-${expand}`}
+              aria-labelledby={`offcanvasNavbarLabel-expand-${expand}`}
+              placement="end"
+            >
+              <Offcanvas.Header closeButton>
+              </Offcanvas.Header>
+              <Offcanvas.Body>
+              <Nav>
+            <Nav.Link href="transport" >Transports</Nav.Link>
+            <Nav.Link href="hebergements">Où dormir ?</Nav.Link>
+            <Nav.Link href="restauration">Où manger ?</Nav.Link>
+            <Nav.Link href="sport">Centres sportifs</Nav.Link>
+          </Nav>
+              </Offcanvas.Body>
+            </Navbar.Offcanvas>
+          </Container>
+        </Navbar>
+      ))}
+    </>
+  );
+}
+
+export default NavBar;

front/src/components/PageError.js

@@ -0,0 +1,12 @@
+function PageError() {
+
+    return(
+        <main className=" pageError d-flex  justify-content-center">
+            <img alt="logo error" src="img/error/404hack2.png" className="imgError m-5"></img>
+        </main>
+    )
+
+
+}
+
+export default PageError;

front/src/components/lodging/AllCardLodgings.js

@@ -0,0 +1,75 @@
+import React from "react";
+function AllCardLodgings() {
+    return(<div className="componentBg">
+
+
+        <div className="box">
+            <div className="container">
+                 <div className="row">
+
+                        <div className="col-lg-4 col-md-4 col-sm-4 col-xs-12">
+
+                            <div className="box-part text-center">
+
+                                <i className="fa fa-pinterest-p fa-3x" aria-hidden="true"></i>
+
+                                <div className="title">
+                                    <h4>Hébergement </h4>
+                                </div>
+
+                                <div className="text">
+                                    <span>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.</span>
+                                </div>
+
+                                <a href="#">Learn More</a>
+
+                             </div>
+                        </div>	 
+
+                         <div className="col-lg-4 col-md-4 col-sm-4 col-xs-12">
+
+                            <div className="box-part text-center">
+
+                                <i className="fa fa-google-plus fa-3x" aria-hidden="true"></i>
+
+                                <div className="title">
+                                    <h4>Hébergement2</h4>
+                                </div>
+
+                                <div className="text">
+                                    <span>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.</span>
+                                </div>
+
+                                <a href="#">Learn More</a>
+
+                             </div>
+                        </div>	 
+
+                         <div className="col-lg-4 col-md-4 col-sm-4 col-xs-12">
+
+                            <div className="box-part text-center">
+
+                                <i className="fa fa-github fa-3x" aria-hidden="true"></i>
+
+                                <div className="title">
+                                    <h4>Hébergement3</h4>
+                                </div>
+
+                                <div className="text">
+                                    <span>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.</span>
+                                </div>
+
+                                <a href="#">Learn More</a>
+
+                             </div>
+                        </div>
+
+                </div>		
+            </div>
+        </div>
+
+
+            </div>);
+
+}
+export default AllCardLodgings