feat: New frontpage

7 files changed, 341 insertions, 16 deletions

diff --git a/apps/web-shared/src/components/screens/GeneralErrorScreen.svelte b/apps/web-shared/src/components/screens/GeneralErrorScreen.svelte
new file mode 100644
index 0000000..dd4b5bd
--- /dev/null
+++ b/apps/web-shared/src/components/screens/GeneralErrorScreen.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let message;
+	export let status;
+</script>
+
+<h1>{status}</h1>
+<p>{message}</p>
diff --git a/apps/web-shared/src/components/screens/NotFoundScreen.svelte b/apps/web-shared/src/components/screens/NotFoundScreen.svelte
new file mode 100644
index 0000000..69d55af
--- /dev/null
+++ b/apps/web-shared/src/components/screens/NotFoundScreen.svelte
@@ -0,0 +1,161 @@
+<style>
+    .fof__animation svg {
+        display: block;
+        max-width: 520px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    #i-fof-browser {
+        -webkit-transform-origin: 260px 304px;
+        transform-origin: 260px 304px;
+        -webkit-animation: i-fof-browser 4s infinite;
+        animation: i-fof-browser 4s infinite;
+    }
+
+    #i-fof-shadow {
+        -webkit-transform-origin: 282px 410px;
+        transform-origin: 282px 410px;
+        -webkit-animation: i-fof-shadow 4s infinite;
+        animation: i-fof-shadow 4s infinite;
+    }
+
+    @-webkit-keyframes i-fof-browser {
+        0%, 100% {
+            -webkit-transform: translateY(0) scale(1);
+            transform: translateY(0) scale(1);
+        }
+        50% {
+            -webkit-transform: translateY(-10%) scale(0.9);
+            transform: translateY(-10%) scale(0.9);
+        }
+    }
+
+    @keyframes i-fof-browser {
+        0%, 100% {
+            -webkit-transform: translateY(0) scale(1);
+            transform: translateY(0) scale(1);
+        }
+        50% {
+            -webkit-transform: translateY(-10%) scale(0.9);
+            transform: translateY(-10%) scale(0.9);
+        }
+    }
+
+    @-webkit-keyframes i-fof-shadow {
+        0%, 100% {
+            -webkit-transform: scale(1);
+            transform: scale(1);
+        }
+        50% {
+            -webkit-transform: scale(0.8);
+            transform: scale(0.8);
+        }
+    }
+
+    @keyframes i-fof-shadow {
+        0%, 100% {
+            -webkit-transform: scale(1);
+            transform: scale(1);
+        }
+        50% {
+            -webkit-transform: scale(0.8);
+            transform: scale(0.8);
+        }
+    }
+</style>
+
+<section class="fof">
+    <div class="container max-width-sm">
+        <div class="text-component text-center margin-bottom-lg">
+            <h1>Page not found</h1>
+            <p>Sorry, but the page you were looking for could not be found.</p>
+            <p><a href="/">Go to homepage</a>.</p>
+        </div>
+
+        <div class="fof__animation"
+             aria-lable="404 animation">
+            <svg id="i-fof"
+                 viewBox="0 0 520 450">
+                <g id="i-fof-ship">
+                    <path id="i-fof-capsule"
+                          d="M260,9a53,53,0,0,0-53,53H313A53,53,0,0,0,260,9Z"
+                          fill="var(--color-contrast-lower)"/>
+                    <path id="i-fof-ship-top"
+                          d="M448,73H72s78-37,188-37S448,73,448,73Z"
+                          fill="var(--color-contrast-low)"/>
+                    <path id="i-fof-ship-bottom"
+                          d="M448,73A1185.633,1185.633,0,0,0,72,73c80.173,34.484,144.2,37,188,37C370,110,448,73,448,73Z"
+                          fill="var(--color-contrast-high)"/>
+                </g>
+                <g id="i-fof-browser">
+                    <rect id="i-fof-browser-canvas"
+                          x="179"
+                          y="243"
+                          width="160"
+                          height="109"
+                          rx="6"
+                          transform="translate(131.361 -75.723) rotate(22.162)"
+                          fill="var(--color-contrast-higher)"/>
+                    <g id="i-fof-browser-dots"
+                       fill="var(--color-bg)">
+                        <circle cx="211.713"
+                                cy="228.029"
+                                r="3"/>
+                        <circle cx="221.9"
+                                cy="232.179"
+                                r="3"/>
+                        <circle cx="232.088"
+                                cy="236.328"
+                                r="3"/>
+                    </g>
+                    <rect id="i-fof-browser-body"
+                          x="180.737"
+                          y="258.557"
+                          width="152"
+                          height="89"
+                          rx="2"
+                          transform="translate(133.29 -74.459) rotate(22.162)"
+                          fill="var(--color-bg)"/>
+                    <g id="i-fof-emoji">
+                        <path d="M248.626,322.968A22,22,0,1,1,277.3,310.893,22,22,0,0,1,248.626,322.968Z"
+                              fill="#ffd764"/>
+                        <path d="M264.3,311a7,7,0,1,1,9.124-3.843A7,7,0,0,1,264.3,311Z"
+                              fill="#fff"/>
+                        <path d="M245.778,303.452a7,7,0,1,1,9.123-3.842A7,7,0,0,1,245.778,303.452Z"
+                              fill="#fff"/>
+                        <path d="M258.5,317.274l-12.966-5.281a1,1,0,0,1,.755-1.853l12.966,5.282a1,1,0,0,1-.755,1.852Z"
+                              fill="#444"/>
+                        <path d="M247.287,299.747a3,3,0,1,1,3.91-1.646A3,3,0,0,1,247.287,299.747Z"
+                              fill="#444"/>
+                        <path d="M265.809,307.292a3,3,0,1,1,3.91-1.647A3,3,0,0,1,265.809,307.292Z"
+                              fill="#444"/>
+                    </g>
+                </g>
+                <polygon id="i-fof-radar-body"
+                         points="415 410 105 410 196 106 324 106 415 410"
+                         fill="#4ad36b"
+                         opacity="0.5"/>
+                <ellipse id="i-fof-radar-bottom"
+                         cx="260"
+                         cy="410"
+                         rx="155"
+                         ry="28"
+                         fill="#4ad36b"/>
+                <ellipse id="i-fof-shadow"
+                         cx="282"
+                         cy="410"
+                         rx="72"
+                         ry="10"
+                         opacity="0.4"
+                         fill="var(--color-black)"/>
+                <ellipse id="i-fof-radar-top"
+                         cx="260"
+                         cy="106"
+                         rx="64"
+                         ry="6"
+                         fill="#4ad36b"/>
+            </svg>
+        </div>
+    </div>
+</section>
diff --git a/apps/web-shared/src/lib/configuration.ts b/apps/web-shared/src/lib/configuration.ts
index e4cd1ef..188d615 100644
--- a/apps/web-shared/src/lib/configuration.ts
+++ b/apps/web-shared/src/lib/configuration.ts
@@ -1,26 +1,26 @@
 export const API_ADDRESS = "https://api.dev.greatoffice.life";
 export const PROJECTS_ADDRESS = "https://projects.dev.greatoffice.life";
