Mathieu

front/package.json

@@ -6,8 +6,10 @@
     "@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-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

front/public/logo find noir.png:Zone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://mail.google.com/
+HostUrl=https://mail-attachment.googleusercontent.com/attachment/u/0/?ui=2&ik=1468fd8a58&attid=0.3&permmsgid=msg-f:1749566687870053554&th=1847b5a20d59ecb2&view=att&disp=safe&saddbat=ANGjdJ9t5Oy7tcD55jdVrI7Dllfy9nkk6xUgwwzg4kBSy3LIZUvel5gM_0oBHUdC-goHSzRulL-Bk_phX9zkHpEQe2a5q0tSA0szegtGFiZzIxS56pMh-RCTHJlmBci9qvj7A4rpx9xBjwavYEjnE89QEihpdASFU5072pGgmWs1qhB-RWKO1_c4CjHDtGD_n6ynmI_I_CZiau8E8C-IEeI7d0LMkT072c_L_6lWbLxllSZ90PceFoYVIdf_RAqvW034c_nhnpZjffAK-DOf0OMdD_qfBlz8SCK6_wZRZmYwc18-ZTsDgr-WCqQ3hel1arSlyLxLIcwEY8wq2L1YocLm_MBZS890d-muE0fPufhAh20fla4N1MySGG_ABo9G2-uuyBgpiDnCoZZWtYXXZWYq1AMpxLa0JMf93gwE-7BjSkjcR8mWjmXJpiPrrXbDUJNBsbSp3334Qwu8FvkIPnR8BwI_I9_HdgXbRtorIrzcsUFfs4e5ilPrxQaKrs7GzG69Q9h5_InhLM77XzgLLkZcUi8WbcJBEUzKsvj_ODpqleSiva1wz_hnfGLrZEnpmcA_Um11Gr8eKoiCnZFYLOlfu1jgdnvedKYYKPEYG2ECVUG2FLgB1AYboUTiTjOlZv584wTrM0EExTp4Ni-xOtFQBiKybMq3apLuDj7foCDDfUG5aKonpQmS1ii93JnkKyLWXdovrZFYW2QM89JeaE-iHUOrpHkGjctPNB4rsPcsoYFmlz8cDQU2rPTGGDrlQOPJw7uniRt-VMLuPOwHv3GLBMLVt9zHxIXS-YoBO807wJZ4Xa2IJnPOB2EIRQZ_4YMe1E29EKpKoT_8oOUUO09EAyKGSSDxNfDiDc1N5v5KoGjolBEVVuAVB2NLEwMt6Nxn20Y7x_iKwjLE__pPZdKZWkTeqg_Bhe_-i-GL_vrIAiI_QY1TyhxiGYXakLE

front/src/App.css

@@ -36,3 +36,132 @@
     transform: rotate(360deg);
   }
 }
+
+  .footer {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    flex-wrap: wrap;
+    border: 1px solid #707070;
+    padding-bottom: 40px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .footer a {
+    flex-basis: 30%;
+    text-align: center;
+    padding: 10px;
+  }
+
+  .footer img {
+    height: 70px;
+    object-fit: contain;
+  }
+
+  .smaller {
+    height: 40px !important;
+  }
+
+  .navbar-brand {
+    padding-left:10px;
+  }
+
+  .baseline {
+    font-size: 80px;
+    margin-left: 200px;
+    font-weight: bold;
+    color:#FF5757;
+  }
+  .baseline-img {
+    justify-content: center;
+    height: 400px;
+    margin-left: 80px;
+    margin-top: 80px;
+  }
+
+  .hearder {
+    height: 80px;
+  }
+  .register {
+    height: 90px;
+    background-color: #00A651;
+    border-radius:25px;
+    width:250px;
+    text-align: center;
+    justify-content: center;
+    margin-left:200px;
+    margin-top:50px;
+    color : #ededed;
+    font-weight: bold;
+    padding-top: 10px;
+    font-size: 25px;
+
+  }
+
+  .contbl {
+    display:flex;
+  }
+
+  .indic1 {
+    height: 70px;
+    background-color: #0282C8;
+    border-radius:25px;
+    width:250px;
+    text-align: center;
+    justify-content: center;
+    margin-left:300px;
+    margin-top:50px;
+    margin-bottom : 50px;
+    color : #ededed;
+    font-weight: bold;
+    padding-top: 10px;
+
+  }
+
+  .indic2 {
+    height: 70px;
+    background-color: #fcbf31;
+    border-radius:25px;
+    width:250px;
+    text-align: center;
+    justify-content: center;
+    margin-left:300px;
+    margin-top:50px;
+    margin-bottom : 50px;
+    color : #ededed;
+    font-weight: bold;
+    padding-top: 10px;
+
+  }
+
+  .indic3 {
+    height: 70px;
+    background-color: #ED354F;
+    border-radius:25px;
+    width:250px;
+    text-align: center;
+    justify-content: center;
+    margin-left:300px;
+    margin-top:50px;
+    margin-bottom : 50px;
+    color : #ededed;
+    font-weight: bold;
+    padding-top: 10px;
+
+  }
+  .indic4 {
+    height: 70px;
+    background-color: #ED354F;
+    border-radius:25px;
+    width:230px;
+    text-align: center;
+    justify-content: center;
+    margin-left:300px;
+    margin-top:50px;
+    margin-bottom : 50px;
+    color : #ededed;
+    font-weight: bold;
+    padding-top: 10px;
+
+  }

front/src/App.js

@@ -1,24 +1,17 @@
-import logo from './logo.svg';
+//import logo from './logo.svg';
 import './App.css';
+import {BrowserRouter, Routes, Route} from 'react-router-dom';
+import Home from "./pages/Home.js";
+import Form from "./pages/Form.js";
 
 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>
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route exact path="/" element={<Home />} />
+        <Route exact path="/form_translator" element={<Form />} />
+      </Routes>
+    </BrowserRouter>
   );
 }
 

