Merge pull request #94 from hack4bengal/rhtry-dev

update: 404/error page
hack4bengal · Jun 3, 2024 · 92633c2 · 92633c2
2 parents 3ad8c49 + c952978
commit 92633c2
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 71 deletions.
diff --git a/src/assets/images/404/doggo.webp b/src/assets/images/404/doggo.webp
diff --git a/src/assets/images/404/doggo_img.webp b/src/assets/images/404/doggo_img.webp
diff --git a/src/assets/images/404/reversed_doggo_img.webp b/src/assets/images/404/reversed_doggo_img.webp
diff --git a/src/components/shared/button/Button.jsx b/src/components/shared/button/Button.jsx
@@ -1,9 +1,9 @@
 import PropTypes from "prop-types";
 import React from "react";
-import { Link } from "react-router-dom";
+import {Link} from "react-router-dom";
 import "./Button.scss";
 
-const Button = ({ type, isLoading, isDisabled, to, onClick, children }) => {
+const Button = ({type, isLoading, isDisabled, to, onClick, children}) => {
   const buttonClass = `button ${type} ${isLoading ? "loading" : ""}`;
 
   if (to) {

diff --git a/src/pages/404/Notfound.jsx b/src/pages/404/Notfound.jsx
@@ -1,44 +1,82 @@
-import React from "react";
-
-import Crying_Doge_Image from "../../assets/images/404/doggo.webp";
-import {Button} from "../../components/shared";
+import React, {useState} from "react";
+import PropTypes from "prop-types";
+import {Link} from "react-router-dom";
+import DogeImage from "../../assets/images/404/doggo_img.webp";
+import ReversedDogeImage from "../../assets/images/404/reversed_doggo_img.webp";
 import petHimCircle from "../../assets/images/404/petHimCircle.svg";
-
 import "./Notfound.scss";
+import "../../components/shared/button/Button.scss";
 
 const Notfound = () => {
-  return (
-    <>
-      <div className="pageNotFound__container" id="pageNotFound">
-        <div className="pageNotFound__content">
-          <div className="pageNotFound__desc">
-            <h2>404!</h2>
+  const [isReversed, setIsReversed] = useState(false);
+  const [circlePosition, setCirclePosition] = useState({x: 0, y: 0});
+  const [isHovering, setIsHovering] = useState(false);
 
-            <p>
-              This page was not found, but you can stay here and pet our dogo
-            </p>
+  const toggleImage = () => {
+    setIsReversed(!isReversed);
+  };
 
-            <Button type="outline" to={"/"}>
-              Back to Homepage
-            </Button>
+  const handleMouseMove = (e) => {
+    if (isHovering) {
+      const rect = e.target.getBoundingClientRect();
+      setCirclePosition({
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top,
+      });
+    }
+  };
 
-            <div className="notfound__petDogeCircle">
-              <img src={petHimCircle} />
-            </div>
-          </div>
+  const handleMouseEnter = (e) => {
+    setIsHovering(true);
+    const rect = e.target.getBoundingClientRect();
+    setCirclePosition({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    });
+  };
 
-          <div className="notfound__doge_container">
-            <div className="doge__image">
-              <img src={Crying_Doge_Image} />
-            </div>
+  const handleMouseLeave = () => {
+    setIsHovering(false);
+  };
 
-            <div className="notfound__petDogeCircle_mobile">
-              <img src={petHimCircle} />
-            </div>
+  return (
+    <div className="pageNotFound__container" id="pageNotFound">
+      <div className="pageNotFound__content">
+        <div className="pageNotFound__desc">
+          <h2>404!</h2>
+          <p>This page was not found, but you can stay here and pet our dogo</p>
+          <div className="back_to_home_page_btn">
+            <Link to={"/"} className="button outline">
+              Back to Homepage
+            </Link>
+          </div>
+        </div>
+        <div className="notfound__doge_container">
+          <div
+            className="doge__image"
+            onClick={toggleImage}
+            onMouseMove={handleMouseMove}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <img src={isReversed ? ReversedDogeImage : DogeImage} alt="Doge" />
+            {isHovering && (
+              <div
+                className="notfound__petDogeCircle"
+                style={{
+                  position: "absolute",
+                  top: `${circlePosition.y - 75}px`,
+                  left: `${circlePosition.x + 15}px`,
+                  pointerEvents: "none",
+                }}
+              >
+                <img src={petHimCircle} alt="Pet Him Circle" />
+              </div>
+            )}
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/src/pages/404/Notfound.scss b/src/pages/404/Notfound.scss
@@ -1,15 +1,20 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  height: 100%;
+}
+
 .pageNotFound__container {
   padding: 4rem 7rem;
-  padding-bottom: 0;
-  margin-top: 5rem;
-  margin-bottom: 5rem;
   position: relative;
   overflow: hidden;
+  height: 100%;
+  box-sizing: border-box;
 
   @media screen and (max-width: 576px) {
     padding: 2rem 1.5rem;
-    margin-top: 2rem;
-    margin-bottom: 2rem;
   }
 
   .pageNotFound__content {
@@ -18,13 +23,22 @@
     gap: 5rem;
 
     @media screen and (max-width: 576px) {
-      display: flex;
       flex-direction: column;
-      gap: 2rem;
+      gap: 1rem;
+    }
+
+    @media screen and (min-width: 1800px) {
+      gap: 5rem;
     }
 
     .pageNotFound__desc {
-      width: 60%;
+      width: 55%;
+      display: flex;
+      flex-direction: column;
+      text-align: left;
+      justify-content: center;
+      padding-top: 2rem;
+      padding-bottom: 2rem;
 
       @media screen and (max-width: 576px) {
         width: 100%;
@@ -40,13 +54,16 @@
         font-weight: 800;
         color: transparent;
         -webkit-text-stroke: 1px white;
-        margin-top: 3rem;
         margin-bottom: 2rem;
 
         @media screen and (max-width: 576px) {
           font-size: 50px;
           font-weight: 700;
-          margin-top: 2rem;
+          margin-bottom: 2rem;
+        }
+
+        @media screen and (min-width: 1800px) {
+          font-size: 75px;
         }
       }
 
@@ -59,30 +76,25 @@
         @media screen and (max-width: 576px) {
           font-size: 25px;
           font-weight: 700;
-        }
-      }
-
-      .notfound__petDogeCircle {
-        margin-top: 0rem;
-        display: flex;
-        justify-content: flex-end;
-
-        @media screen and (max-width: 576px) {
-          display: none;
+          margin-bottom: 2rem;
         }
 
         @media screen and (min-width: 1800px) {
-          margin-top: 5rem;
+          font-size: 70px;
         }
       }
+
+      .back_to_home_page_btn {
+        display: inline-block;
+      }
     }
 
     .notfound__doge_container {
+      width: 40%;
       display: flex;
-      flex-direction: column;
+      align-items: center;
       justify-content: center;
-      width: 40%;
-      height: 100%;
+      position: relative;
 
       @media screen and (max-width: 576px) {
         margin-top: 2rem;
@@ -93,41 +105,57 @@
         width: 50%;
       }
 
-      .notfound__petDogeCircle_mobile {
+      .doge__image {
         display: flex;
-        justify-content: flex-end;
-        margin-top: -4rem;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: auto;
+        cursor: none;
 
-        @media screen and (min-width: 1200px) {
-          display: none;
+        @media screen and (max-width: 576px) {
+          width: 100%;
+          height: auto;
         }
 
         img {
-          width: 30%;
+          width: 100%;
+          height: auto;
+          object-fit: cover;
+
+          @media screen and (max-width: 576px) {
+            width: 85%;
+            height: auto;
+            display: block;
+          }
+
+          @media screen and (min-width: 1800px) {
+            width: 80%;
+          }
         }
       }
 
-      .doge__image {
+      .notfound__petDogeCircle {
+        margin-top: 0rem;
         display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
+        justify-content: flex-end;
+        z-index: 1;
 
         img {
           width: 100%;
-          height: auto;
-          display: block;
 
           @media screen and (max-width: 576px) {
-            width: 80%;
-            height: auto;
-            display: block;
+            width: 85%;
           }
 
           @media screen and (min-width: 1800px) {
-            width: 75%;
+            width: 100%;
           }
         }
+
+        @media screen and (min-width: 1800px) {
+          margin-top: 5rem;
+        }
       }
     }
   }