Not quite the style yet... But!

GrossesMitaines/grosses-mitaines-ui/src/components/App.js

@@ -4,6 +4,7 @@ import Home from "../pages/Home";
 import AboutUs from "../pages/AboutUs";
 import Privacy from "../pages/Privacy";
 import ContactUs from "../pages/ContactUs";
+import Morceaux from "../pages/Morceaux";
 
 const App = () => {
 
@@ -12,6 +13,7 @@ const App = () => {
       <Routes>
         <Route path="/" element={<Layout />}>
           <Route index element={<Home />} />
+          <Route path="morceaux" element={<Morceaux/>} />
           <Route path="aboutUs" element={<AboutUs/>} />
           <Route path="contactUs" element={<ContactUs/>}/>
           <Route path="privacy" element={<Privacy/>}/>

GrossesMitaines/grosses-mitaines-ui/src/components/Footer.js

@@ -30,9 +30,9 @@ const Footer = () => {
                 <h6 className="footer-partner-title">- Nos partenaires -</h6>
             </div>
             <div className="footer-partners">
-                <img className="partner-img" src={LogoSqdc} />
-                <img className="partner-img" src={LogoGov} />
-                <img className="partner-img" src={LogoTG} />
+                <img className="partner-img" src={LogoSqdc} alt=""/>
+                <img className="partner-img" src={LogoGov} alt=""/>
+                <img className="partner-img" src={LogoTG} alt=""/>
             </div>
             <div className="footer-copyrights">
                 &copy; 2022 - Les Grosses Mitaines à Ginette et Monique, inc.

GrossesMitaines/grosses-mitaines-ui/src/components/Item.js

@@ -0,0 +1,18 @@
+const Item = ({ imageUrl, name, price, status }) => {
+    return (
+        <div className="row item">
+            <div className="col-md-2">
+                <img src={imageUrl} alt={name} height="150" />
+            </div>
+            <div className="col-md-8 item-detail">
+                <h4>{name}</h4>
+                <div dangerouslySetInnerHTML={{ __html: status }}></div>
+            </div>
+            <div className="col-md-2 item-price">
+                {price}
+            </div>
+        </div>
+    );
+}
+
+export default Item;

GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js

@@ -0,0 +1,18 @@
+import Item from './Item';
+
+const ItemList = ({ items }) => {
+
+    return (
+        <div>
+            {items.map((item) => 
+                <Item   imageUrl={item.imageUrl} 
+                        name={item.name} 
+                        price={item.price}
+                        status={item.status}
+                />
+            )}
+        </div>
+    )
+}
+
+export default ItemList;

GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js

@@ -10,7 +10,7 @@ const Topbar = () => {
         <Navbar expand="sm" className="topbar-container">
             <Container>
                 <Link className="navbar-brand" to="/">
-                    <img src="/images/LesGrossesMitaines.png" height="45"/>
+                    <img src="/images/LesGrossesMitaines.png" alt="" height="45"/>
                 </Link>
                 <Navbar.Toggle aria-controls="basic-navbar-nav" />
                 <Navbar.Collapse id="basic-navbar-nav">
@@ -18,6 +18,9 @@ const Topbar = () => {
                         <Link className="nav-link" to="/" >
                             Maison
                         </Link>
+                        <Link className="nav-link" to="/morceaux" >
+                            Morceaux
+                        </Link>
                         <Link className="nav-link" to="/aboutUs" >
                             À propos de nous
                         </Link>