Merge pull request #30 from Iraq-WBC-Capstones-2020/15-Components/Footer

components > Footer

src/components/Card/LandingPageCard/LandingPageCard.js

@@ -1,15 +1,22 @@
 import React from 'react';
 import propTypes from 'prop-types';
+import { motion } from 'framer-motion';
+
 const LandingPageCard = ({ image, title }) => {
   return (
-    <>
-      <div className=" max-h-lg max-w-sm sm:w-1/2 lg:w-1/4  overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 rounded">
-        <img className="w-full" src={image} alt="Train to Maintain landing" />
-        <div className="font-bold text-xl text-purple-600 text-center p-10">
-          {title}
-        </div>
+    <motion.div
+      whileHover={{ scale: 1.02 }}
+      className="max-h-lg max-w-sm sm:w-1/2 lg:w-1/4 overflow-hidden shadow-2xl"
+    >
+      <img
+        className="h-64 w-full mx-auto object-cover"
+        src={image}
+        alt="Train to Maintain landing"
+      />
+      <div className="font-bold text-2xl text-purple-600 text-center p-5">
+        {title}
       </div>
-    </>
+    </motion.div>
   );
 };
 LandingPageCard.propTypes = {

src/components/Footer/Footer.js

@@ -1,7 +1,49 @@
 import React from 'react';
+import workoutImage from './assets/workoutImage.jpg';
+import { Link } from 'react-router-dom';
 
 const Footer = () => {
-  return <div>Footer</div>;
-};
+  return (
+    <div className=" sm:h-auto lg:h-64 flex lg:flex-row xl:flex-row flex-col md:flex-row justify-between items-center text-secondary">
+      <img
+        src={workoutImage}
+        className="object-cover bg-center h-auto md:h-64 sm:h-64 w-full absolute"
+      />
+      <h1 className="text-4xl p-5 select-none z-0 relative">
+        Train to{' '}
+        <span className="border-b-4 border-primary z-40">Maintain</span>
+      </h1>
+
+      <ul className="text-2xl sm:p-2 p-2 relative">
+        <li>
+          <Link to="/home">Home</Link>
+        </li>
+        <li>
+          <Link to="/workouts">Workouts</Link>
+        </li>
+        <li>
+          <Link to="/meals">Meals</Link>
+        </li>
+        <li>
+          <Link to="/about">About</Link>
+        </li>
+      </ul>
 
+      <div className="p-5 w-56 relative">
+        <button className="bg-primary w-20 h-10 text-secondary mr-2">
+          Sign Up
+        </button>
+        <label htmlFor="language"></label>
+        <select
+          className=" bg-primary text-secondary w-20 h-10"
+          name="language"
+          id="language"
+        >
+          <option value="English">English</option>
+          <option value="Arabic">Arabic</option>
+        </select>
+      </div>
+    </div>
+  );
+};
 export default Footer;

yarn.lock

@@ -5300,6 +5300,10 @@ history@^4.9.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
 
 hmac-drbg@^1.0.0:
   version "1.0.1"