Impl/new pages (#221)

* added 404 and 500 components * error 404 and 500 added * minor changes * url provided for 404 page * url updated
kloudlite · Jun 11, 2024 · b3929dd · b3929dd
1 parent 801d9c2
commit b3929dd
Show file tree

Hide file tree

Showing 7 changed files with 438 additions and 29 deletions.
diff --git a/lib/app-setup/root.tsx b/lib/app-setup/root.tsx
@@ -1,6 +1,5 @@
 import { HeadersFunction, LinksFunction } from '@remix-run/node';
 import {
-  Link,
   Links,
   LiveReload,
   Meta,
@@ -32,7 +31,8 @@ import { ReloadIndicator } from '~/lib/client/components/reload-indicator';
 import { isDev } from '~/lib/client/helpers/log';
 import { Button } from '~/components/atoms/button';
 import { ChildrenProps } from '~/components/types';
-import { getClientEnv, getServerEnv } from '../configs/base-url.cjs';
+import Page404 from '~/components/organisms/page-404';
+import { getClientEnv, getServerEnv } from '~/root/lib/configs/base-url.cjs';
 import { useDataFromMatches } from '../client/hooks/use-custom-matches';
 
 export const links: LinksFunction = () => [
@@ -130,22 +130,7 @@ export function ErrorBoundary() {
 }
 
 export const _404Main = () => {
-  return (
-    <div className="text-[5vw] flex gap-[1vw] justify-center items-center min-h-screen">
-      <div className="flex flex-col items-center">
-        <span className="text-text-critical text-[10vw]">404</span>
-        <span className="text-text-warning uppercase animate-pulse">
-          page not found
-        </span>
-        <Link
-          to="/"
-          className="text-text-primary text-[1rem] hover:underline hover:text-text-strong transition-all underline"
-        >
-          Home Page
-        </Link>
-      </div>
-    </div>
-  );
+  return <Page404 link="/" />;
 };
 
 export const meta = () => {

diff --git a/src/design-system/components/organisms/error-404.tsx b/src/design-system/components/organisms/error-404.tsx
@@ -0,0 +1,129 @@
+import React from 'react';
+
+function Error404Icon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="645"
+      height="375"
+      fill="none"
+      viewBox="0 0 645 375"
+    >
+      <path
+        fill="#DBEAFE"
+        stroke="#60A5FA"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M434.817 322.06h-49.67l-30.73-53.47h49.67l30.73 53.47z"
+      />
+      <path
+        stroke="#60A5FA"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M420.917 263.09l2.56-3.09M395.488 293.73l23.7-28.56"
+      />
+      <path
+        fill="#DBEAFE"
+        stroke="#60A5FA"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M376.917 214.68L335.467 180l-53.47 29.22 41.46 36.19 53.46-30.73z"
+      />
+      <path
+        stroke="#60A5FA"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M419.187 105.76l-33.44 19.36M426.257 101.67l-3.42 1.98"
+      />
+      <path
+        fill="#DBEAFE"
+        stroke="#60A5FA"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M365.847 129.77V80.1l41.45 34.69v49.67l-41.45-34.69z"
+      />
+      <path
+        stroke="#60A5FA"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M252.147 100.16l24.24 20.02M246.647 95.62l2.67 2.2"
+      />
+      <path
+        fill="#DBEAFE"
+        stroke="#60A5FA"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M312.187 79.46v49.66l-53.46 29.22v-49.66l53.46-29.22z"
+      />
+      <path
+        stroke="#111827"
+        strokeDasharray="3 3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M335.467 100.14l-53.47 29.22v49.67l41.46 36.2 53.46-30.73v-49.67l-41.45-34.69z"
+      />
+      <path
+        stroke="#111827"
+        strokeDasharray="3 3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M281.997 129.36l41.46 36.2 52.62-30.47M323.457 165.56v49.67"
+      />
+      <path
+        stroke="#111827"
+        strokeDasharray="3 3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M335.467 100.14v49.67l32.19 26.62M335.467 149.81l-46.27 25.04"
+      />
+      <path
+        fill="#DBEAFE"
+        stroke="#60A5FA"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M261.318 191.272l-12.855 47.978 30.678 45.697 12.855-47.978-30.678-45.697z"
+      />
+      <path
+        stroke="#60A5FA"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M228.263 246.633l-3.092.839M264.403 236.905l-32.882 8.852M270.37 235.305l-3.158.852"
+      />
+      <path
+        fill="#DBEAFE"
+        stroke="#60A5FA"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M376.917 108.33l-41.45-34.69-53.47 29.22 41.46 36.2 53.46-30.73z"
+      />
+      <path
+        stroke="#60A5FA"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M328.747 67.38V62M328.747 104.02V71.16"
+      />
+      <path
+        fill="#F3F4F6"
+        d="M40.545 159.285a2.928 2.928 0 100-5.856 2.928 2.928 0 000 5.856zM75.33 155.985a3.139 3.139 0 01-1.937 2.898 3.14 3.14 0 01-4.277-2.286 3.135 3.135 0 116.213-.612zM39.62 172.792a2.012 2.012 0 11-4.024.02 2.012 2.012 0 014.025-.02zM93.061 163.863a2.004 2.004 0 100-4.007 2.004 2.004 0 000 4.007zM490.172 322.254c8.938-3.717 7.769-2.394 16.227-8.785 7.144-5.394 16.853-8.512 24.894-12.292a5.928 5.928 0 016.753 1.214c3.626 3.627 9.446 5.014 14.142 2.929 3.871-1.714 6.6-5.231 9.972-7.724 3.373-2.493 8.567-3.79 11.649-.907.97.907 1.623 2.158 2.72 2.937 3.345 2.394 7.697-.906 10.661-3.789a74.417 74.417 0 0130.995-17.886c4.115-1.188 9.174-1.813 11.848 2.022a7.515 7.515 0 011.242 4.822c-.227 3.735-2.33 6.79-4.397 9.746 4.198-2.112 8.712-4.306 13.544-2.539.98.355 1.85.961 2.52 1.759 5.884 7.026-4.532 10.19-9.527 12.112 0-1.596-69.732 4.704-95.931 8.412-23.262 3.282-47.312 7.969-47.312 7.969z"
+      />
+      <path
+        fill="#E4E4E7"
+        d="M280.162 360.193a.38.38 0 00-.571-.064c-.226.263-.063.907.046 1.17a.487.487 0 00.273.275.502.502 0 00.388-.004c.245-.163.2-.525.127-.806a1.13 1.13 0 00-.263-.571zM252.948 368.442a9.19 9.19 0 01-1.26 1.179c-.698.634-1.314 1.124-1.378 1.051a5.41 5.41 0 011.17-1.287 3.365 3.365 0 011.468-.943zM252.476 367.699a5.217 5.217 0 01-1.631.616 5.12 5.12 0 01-1.714.317 4.985 4.985 0 011.632-.616 5.114 5.114 0 011.713-.317zM252.54 366.837a8.77 8.77 0 01-1.949-.244 7.465 7.465 0 01-1.342-.381c-.335-.136-.516-.272-.498-.308.018-.037.843.208 1.903.39.659.052 1.3.237 1.886.543zM278.948 366.593s0 .072-.109.208-.209.317-.39.544a17.86 17.86 0 01-1.641 1.868 18.88 18.88 0 01-14.958 5.384 18.26 18.26 0 01-2.448-.389c-.281-.064-.498-.136-.652-.182l-.218-.081c.306.019.61.068.907.145a24.05 24.05 0 002.438.29 19.613 19.613 0 0014.795-5.331 22.344 22.344 0 001.695-1.813c.177-.228.371-.444.581-.643zM33.547 273.999c-1.369 1.269 6.654 13.598 4.65 14.676-2.003 1.079-14.504 6.972-12.99 7.18 1.514.209 14.885-3.272 15.32-2.221.435 1.052 1.478 16.264 3.064 15.738 1.587-.526 1.052-15.411 3.273-14.895 2.221.517 14.36 4.334 14.994 3.173.635-1.16-12.637-6.672-12.99-8.657-.318-1.813 6.345-13.725 5.285-13.408-1.061.317-9.066 9.845-10.67 9.501-1.904-.427-8.667-11.613-9.936-11.087zM215.762 347.909a3.442 3.442 0 01-2.121 3.174 3.441 3.441 0 01-3.745-.745 3.438 3.438 0 01.521-5.286 3.44 3.44 0 014.338.427 3.426 3.426 0 011.007 2.43zM597.207 353.457a3.436 3.436 0 100-6.871 3.436 3.436 0 000 6.871zM201.457 333.477a1.727 1.727 0 01-2.057 1.699 1.734 1.734 0 01-.884-.472 1.724 1.724 0 112.941-1.227zM606.617 341.137a1.723 1.723 0 11-3.446 0 1.723 1.723 0 013.446 0zM136.394 330.576a1.722 1.722 0 11-1.713-1.723c.225 0 .449.045.657.132a1.694 1.694 0 01.928.932c.086.209.129.433.128.659z"
+      />
+      <path
+        fill="#F3F4F6"
+        d="M184.858 237.03a25.606 25.606 0 00-16.971-18.448c-2.402-.762-5.085-1.251-6.781-3.11-1.695-1.858-1.921-4.36-2.13-6.763-.208-2.402-.48-4.967-2.067-6.781-1.586-1.813-4.995-2.157-6.155-.054-1.251-5.321-3.019-12.193-6.5-16.816a2.717 2.717 0 00-3.687-.609 2.714 2.714 0 00-.9 1.017c-1.405 2.556-4.098 5.094-5.929 4.904-2.919-.308-5.113-2.81-6.554-5.367-1.813-3.191-2.892-6.717-4.587-9.972-1.424-2.719-3.436-5.375-6.609-6.055a4.935 4.935 0 00-5.077 1.749c-2.094 2.856 0 6.536 1.813 9.483 1.813 2.946 2.847 7.452-.299 9.147a4.354 4.354 0 01-4.442-.327c-4.233-2.792-4.007-8.612-8.458-11.159a4.162 4.162 0 00-4.487.109c-3.536 2.538.825 8.349-2.321 10.271a2.877 2.877 0 01-3.327-.381c-1.66-1.387-1.985-3.481-2.72-5.376-1.314-3.626-3.97-6.536-6.618-9.31-2.12-2.212-4.442-4.533-7.714-4.651a4.683 4.683 0 00-3.962 1.741c-1.813 2.439-.317 5.312 1.442 7.352 1.903 2.194 4.306 4.279 3.87 7.552a3.018 3.018 0 01-3 2.665c-3-.118-2.992-4.478-6.228-4.533a4.236 4.236 0 00-3.989 2.919c-.96 2.72.227 5.548 1.387 8.105-4.702-2.829-9.4-5.663-14.096-8.504a3.22 3.22 0 00-4.784 2.189 3.22 3.22 0 00.269 2v.063c-2.629-.091-4.26-2.72-5.847-4.841-1.587-2.121-4.696-4.007-6.7-2.212a3.374 3.374 0 00-.661 3.925c1.006 2.185 3.2 3.155 5.285 4.035l50.83 21.566c13.815 5.865 27.767 11.785 42.516 14.55 10.417 1.958 21.068 10.33 31.548 11.971 10.48 1.641 21.041 4.687 29.363 11.25l-4.723-13.294zM417.023 14.51c.462-3.363-4.288-6.137-7.86-6.427-1.704-.136-3.481.127-5.095-.435-3.499-1.224-4.895-5.739-8.304-7.18-2.556-1.079-5.493-.118-7.959 1.124-2.466 1.242-4.922 2.82-7.687 2.991-2.403.155-5.014-.734-7.117.436-1.568.906-2.384 2.72-3.825 3.744a9.121 9.121 0 01-5.014 1.36 14.35 14.35 0 00-5.167.843c-1.595.734-2.919 2.42-2.583 4.142l60.611-.598zM213.414 113.659c.68-4.923-6.273-8.975-11.504-9.401-2.484-.2-5.077.181-7.434-.644-5.122-1.813-7.161-8.386-12.147-10.489-3.735-1.577-8.032-.172-11.649 1.641-3.617 1.813-7.189 4.116-11.232 4.379-3.518.217-7.334-1.079-10.407.634-2.294 1.279-3.491 3.917-5.603 5.44-2.112 1.523-4.768 1.813-7.325 1.985-2.556.172-5.221.172-7.56 1.242-2.339 1.07-4.261 3.535-3.781 6.056l88.642-.843zM113.894 32.813c.589-4.288-5.44-7.814-9.972-8.159-2.167-.172-4.415.154-6.473-.562-4.451-1.55-6.228-7.297-10.561-9.129-3.255-1.368-6.99-.145-10.135 1.433-3.146 1.577-6.255 3.58-9.773 3.807-3.055.19-6.346-.906-9.065.553-1.977 1.097-3.055 3.363-4.896 4.75-1.84 1.387-4.142 1.605-6.345 1.723-2.203.118-4.533.145-6.573 1.079-2.04.933-3.735 3.064-3.318 5.267l77.111-.762zM585.458 157.952c.717-5.203-6.626-9.482-12.147-9.972-2.638-.208-5.376.191-7.869-.671-5.439-1.885-7.561-8.866-12.837-11.096-3.934-1.659-8.476-.181-12.301 1.741-3.826 1.922-7.597 4.351-11.867 4.623-3.708.236-7.742-1.142-10.996.671-2.421 1.351-3.69 4.143-5.92 5.793-2.23 1.65-5.031 1.994-7.751 2.13-2.72.136-5.512.172-7.978 1.306-2.465 1.133-4.532 3.735-3.997 6.4l93.663-.925z"
+      />
+      <path
+        fill="#E4E4E7"
+        d="M565.197 311.412l-27.713 2.873c-74.082 1.813-205.485-10.443-275.162-35.681-43.215-15.647-84.454-36.262-126.853-53.949C93.07 206.969 44.815 186.581.141 205.011c0 0 .616 11.322 13.86 9.065 13.246-2.257 33.833-10.697 44.63-7.696 10.797 3 23.57 14.822 37.268 15.782 13.698.961 22.564 4.533 22.564 4.533s13.235 14.55 26.48 16.255c13.244 1.704 22.065 2.719 22.065 2.719s2.484 1.469 19.146 14.713c16.662 13.245 35.781 11.278 46.569 13.725 10.788 2.448 28.04 4.769 36.09 10.235 8.05 5.467 56.024 26.063 73.239 26.553 17.215.489 42.154-6.645 55.426 3.544 13.272 10.19 41.855 21.531 58.245 18.548 16.391-2.982 31.204-16.182 39.97-12.256 8.766 3.925 29.988 12.256 37.032 6.862 7.044-5.394 35.7-8.34 32.472-16.181zM13.177 209.48a1.887 1.887 0 01-1.333-3.219 1.885 1.885 0 111.333 3.219zm7.343-2.139a.943.943 0 11.002-1.886.943.943 0 01-.002 1.886zm117.769 28.574a1.888 1.888 0 01-1.85-2.254 1.891 1.891 0 011.482-1.481 1.879 1.879 0 011.936.802 1.884 1.884 0 01-.235 2.38 1.885 1.885 0 01-1.333.553zm6.065 1.894a.902.902 0 01-.833-.55.906.906 0 11.833.55zm57.42 28.411a1.897 1.897 0 01-1.727-1.2 1.892 1.892 0 01.446-2.056 1.894 1.894 0 111.281 3.256zm7.207-3.127a.943.943 0 110-1.886.943.943 0 010 1.886zm4.224 6.019a2.39 2.39 0 01-2.211-1.477 2.398 2.398 0 01.519-2.608 2.39 2.39 0 012.608-.519 2.391 2.391 0 010 4.422c-.29.12-.601.182-.916.182zm122.619 38.755c-2.828 0-5.122-1.469-5.122-3.291 0-1.822 2.294-3.281 5.122-3.281 2.829 0 5.113 1.468 5.113 3.281 0 1.813-2.294 3.291-5.113 3.291zm10.135-2.783a1.103 1.103 0 01-1.818.209 1.096 1.096 0 01-.14-1.215 1.101 1.101 0 011.958 1.006zm84.127 18.792a1.104 1.104 0 01-1.671.365 1.104 1.104 0 01-.03-1.71 1.105 1.105 0 011.221-.141 1.105 1.105 0 01.48 1.468v.018zm10.879 5.376c-2.82 0-5.113-1.477-5.113-3.291 0-1.813 2.293-3.29 5.113-3.29 2.819 0 5.113 1.477 5.113 3.29 0 1.814-2.239 3.273-5.068 3.273l-.045.018zm9.972 1.813a1.104 1.104 0 01-1.478.481 1.109 1.109 0 01-.48-1.487 1.092 1.092 0 011.069-.594 1.108 1.108 0 01.749.385 1.087 1.087 0 01.258.802 1.103 1.103 0 01-.118.413zm4.75-5.838a1.883 1.883 0 01-1.849-2.253 1.88 1.88 0 011.481-1.482 1.883 1.883 0 011.936.802c.207.31.318.675.318 1.048a1.883 1.883 0 01-1.85 1.894l-.036-.009zm64.084-1.378a1.112 1.112 0 01-1.674.358 1.106 1.106 0 011.202-1.844 1.085 1.085 0 01.572.64 1.1 1.1 0 01-.064.855l-.036-.009zm5.321 2.847a1.893 1.893 0 11.72-3.644 1.899 1.899 0 011.165 1.758 1.892 1.892 0 01-1.849 1.895l-.036-.009z"
+      />
+      <path
+        fill="#9CA3AF"
+        d="M620.578 306.163l-1.45.045-1.813.045-2.466.145c-3.744.227-9.265.671-16.409 1.36-14.278 1.36-35.028 3.626-60.956 6.681-14.441.318-30.577.164-48.11-.462-17.532-.626-36.452-1.886-56.477-3.626l-15.248-1.405-15.593-1.705-3.961-.435-3.971-.498-8.014-1.016c-2.719-.344-5.385-.661-8.095-1.042l-8.159-1.179c-21.875-3.191-44.538-7.116-67.474-12.592l-8.023-1.976c-1.332-.335-2.674-.634-3.989-1.006l-3.952-1.124c-5.249-1.514-10.498-2.883-15.584-4.687l-7.642-2.538c-2.529-.907-5.013-1.813-7.506-2.72a727.395 727.395 0 01-14.704-5.702c-19.364-7.76-37.748-15.946-55.236-23.77-17.487-7.823-34.113-15.275-49.859-21.865-15.747-6.591-30.388-12.692-44.149-17.225a198.07 198.07 0 00-37.957-9.011 116.967 116.967 0 00-29.417-.154 95.44 95.44 0 00-18.131 4.107c-2.04.625-3.545 1.251-4.533 1.632l-1.55.571s.517-.218 1.532-.617c1.016-.399 2.52-1.033 4.533-1.677a94.192 94.192 0 0118.13-4.197 115.775 115.775 0 0129.472.081 196.767 196.767 0 0138.075 8.948c13.78 4.533 28.484 10.57 44.194 17.152 15.71 6.581 32.355 14.006 49.86 21.829 17.505 7.824 35.89 16.01 55.226 23.734 4.832 1.949 9.737 3.834 14.695 5.702 2.493.906 4.977 1.876 7.497 2.719l7.634 2.539c5.076 1.813 10.325 3.163 15.565 4.677l3.943 1.125c1.315.371 2.657.661 3.989 1.006l8.023 1.967c22.917 5.439 45.572 9.401 67.429 12.592l8.158 1.187c2.72.381 5.44.698 8.087 1.043l8.014 1.024 3.97.499 3.962.435 15.583 1.713 15.212 1.424c20.016 1.74 38.981 2.964 56.459 3.626 17.479.662 33.651.816 48.047.526 25.936-3.028 46.696-5.231 60.992-6.537 7.144-.661 12.692-1.078 16.418-1.278l2.466-.118h1.813l1.45.028zM239.649 315.418H234.382c-.48 0-.997 0-1.55-.054l-3.626-.172c-1.333-.1-2.774-.263-4.324-.408-3.101-.354-6.609-.907-10.453-1.704a162.49 162.49 0 01-26.289-8.159c-9.655-3.799-19.944-8.64-30.768-13.798-10.825-5.158-21.132-9.917-30.723-13.779a170.097 170.097 0 00-26.163-8.386 110.356 110.356 0 00-18.33-2.62c-.553 0-1.06-.081-1.55-.099h-1.36l-2.13-.046h-1.759 5.258c.48 0 .997.055 1.55.082a105.29 105.29 0 0118.394 2.475 166.932 166.932 0 0126.289 8.313c9.646 3.843 19.944 8.702 30.75 13.87 10.806 5.167 21.104 9.972 30.732 13.824a165.293 165.293 0 0026.217 8.214 117.89 117.89 0 0010.407 1.767c1.55.155 2.983.336 4.315.454l3.626.199c.544 0 1.061.073 1.551.091h4.804l.399-.064zM463.202 355.424c-.071.102-.15.199-.235.29l-.726.825a12.7 12.7 0 01-3.454 2.43 17.322 17.322 0 01-6.481 1.622 28.706 28.706 0 01-8.803-.906 58.527 58.527 0 01-9.972-3.926 74.152 74.152 0 00-11.35-4.614 25.32 25.32 0 00-6.509-.961 29.416 29.416 0 00-6.817.789c-4.587 1.024-9.138 2.856-14.024 4.025a29.544 29.544 0 01-14.559.045 60.739 60.739 0 01-12.692-4.913c-3.889-1.931-7.497-3.916-10.969-5.566a55.708 55.708 0 00-9.972-3.69 33.936 33.936 0 00-8.703-1.187 23.471 23.471 0 00-6.554.906c-.778.229-1.538.514-2.275.852-.548.22-1.078.481-1.587.78l-.952.553-.335.172c.096-.081.199-.154.308-.218l.907-.589a11.863 11.863 0 011.586-.834 17.368 17.368 0 012.276-.906 23.133 23.133 0 016.608-1.016 33.916 33.916 0 018.785 1.124 55.948 55.948 0 0110.089 3.627c3.5 1.64 7.117 3.626 10.997 5.53a61.037 61.037 0 0012.61 4.859c2.315.568 4.687.872 7.071.906a30.832 30.832 0 007.252-.906c4.841-1.152 9.392-2.983 14.024-4.007a29.29 29.29 0 016.935-.798c2.24.047 4.464.382 6.618.997a73.915 73.915 0 0111.413 4.642 58.665 58.665 0 009.918 3.952 28.533 28.533 0 008.703 1.006 17.32 17.32 0 006.409-1.523 13.47 13.47 0 003.472-2.329l.753-.798c.072-.087.151-.169.235-.245zM535.544 352.985c0 .091-1.559-.426-4.116-.906a35.902 35.902 0 00-4.532-.481 38.077 38.077 0 00-5.548.227 37.65 37.65 0 00-5.44 1.115 34.815 34.815 0 00-4.269 1.55c-2.366 1.043-3.735 1.913-3.781 1.813.278-.252.582-.473.907-.661.369-.246.75-.473 1.142-.68.453-.245.97-.544 1.568-.807a31.348 31.348 0 014.288-1.659 35.302 35.302 0 015.512-1.169 34.16 34.16 0 015.621-.191c1.523.084 3.038.281 4.532.589.644.109 1.215.281 1.723.408.429.108.853.239 1.269.39.39.113.767.268 1.124.462z"
+      />
+    </svg>
+  );
+}
+
+export default Error404Icon;
diff --git a/src/design-system/components/organisms/error-500.tsx b/src/design-system/components/organisms/error-500.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+function Error500Icon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="122"
+      height="129"
+      fill="none"
+      viewBox="0 0 122 129"
+    >
+      <path
+        stroke="#DC2626"
+        strokeDasharray="6 6"
+        strokeLinecap="round"
+        strokeWidth="2"
+        d="M36.906 40l49 49M36.906 89l49-49"
+      />
+      <path
+        fill="#EDEEF1"
+        d="M93.906 7.892L107.933 0l13.989 7.703-14.096 7.827-13.92-7.638z"
+      />
+      <path
+        fill="#9CA3AF"
+        d="M93.911 7.889v16.08l13.904 8.03V15.517L93.911 7.89z"
+      />
+      <path
+        fill="#D1D5DB"
+        d="M107.815 15.519l14.113-7.827v16.16L107.815 32V15.519z"
+      />
+      <path
+        fill="#EDEEF1"
+        d="M.906 7.892L14.933 0l13.99 7.703-14.097 7.827L.906 7.892z"
+      />
+      <path
+        fill="#9CA3AF"
+        d="M.911 7.889v16.08l13.904 8.03V15.517L.911 7.89z"
+      />
+      <path
+        fill="#D1D5DB"
+        d="M14.815 15.519l14.113-7.827v16.16L14.815 32V15.519z"
+      />
+      <path
+        fill="#EDEEF1"
+        d="M.906 104.892L14.933 97l13.99 7.703-14.097 7.827-13.92-7.638z"
+      />
+      <path
+        fill="#9CA3AF"
+        d="M.911 104.889v16.079l13.904 8.031v-16.482L.911 104.889z"
+      />
+      <path
+        fill="#D1D5DB"
+        d="M14.815 112.519l14.113-7.827v16.159L14.815 129v-16.481z"
+      />
+      <path
+        fill="#EDEEF1"
+        d="M93.906 104.892L107.933 97l13.989 7.703-14.096 7.827-13.92-7.638z"
+      />
+      <path
+        fill="#9CA3AF"
+        d="M93.911 104.889v16.079l13.904 8.031v-16.482l-13.904-7.628z"
+      />
+      <path
+        fill="#D1D5DB"
+        d="M107.815 112.519l14.113-7.827v16.159L107.815 129v-16.481z"
+      />
+    </svg>
+  );
+}
+
+export default Error500Icon;
diff --git a/src/design-system/components/organisms/page-404.tsx b/src/design-system/components/organisms/page-404.tsx
@@ -0,0 +1,29 @@
+import Error404Icon from '~/components/organisms/error-404';
+import { Button } from '~/components/atoms/button';
+
+interface IPage404 {
+  heading?: string;
+  content?: string;
+  link?: string;
+}
+
+const Page404 = ({
+  heading = 'Whoops (404)! Page not found',
+  content = 'We’ll get to the bottom of it, no matter how many rabbit holes we must go down. In the meantime, feel free to browse other areas of our site.',
+  link,
+}: IPage404) => {
+  return (
+    <div className="flex flex-col items-center justify-center h-screen gap-8xl">
+      <Error404Icon />
+      <div className="flex flex-col items-center justify-center gap-5xl max-w-md text-center">
+        <div className="flex flex-col gap-3xl">
+          <div className="heading3xl">{heading}</div>
+          <div className="bodyMd text-text-soft md:w-[544px]">{content}</div>
+        </div>
+        <Button variant="basic" size="md" content="Go to homepage" to={link} />
+      </div>
+    </div>
+  );
+};
+
+export default Page404;
diff --git a/src/design-system/components/organisms/page-500.tsx b/src/design-system/components/organisms/page-500.tsx
@@ -0,0 +1,29 @@
+import { Button } from '~/components/atoms/button';
+import Error500Icon from '~/components/organisms/error-500';
+
+interface IPage404 {
+  heading?: string;
+  content?: string;
+  link?: string;
+}
+
+const Page500 = ({
+  heading = 'Internal server error',
+  content = 'The server encountered an error and could not complete your requests.',
+  link,
+}: IPage404) => {
+  return (
+    <div className="flex flex-col items-center justify-center h-screen gap-8xl">
+      <Error500Icon />
+      <div className="flex flex-col items-center justify-center gap-5xl max-w-md text-center">
+        <div className="flex flex-col gap-3xl">
+          <div className="heading3xl">{heading}</div>
+          <div className="bodyMd text-text-soft md:w-[544px]">{content}</div>
+        </div>
+        <Button variant="basic" size="md" content="Go to homepage" to={link} />
+      </div>
+    </div>
+  );
+};
+
+export default Page500;