feat: add @polar-sh/sveltekit (#539)

* feat add @polar-sh/sveltekit

* remove all lemonsqueezy text

apps/dashboard/src/error.html

@@ -1,33 +1,111 @@
-<script>
-  import ErrorIcon from '$lib/components/Icons/ErrorIcon.svelte';
-</script>
-
-<div
-  class="error-container m-auto flex flex-col-reverse lg:flex-row md:flex-col-reverse items-center justify-center h-screen w-screen py-10 dark:bg-black"
->
-  <div class="md:w-full p-2 lg:w-2/4">
-    <h2 class="w-full text-lg lg:text-3xl font-medium lg:font-normal">
-      Something unexpected occured.
-    </h2>
-    <p class="dark:text-white w-full text-base font-normal my-6 text-gray-600">
+<div class="error-container">
+  <div class="error-content">
+    <img src="/logo-512.png" class="logo" alt="ClassroomIO - Logo" />
+    <h2>Something unexpected occured.</h2>
+    <p>
       Don't worry, your learning is safe. It isn't your fault, it is ours. We have gotten the error
       notification and will push a fix ASAP. In the meantime, take a short break and come back a bit
       later.
     </p>
-    <a
-      class="bg-primary-700 hover:bg-primary-900 hover:no-underline transition-all py-3 px-9 rounded-xl text-white mt-3"
-      href="mailto:support@classroomio.com"
-      >Contact Us</a
-    >
+    <a href="mailto:support@classroomio.com">Contact Us</a>
   </div>
 
-  <div class="w-72 lg:w-2/4 flex items-center justify-center">
-    <ErrorIcon />
+  <div class="error-icon">
+    <img src="/500-error.svg" alt="Error" />
   </div>
 </div>
 
 <style>
+  body {
+    margin: 0;
+  }
   .error-container {
     max-width: 964px;
+    margin: auto;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 100vw;
+    padding: 0;
+  }
+
+  :global(.dark) .error-container {
+    background-color: black;
+  }
+
+  .error-content {
+    padding: 0.5rem;
+    width: 100%;
+  }
+
+  .error-content h2 {
+    width: 100%;
+    font-size: 1.125rem;
+    font-weight: 500;
+  }
+
+  .error-content p {
+    width: 100%;
+    font-size: 1rem;
+    font-weight: 400;
+    margin: 1.5rem 0;
+    color: rgb(75, 85, 99);
+  }
+
+  :global(.dark) .error-content p {
+    color: white;
+  }
+
+  .error-content .logo {
+    width: 5rem;
+  }
+
+  .error-content a {
+    background-color: rgb(29, 78, 216);
+    padding: 0.75rem 2.25rem;
+    border-radius: 0.75rem;
+    color: white;
+    margin-top: 0.75rem;
+    transition: all 0.2s;
+    display: inline-block;
+  }
+
+  .error-content a:hover {
+    background-color: rgb(30, 58, 138);
+    text-decoration: none;
+  }
+
+  .error-icon {
+    width: 18rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @media (min-width: 768px) {
+    .error-content {
+      width: 90%;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .error-container {
+      flex-direction: row;
+    }
+
+    .error-content {
+      width: 50%;
+    }
+
+    .error-content h2 {
+      font-size: 1.875rem;
+      font-weight: 400;
+    }
+
+    .error-icon {
+      width: 50%;
+    }
   }
 </style>