-export const ACCOUNTS_ADDRESS = "https://a.dev.greatoffice.life";
+export const PORTAL_ADDRESS = "https://portal.dev.greatoffice.life";
 export const FRONTPAGE_ADDRESS = "https://greatoffice.life";
-export const DEV_ACCOUNTS_ADDRESS = "http://localhost:3001";
+export const DEV_PORTAL_ADDRESS = "http://localhost:3001";
 export const DEV_FRONTPAGE_ADDRESS = "http://localhost:3002";
 export const DEV_API_ADDRESS = "http://localhost:5000";
 export const DEV_PROJECTS_ADDRESS = "http://localhost:3000";
 export const SECONDS_BETWEEN_SESSION_CHECK = 600;
 
-export function projects_base(path: string): string {
+export function projects_base(path: string = ""): string {
     return (is_development() ? DEV_PROJECTS_ADDRESS : PROJECTS_ADDRESS) + (path ? "/" + path : "/");
 }
 
-export function frontpage_base(path: string): string {
+export function frontpage_base(path: string = ""): string {
     return (is_development() ? DEV_FRONTPAGE_ADDRESS : FRONTPAGE_ADDRESS) + (path ? "/" + path : "/");
 }
 
-export function accounts_base(path: string): string {
-    return (is_development() ? DEV_ACCOUNTS_ADDRESS : ACCOUNTS_ADDRESS) + (path ? "/" + path : "/");
+export function portal_base(path: string = ""): string {
+    return (is_development() ? DEV_PORTAL_ADDRESS : PORTAL_ADDRESS) + (path ? "/" + path : "/");
 }
 
-export function api_base(path: string): string {
+export function api_base(path: string = ""): string {
     return (is_development() ? DEV_API_ADDRESS : API_ADDRESS) + (path ? "/" + path : "/");
 }
 
diff --git a/apps/web-shared/src/styles/base/_breakpoints.scss b/apps/web-shared/src/styles/base/_breakpoints.scss
index a7f1eda..9b61af3 100644
--- a/apps/web-shared/src/styles/base/_breakpoints.scss
+++ b/apps/web-shared/src/styles/base/_breakpoints.scss
@@ -1,15 +1,19 @@
 $breakpoints: (
-  xs: 32rem, // ~512px
-  sm: 48rem, // ~768px
-  md: 64rem, // ~1024px
-  lg: 80rem, // ~1280px
-  xl: 90rem  // ~1440px
+        xs: "768px",
+        sm: "768px",
+        md: "1200px",
+        lg: "1200px",
+        xl: "1600px"
 ) !default;
 
 @mixin breakpoint($breakpoint, $logic: false) {
-  @if( $logic ) {
-    @media #{$logic} and (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }
+  @if ($logic) {
+    @media #{$logic} and (min-width: map-get($map: $breakpoints, $key: $breakpoint)) {
+      @content;
+    }
   } @else {
-    @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }
+    @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) {
+      @content;
+    }
   }
 }
diff --git a/apps/web-shared/src/styles/base/_util.scss b/apps/web-shared/src/styles/base/_util.scss
index d688e1c..c384c2c 100644
--- a/apps/web-shared/src/styles/base/_util.scss
+++ b/apps/web-shared/src/styles/base/_util.scss
@@ -1250,7 +1250,7 @@ $breakpointsNr: length($breakpoints);
 [class^="translate"], [class*=" translate"],
 [class^="-scale"], [class*=" -scale"],
 [class^="scale"], [class*=" scale"],
-[class^="-skew"], [class*=" -skew"]
+[class^="-skew"], [class*=" -skew"],
 [class^="skew"], [class*=" skew"] {
   --translate: 0;
   --rotate: 0;
diff --git a/apps/web-shared/src/styles/components/404.scss b/apps/web-shared/src/styles/components/404.scss
new file mode 100644
index 0000000..1a0267a
--- /dev/null
+++ b/apps/web-shared/src/styles/components/404.scss
@@ -0,0 +1,43 @@
+@use '../base' as *;
+
+.fof {
+}
+
+.fof__animation {
+  svg {
+    display: block;
+    max-width: 520px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+#i-fof-browser {
+  transform-origin: 260px 304px;
+  animation: i-fof-browser 4s infinite;
+}
+
+#i-fof-shadow {
+  transform-origin: 282px 410px;
+  animation: i-fof-shadow 4s infinite;
+}
+
+@keyframes i-fof-browser {
+  0%, 100% {
+    transform: translateY(0) scale(1);
+  }
+
+  50% {
+    transform: translateY(-10%) scale(0.9);
+  }
+}
+
+@keyframes i-fof-shadow {
+  0%, 100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.8);
+  }
+}
diff --git a/apps/web-shared/src/styles/components/responsive-sidebar.scss b/apps/web-shared/src/styles/components/responsive-sidebar.scss
new file mode 100644
index 0000000..29a45f4
--- /dev/null
+++ b/apps/web-shared/src/styles/components/responsive-sidebar.scss
@@ -0,0 +1,110 @@
+@use '../base' as *;
+
+/* -------------------------------- 
+File#: _1_responsive-sidebar
+Title: Responsive Sidebar
+Descr: Responsive sidebar container
+Usage: codyhouse.co/license
+-------------------------------- */
+
+$maxwidth: 250px;
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-index-fixed-element, 10);
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+
+  &::after { /* overlay layer */
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: alpha(var(--color-black), 0);
+    z-index: 1;
+  }
+
+  @include breakpoint(sm) {
+    visibility: visible;
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    max-width: $maxwidth;
+    border-right: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--border-o, 1));
+
+    .sidebar__header {
+      display: none;
+    }
+
+    .sidebar__panel {
+      position: relative !important;
+    }
+  }
+
+  .sidebar__panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    background-color: var(--color-bg);
+  }
+
+  &.sidebar--right-on-mobile {
+    .sidebar__panel {
+      left: auto;
+      right: 0;
+      transform: translateX(100%);
+    }
+  }
+
+  &.sidebar--is-visible {
+    visibility: visible;
+
+    &::after {
+      background-color: alpha(var(--color-black), 0.55);
+    }
+
+    .sidebar__panel {
+      transform: translateX(0);
+      box-shadow: var(--shadow-md);
+    }
+  }
+}
+
+.sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+}
+
+.sidebar__close-btn {
+  --size: 32px;
+  width: var(--size);
+  height: var(--size);
+  display: flex;
+  border-radius: 50%;
+  background-color: var(--color-bg-light);
+  box-shadow: var(--inner-glow), var(--shadow-sm);
+  flex-shrink: 0;
+
+  .icon {
+    display: block;
+    margin: auto;
+  }
+
+  &:hover {
+    background-color: var(--color-bg-lighter);
+    box-shadow: var(--inner-glow), var(--shadow-md);
+  }
+}