Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add: new 404 page #123

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { Suspense } from "react";
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import { Footer, Navbar } from "./components/shared";
import React, {Suspense} from "react";
import {Route, BrowserRouter as Router, Routes} from "react-router-dom";
import {Footer, Navbar} from "./components/shared";
import Loading from "./components/shared/loading/Loading";
import Notfound from "./pages/404/Notfound";
import Forward from "./pages/Forward";
Expand Down Expand Up @@ -103,7 +103,8 @@ const App = () => {

{window.location.pathname !== "/surprise" &&
window.location.pathname !== "/register" &&
window.location.pathname !== "/discord" && <Footer />}
window.location.pathname !== "/discord" &&
window.location.pathname !== "/*" && <Footer />}
</Suspense>
</Router>
);
Expand Down
2 changes: 1 addition & 1 deletion src/assets/data/SponsorsContent.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import github from "../images/SponsorImages/github.png";
import hackquest from "../images/SponsorImages/hackquest.png";
import avalanche from "../images/SponsorImages/avalanche.png";
import avax from "../images/SponsorImages/avax.png";
import xyz from "../images/SponsorImages/.xyx-logo.png";
import xyz from "../images/SponsorImages/xyz_new.png";
import router from "../images/SponsorImages/router.png";
import jis from "../images/SponsorImages/jis.png";
import superteam from "../images/SponsorImages/superteam.png";
Expand Down
Binary file removed src/assets/images/CommunityImages/jisce.jpg
Binary file not shown.
Binary file modified src/assets/images/CommunityImages/jisce.webp
Binary file not shown.
Binary file removed src/assets/images/SponsorImages/xyz.png
Binary file not shown.
Binary file added src/assets/images/SponsorImages/xyz_new.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";
import "./SingleSponsors.scss";
import clsx from "clsx";

const SingleSponsors = ({ sponsor, type }) => {
const SingleSponsors = ({sponsor, type}) => {
const style = {};

return (
Expand Down
171 changes: 96 additions & 75 deletions src/pages/404/Notfound.jsx
Original file line number Diff line number Diff line change
@@ -1,83 +1,104 @@
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 React from "react";
import "./NotFound.scss";
import "../../components/shared/button/Button.scss";
import {Link} from "react-router-dom";

const Notfound = () => {
const [isReversed, setIsReversed] = useState(false);
const [circlePosition, setCirclePosition] = useState({x: 0, y: 0});
const [isHovering, setIsHovering] = useState(false);

const toggleImage = () => {
setIsReversed(!isReversed);
};

const handleMouseMove = (e) => {
if (isHovering) {
const rect = e.target.getBoundingClientRect();
setCirclePosition({
x: e.clientX - rect.left,
y: e.clientY - rect.top,
});
}
};

const handleMouseEnter = (e) => {
setIsHovering(true);
const rect = e.target.getBoundingClientRect();
setCirclePosition({
x: e.clientX - rect.left,
y: e.clientY - rect.top,
});
};

const handleMouseLeave = () => {
setIsHovering(false);
};

const NotFound = () => {
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 className="pageNotFound__container">
<div className="row">OMG</div>
<div className="row">You broke the internet.</div>
<div className="back_to_home_page_btn">
<Link to={"/"} className="button outline">
Back to Homepage
</Link>
</div>
</div>
);
};

export default Notfound;
export default NotFound;

// 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 = () => {
// const [isReversed, setIsReversed] = useState(false);
// const [circlePosition, setCirclePosition] = useState({x: 0, y: 0});
// const [isHovering, setIsHovering] = useState(false);

// const toggleImage = () => {
// setIsReversed(!isReversed);
// };

// const handleMouseMove = (e) => {
// if (isHovering) {
// const rect = e.target.getBoundingClientRect();
// setCirclePosition({
// x: e.clientX - rect.left,
// y: e.clientY - rect.top,
// });
// }
// };

// const handleMouseEnter = (e) => {
// setIsHovering(true);
// const rect = e.target.getBoundingClientRect();
// setCirclePosition({
// x: e.clientX - rect.left,
// y: e.clientY - rect.top,
// });
// };

// const handleMouseLeave = () => {
// setIsHovering(false);
// };

// 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>
// );
// };

// export default Notfound;
Loading
Loading