Fix: saurabhbakolia#246

package.json

@@ -15,10 +15,13 @@
     "ajv": "^6.12.6",
     "ajv-keywords": "^3.5.2",
     "axios": "^1.6.0",
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
     "firebase": "^10.14.0",
     "framer-motion": "^11.9.0",
     "myapp": "file:",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.10.6",
     "react-dom": "^18.2.0",
     "react-icons": "^5.3.0",
     "react-lazy-load-image-component": "^1.6.2",

public/index.html

@@ -8,15 +8,15 @@
   <meta name="description" content="Web site created using create-react-app" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
-    rel="stylesheet"
-  />
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
   <link
     href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
     rel="stylesheet">
-    <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.tailwindcss.com"></script>
+
   <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+
   <title>SCROLLME | E-Commerce Web Store</title>
   <style>
     * {
@@ -30,4 +30,5 @@
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
 </body>
-</html>
+
+</html>

src/App.js

@@ -1,3 +1,4 @@
+
 import './styles/global.css';
 import Home from './pages/Home';
 import Product from './pages/Product';

src/components/Navbar.jsx

@@ -23,12 +23,12 @@ const Wrapper = styled.div`
   justify-content: space-between;
   align-items: center;
   ${mobile({
-    height: '90px',
-    padding: '10px 10px',
-    flexDirection: 'column',
-    justifyContent: 'space-evenly',
-    alignItems: 'center',
-  })}
+  height: '90px',
+  padding: '10px 10px',
+  flexDirection: 'column',
+  justifyContent: 'space-evenly',
+  alignItems: 'center',
+})}
 `;
 
 const Left = styled.div`
@@ -164,4 +164,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;