Merge branch 'main' into country

dev/deployment.yaml

@@ -0,0 +1,20 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: amazon-clone
+spec:
+  replicas: 1
+  revisionHistoryLimit: 3
+  selector:
+    matchLabels:
+      app: amazon-clone
+  template:
+    metadata:
+      labels:
+        app: amazon-clone
+    spec:
+      containers:
+      - image: jaideep29/zomato:zomato-clone
+        name: amazon-clone
+        ports:
+        - containerPort: 80

dev/service.yaml

@@ -0,0 +1,11 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: amazon-clone
+spec:
+  ports:
+  - port: 80
+    targetPort: 80
+  selector:
+    app: amazon-clone
+

package.json

@@ -25,14 +25,15 @@
     "react-currency-format": "^1.1.0",
     "react-dom": "^17.0.2",
     "react-flip-move": "^3.0.4",
+    "react-helmet-async": "^1.3.0",
     "react-router-dom": "^5.3.0",
     "react-scripts": "^4.0.3",
     "stripe": "^8.176.0",
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "react-scripts --openssl-legacy-provider start",
+    "build": "react-scripts --openssl-legacy-provider build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",

public/index.html

@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Amazon Clone Made With ReactJs" />
+  <meta name="keywords" content="Amazon Clone Reactjs Buy clothes Laptops watches books bags shoes digial accessories mobile">
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
   <!--
       manifest.json provides metadata used when your web app is installed on a

src/App.js

@@ -1,9 +1,7 @@
-
 import React, { useEffect, useState } from 'react';
 import Header from './components/header/Header';
 import Home from './pages/home/Home';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
-
 import Checkout from './components/checkOut/Checkout';
 import Login from './pages/login/Login';
 import { auth } from './firebase';
@@ -56,8 +54,10 @@ function App() {
       }
     });
   }, []);
