From 3757150d0f32efcfb7489c0cb20900a28e49f092 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Sun, 16 Jun 2024 11:11:47 +0200 Subject: [PATCH 1/2] feat: add not found page --- src/tsx/App.tsx | 8 ++++---- src/tsx/pages/NotFoundPage.tsx | 15 +++++++++++++++ 2 files changed, 19 insertions(+), 4 deletions(-) create mode 100644 src/tsx/pages/NotFoundPage.tsx diff --git a/src/tsx/App.tsx b/src/tsx/App.tsx index 58e83cb..e5fa2fa 100644 --- a/src/tsx/App.tsx +++ b/src/tsx/App.tsx @@ -1,15 +1,15 @@ import { BrowserRouter, Routes, Route } from "react-router-dom"; import HomePage from "./pages/HomePage"; import ProjectPage from "./pages/ProjectPage"; +import NotFoundPage from "./pages/NotFoundPage"; function App() { return ( - - } /> - } /> - + } /> + } /> + } /> ); diff --git a/src/tsx/pages/NotFoundPage.tsx b/src/tsx/pages/NotFoundPage.tsx new file mode 100644 index 0000000..51a17ca --- /dev/null +++ b/src/tsx/pages/NotFoundPage.tsx @@ -0,0 +1,15 @@ +import Hero from "../components/sections/Hero"; + + +function NotFoundPage() { + const heroHeadline = "EEEEH"; + const heroDescription = "Eu elit quis eiusmod proident officia aute tempor tempor qui commodo aute qui. Excepteur id ea laboris fugiat dolor exercitation ut pariatur ut commodo non. Eu deserunt laboris dolore elit. Aliquip magna do nostrud velit esse anim do. Dolor culpa duis laboris nisi ea nulla nulla magna" + + return ( +
+ +
+ ); +} + +export default NotFoundPage; From 56ebaa4bc8be9448eefb54d063ba997a94347c67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Sun, 16 Jun 2024 11:53:32 +0200 Subject: [PATCH 2/2] feat: add content and animation to not found page --- src/json/cableAnimation.json | 1 + src/tsx/pages/NotFoundPage.tsx | 32 ++++++++++++++++++++++++++------ 2 files changed, 27 insertions(+), 6 deletions(-) create mode 100644 src/json/cableAnimation.json diff --git a/src/json/cableAnimation.json b/src/json/cableAnimation.json new file mode 100644 index 0000000..a704c19 --- /dev/null +++ b/src/json/cableAnimation.json @@ -0,0 +1 @@ +{"v":"5.5.2","meta":{"a":"SVGator","d":"SVGator, the ultimate SVG animation generator now supports Lottie: a thoughtfully designed, intuitive interface, right at your fingertips.","g":"Made in SVGator (https://www.svgator.com/)","tc":""},"metadata":{"filename":"cableAnimation.json","customProps":{"k":["SVGator","svgator","lottie animation","svg animation","lottie","svg"],"version":1,"app":"https://app.svgator.com/","site":"https://www.svgator.com/","date":"2024-06-16T09:38:47.936Z"}},"nm":"cableAnimation","ddd":0,"assets":[],"w":537,"h":955,"ip":0,"op":600,"fr":100,"fonts":{"list":[]},"layers":[{"ty":4,"st":0,"ip":0,"op":600,"ks":{},"shapes":[{"ty":"gr","it":[{"ty":"rc","p":{"a":0,"k":[268.5,477.5]},"s":{"a":0,"k":[537,955]},"r":{"a":0,"k":0}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0,0,0]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[268.5,477.5]},"p":{"a":0,"k":[268.5,477.5]}}]}],"parent":1,"td":1},{"ty":4,"st":0,"ip":0,"op":600,"ks":{"a":{"a":0,"k":[268.5,477.5]},"p":{"a":0,"k":[268.5,477.5]}},"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sh","ks":{"a":1,"k":[{"t":0,"s":[{"v":[[292.765199,-0.170408],[390.204114,664.585362],[403.048336,661.438794],[311.765199,0],[292.845153,-0.201667]],"i":[[0,0],[-63.236384,-183.372164],[0,0],[-42.2652,279.06624],[0,0]],"o":[[-42.2652,279.06624],[0,0],[-63.236384,-183.372164],[0,0],[0,0]],"c":false}],"i":{"x":0.58,"y":1},"o":{"x":0.42,"y":0}},{"t":300,"s":[{"v":[[294.685168,-0.921035],[142.148616,664.218859],[156.526499,669.600117],[313.685168,-0.750627],[292.845153,-0.201667]],"i":[[0,0],[62.59253,-173.363525],[0,0],[0,308.34034],[0,0]],"o":[[0,308.34034],[0,0],[62.59253,-173.363525],[0,0],[0,0]],"c":false}],"i":{"x":0.58,"y":1},"o":{"x":0.42,"y":0}},{"t":600,"s":[{"v":[[292.765199,-0.170408],[390.204114,664.585362],[403.048336,661.438794],[311.765199,0],[292.845153,-0.201667]],"i":[[0,0],[-63.236384,-183.372164],[0,0],[-42.2652,279.06624],[0,0]],"o":[[-42.2652,279.06624],[0,0],[-63.236384,-183.372164],[0,0],[0,0]],"c":false}],"i":{"x":1,"y":1},"o":{"x":0,"y":0}}]}},{"ty":"st","o":{"a":0,"k":100},"w":{"a":0,"k":3},"c":{"a":0,"k":[0.090196,0.090196,0.090196]},"lj":1,"ml":4,"d":[{"n":"o","nm":"offset","v":{"a":0,"k":0}}]},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.090196,0.090196,0.090196]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[308.696462,336.466903]},"p":{"a":0,"k":[308.372222,336.070681]}}]},{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"v":[[135.309,74.024],[112.262,76.328],[31.6169,84.3898],[8.57068,86.6937],[1.40612,95.4498],[1.93968,100.787],[10.6958,107.952],[14.6779,107.554],[133.452,95.6802],[137.434,95.2821],[144.599,86.526],[144.065,81.1886],[135.309,74.024]],"i":[[0,0],[0,0],[0,0],[0,0],[-0.439491,-4.3964],[0,0],[-4.39608,0.439],[0,0],[0,0],[0,0],[0.439,4.3964],[0,0],[4.396,-0.4394]],"o":[[0,0],[0,0],[0,0],[-4.39606,0.4394],[0,0],[0.43949,4.397],[0,0],[0,0],[0,0],[4.396,-0.4395],[0,0],[-0.439,-4.3964],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.67451,0.713725,0.231373]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[73.002522,90.987972]},"p":{"a":0,"k":[73.002522,90.987972]}}]},{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"v":[[82.9421,49.5561],[101.302,47.7207],[110.058,54.8853],[112.23,76.6187],[31.5856,84.6805],[29.413,62.9471],[36.5775,54.191],[54.9362,52.3557],[82.9421,49.5561]],"i":[[0,0],[0,0],[-0.44,-4.3964],[0,0],[0,0],[0,0],[-4.396,0.4394],[0,0],[0,0]],"o":[[0,0],[4.396,-0.4394],[0,0],[0,0],[0,0],[-0.4395,-4.3964],[0,0],[0,0],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.298039,0.466667,0.254902]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[70.801365,66.180468]},"p":{"a":0,"k":[70.801365,66.180468]}}]},{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"v":[[137.624,138.257],[133.279,94.7903],[14.5049,106.664],[18.8501,150.131],[36.3623,164.46],[123.295,155.769],[137.624,138.257]],"i":[[0,0],[0,0],[0,0],[0,0],[-8.7931,0.879],[0,0],[0.879,8.793]],"o":[[0,0],[0,0],[0,0],[0.879,8.792],[0,0],[8.792,-0.879],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.298039,0.466667,0.254902]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[76.104723,129.665428]},"p":{"a":0,"k":[76.104723,129.665428]}}]},{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"v":[[124.304,194.623],[120.426,155.833],[101.361,157.739],[105.239,196.529],[113.995,203.693],[117.14,203.379],[124.304,194.623]],"i":[[0,0],[0,0],[0,0],[0,0],[-4.396,0.44],[0,0],[0.44,4.396]],"o":[[0,0],[0,0],[0,0],[0.44,4.396],[0,0],[4.396,-0.439],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.090196,0.090196,0.090196]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[112.85268,179.783173]},"p":{"a":0,"k":[112.85268,179.783173]}}]},{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"v":[[62.5532,199.795],[58.6755,161.005],[39.6104,162.91],[43.4881,201.7],[52.2442,208.865],[55.3886,208.551],[62.5532,199.795]],"i":[[0,0],[0,0],[0,0],[0,0],[-4.3961,0.439],[0,0],[0.4395,4.396]],"o":[[0,0],[0,0],[0,0],[0.4395,4.397],[0,0],[4.3961,-0.44],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.090196,0.090196,0.090196]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[51.101936,184.955101]},"p":{"a":0,"k":[51.101936,184.955101]}}]},{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"v":[[50.7362,11.6708],[57.8998,2.91478],[69.988,1.70636],[78.7421,8.87111],[82.9049,50.5129],[54.899,53.3126],[50.7362,11.6708]],"i":[[0,0],[-4.3951,0.43936],[0,0],[-0.4395,-4.39636],[0,0],[0,0],[0,0]],"o":[[-0.4395,-4.39639],[0,0],[4.396,-0.43946],[0,0],[0,0],[0,0],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":0,"k":[0.090196,0.090196,0.090196]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[66.800413,27.489346]},"p":{"a":0,"k":[66.800413,27.489346]}}]},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[73.002522,105.285645]},"p":{"a":0,"k":[270.749103,778.072939]}}]},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[267.502502,780.314575]},"p":{"a":1,"k":[{"t":0,"s":[421.342372,764.509109],"i":{"x":0.58,"y":1},"o":{"x":0.42,"y":0}},{"t":300,"s":[111.555256,764.509109],"i":{"x":0.58,"y":1},"o":{"x":0.42,"y":0}},{"t":600,"s":[421.342372,764.509109],"i":{"x":0.58,"y":1},"o":{"x":0.42,"y":0}}]},"r":{"a":1,"k":[{"t":0,"s":[-9.191738],"i":{"x":0.58,"y":1},"o":{"x":0.42,"y":0}},{"t":300,"s":[24.95303],"i":{"x":0.58,"y":1},"o":{"x":0.42,"y":0}},{"t":600,"s":[-9.191738],"i":{"x":0.58,"y":1},"o":{"x":0.42,"y":0}}]}}]},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[268.5,477.5]},"p":{"a":0,"k":[268.5,477.5]}}]},{"ty":"tr","o":{"a":0,"k":100}}]}],"ind":1,"tt":1}]} diff --git a/src/tsx/pages/NotFoundPage.tsx b/src/tsx/pages/NotFoundPage.tsx index 51a17ca..995e0da 100644 --- a/src/tsx/pages/NotFoundPage.tsx +++ b/src/tsx/pages/NotFoundPage.tsx @@ -1,13 +1,33 @@ -import Hero from "../components/sections/Hero"; +import Lottie from "lottie-react"; +import cableAnimation from "../../json/cableAnimation.json" +import Button from "../components/Button"; +import Arrow from "../icons/Arrow"; function NotFoundPage() { - const heroHeadline = "EEEEH"; - const heroDescription = "Eu elit quis eiusmod proident officia aute tempor tempor qui commodo aute qui. Excepteur id ea laboris fugiat dolor exercitation ut pariatur ut commodo non. Eu deserunt laboris dolore elit. Aliquip magna do nostrud velit esse anim do. Dolor culpa duis laboris nisi ea nulla nulla magna" - return ( -
- +
+ + +
+
+

+ Die Seite konnte leider nicht gefunden werden. +

+

+ Eu elit quis eiusmod proident officia aute tempor tempor qui commodo aute qui. + Excepteur id ea laboris fugiat dolor exercitation ut pariatur ut commodo non. +

+
+ +
+
+
); }