exercise api added

.env

@@ -0,0 +1 @@
+REACT_APP_RAPID_API_KEY = ee3a6cb0admshca0a7a068751ef7p11f58djsnb22efe380eb4

package.json

@@ -1,39 +1,42 @@
 {
-  "name": "my-fitness",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+    "name": "my-fitness",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/react": "^13.3.0",
+        "@testing-library/user-event": "^13.5.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-horizontal-scrolling-menu": "^2.7.1",
+        "react-loader-spinner": "^5.1.5",
+        "react-multi-carousel": "^2.8.2",
+        "react-router-dom": "^6.3.0",
+        "react-scripts": "5.0.1",
+        "web-vitals": "^2.1.4"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
 }

src/App.css

@@ -29,4 +29,21 @@
     transition: all 0.4s ease-out 0s;
     background-color: #2b70fa;
     position: relative;
+}
+
+.fitnss-title {
+    font-size: 44px;
+    line-height: 54px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: "Roboto", sans-serif;
+    font-weight: 900;
+    color: #0e1133;
+    margin: 0px;
 }

src/components/exercises/Exercise.jsx

@@ -0,0 +1,43 @@
+import React, { useEffect } from 'react'
+import { exerciseOptions, fetchData } from '../../utils/fetChData'
+import './exercise.css'
+import ExerciseCard from './ExerciseCard'
+
+const Exercise = ({exercise, setExercise, bodyPart}) => {
+
+    useEffect(() =>{
+        const fetchExercisesData = async () => {
+            let exercisesData = [];
+            if (bodyPart === 'all') {
+                exercisesData = await fetchData("https://exercisedb.p.rapidapi.com/exercises", exerciseOptions)
+            } else {
+                exercisesData = await fetchData(`https://exercisedb.p.rapidapi.com/exercises/bodyPart/${bodyPart}`, exerciseOptions)
+            }
+
+            setExercise(exercisesData);
+        }
+
+        fetchExercisesData();
+
+    },[bodyPart])
+
+  return (
+    <div className="container">
+          <div className="exericse-title">
+            <h3>Perfect Exercises <br/>for various body Parts</h3>
+            <p>The full monty spiffing good time no biggie cack grub fantastic. </p>
+          </div>
+          <div className="exercises-card">
+
+
+            <ExerciseCard exercise={exercise}/>
+
+
+
+          </div>
+
+        </div>
+  )
+}
+
+export default Exercise

src/components/exercises/ExerciseCard.jsx

@@ -0,0 +1,41 @@
+
+
+
+const ExerciseCard = ({exercise}) => {
+
+
+  return (
+    //  exercise.map((item) => (
+    //     <div key={item.id || item} className="card" 
+    //     onClick={()=>{
+    //     //   setBodyPart(bodyPart);
+    //     //   window.scrollTo({top: 2000, left:100, behavior:"smooth"})
+    //     }}>
+    //       <div className="card-container">
+    //           <div className="card-icon">
+    //               <img src={item.gifUrl} alt="card icon" />
+    //               <span>1</span>
+    //           </div>
+    //           <h4 className='card-title'>{item.name}</h4>
+    //           <p className='card-desc'>Mucker plastered bugger all mate morish are.</p>
+    //       </div>
+    //   </div>
+
+    // ))
+
+    exercise.map((item) => (
+        <div key={item.id || item.name} className="exercise-card">
+            <div className="exercise-thumnail">
+                <img src={item.gifUrl} alt={item.name} />
+            </div>
+            <div className="exercise-content">
+                <span>{item.target}</span>
+                <h3>{item.name}</h3>
+            </div>
+
+        </div>
+    ))
+  )
+}
+
+export default ExerciseCard

src/components/exercises/exercise.css

@@ -0,0 +1,44 @@
+.exercises-card {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 30px;
+}
+
+.exericse-title {
+    padding-bottom: 75px;
+    text-align: center;
+}
+
+.exericse-title h3 {
+    font-size: 44px;
+    line-height: 54px;
+}
+
+.exercise-card {
+    visibility: visible;
+    animation-duration: 3000ms;
+    animation-delay: 200ms;
+    animation-name: fadeInUp;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    margin-top: 30px;
+    border: 1px solid #f8452d;
+    text-align: center;
+    box-shadow: 10px 10px 5px 0px rgba(227, 23, 23, 0.75);
+    -webkit-box-shadow: 10px 10px 5px 0px rgba(227, 23, 23, 0.75);
+    -moz-box-shadow: 10px 10px 5px 0px rgba(227, 23, 23, 0.75);
+    padding: 30px;
+    border-radius: 20px;
+}
+
+.exercise-thumnail {
+    max-width: 100%;
+}
+
+.exercise-content h3 {
+    font-size: 18px;
+    font-weight: 700;
+    padding-bottom: 8px;
+}