+  const helmetContext = {};
   return (
     <>
+
       <Router>
         <div className="App">
           <Switch>

src/Categories/AllCategories.js

@@ -5,14 +5,16 @@ import { Link } from 'react-router-dom';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import "./AllCategories.css"
+import usePageMeta from '../hooks/usePageMeta';
 
 function AllCategories() {
+  usePageMeta("All Categories | amazon-clone","All Categories - Online Shoppping site");
   return (
     <>
       <div className="shop-by-category-heading">
         <h1>Shop By Category</h1>
       </div>
-
+      
       <Row className='rows'>
         <Col>
           <Card style={{ width: '18rem' }}>
@@ -68,7 +70,7 @@ function AllCategories() {
           </Card>
         </Col>
       </Row>
-
+      
     </>
   )
 }

src/Categories/BooksToys/BookToys.js

@@ -1,11 +1,12 @@
 import React from 'react'
 import Product from '../../components/product/Product';
 import { useStateValue } from '../../context/StateProvider';
+import usePageMeta from '../../hooks/usePageMeta';
 import "./BookToys.css"
 
 
 function BookToys(id, title, price, image, rating, reviews) {
-
+   usePageMeta("Books and toys - Amazon Clone","Shop online buy toys, books")
   const products = [
     {
       title:'Storio Kids Toys LCD Writing Tablet 8.5Inch E-Note Pad Best Birthday Gift for Girls Boys',

src/Categories/Electronics/Electronics.js

@@ -1,8 +1,10 @@
 import React from 'react'
 import Product from '../../components/product/Product'
+import usePageMeta from '../../hooks/usePageMeta'
 import "./Electronics.css"
 
 function Electronics() {
+  usePageMeta("Electronics - Amazon Clone","Shop online digital products using amazon clone");
   const products=[{
 title:"boAt Airdopes 121v2 True Wireless Earbuds with Upto 14 Hours Playback, 8MM Drivers, Battery Indicators,",
 price:999,

src/Categories/FashionBeauty/FashionBeauty.js

@@ -1,9 +1,10 @@
 import React from 'react'
 import "./FashionBeauty.css"
 import Product from '../../components/product/Product'
+import usePageMeta from '../../hooks/usePageMeta'
 
 function FashionBeauty() {
-
+  usePageMeta("Fashion Beauty - Amazon Clone","By Shoes Clothes, Branded Clothes, Denim Watches");
   const products = [
     {
       title:"Men's Cotton Blend Full Sleeve Shirt | Stylish Printed Casual Wear Shirt for",

src/components/checkOut/Checkout.js

@@ -8,8 +8,10 @@ import FlipMove from "react-flip-move";
 import CurrencyFormat from "react-currency-format";
 import Navbar from "../navbar/Navbar";
 import { useStateValue } from "../../context/StateProvider";
+import usePageMeta from "../../hooks/usePageMeta";
 
 function Checkout({ price }) {
+  usePageMeta("Checkout - Amazon Clone","")
   const [{ basket, user }, dispatch] = useStateValue();
 
   const Finalproducts = ({ basket }) => (

src/components/footer/Footer.js

@@ -2,9 +2,15 @@ import React from 'react'
 import "./footer.css"
 import { useState } from 'react';
 import Divider from '@material-ui/core/Divider';
+
 import amnLogo from '../src/assets/amazon-logo.png';
+
+import logo from './amazon-logo.png';
+
 function Footer() {
 
+  const d = new Date()
+  let year = d.getFullYear();
 
   //back to top-->
   const [visible, setVisible] = useState(false)
@@ -126,6 +132,7 @@ function Footer() {
       <div className='footer-line'>
       </div>
       <div className="rest-footer-2">
+
         <img src={amnLogo} alt="logo"></img>
         <div className='footer-countries'>
           <div className='countries'>
@@ -150,6 +157,33 @@ function Footer() {
 
           </div>
         </div>
+
+        <ul>
+          <li><img src={logo} alt="logo" /></li>
+          <li><span>English</span></li>
+        </ul>
+      </div>
+      <div className='countries'>
+        <ul>
+          <li>Australia</li>
+          <li>Brazil</li>
+          <li>Canada</li>
+          <li>China</li>
+          <li>France</li>
+          <li>Germany</li>
+          <li>Italy</li>
+          <li>Japan</li>
+          <li>Mexico</li>
+          <li>Netherlands</li>
+          <li>Poland</li>
+          <li>Singapore</li>
+          <li>Spain</li>
+          <li>Turkey</li>
+          <li>United Arab Emirates</li>
+          <li>United Kingdom</li>
+          <li>United States</li>
+        </ul>
+
       </div>
       <div className="base">
         <div className='upper-base'>
@@ -171,7 +205,7 @@ function Footer() {
         </div>
         <div className='lower-base'>
           <span className="text-gray-400">
-            &copy; 1996-2021, Amazon.com, Inc. or its affiliates
+            &copy; 1996-{year}, Amazon.com, Inc. or its affiliates
           </span>
         </div>
 

src/components/footer/footer.css

@@ -38,10 +38,14 @@ a {
     background-color: #222f3f;
     padding: 3% 10%;
     text-align: center;
+
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+
+    margin-bottom: -3.5rem;
+
 }
 
 .footer-countries {
@@ -69,7 +73,53 @@ a {
 
 .rest-footer-2 img {
     width: 7rem;
-
+
+    height: 30px;
+}
+
+.rest-footer-2 ul {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    margin: 3rem;
+}
+
+.rest-footer-2 ul li {
+    list-style: none;
+    margin-left: 2rem;
+    margin-right: 2rem;
+}
+
+.rest-footer-2 ul li span {
+    background-color: #222f3f;
+    border: 1px solid #adadad;
+    border-radius: 3px;
+    padding: 7.5px 15px;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.countries ul{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    background-color: #222f3f;
+    text-align: center;
+    margin: 0;
+}
+
+.countries ul li {
+    color: #fff;
+    margin: 10px;
+    cursor: pointer;
+    list-style: none;
+    padding: 8px;
+    font-size: 1rem;
+    font-weight: 500;
+
 }
 
 .footer-line {