finished most of tuto

react-project/src/App.jsx

@@ -2,6 +2,8 @@ import reactLogo from "./assets/react.svg";
 import viteLogo from "./assets/vite.svg";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
+import Carte from "./components/Carte";
+import Compteur from "./components/Compteur";
 import "./App.css";
 
 function App() {
@@ -9,7 +11,10 @@ function App() {
     <>
       <Header />
 
-      <div className="ticks"></div>
+      <Carte titre="Géolocalisation" texte="Suivi en temps réel" />
+      <Carte titre="Consommation" texte="Carburant consommé" />
+
+      <Compteur />
 
       <section id="next-steps">
         <div id="docs">

react-project/src/components/Carte.jsx

@@ -0,0 +1,10 @@
+function Carte(props) {
+  return (
+    <div className="carte">
+      <h2>{props.titre}</h2>
+      <p>{props.texte}</p>
+    </div>
+  );
+}
+
+export default Carte;

react-project/src/components/Compteur.jsx

@@ -0,0 +1,13 @@
+import { useState } from "react";
+
+function Compteur() {
+  const [nombre, setNombre] = useState(0);
+  return (
+    <div>
+      <p> Vehicules : {nombre}</p>
+      <button onClick={() => setNombre(nombre + 1)}>+</button>
+    </div>
+  );
+}
+
+export default Compteur;

react-project/src/components/Docs.jsx

@@ -0,0 +1,27 @@
+function Docs() {
+  return (
+    <div id="docs">
+      <svg className="icon" role="presentation" aria-hidden="true">
+        <use href="/icons.svg#documentation-icon"></use>
+      </svg>
+      <h2>Documentation</h2>
+      <p>Your questions, answered</p>
+      <ul>
+        <li>
+          <a href="https://vite.dev/" target="_blank">
+            <img className="logo" src={viteLogo} alt="" />
+            Explore Vite
+          </a>
+        </li>
+        <li>
+          <a href="https://react.dev/" target="_blank">
+            <img className="button-icon" src={reactLogo} alt="" />
+            Learn more
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+export default Docs;