customer services added

src/App.js

@@ -16,6 +16,7 @@ import Thanku from './Thanku';
 import Navbar from './Navbar';
 
 import Footer from './Footer';
+import Customer from './Customer';
 
 
 
@@ -64,6 +65,11 @@ const[{},dispatch]=useStateValue();
 
           <Thanku/>
           </Route>
+          <Route path="/customer">
+        <Header/>
+
+          <Customer/>
+          </Route>
         <Route path="/Payment">
           <Header/>
           {/* wraps the payment elements,
@@ -88,6 +94,7 @@ const[{},dispatch]=useStateValue();
       <Home/>
 
       </Route>
+
       </Switch>
       <Footer/>
     </div>

src/Customer.css

@@ -0,0 +1,42 @@
+.custom-all{
+    padding: 40px 100px;
+}
+.custom-in h2{
+    font-weight: 500;
+}
+.custom-in h3{
+    font-weight: 500;
+}
+
+.box{
+    display: flex;
+    padding: 10px 10px;
+    border: 1px solid rgb(198, 183, 211);
+    border-radius: 1rem;
+    gap: 20px;
+    width: 350px;
+}
+.text{
+    display: flex;
+    flex-direction: column;
+}
+.text h5{
+    font-weight: 400;
+}
+.cover{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    /* border: 1px solid red; */
+}
+.sub{
+    color: grey;
+}
+.se{
+    font-weight: 500;
+}
+.search{
+    width: 100%;
+   border: 1px solid black;
+   background: none;
+}

src/Customer.js

@@ -0,0 +1,100 @@
+import React from 'react'
+import "./Customer.css";
+// import HeaderSearchBar from './HeaderSearchBar';
+import SearchIcon from "@material-ui/icons/Search";
+
+function Customer() {
+  return (
+    <div className='custom-all'>
+<div className='custom-in'>
+   <h2> Hello. What can We help you with?</h2>
+   <br/>
+   <hr/>
+<br/>
+<h3>Some things you can do here</h3>
+<div className='cover'>
+        {
+            Items.map((item)=>{
+             return    <div className='box'>
+                 <img src={item.img} style={{width:"50px" ,height:"50px"}}/>
+                 <div className='text'>
+                    <h5> {item.Head}</h5>
+                     <span className='sub'>{item.subhead}</span>
+                     <span className='sub'>
+                         {item.s1}
+                         </span>
+
+                 </div>
+
+
+    </div>
+            })
+        }
+
+        </div>
+        <hr/>
+        <p className='se'>Find more Solutions  type something like , "question about a charge"</p>
+        <input type="search" placeholder="🔍"  className='search'/>
+</div>
+    </div>
+  )
+}
+
+export default Customer
+
+
+const Items =[
+    {
+img:"https://m.media-amazon.com/images/G/31/x-locale/cs/help/images/gateway/Box-t3.png",
+Head:"Your Orders",
+subhead:"Track Packages Edit or cancel orders",
+s1:"Edit or cancel orders"
+    },
+    {
+        img:"https://m.media-amazon.com/images/G/31/x-locale/cs/help/images/gateway/returns-box-blue.png",
+Head:"Return and Refunds",
+subhead:"Return or Exchange Item",
+s1:"Print return mailing labels"
+    },
+    {
+        img:"https://m.media-amazon.com/images/G/31/x-locale/cs/help/images/gateway/manage-address.png",
+Head:"Manage Address",
+subhead:"Update your address",
+s1:"Add address ,landmark details"
+
+    },
+    {
+        img:"https://m.media-amazon.com/images/G/31/x-locale/cs/help/images/gateway/Prime_clear-bg.png",
+    Head:"Manage Prime",
+    subhead:"View your benefits",
+    s1:"membership details"
+
+    },
+    {
+        img:"https://m.media-amazon.com/images/G/31/x-locale/cs/help/images/gateway/Payments_clear-bg-t3.png",
+Head:"Payment Settings",
+subhead:"Add or Edit payment method",
+s1:"Change expired debit or credit card"
+    },
+    {
+        img:"https://m.media-amazon.com/images/G/31/x-locale/cs/help/images/gateway/IN-your-account.png",
+Head:"Account Settings",
+subhead:"change your email or password",
+s1:"Update login information"
+    },
+    {
+        img:"https://m.media-amazon.com/images/G/31/x-locale/cs/help/images/gateway/faq.png",
+Head:"Amazon and COVID-19",
+subhead:"Impacts on Orders and Deliveries"
+    },
+
+
+    {
+        img:"https://m.media-amazon.com/images/G/31/x-locale/cs/help/images/gateway/family_device.png",
+Head:"Digital Service and Device Support",
+subhead:"Find device help and support",
+s1:"troubleshoot device issues"
+    }
+
+
+]

src/Navbar.js

@@ -1,7 +1,13 @@
 import React from "react";
 import "./Navbar.css";
+
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+
 function Navbar() {
+
+
+
+
   return (
     <div>
       <nav
@@ -35,11 +41,20 @@ function Navbar() {
         <a class="navbar-brand white-text mr-auto" href="#" style={{fontSize:"10px",  fontWeight:"bold"}}>
           Amazon Pay
         </a>
+
+       <a class="navbar-brand white-text mr-auto" href="/customer" style={{fontSize:"13px",  marginLeft:"-760px"}}>
+          Customer services
+        </a>
+
+        <a class="navbar-brand white-text mr-auto" href="#" style={{fontSize:"13px",  marginLeft:"-760px"}}>
+          Gift Cards
+
         <a class="navbar-brand white-text mr-auto" href="#" style={{fontSize:"10px",  fontWeight:"bold" }}>
          Gift cards
         </a>
         <a class="navbar-brand white-text mr-auto" href="#" style={{fontSize:"10px",  fontWeight:"bold"}}>
         Today's Deals
+
         </a>
         <a class="navbar-brand white-text mr-auto" href="#" style={{fontSize:"10px",  fontWeight:"bold"}}>
         Sell