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={LogoSqdc} alt=""/>
-                <img className="partner-img" src={LogoGov} />
+                <img className="partner-img" src={LogoGov} alt=""/>
-                <img className="partner-img" src={LogoTG} />
+                <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>

GrossesMitaines/grosses-mitaines-ui/src/pages/AboutUs.js

@@ -2,7 +2,7 @@ import React from "react";
 import { useEffect } from "react";
 import ContactInfo from "../components/ContactInfo";
 
-const AbtouUs = () => {
+const AboutUs = () => {
 
     useEffect(() => {
         document.title = 'À propos de nous';
@@ -18,7 +18,7 @@ const AbtouUs = () => {
             <br />
             <div className="row">
                 <div className="col col-12 col-md-6 col-lg-4 ">
-                    <img className="border-quetaine" src="/images/madamebrossard.jpg"/>
+                    <img className="border-quetaine" src="/images/madamebrossard.jpg" alt=""/>
                 </div>
                 <div className="col col-12 col-md-6 col-lg-8 employee-text">
                     <br />
@@ -50,7 +50,7 @@ const AbtouUs = () => {
                     <br />
                 </div>
                 <div className="col col-12 col-md-6 col-lg-4">
-                    <img className="border-quetaine" src="/images/moman.jpg"/>
+                    <img className="border-quetaine" src="/images/moman.jpg" alt=""/>
                 </div>
             </div>
             <br />
@@ -62,4 +62,4 @@ const AbtouUs = () => {
     );
 }
 
-export default AbtouUs;
+export default AboutUs;

GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js

@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import ItemList from "../components/ItemList";
+
+const Morceaux = () => {
+
+    const products = [
+        {
+            "name": "Ceinture flèchée",
+            "status": "Disponible!",
+            "price": "85,86",
+            "imageUrl": "/images/ceintureflechee.jpg"
+        },
+        {
+            "name": "Pantoufles du Canadien en Phentex",
+            "status": "Non disponible...",
+            "price": "15,64",
+            "imageUrl": "/images/pantouflesCH.jpg"
+        },
+        {
+            "name": "Jean-Luc Mongrain",
+            "status": "Disponible!",
+            "price": "1453,12",
+            "imageUrl": "/images/jeanlucmongrain.jpg"
+        }
+    ];
+
+    useEffect(() => {
+        document.title = 'Morceaux';
+    });
+
+    return (
+        <div className="morceaux-container">
+            <h3>QWERTY</h3>
+            <ItemList items={products} />
+        </div>
+    );
+}
+
+export default Morceaux;

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -200,6 +200,22 @@ html {
 
 }
 
+.item {
+    border: 5px purple double;
+    border-radius: 5px;
+    padding: 1rem 0;
+    margin: 1rem 0;
+}
+
+.item-detail {
+    padding: 0 2rem;
+}
+
+.item-price {
+    font-weight: bold;
+    font-size: 140%;
+}
+
 
 /* -------------------------------------------------------- */
 /* specification pour les écrans plus petits / cells */