My feature

package.json

@@ -11,11 +11,12 @@
     "styled-components": "^4.3.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+  "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
+
   "eslintConfig": {
     "extends": "react-app"
   },

src/App.css

@@ -36,5 +36,5 @@ body{
 .cart-icon{
   cursor:pointer;
   font-size:1.2rem;
-  color:var(--mainYellow);
+
 }

src/components/Navbar.js

@@ -14,7 +14,7 @@ export default class Navbar extends Component {
                <ul className="navbar-nav align-items-center">
                  <li className="nav-item ml-5">
                     <Link to="/" className="nav-link">
-                       Products
+                       Products.in
                     </Link>
                  </li>
                </ul>

src/components/Product.js

@@ -52,6 +52,7 @@ const ProducrWrapper =styled.div`
 .card{
     border-color:tranparent;
     transition:all 1s linear;
+    border-radius:20px;
 }
 .card-footer{
     background:transparent;

src/index.css

@@ -1,13 +1,8 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
+