Merge branch 'main' of https://github.com/ViktorSvertoka/power-pulse

ViktorSvertoka · Sep 16, 2023 · 49d7cdb · 49d7cdb
2 parents 7737e54 + 9ea5fd1
commit 49d7cdb
Show file tree

Hide file tree

Showing 2 changed files with 170 additions and 15 deletions.
diff --git a/src/pages/ErrorPage/ErrorPage.jsx b/src/pages/ErrorPage/ErrorPage.jsx
@@ -1,10 +1,45 @@
-import { Container, Title } from './ErrorPage.styled';
+// ErrorPage.js
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Section,
+  Left,
+  Content,
+  Title404,
+  Text404,
+  Button,
+  StyledLink, // Import StyledLink from your styled components file
+} from './ErrorPage.styled';
 
 const ErrorPage = () => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate('/');
+  };
+
   return (
-    <Container>
-      <Title>404</Title>
-    </Container>
+    <Section>
+      <StyledLink to="/">
+        <svg width={152} height={17}>
+          <use href="../../../src/images/sprite.svg#icon-logo"></use>
+        </svg>
+      </StyledLink>
+      <Left>
+        <Content>
+          <Title404>404</Title404>
+          <Text404>
+            Sorry, you have reached a page that we could not find. It seems
+            that you are lost among the numbers and letters of our virtual
+            space. Perhaps this page went on vacation or decided to disappear
+            into another dimension. We apologize for this inconvenience.
+          </Text404>
+          <Button type="button" onClick={handleClick}>
+            Go Home
+          </Button>
+        </Content>
+      </Left>
+    </Section>
   );
 };
 

diff --git a/src/pages/ErrorPage/ErrorPage.styled.jsx b/src/pages/ErrorPage/ErrorPage.styled.jsx
@@ -1,18 +1,138 @@
-import styled from '@emotion/styled';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
 
-export const Container = styled.div`
+export const Section = styled.div`
+  position: relative;
+  background-image: url(/src/images/hero-mobile-1x.jpg);
+  background-image: -webkit-image-set(
+    url(/src/images/hero-mobile-1x.jpg) 1x,
+    url(/src/images/hero-mobile-2x.jpg) 2x
+  );
+  color: #efede8;
+  background-repeat: no-repeat;
+  background-position: bottom 0 right -40%;
+  margin: 0 auto;
+  position: relative;
+  height: 100vh;
+
+  @media screen and (min-width: 375px) {
+    max-width: 375px;
+  }
+
+  @media screen and (min-width: 768px) {
+    max-width: none;
+    width: 768px;
+    background-color: rgba(0, 0, 0, 1);
+
+    background-image: url(/src/images/hero-tablet-1x.jpg);
+    background-image: -webkit-image-set(
+      url(/src/images/hero-tablet-1x.jpg) 1x,
+      url(/src/images/hero-tablet-2x.jpg) 2x
+    );
+    background-position: bottom 0 right 0%;
+  }
+
+  @media screen and (min-width: 1440px) {
+    width: 1440px;
+    height: 800px;
+
+    background-image: url(/src/images/hero-1x.jpg) 771px;
+    background-image: -webkit-image-set(
+      url(/src/images/hero-1x.jpg) 1x,
+      url(/src/images/hero-2x.jpg) 2x
+    );
+  }
+`;
+
+export const Left = styled.div`
+  background: #e6533c;
+  max-width: calc(64%);
+  height: 100%;
+  box-sizing: border-box;
+  padding: 24px 20px;
   display: flex;
+
+  @media screen and (min-width: 768px) {
+    max-width: none;
+    width: 420px;
+    padding: 32px 32px;
+  }
+
+  @media screen and (min-width: 1440px) {
+    width: 669px;
+    padding: 32px 96px;
+  }
+`;
+
+export const Content = styled.div`
+  margin-top: auto;
+  margin-bottom: auto;
+`;
+
+export const Title404 = styled.h1`
+  font-size: 66px;
+  line-height: 1;
+  letter-spacing: 0.66px;
+
+  @media screen and (min-width: 768px) {
+    font-size: 160px;
+    line-height: calc(150 / 160);
+    letter-spacing: 1.6px;
+  }
+`;
+
+export const Text404 = styled.p`
+  width: 200px;
+  font-size: 14px;
+  margin-top: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: calc(18 / 14);
+
+  @media screen and (min-width: 768px) {
+    width: 356px;
+    font-size: 16px;
+    margin-top: 28px;
+    line-height: calc(24 / 16);
+  }
+
+  @media screen and (min-width: 1440px) {
+    width: 477px;
+  }
+`;
+
+export const Button = styled.button`
+  margin-top: 28px;
+  display: flex;
+  padding: 12px 40px;
   justify-content: center;
   align-items: center;
-  padding-top: 500px;
+  text-transform: capitalize;
+  font-family: inherit;
+  background-color: #e6533c;
+  color: white;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: calc(18 / 16);
+  border: 1px solid rgba(239, 237, 232, 0.3);
+  transition: background 0.3s ease-out;
+
+  &:hover {
+    color: white;
+    background: #ef8964;
+  }
+
+  @media screen and (min-width: 768px) {
+    padding: 16px 60px;
+    font-size: 20px;
+    line-height: 1.2;
+  }
 `;
 
-export const Title = styled.h1`
-  color: #ffffff;
-  text-shadow:
-    0 0 5px #00baff,
-    0 0 10px #00baff,
-    0 0 20px #00baff,
-    0 0 40px #00baff,
-    0 0 80px #00baff;
+export const StyledLink = styled(Link)`
+  background: none;
+  position: absolute;
+  left: 20px;
+  top: 24px;
 `;