Styling of footer nad header component

src/components/Footer.js

@@ -22,28 +22,28 @@ const Footer = () => (
             <img
               src={Facebook}
               alt="Facebook Social Media"
-              className="max-w-2.5 opacity-50 hover:opacity-100 hover:shadow-lg w-full"
+              className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
             />
           </div>
           <div>
             <img
               src={Instagram}
               alt="Instagram Social Media"
-              className="max-w-2.5 opacity-50 hover:opacity-100 hover:shadow-lg w-full"
+              className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
             />
           </div>
           <div>
             <img
               src={Twitter}
               alt="Twitter Social Media"
-              className="max-w-2.5 opacity-50 hover:opacity-100 hover:shadow-lg w-full"
+              className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
             />
           </div>
           <div>
             <img
               src={LinkedIn}
               alt="LinkedIn Social Media"
-              className="max-w-2.5 opacity-50 hover:opacity-100 hover:shadow-lg w-full"
+              className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
             />
           </div>
         </div>
@@ -63,21 +63,21 @@ const Footer = () => (
         </div>
       </div>
 
-      <div className="lg:w-3/4 ml-10 p-4">
+      <div className="lg:w-3/4 ml-10">
         <div className="p-4 text-center lg:text-left sm:flex justify-between">
           <nav>
             <p className="font-thin text-white opacity-50">Sitemap</p>
             <ul className="list-reset text-sm inline-block">
-              <Link className="block my-2" to="/">
+              <Link className="block my-2 hover:opacity-70" to="/">
                 <li className={menuClasses}>Home</li>
               </Link>
-              <Link className="block my-2" to="/services">
+              <Link className="block my-2 hover:opacity-70" to="/services">
                 <li className={menuClasses}>What We Do</li>
               </Link>
-              <Link className="block my-2" to="/about">
+              <Link className="block my-2 hover:opacity-70" to="/about">
                 <li className={menuClasses}>TEAM</li>
               </Link>
-              <Link className="block my-2" to="/blog">
+              <Link className="block my-2 hover:opacity-70" to="/blog">
                 <li className={menuClasses}>BLOG</li>
               </Link>
             </ul>

src/components/Header.js

@@ -27,10 +27,10 @@ const Header = () => (
             <li className={menuClasses}>What We Do</li>
           </Link>
           <Link to="/about">
-            <li className={menuClasses}>TEAM</li>
+            <li className={menuClasses}>Team</li>
           </Link>
           <Link to="/blog">
-            <li className={menuClasses}>BLOG</li>
+            <li className={menuClasses}>Blog</li>
           </Link>
 
           <Button

src/pages/index.js

@@ -93,13 +93,13 @@ const IndexPage = () => (
           standard
           text="More About What We Do"
           url="/services"
-          classes="m-1 rounded-full text-grey-darker hover:shadow"
+          classes="m-1 rounded-full hover:shadow-md text-grey-darker hover:shadow"
         />
         <Button
           standard
           text="How We Work"
           url="/how-we-work"
-          classes="m-1 rounded-full text-grey-darker hover:shadow"
+          classes="m-1 rounded-full hover:shadow-md text-grey-darker hover:shadow"
         />
       </div>
     </section>
@@ -143,7 +143,7 @@ const IndexPage = () => (
         standard
         text="More Posts"
         url="/blog"
-        classes="mt-2 mb-8 rounded-full text-grey-darker hover:shadow"
+        classes="mt-2 mb-8 hover:shadow-md rounded-full text-grey-darker"
       />
     </section>
   </main>