feat: add not found page

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}]}

src/tsx/App.tsx

@@ -1,17 +1,17 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import HomePage from "./pages/HomePage";
 import ProjectPage from "./pages/ProjectPage";
+import NotFoundPage from "./pages/NotFoundPage";
 import ContactPage from "./pages/ContactPage";
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/">
-          <Route index element={<HomePage />} />
-          <Route path="projekt" element={<ProjectPage />} />
-          <Route path="kontakt" element={<ContactPage />} />
-        </Route>
+        <Route path="/" element={<HomePage />} />
+        <Route path="projekt" element={<ProjectPage />} />
+        <Route path="kontakt" element={<ContactPage />} />
+        <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </BrowserRouter>
   );

src/tsx/pages/NotFoundPage.tsx

@@ -0,0 +1,35 @@
+import Lottie from "lottie-react";
+import cableAnimation from "../../json/cableAnimation.json"
+import Button from "../components/Button";
+import Arrow from "../icons/Arrow";
+
+
+function NotFoundPage() {
+    return (
+        <main className="relative h-screen overflow-hidden before:bg-cover before:bg-background-dark-dot before:w-4/5 before:h-[100vh] before:max-h-[45rem] before:absolute before:-right-4 before:-top-16 before:-z-10 before:bg-no-repeat sm:before:-right-10 lg:before:max-h-[55rem] xl:before:w-[70rem] xl:before:-right-40 2xl:before:right-[10%] 2xl:before:bg-contain">
+            <figure aria-hidden="true" className="absolute top-0 inset-x-0">
+                <Lottie className="h-[50vh]" animationData={cableAnimation} />
+            </figure>
+
+            <div className="mt-[55vh] mx-auto max-w-208 xl:max-w-screen-lg">
+                <section className="my-28 px-4 md:px-6 lg:my-36 xl:my-52">
+                    <h1 className="font-lato font-bold text-4xl mb-4 lg:mb-6 lg:text-5xl lg:text-center xl:text-6xl">
+                        Die Seite konnte leider nicht gefunden werden.
+                    </h1>
+                    <p className="lg:text-center mb-10">
+                        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.
+                    </p>
+                    <div className="lg:flex lg:items-center lg:justify-center">
+                        <Button href="/" ariaLabel="Zur Statseite" isDark>
+                            <span>Zur Startseite</span>
+                            <Arrow classes="w-6 text-white transition-all ease-in-out duration-300 group-hover:translate-x-2"/>
+                        </Button>
+                    </div>
+                </section>
+            </div>
+        </main>
+    );
+}
+
+export default NotFoundPage;