From 510dcc1ebb6e8e1372e06a6fdce3404649d2b9e8 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Fri, 21 Aug 2020 14:56:49 -0400
Subject: [PATCH] Footer: fix phoneSpec overlap problem

---
 src/components/Footer/Footer.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 0fa7f60..36e42d4 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { motion } from "framer-motion";
 import { Heart } from "phosphor-react";
 
@@ -18,6 +18,8 @@ const variants = {
 };
 
 const Footer: React.FC<FooterProps> = () => {
+  const [phoneHovered, setPhoneHovered] = useState<boolean>(false);
+
   return (
     <footer>
       <div className="container">
@@ -89,13 +91,25 @@ const Footer: React.FC<FooterProps> = () => {
               <img src={uArrowUpLeft} alt="" />
             </button>
           </div>
-          <img id="phone" className="inspectable" src={phoneSpec} alt="" />
+          {phoneHovered && (
+            <motion.img
+              id="phone"
+              className="inspectable"
+              variants={variants}
+              initial="hidden"
+              animate={phoneHovered ? "visible" : "hidden"}
+              src={phoneSpec}
+              alt=""
+            />
+          )}
           <motion.img
             id="phone"
             className="inspectable"
             variants={variants}
             initial="visible"
             whileHover="hidden"
+            onHoverStart={() => setPhoneHovered(true)}
+            onHoverEnd={() => setPhoneHovered(false)}
             src={phone}
             alt=""
           />