GSG-G11 · AhmedQeshta · May 29, 2022 · May 29, 2022 · May 29, 2022 · May 29, 2022
diff --git a/README.md b/README.md
@@ -1,7 +1,26 @@
-# Fitness-house
-a website that give the user the ability to search about Gyms suits him
+<!-- PROJECT LOGO -->
+<br />
+<div align="center">
+  <a href="https://github.com/GSG-G11/Fitness-house">
+    <img src="https://user-images.githubusercontent.com/38624002/171007838-db2ba64e-e990-47d8-9277-c41154326f72.png" alt="Logo" width="150" height="80">
+  </a>
+
+<h3 align="center">Fit house - فت هاوس</h3>
+
+  <p align="center">
+    A website that give the user the ability to search about Gyms suits him
+    <br />
+    <br />
+    <a href="https://fit-house.herokuapp.com/" target="_blank">View Demo</a>
+    ·
+    <a href="https://www.figma.com/file/qGg34gxhl1FXBYBlldKiYy/%D8%AA%D9%85%D8%B1%D9%8A%D9%86">Design Link</a>
+    ·
+    <a href="https://github.com/GSG-G11/Fitness-house/issues">Report Bug</a>
+    ·
+    <a href="https://github.com/GSG-G11/Fitness-house/issues">Request Feature</a>
+  </p>
+</div>
 