src/components/header/Hero.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import './hero.css'
-import HeroImg from '../../assets/hero-thumb-1.png'
+import HeroImg from '../../assets/w1.png'
 
 const Hero = () => {
   return (
@@ -9,7 +9,7 @@ const Hero = () => {
         <div className="hero-left">
           <div className="hero-title">
             <h3>Welcome To Fitness</h3>
-            <h1>Manage it all, inthis <br/> all new system</h1>
+            <h1>Work Hard To<br/> Get a Better Life</h1>
           </div>
           <div className="hero-text">
             <p>Hanky panky lavatory up the duff jolly good cack brolly is chinwag <br/>zonked happy days sloshed.</p>

src/components/header/hero.css

@@ -1,5 +1,5 @@
 .hero {
-    padding-top: 150px;
+    padding-top: 200px;
     padding-bottom: 110px;
     overflow: hidden;
     position: relative;
@@ -9,6 +9,7 @@
     background-repeat: no-repeat;
     display: flex;
     align-items: center;
+    justify-content: space-between;
 }
 
 .hero-left {
@@ -23,7 +24,7 @@
 }
 
 .hero-title>h1 {
-    font-size: 70px;
+    font-size: 60px;
     line-height: 70px;
     margin-top: 10px;
     margin-bottom: 22px;
@@ -45,14 +46,15 @@
 }
 
 .hero-right img {
-    width: 100%;
+    max-width: 100%;
+    width: auto;
+    height: 500px;
 }
 
-.hero-right-img {
-    padding-left: 240px;
-}
+.hero-right-img {}
 
-.hero-right-img::before {
+
+/* .hero-right-img {
     position: absolute;
     content: '';
     left: 78%;
@@ -63,7 +65,7 @@
     background: #ff3e66;
     border-radius: 50%;
     z-index: -1;
-}
+} */
 
 .hero-ios-btn {
     background: #0e1133;

src/components/navbar/Navbar.jsx

@@ -1,12 +1,26 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import './navbar.css'
 
 import FitnessLogo from '../../assets/logo.png'
 import { Link } from 'react-router-dom'
 
 const Navbar = () => {
+    useEffect(() => {
+        window.addEventListener('scroll', isSticky);
+        return () => {
+            window.removeEventListener('scroll', isSticky);
+        };
+    });
+
+
+    /* Method that will fix header after a specific scrollable */
+    const isSticky = (e) => {
+        const header = document.querySelector('.fitness-navbar');
+        const scrollTop = window.scrollY;
+        scrollTop >= 250 ? header.classList.add('fitness__navbar-sticky') : header.classList.remove('fitness__navbar-sticky');
+    };
   return (
-    <div className='fitness__navbar'>
+    <div className=' fitness-navbar'>
         <div className="container">
             <div className="fitness__navbar-container">
                 <div className="fitness__navbar-logo">

src/components/navbar/navbar.css

@@ -1,11 +1,25 @@
-.fitness__navbar {
+.fitness-navbar {
     padding-top: 30px;
+    position: absolute;
     left: 0;
     top: 0;
     right: 0;
     z-index: 999;
 }
 
+.fitness__navbar-sticky {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    z-index: 1010;
+    background: #fff;
+    box-shadow: 0 15px 30px 0 #0000000f;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    transition: all 0.7s;
+}
+
 .fitness__navbar-container {
     display: flex;
     flex: 1;

src/components/services/Cards.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import './cards.css'
+import CardIcon from '../../assets/icons/1.png'
+
+const Cards = ({data,bodyPart,setBodyPart}) => {
+  console.log(bodyPart);
+  return (
+
+    data.map((bodyPart) => (
+        <div key={bodyPart.id || bodyPart} className="card" 
+        onClick={()=>{
+          setBodyPart(bodyPart);
+          window.scrollTo({top: 2000, left:100, behavior:"smooth"})
+        }}>
+          <div className="card-container">
+              <div className="card-icon">
+                  <img src={CardIcon} alt="card icon" />
+                  <span>1</span>
+              </div>
+              <h4 className='card-title'>{bodyPart}</h4>
+              <p className='card-desc'>Mucker plastered bugger all mate morish are.</p>
+          </div>
+      </div>
+
+    ))
+
+  )
+}
+
+export default Cards