RowContainer Added

public/index.html

@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="amazon.com clone using react"
-    />
+    <meta name="description" content="amazon.com clone using react" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -39,5 +36,24 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+
+
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+      crossorigin="anonymous"
+    ></script>
+
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
+      integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
+      crossorigin="anonymous"
+    ></script>
+
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
+      integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>

src/App.css

@@ -1 +1,37 @@
+/* .carouselImg {
+    width: 100%;
+} */
+body{
+    background-color: #ededed !important;
+}
+#carouselExampleControls {
+    height: 350px;
+    z-index: -1;
+
+
+}
+
+
+
+.card-container {
+    z-index: 1;
+}
+
+
+.row-container {
+    /* overflow-x: auto; */
+    background-color: white;
+}
+
+.row-img {
+    /* height: 200px; */
+    width: 180px;
+    /* margin: 20px;
+    padding: 10px; */
+}
+::-webkit-scrollbar {
+    width: 0;  /* Remove scrollbar space */
+    background: transparent;  /* Optional: just make scrollbar invisible */
+  }
+
 

src/App.js

@@ -2,10 +2,32 @@ import './App.css';
 import "bootstrap/dist/css/bootstrap.min.css";
 import React from "react";
 import Footer from './components/footer/Footer';
+import Carousel from './components/Carousel';
+import CardContainer from './components/CardContainer';
+import RowContainer from './components/RowContainer';
 
 function App() {
+
+  const booksImgUrls = [];
+  for (let i = 1; i <= 10; i++) {
+    booksImgUrls.push(process.env.PUBLIC_URL + `/images/books/book${i}.jpg`);
+  }
+
+  const mobilesImgUrls = [];
+  for (let i = 1; i <= 10; i++) {
+    mobilesImgUrls.push(process.env.PUBLIC_URL + `/images/mobiles/m${i}.jpg`);
+  }
+  for (let i = 1; i <= 10; i++) {
+    mobilesImgUrls.push(process.env.PUBLIC_URL + `/images/mobiles/m${i}.jpg`);
+  }
+
   return (
     <div>
+      <Carousel />
+      <CardContainer />
+      <RowContainer heading="Top Sellers in Books for you" imgUrls={booksImgUrls} />
+      <RowContainer heading="Popular products in Wireless internationally" imgUrls={mobilesImgUrls} />
+      <RowContainer heading="Top Sellers in Books for you" imgUrls={booksImgUrls} />
       <Footer />
 
     </div>

src/components/CardContainer.js

@@ -2,6 +2,8 @@ import React from 'react'
 
 export default function CardContainer() {
     return (
-        <div>CardContainer</div>
+        <div className="container">
+
+        </div>
     )
 }

src/components/Carousel.js

@@ -1,7 +1,41 @@
-import React from 'react'
+import React from 'react';
+// import ImgSrc from '../images/carousel_img1.jpg';
+// import ImgSrc2 from '../images/ci_img2.jpg';
+// import ImgSrc3 from '../images/ci_img3.jpg';
 
 export default function Carousel() {
     return (
-        <div>Carousel</div>
+        <>
+        <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
+            <div class="carousel-inner">
+                <div class="carousel-item active">
+                    <img src={process.env.PUBLIC_URL + "images/carousel_img1.jpg"} class="d-block w-100" alt="..." />
+                </div>
+                <div class="carousel-item">
+                    <img src={process.env.PUBLIC_URL + '/images/ci_img2.jpg'} class="d-block w-100" alt="..." />
+                </div>
+                <div class="carousel-item">
+                    <img src={process.env.PUBLIC_URL + '/images/ci_img3.jpg'} class="d-block w-100" alt="..." />
+                </div>
+            </div>
+            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Previous</span>
+            </button>
+            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Next</span>
+            </button>
+        </div>
+
+
+        </>
+
+
+
     )
 }
+
+// <div className=''>
+        //     <img className='carouselImg' src={ImgSrc} alt="carousel img" />
+        // </div>

src/components/RowContainer.js

@@ -1,7 +1,41 @@
-import React from 'react'
+import React from 'react';
+import RowImg from './RowImg';
 
-export default function RowContainer() {
+
+export default function RowContainer(props) {
+
     return (
-        <div>RowContainer</div>
+        <div className="row-container container mt-3">
+            <h3 className='p-2'>{props.heading}</h3>
+
+            <div className='d-flex overflow-auto'>
+                {props.imgUrls.map((ele) => 
+                <RowImg src={ele} alt="" />)}
+            {/* <RowImg src={process.env.PUBLIC_URL + '/images/books/book1.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book2.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book3.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book4.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book5.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book6.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book7.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book8.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book9.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book10.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book2.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book1.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book2.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book3.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book4.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book5.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book6.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book7.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book8.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book9.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book10.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book2.jpg'} alt="" />
+            <RowImg src={process.env.PUBLIC_URL + '/images/books/book3.jpg'} alt="" /> */}
+        </div>
+        </div>
+
     )
 }

src/components/RowImg.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function RowImg(props) {
+  return (
+    <div className="row-img m-1 p-2">
+        <img src={props.src} alt={props.alt} />
+    </div>
+  )
+}