front/src/components/Baselinehome.js

@@ -0,0 +1,20 @@
+export default function Baselinehome () {
+
+    return (
+        <div className="">
+            <div className="baseline">it's easy</div>
+            <div className="baseline">to find someone to talk to !</div>
+            <div className="register" href="">Let's go ! </div>
+            <div className="contbl">
+                <img className="baseline-img" src="img/44658.png"/>
+                <div className="">
+                <div className="register" href="">Become a translator click Here ! </div>
+                <div className="indic1" href="">More than 367 Free translators registered</div>
+                <div className="indic2" href="">96 different languages available </div>
+                <div className="indic3" href="">58 professionals offering their services</div>
+                </div>
+            </div>
+
+        </div>
+    )
+}

front/src/components/Footer.js

@@ -0,0 +1,57 @@
+import '../App.css';
+
+function Footer () {
+
+    return (
+        <div>
+            <footer class="footer">
+  <a href="https://www.departement13.fr/" target="_blank">
+    <img src="img/d13.png" alt="d13" />
+  </a>
+  <a href="https://www.voyage-prive.com" target="_blank">
+    <img src="img/voyageprive.png" alt="voyage privé" />
+  </a>
+  <a href="https://inco-group.co/" target="_blank">
+    <img class="smaller" src="img/inco.png" alt="inco" />
+  </a>
+  <a href="https://www.myprovence.fr/" target="_blank">
+    <img src="img/provencetourisme.png" alt="my provence" />
+  </a>
+  <a href="https://code4marseille.fr/" target="_blank">
+    <img src="img/code4marseille.png" alt="code4marseille" />
+  </a>
+
+  <a href="https://aws.amazon.com/fr/" target="_blank">
+    <img src="img/AWS.png" alt="aws" />
+  </a>
+</footer>
+
+            {/* <footer class="footer">
+                <div class="row">
+                    <a href="https://www.departement13.fr/" target="_blank" class="column">
+                        <img src="/img/Bouches-du-Rhône_13_logo.png" alt="d13" />
+                    </a>
+                    <a href="https://membres.voyage-prive.com/voyageprive/fr/?cid=31746&affid=Marque-exact-42638028443[…]NdCvePsNXX2k_o5m2k7P8h7CDTUxLBP9q1SEIj_No1QaAiqSEALw_wcB" target="_blank" class="column">
+                        <img src="/img/Voyage_Privé.svg.png" alt="voyage privé" />
+                    </a>
+                    <a href="https://aws.amazon.com/fr/?nc2=h_lg" target="_blank" class="column">
+                        <img src="/img/AWS.png" alt="aws" />
+                    </a>
+                </div>
+                <div class="row">
+                    <a href="https://www.myprovence.fr/" target="_blank" class="column">
+                        <img class="smaller" src="/img/provencetourisme.png" alt="my provence" />
+                    </a>
+                    <a href="https://inco-group.co/" target="_blank" class="column">
+                        <img class="smaller" src="/img/inco.png" alt="inco" />
+                    </a>
+                    <a href="https://code4marseille.fr/" target="_blank" className="column">
+                        <img class="smaller" src="/img/code4marseille.png" alt="code4marseille" />
+                    </a>
+                </div>
+            </footer > */}
+        </div> 
+    )
+}
+
+export default Footer;

front/src/components/Navbar.js

@@ -0,0 +1,34 @@
+export default function Navbar() {
+
+    return (
+        <div className="header">
+            <nav class="navbar navbar-expand-lg navbar-light bg-light">
+                <a class="navbar-brand" href="#">
+                <img src="img/logo-find-noir.png" alt="logo" height={60}/>
+                </a>
+                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav mr-auto">
+
+                        {/* <li class="nav-item">
+                            <a class="nav-link" href="#">Link</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Link</a>
+                        </li> */}
+                        {/* <li class="indic4">
+                            <a class="nav-link" href="#">Let's talk !</a>
+                        </li> */}
+                        <li class="nav-item dropdown">
+
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+        </div>
+
+    )
+}

front/src/components/addTranslator.js

@@ -0,0 +1,17 @@
+
+
+export default function AddTranslator(props)
+{
+    function register()
+    {
+        //
+    }
+
+    console.log(props);
+
+    return (
+        <>
+            Inscription validée !
+        </>
+    )
+}

front/src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(