[DEV-19082] Implemented new error page for Bea theme

Author: fgyimah

app/[localeCode]/error.module.scss

@@ -0,0 +1,66 @@
+.container {
+    min-height: 50vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: Inter, sans-serif;
+    text-align: center;
+}
+
+.wrapper {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: $spacing-7;
+    gap: $spacing-5;
+    max-width: 900px;
+}
+
+.title {
+    color: #1f2937;
+    font-weight: 700;
+    font-size: 48px;
+    line-height: 1.2;
+    margin-bottom: $spacing-3;
+}
+
+.description {
+    color: #4b5563;
+    font-weight: 400;
+    font-size: $font-size-s;
+    line-height: 1.6;
+    margin: 0;
+}
+
+.link {
+    font-weight: 500;
+    text-decoration: none;
+    color: #4f46e5;
+    outline: none;
+    border: 0;
+    background: none;
+    padding: 0;
+
+    &:hover {
+        color: #4f46e5;
+        text-decoration: none;
+    }
+}
+
+.illustration {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: $spacing-1;
+}
+
+.svg {
+    width: 320px;
+    height: 248px;
+
+    @include not-desktop {
+        width: 245px;
+        height: 190px;
+    }
+}

app/[localeCode]/error.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable id-blacklist */
+
+'use client';
+
+import Illustration from '@/public/images/error.svg';
+
+import 'modern-normalize/modern-normalize.css';
+import '@/styles/styles.globals.scss';
+
+import styles from './error.module.scss';
+
+export default function Error({ reset }: { reset: () => void }) {
+    return (
+        <div className={styles.container}>
+            <div className={styles.wrapper}>
+                <div className={styles.illustration}>
+                    <Illustration className={styles.svg} />
+                </div>
+                <div className={styles.content}>
+                    <h1 className={styles.title}>We’re sorry, this newsroom couldn’t load</h1>
+                    <p className={styles.description}>
+                        Try to{' '}
+                        <button className={styles.link} onClick={reset}>
+                            refresh
+                        </button>{' '}
+                        the page, or visit the platform’s{' '}
+                        <a className={styles.link} href="https://status.prezly.com">
+                            status page
+                        </a>{' '}
+                        to see if any incidents are affecting the platform. You can also reach out
+                        to support via{' '}
+                        <a className={styles.link} href="mailto:support@prezly.com">
+                            {' '}
+                            email
+                        </a>
+                        .
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}