Server

package.json

@@ -42,7 +42,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "react-scripts build && echo '/* /index.html 200' | cat >build/_redirects",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/App.js

@@ -32,6 +32,7 @@ import Payment from "./component/Payment";
 import Summary from "./component/Summary";
 import Dashboard from "./Dashbrd/Dashbrd";
 import ContactUS from "./components/ContactUs";
+import About from "./component/AboutUs";
 
 function App() {
   return (
@@ -76,6 +77,7 @@ function App() {
           <Route exact path="/AddNewProduct" element={<AddNewProduct/>}/>
           <Route exact path="/Dashboard" element={<Dashboard/>}/>
           <Route exact path="/ContactUS" element={<ContactUS/>}/>
+          <Route exact path="/About" element={<About/>}/>
         </Routes>
       </BrowserRouter>
     </>

src/Dashbrd/Retailer.js

@@ -5,7 +5,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import Button from '@mui/material/Button';
 
 const columns: GridColDef[] = [
-  { field: 'id', headerName: 'ID', width: 150 },
+
   { field: 'Names', headerName: 'Names', width: 120 },
   {field:"price",headerName:"price",width:132},
   {field:"Quantity",headerName:"Quantity",width:132},

src/Dashbrd/Retailer1.js

@@ -6,7 +6,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import Button from '@mui/material/Button';
 
 const columns: GridColDef[] = [
-  { field: 'id', headerName: 'ID', width: 150 },
+
   { field: 'Names', headerName: 'Names', width: 120 },
   {field:"price",headerName:"price",width:132},
   {field:"Quantity",headerName:"Quantity",width:132},

src/component/About.css

@@ -0,0 +1,130 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+.about-container{
+    display: flex;
+    width: 100%;
+    height: 80vh;
+    background-image: url("../assets/image/member.jpeg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+}
+.on{
+width:80%
+}
+.crd{
+    display: flex;
+    gap: 4rem;
+    margin-left: 28rem;
+}
+.carde{
+    display: flex;
+    gap: 4rem;
+    margin-left: 28rem;
+}
+.ct-about{
+    display: inline-flex;
+    gap: 2rem;
+
+}
+.mission{
+    font-size: 16px;
+    justify-content: center;
+
+  padding: 2rem;
+}
+
+.Card{
+   background-color: white;
+    width:28rem;
+    height:45vh;
+  position: relative;
+  /* bottom: 14rem; */
+  overflow: hidden;
+    transition: all 0.4s;
+}
+.Card:hover{
+    box-shadow: 0 10px 10px 10px lightgrey;
+    cursor:pointer;
+    transform: translate(5px,-10px);
+}
+.Our{
+    position: relative;
+    /* bottom: 16rem; */
+    font-size: 30px;
+    color: darkgoldenrod;
+
+}
+.h2-about{
+    font-size: 14px;
+
+    margin-left: 13rem;
+    color: darkgoldenrod;
+}
+.Carde{
+    display:inline-flex;
+    background-color: white;
+    width:28rem;
+    height:45vh;
+
+  /* bottom: 14rem; */
+  overflow: hidden;
+    transition: all 0.4s; 
+margin-left: 15rem;
+
+}
+
+.Carde:hover{
+    box-shadow: 0 10px 10px 10px lightgrey;
+    cursor:pointer;
+    transform: translate(5px,-10px);
+}
+.services{
+    width: 20rem;
+    height: 30vh;
+    position: relative;
+    top: 2rem;
+    margin-left: 4rem;
+    background-repeat: no-repeat;
+    background-position: center;
+
+}
+.service{
+    width: 20rem;
+   height: 30vh;
+   position: relative;
+   top: 2rem;
+   margin-left: 4rem;
+   background-repeat: no-repeat;
+   background-position: center;
+
+}
+
+/*  */
+.Original{
+
+    width: 60%;
+    clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
+    background-color: rgba(0, 0, 0, 0.815);
+    color: white;
+    padding: 150px 10px;
+
+
+}
+.header-about{
+    font-size: 30px;
+}
+.br-about{
+color: white;
+font-size: 20px;
+}
+
+/* .Original h1{
+color: black;
+} */
+
+
+

src/component/AboutUs.js

@@ -0,0 +1,192 @@
+import * as React from 'react';
+
+import Button from '@mui/material/Button';
+import Image from "../assets/image/member.jpeg";
+import "./About.css";
+import Service from "../assets/image/people.jpg"
+import { Card, Col, Row } from 'antd';
+import Service1 from "../assets/image/team.jpg";
+import Service3 from "../assets/image/serv.jpg";
+import Service4 from "../assets/image/imageste.jpg";
+import Service5 from "../assets/image/commerce.jpg";
+import Service6 from "../assets/image/comc.jpg";
+import Product from "../assets/image/g.jpg";
+import Product1 from "../assets/image/w.jpg";
+import Product2 from "../assets/image/m.jpg";
+import Product3 from "../assets/image/s.jpg";
+import Product4 from "../assets/image/d.jpg";
+import Product5 from "../assets/image/t.jpg";
+import Product6 from "../assets/image/pexel.jpeg";
+import Product7 from "../assets/image/nom.jpeg";
+import Header from "../component/header";
+import Footer from "../component/footer";
+import FacebookIcon from '@mui/icons-material/Facebook';
+import InstagramIcon from '@mui/icons-material/Instagram';
+import TwitterIcon from '@mui/icons-material/Twitter';
+const About=() =>{
+    return(
+        <>
+        <Header/>
+        <div className='about-container'>
+        <div className="Original">
+            <h1 className='header-about'>Get All Original Product</h1>
+            <h1 className="br-about">Browser By Categories</h1>
+            <Button  sx={{backgroundColor:" darkgoldenrod",position:"relative",left:"35rem",fontSize:"1.2rem",color:"white",top:"10px"}}>Shop Now</Button>
+            </div>
+
+
+
+        </div>
+
+
+            <h1 className="Our">Best Seller Product</h1>
+            <div className="site-card-wrapper">
+
+      <div className="crd">
+
+        <Card  bordered={true} className="Card">
+          <img src={Product} className="service"></img>
+          <h1 style={{color:"black",fontSize:"16px"}}>Product Name: Electricity</h1>
+          <Button  sx={{backgroundColor:" darkgoldenrod",color:"black",fontSize:"1.2rem",marginLeft:"8rem"}}>Shop Now</Button>
+        </Card>
+        <Card  bordered={true} className="Card">
+          <img src={Product1} className="service"></img>
+          <h1 style={{color:"black",fontSize:"16px"}}>Product Name: Women's Clothes</h1>
+          <Button  sx={{backgroundColor:" darkgoldenrod",fontSize:"1.2rem",color:"black",marginLeft:"8rem",marginTop:"5px"}}>Shop Now</Button>
+        </Card>
+        <Card  bordered={true} className="Card">
+          <img src={Product2} className="service"></img>
+          <h1 style={{color:"black",fontSize:"16px"}}>Product Name: Men's Clothes</h1>
+          <Button  sx={{backgroundColor:" darkgoldenrod",fontSize:"1.2rem",color:"black",marginLeft:"8rem",marginTop:"5px"}}>Shop Now</Button>
+        </Card>
+
+
+        </div><br></br><br></br>
+        <div className="carde">
+        <Card  bordered={true} className="Card">
+          <img src={Product3 } className="service"></img>
+          <h1 style={{color:"black",fontSize:"16px"}}>Product Name: Sports</h1>
+          <Button  sx={{backgroundColor:" darkgoldenrod",fontSize:"1.2rem",color:"black",marginLeft:"8rem",marginTop:"5px"}}>Shop Now</Button>
+        </Card>
+        <Card  bordered={true} className="Card">
+          <img src={Product4} className="service"></img>
+          <h1 style={{color:"black",fontSize:"16px"}}>Product Name: Decoration</h1>
+          <Button  sx={{backgroundColor:" darkgoldenrod",fontSize:"1.2rem",color:"black",marginLeft:"8rem",marginTop:"5px"}}>Shop Now</Button>
+        </Card>
+        <Card  bordered={true} className="Card">
+          <img src={Product5} className="service"></img>
+          <h1 style={{color:"black",fontSize:"16px"}}>Product Name: Babby's Toys</h1>
+          <Button  sx={{backgroundColor:" darkgoldenrod",fontSize:"1.2rem",color:"black",marginLeft:"8rem",marginTop:"5px"}}>Shop Now</Button>
+        </Card>
+        </div>
+
+
+
+
+  </div>
+  <h1 className="Our">Our Team</h1>
+            <div className="site-card-wrapper">
+
+      <div className="crd">
+        <Card  bordered={true} className="Card">
+          <img src={Service} className="service"></img>
+          <h1 style={{color:"black",fontSize:"16px"}}> Name: Niyigena Claudine</h1>
+          <Button  sx={{backgroundColor:" darkgoldenrod",fontSize:"1.2rem",color:"black",marginLeft:"8rem",marginTop:"5px"}}>FrontEnd Developer</Button>
+        </Card>
+        <Card  bordered={true} className="Card">
+          <img src={Service1} className="service"></img>
+          <h1 style={{color:"black",fontSize:"16px"}}> Name: Uwase Yvone</h1>
+          <Button  sx={{backgroundColor:" darkgoldenrod",fontSize:"1.2rem",color:"black",marginLeft:"8rem",marginTop:"5px"}}>FrontEnd Developer</Button>
+        </Card>
+        <Card  bordered={true} className="Card">
+          <img src={Service3} className="service"></img>
+          <h1 style={{color:"black",fontSize:"16px"}}> Name: Stella Impuhwe </h1>
+          <Button  sx={{backgroundColor:" darkgoldenrod",fontSize:"1.2rem",color:"black",marginLeft:"8rem",marginTop:"5px"}}>Full Stack Developer</Button>
+        </Card>
+
+
+        </div><br></br>
+        <div className="carde">
+        <Card  bordered={true} className="Card">
+          <img src={Service4 } className="service"></img>
+          <h1 style={{color:"black",fontSize:"16px"}}> Name: Dusengemungu Marie Elise</h1>
+          <Button  sx={{backgroundColor:" darkgoldenrod",fontSize:"1.2rem",color:"black",marginLeft:"8rem",marginTop:"5px"}}>Full stackDeveloper</Button>
+        </Card>
+        <Card  bordered={true} className="Card">
+          <img src={Service5} className="service"></img>
+          <h1 style={{color:"black",fontSize:"16px"}}> Name: Hyacintha Niyonizeye</h1>
+          <Button  sx={{backgroundColor:" darkgoldenrod",fontSize:"1.2rem",color:"black",marginLeft:"8rem",marginTop:"5px"}}>FrontEnd Developer</Button>
+        </Card>
+        <Card  bordered={true} className="Card">
+          <img src={ Service6} className="service"></img>
+          <h1 style={{color:"black",fontSize:"16px"}}> Name: Aurore Iyokwizerwa</h1>
+          <Button  sx={{backgroundColor:" darkgoldenrod",fontSize:"1.2rem",color:"black",marginLeft:"8rem",marginTop:"5px"}}>FullStack Developer</Button>
+        </Card>
+
+        </div><br></br>
+        <div className='ct-about'>
+        <Card  bordered={true} className="Carde">
+          <img src={ Service6} className="services"></img>
+          <h1 style={{color:"black",fontSize:"16px"}}> Name:Scott Brian</h1>
+          <Button  sx={{backgroundColor:" darkgoldenrod",fontSize:"1.2rem",color:"black",marginLeft:"8rem",marginTop:"5px"}}>FullStack Developer</Button>
+        </Card>
+        <Card  bordered={true} className="Carde">
+          <img src={Product6} className="services"></img>
+          <h1 style={{color:"black",fontSize:"16px"}}> Name:Clemance IyoKwizerwa</h1>
+          <Button  sx={{backgroundColor:" darkgoldenrod",fontSize:"1.2rem",color:"black",marginLeft:"8rem",marginTop:"5px"}}>Backend Developer</Button>
+        </Card>
+        <Card  bordered={true} className="Carde">
+          <img src={ Product7} className="services"></img>
+          <h1 style={{color:"black",fontSize:"16px"}}> Name:Habimana Neema</h1>
+          <Button  sx={{backgroundColor:" darkgoldenrod",fontSize:"1.2rem",color:"black",marginLeft:"8rem",marginTop:"5px"}}>Ui/X Designer</Button>
+        </Card>
+        </div>
+
+
+        <div>
+        <h1 className="Our">Our Mission</h1>
+        <h2 className='mission' >An e-commerce website is one that allows people to buy and sell physical goods,
+           services, and digital products over the internet rather than at a brick-and-mortar location.<br></br> 
+           Through an e-commerce website, a business can process orders, accept payments,&nbsp; 
+          manage shipping and logistics, and provide customer service.
+          Ecommerce or electronic commerce is the trading of goods and services on the internet.&nbsp;  
+          It is your bustling city center &nbsp; 
+          or brick-and-mortar shop translated into zeroes and ones on the internet superhighway 
+          There are 3 key functions of e-Commerce  marketing, finance and supply chain &nbsp;  
+          which sit outside the set-up of your store website. You can't do e-Commerce 
+          without marketing your store, managing payments and managing deliveries. &nbsp; 
+          Each of these functions of e-Commerce come with their own set of challenges.</h2>
+  </div> 
+  <div>
+  <h1 className="Our">Our Vision</h1>
+  <h2 className='mission'>The ecommerce giant's mission is summed up with the statement: “Making commerce better for everyone.”
+  An e-commerce website is one that allows people to buy and sell physical goods,
+           services, and digital products over the internet rather than at a brick-and-mortar location.<br></br> 
+           Through an e-commerce website, a business can process orders, accept payments,&nbsp; 
+          manage shipping and logistics, and provide customer service.
+          Ecommerce or electronic commerce is the trading of goods and services on the internet.&nbsp;  
+          It is your bustling city center &nbsp; 
+          or brick-and-mortar shop translated into zeroes and ones on the internet superhighway 
+          There are 3 key functions of e-Commerce  marketing, finance and supply chain &nbsp;  
+          which sit outside the set-up of your store website. You can't do e-Commerce 
+          without marketing your store, managing payments and managing deliveries. &nbsp; 
+          Each of these functions of e-Commerce come with their own set of challenges.
+  </h2>
+    </div>   
+
+    <h2 className='h2-about'>You can join Us using this link:</h2>
+
+        <FacebookIcon sx={{fontSize:"5rem",marginLeft:"40rem",padding:"2px",background:"rgb(10, 10, 44)",color:"white",borderRadius:"50px"}}/>
+        <InstagramIcon sx={{fontSize:"5rem",background:"red",marginLeft:"2rem",color:"white",borderRadius:"50px"}}/>
+        <TwitterIcon sx={{fontSize:"5rem",background:"blue",marginLeft:"2rem",color:"white",borderRadius:"50px"}}/>
+
+
+  </div>
+  <Footer/>
+
+        </>     
+
+    );
+};
+
+export default About;