From 4a9ad835bb66d24298d7211ea950e7aae91229f0 Mon Sep 17 00:00:00 2001
From: hosead6168 <dominique11h@yahoo.com>
Date: Mon, 21 Mar 2022 04:35:10 -0500
Subject: [PATCH] fix(*): added new logo

---
 src/Components/Footer/Footer.jsx     | 65 +++++++++++++++++++++++++++-
 src/Components/Loading/ProLoader.css | 43 ++++++++++++++++++
 src/Components/Loading/ProLoader.jsx | 17 ++++++++
 src/Components/Product/Products.jsx  |  4 +-
 4 files changed, 125 insertions(+), 4 deletions(-)
 create mode 100644 src/Components/Loading/ProLoader.css
 create mode 100644 src/Components/Loading/ProLoader.jsx

diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx
index 934ca1fe..2fb7466b 100755
--- a/src/Components/Footer/Footer.jsx
+++ b/src/Components/Footer/Footer.jsx
@@ -4,9 +4,70 @@ import {StyledHr} from '../../Layout/Hr/styledHr';
 
 import SocialMediaTags from '../SocialMediaTags/SocialMediaTags';
 
-const Footer = () => {
+const Footer = (isHome) => {
 
-    const year = new Date().getFullYear()
+    const year = new Date().getFullYear();
+
+    if (isHome) {
+      return (
+      <>
+        <footer className="footer">
+            <div className="container bottom_border">
+                <div className="row">
+                    <div className=" col-sm-4 col-md col-12 col">
+                        <h5 className="footer_h5 col_white_amrc pt2">Find Me</h5>
+                        <p className="mb10">HoseaCodes’ mission statement is to build the future while empowering every person and every organization on the planet to achieve more. </p>
+                        <p><i className="fa fa-location-arrow"></i> Houston, TX </p>
+                        <p><i className="fa fa-phone"></i>  +1-281-780-8424</p>
+                        <p><i className="fa fa fa-envelope"></i> <a href="mailto:mr.dhosea@gmail.com"> mr.dhosea@gmail.com </a> </p>
+                    </div>
+                    <div className=" col-sm-4 col-md  col-6 col dompl">
+                        <h5 className="footer_h5 col_white_amrc pt2">Built With</h5>
+                        <ul className="footer_ul_amrc" >
+                            <li> <a href="https://reactjs.org/docs/getting-started.html">React.js</a></li>
+                            <li> <a href="https://nodejs.org/en/docs/guides/getting-started-guide/">Node.js</a></li>
+                            <li><a href="https://material-ui.com/">Material UI</a></li>
+                            <li><a href="https://react-bootstrap.github.io/">Bootstrap</a></li>
+                            <li><a href="https://sass-lang.com/">SCSS</a></li>
+                            <li><a href="https://styled-components.com/">Styled Components</a></li>
+                        </ul>
+                    </div>
+                    <div className=" col-sm-4 col-md  col-6 col">
+                        <h5 className="footer_h5 col_white_amrc pt2">Quick links</h5>
+                        <ul className="footer_ul_amrc">
+                            <li><a href="https://www.remove.bg/upload">Remove Background</a></li>
+                            <li><a href="/client">Client Details</a></li>
+                            <li><a href="/project">Project Details</a></li>
+                            <li><a href="/shop">Hoseacodes Shop</a></li>
+                            <li><a href="http://webenlance.com">Image Cropping</a></li>
+                        </ul>
+                    </div>
+                    <div className=" col-sm-4 col-md col-12 col twitter-footer">
+                        <h5 className="footer_h5 col_white_amrc pt2">Follow Me On</h5>
+                        {/* Twitter Profile Tweets */}
+                        <ul className="footer_ul2_amrc">
+                            <li><a href="/"><i className="fab fa-twitter fleft padding-right"></i> </a><p>Day 56 #100DaysOfCode I added a markdown preview...<a href="https://twitter.com/DominiqueRHosea/status/1382724497954930693">twitter.com/status/Day56</a></p></li>
+                            <li><a href="/"><i className="fab fa-twitter fleft padding-right"></i> </a><p>Day 55 #100DaysOfCode I revisted solidity smart ...<a href="https://twitter.com/DominiqueRHosea/status/1382215669115080705">twitter.com/status/Day55</a></p></li>
+                            <li><a href="/"><i className="fab fa-twitter fleft padding-right"></i> </a><p>Received my work laptop. I’m so excited!...<a href="https://twitter.com/DominiqueRHosea/status/1381995531375890437">twitter.com/status/startjob</a></p></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div className="container col-md ">
+                <ul className="foote_bottom_ul_amrc">
+                    <li><a href="/">Home</a></li>
+                    <li><a href="/about">About</a></li>
+                    <li><a href="/blog">Blog</a></li>
+                    <li><a href="/contact">Contact</a></li>
+                </ul>
+                {/* <!--foote_bottom_ul_amrc ends here--> */}
+                <p className="text-center">All Rights Reserved, &copy; {year} Hosea Codes</p>
+                <SocialMediaTags />
+            </div>
+        </footer>
+      </>
+    )
+}
 
     return (
       <>
diff --git a/src/Components/Loading/ProLoader.css b/src/Components/Loading/ProLoader.css
new file mode 100644
index 00000000..18843709
--- /dev/null
+++ b/src/Components/Loading/ProLoader.css
@@ -0,0 +1,43 @@
+.loading-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  z-index: 99;
+}
+
+.logo-loader {
+  height: 35rem;
+  width: 35rem;
+}
+
+.loading-bar {
+  width: 30rem;
+  height: 2px;
+  background: #cfcfcf;
+  margin: 22px;
+  position: relative;
+  overflow: hidden;
+}
+
+.loading-bar::before {
+  content: "";
+  width: 68px;
+  height: 2px;
+  background: #050a30;
+  position: absolute;
+  left: -34px;
+  animation: bluebar 1.5s infinite ease;
+}
+
+@keyframes bluebar {
+  50% {
+    left: 25rem;
+  }
+}
diff --git a/src/Components/Loading/ProLoader.jsx b/src/Components/Loading/ProLoader.jsx
new file mode 100644
index 00000000..5bd9d4f8
--- /dev/null
+++ b/src/Components/Loading/ProLoader.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import './ProLoader.css';
+import logo from '../../Assets/Images/newLogo.png';
+
+const ProLoader = () => {
+  return (
+    <div class="loading-screen">
+      <div class="loading-animation">
+        <img src={logo} alt="Linkedin logo" width='50rem' class="logo-loader"/>
+        {/* <img src="https://i.ibb.co/nf2M1fs/linkedin.png" alt="Linkedin logo" class="logo-loader"/> */}
+        <div class="loading-bar"></div>
+    </div>
+  </div>
+  )
+}
+
+export default ProLoader;
diff --git a/src/Components/Product/Products.jsx b/src/Components/Product/Products.jsx
index 72f9d3a3..ce64106a 100644
--- a/src/Components/Product/Products.jsx
+++ b/src/Components/Product/Products.jsx
@@ -3,7 +3,7 @@ import React, { useContext, useState } from 'react';
 import axios from 'axios'
 import LoadMore from './LoadMore'
 import Masonry from 'react-masonry-css'
-import Loading from '../Loading/Loading';
+import Loading from '../Loading/ProLoader';
 import ProductItem from './ProductItem';
 import { GlobalState } from '../../GlobalState';
 import './Products.css';
@@ -65,7 +65,7 @@ const Products = () => {
         900: 1
       };
 
-    if (loading) return <div className="products"><Loading /></div>
+    if (loading) return <div><ProLoader /></div>
     console.log(products)
     return (
         <>