-[View Demo](https://fit-house.herokuapp.com/) . [Design Link](https://www.figma.com/file/qGg34gxhl1FXBYBlldKiYy/%D8%AA%D9%85%D8%B1%D9%8A%D9%86) · [Report Bug](https://github.com/GSG-G11/Fitness-house/issues) · [Request Feature](https://github.com/GSG-G11/Fitness-house/issues)
 
 <details>
   <summary>Table of Contents</summary>
@@ -45,9 +64,10 @@ a website that give the user the ability to search about Gyms suits him
   </ol>
 </details>
 
+
 ### About The Project <span id="about-the-project"></span>
 
-![](https://i.imgur.com/aBY2TC6.png)
+![about the project](https://user-images.githubusercontent.com/38624002/171005793-537ea717-485c-4f80-b2b8-e98f1d058652.png)
 
 
 ### Problem <span id="problem"></span>

diff --git a/client/public/index.html b/client/public/index.html
@@ -27,7 +27,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Fitness House</title>
+    <title>Fit House</title>
   </head>
   <body>
     <noscript>A website that give the user the ability to search about Gyms suits him </noscript>

diff --git a/client/public/logo.png b/client/public/logo.png
diff --git a/client/src/Components/HomePage/Slider/Style.css b/client/src/Components/HomePage/Slider/Style.css
@@ -18,8 +18,8 @@
 }
 
 .background {
-  background: rgb(38, 104, 122);
-  background: linear-gradient(150deg, #26687a77 0%, #a5c9e84c 100%);
+  background: #ffffff;
+  background: linear-gradient(150deg, #4b919248 0%, #86c1c215 100%);
   height: 100%;
   width: 100%;
   position: absolute;

diff --git a/client/src/Components/HomePage/Slider/index.jsx b/client/src/Components/HomePage/Slider/index.jsx
@@ -4,16 +4,13 @@ import SimpleImageSlider from "react-simple-image-slider";
 
 const images = [
   {
-    url: "https://bit.ly/3skUbkM",
+    url: "https://user-images.githubusercontent.com/38624002/171004645-076d1913-6820-4758-b1b8-23fa482dc1f6.png",
   },
   {
-    url: "https://bit.ly/3siJZsQ",
+    url: "https://user-images.githubusercontent.com/38624002/171003628-f1102917-7af5-471c-afc1-20a0c793180f.png",
   },
   {
-    url: "https://bit.ly/3KVru4l",
-  },
-  {
-    url: "https://bit.ly/3vUpdCn",
+    url: "https://user-images.githubusercontent.com/38624002/171004408-4050e3da-19d6-4903-9ab0-cfba812b4051.png",
   },
 ];
 
@@ -25,7 +22,7 @@ function Slider() {
         width="100%"
         loop
         autoPlay
-        autoPlayDelay={5.0}
+        autoPlayDelay={10}
         height={504}
         images={images}
         showBullets

diff --git a/client/src/Components/Layout/Navbar/index.jsx b/client/src/Components/Layout/Navbar/index.jsx
@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 
 import {
+  Avatar,
   Box,
   Button,
   Divider,
@@ -137,7 +138,11 @@ function Navbar() {
         <div className="display-raw">
           <div className="display-raw">
             <Link to="/" className="brand-logo">
-              فت هاوس
+              <Avatar
+                alt="logo"
+                src="/logo.png"
+                sx={{ width: "100%", height: 35, borderRadius: 0 }}
+              />
             </Link>
             <ul className="display-raw nav-list">
               {listNavbar.map(({ link, text }) => (
@@ -156,11 +161,15 @@ function Navbar() {
         </div>
       </nav>
 
-      {/*  For mobile Version */}
+      {/*  For mobile Version  */}
       <nav>
         <div className="sub__container display-raw show-mobile">
           <Link to="/" className="brand-logo">
-            فت هاوس
+            <Avatar
+              alt="logo"
+              src="/logo.png"
+              sx={{ width: "100%", height: 35, borderRadius: 0 }}
+            />
           </Link>
 
           <div className="left-nav-mobile">

diff --git a/client/src/Components/Layout/Navbar/style.css b/client/src/Components/Layout/Navbar/style.css
@@ -98,7 +98,7 @@ a.nav-item:hover::after {
   border-radius: 5px;
   background: #fff;
   border: 1px solid #28768c;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);
   transition: all 0.3s ease-in-out;
   color: #28768c;
   margin: 0 0.5rem;

diff --git a/client/src/Components/Loading/index.jsx b/client/src/Components/Loading/index.jsx
@@ -0,0 +1,13 @@
+import { CircularProgress } from "@mui/material";
+import React from "react";
+
+import "./styles.css";
+
+export default function Loading() {
+  return (
+    <div className="loading__container">
+      <CircularProgress />
+      <span>جاري التحميل . يرجي الانتظار</span>
+    </div>
+  );
+}
diff --git a/client/src/Components/Loading/styles.css b/client/src/Components/Loading/styles.css
@@ -0,0 +1,18 @@
+.loading__container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 90vh;
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  color: #26829b;
+  flex-direction: column;
+  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.loading__container span {
+  font-size: 1.5rem;
+  line-height: 1.5rem;
+  margin-top: 1.1rem;
+}
+
diff --git a/client/src/Components/index.js b/client/src/Components/index.js
@@ -5,6 +5,7 @@ import { TopGymCards, JoinUs, OfferForYou, Slider } from "./HomePage";
 import { Navbar, Footer } from "./Layout";
 import { GymReviews, GymProfile, GymImages } from "./SingleGym";
 import Login from "./LoginPage";
+import Loading from "./Loading";
 
 export {
   Filter,
@@ -23,4 +24,5 @@ export {
   UpdateProfile,
   UploadImages,
   Login,
+  Loading,
 };
diff --git a/client/src/app.css b/client/src/app.css
@@ -56,12 +56,12 @@ body #root {
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: #276678;
+  background: #b0b0b0;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: #1b4a57;
+  background: #717171;
 }
 
 select,
@@ -114,6 +114,7 @@ a:focus {
 }
 
 .sub__container {
+  width: 100%;
   padding-left: 50px;
   padding-right: 50px;
 }
@@ -139,7 +140,8 @@ a:focus {
 @media screen and (min-width: 1600px) {
   .sub__container {
     max-width: 1600px;
-    margin: 0 auto;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 

diff --git a/client/src/index.js b/client/src/index.js
@@ -1,17 +1,22 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
 import { BrowserRouter as Router } from "react-router-dom";
-import App from "./App";
+import { Loading } from "./Components";
+
 import store from "./Store";
 import Theme from "./Theme";
 
+const AppPage = lazy(() => import("./App"));
+
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <Theme>
     <Router>
       <Provider store={store}>
-        <App />
+        <Suspense fallback={<Loading />}>
+          <AppPage />
+        </Suspense>
       </Provider>
     </Router>
   </Theme>

diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "start": "NODE_ENV=production node ./dist",
     "lint-server": "eslint --fix --ext .js,.ts server/",
     "db:build": "cross-env DB_BUILD=true NODE_ENV=dev ts-node ./server/database/fakeData/index.ts",
+    "db:build-production": "cross-env DB_BUILD=true NODE_ENV=production ts-node ./server/database/fakeData/index.ts",
     "heroku-postbuild": " cd client && npm i && npm run build",
     "tsc": "tsc",
     "postinstall": "npm run tsc"

diff --git a/server/database/fakeData/images.json b/server/database/fakeData/images.json
@@ -1,18 +1,13 @@
 {
   "images": [
-    {
-      "pathUrl": "https://user-images.githubusercontent.com/38624002/170736504-90b92b94-1971-4345-894a-b8c9c4c3ecaa.jpg",
-      "publicKey": "gyms/170736504-90b92b94-1971-4345-894a-b8c9c4c3ecaa",
-      "gymId": 1
-    },
     {
       "pathUrl": "https://user-images.githubusercontent.com/38624002/170736675-75716bd3-7465-4e62-bcef-c054f563ef4d.jpg",
-      "publicKey": "gyms/170736675-75716bd3-7465-4e62-bcef-c054f563ef4d",
+      "publicKey": "gyms/170736504-90b92b94-1971-4345-894a-b8c9c4c3ecaa",
       "gymId": 1
     },
     {
       "pathUrl": "https://user-images.githubusercontent.com/38624002/170736846-2ab7b88e-0cbe-437f-aae5-c9c29927d11d.jpg",
-      "publicKey": "gyms/170736846-2ab7b88e-0cbe-437f-aae5-c9c29927d11d",
+      "publicKey": "gyms/170736675-75716bd3-7465-4e62-bcef-c054f563ef4d",
       "gymId": 1
     },
     {