From 061be6158755f3fcee10d5d250308ea60e64f8ce Mon Sep 17 00:00:00 2001
From: Miguel Rivera <miguel@alphachronos.com>
Date: Tue, 18 Oct 2022 09:14:59 -0500
Subject: [PATCH 1/5] Update and cleanup redundant styles.

---
 package.json                              |   6 +-
 src/components/Navbars/AuthNavbar.svelte  |  14 +-
 src/components/Navbars/IndexNavbar.svelte |  16 +-
 src/components/Sidebar/Sidebar.svelte     |  99 +++++++---
 src/views/Index.svelte                    | 212 +++++++++++-----------
 src/views/admin/Dashboard.svelte          |   2 +-
 src/views/admin/Maps.svelte               |   2 +-
 src/views/admin/Settings.svelte           |   2 +-
 src/views/admin/Tables.svelte             |   2 +-
 src/views/auth/Login.svelte               |  16 +-
 10 files changed, 209 insertions(+), 162 deletions(-)

diff --git a/package.json b/package.json
index 8d5469c1..a8a45e0d 100644
--- a/package.json
+++ b/package.json
@@ -17,12 +17,12 @@
     "@rollup/plugin-commonjs": "17.1.0",
     "@rollup/plugin-node-resolve": "11.2.0",
     "autoprefixer": "10.2.5",
-    "postcss": "8.2.8",
+    "postcss": "^8.4.18",
     "rollup": "2.41.5",
     "rollup-plugin-livereload": "2.0.0",
     "rollup-plugin-svelte": "7.1.0",
     "rollup-plugin-terser": "7.0.2",
-    "svelte": "3.35.0"
+    "svelte": "^3.52.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.15.3",
@@ -32,6 +32,6 @@
     "chart.js": "2.9.4",
     "sirv-cli": "1.0.11",
     "svelte-routing": "1.5.0",
-    "tailwindcss": "2.0.4"
+    "tailwindcss": "^2.2.19"
   }
 }
diff --git a/src/components/Navbars/AuthNavbar.svelte b/src/components/Navbars/AuthNavbar.svelte
index b1151362..22ec2e7a 100644
--- a/src/components/Navbars/AuthNavbar.svelte
+++ b/src/components/Navbars/AuthNavbar.svelte
@@ -30,13 +30,15 @@
       <button
         class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
         type="button"
-        on:click="{setNavbarOpen}"
+        on:click={setNavbarOpen}
       >
-        <i class="text-white fas fa-bars"></i>
+        <i class="text-white fas fa-bars" />
       </button>
     </div>
     <div
-      class="lg:flex flex-grow items-center bg-white lg:bg-opacity-0 lg:shadow-none rounded shadow-lg {navbarOpen ? 'block':'hidden'}"
+      class="lg:flex flex-grow items-center bg-white lg:bg-opacity-0 lg:shadow-none rounded shadow-lg {navbarOpen
+        ? 'block'
+        : 'hidden'}"
       id="example-navbar-warning"
     >
       <ul class="flex flex-col lg:flex-row list-none mr-auto">
@@ -61,6 +63,7 @@
             class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
             href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-svelte%2F%23%2F"
             target="_blank"
+            rel="noreferrer"
           >
             <i
               class="lg:text-blueGray-200 text-blueGray-400 fab fa-facebook text-lg leading-lg"
@@ -73,7 +76,7 @@
           <a
             class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
             href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-svelte%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20Svelte%20UI%20Kit%20and%20Admin.%20Let%20Notus%20Svelte%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level."
-            target="_blank"
+            rel="noreferrer"
           >
             <i
               class="lg:text-blueGray-200 text-blueGray-400 fab fa-twitter text-lg leading-lg"
@@ -87,6 +90,7 @@
             class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
             href="https://github.com/creativetimofficial/notus-svelte?ref=ns-auth-navbar"
             target="_blank"
+            rel="noreferrer"
           >
             <i
               class="lg:text-blueGray-200 text-blueGray-400 fab fa-github text-lg leading-lg"
@@ -100,7 +104,7 @@
             class="bg-white text-blueGray-700 active:bg-blueGray-50 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3 ease-linear transition-all duration-150"
             type="button"
           >
-            <i class="fas fa-arrow-alt-circle-down"></i> Download
+            <i class="fas fa-arrow-alt-circle-down" /> Download
           </button>
         </li>
       </ul>
diff --git a/src/components/Navbars/IndexNavbar.svelte b/src/components/Navbars/IndexNavbar.svelte
index c6596f1a..77186968 100644
--- a/src/components/Navbars/IndexNavbar.svelte
+++ b/src/components/Navbars/IndexNavbar.svelte
@@ -30,13 +30,13 @@
       <button
         class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
         type="button"
-        on:click="{setNavbarOpen}"
+        on:click={setNavbarOpen}
       >
-        <i class="fas fa-bars"></i>
+        <i class="fas fa-bars" />
       </button>
     </div>
     <div
-      class="lg:flex flex-grow items-center {navbarOpen ? 'block':'hidden'}"
+      class="lg:flex flex-grow items-center {navbarOpen ? 'block' : 'hidden'}"
       id="example-navbar-warning"
     >
       <ul class="flex flex-col lg:flex-row list-none mr-auto">
@@ -45,7 +45,9 @@
             class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
             href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus?ref=ns-index-navbar"
           >
-            <i class="text-blueGray-400 far fa-file-alt text-lg leading-lg mr-2" />
+            <i
+              class="text-blueGray-400 far fa-file-alt text-lg leading-lg mr-2"
+            />
             Docs
           </a>
         </li>
@@ -58,7 +60,7 @@
           <a
             class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
             href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-svelte%2F%23%2F"
-            target="_blank"
+            rel="noreferrer"
           >
             <i class="text-blueGray-400 fab fa-facebook text-lg leading-lg" />
             <span class="lg:hidden inline-block ml-2">Share</span>
@@ -70,6 +72,7 @@
             class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
             href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-svelte%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20Svelte%20UI%20Kit%20and%20Admin.%20Let%20Notus%20Svelte%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level."
             target="_blank"
+            rel="noreferrer"
           >
             <i class="text-blueGray-400 fab fa-twitter text-lg leading-lg" />
             <span class="lg:hidden inline-block ml-2">Tweet</span>
@@ -81,6 +84,7 @@
             class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
             href="https://github.com/creativetimofficial/notus-svelte?ref=ns-index-navbar"
             target="_blank"
+            rel="noreferrer"
           >
             <i class="text-blueGray-400 fab fa-github text-lg leading-lg" />
             <span class="lg:hidden inline-block ml-2">Star</span>
@@ -92,7 +96,7 @@
             class="bg-red-400 text-white active:bg-red-500 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-lg outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3 ease-linear transition-all duration-150"
             type="button"
           >
-            <i class="fas fa-arrow-alt-circle-down"></i> Download
+            <i class="fas fa-arrow-alt-circle-down" /> Download
           </button>
         </li>
       </ul>
diff --git a/src/components/Sidebar/Sidebar.svelte b/src/components/Sidebar/Sidebar.svelte
index fc0cf81c..8d4b9956 100644
--- a/src/components/Sidebar/Sidebar.svelte
+++ b/src/components/Sidebar/Sidebar.svelte
@@ -24,9 +24,9 @@
     <button
       class="cursor-pointer text-black opacity-50 md:hidden px-3 py-1 text-xl leading-none bg-transparent rounded border border-solid border-transparent"
       type="button"
-      on:click={() => toggleCollapseShow('bg-white m-2 py-3 px-6')}
+      on:click={() => toggleCollapseShow("bg-white m-2 py-3 px-6")}
     >
-      <i class="fas fa-bars"></i>
+      <i class="fas fa-bars" />
     </button>
     <!-- Brand -->
     <a
@@ -67,9 +67,9 @@
             <button
               type="button"
               class="cursor-pointer text-black opacity-50 md:hidden px-3 py-1 text-xl leading-none bg-transparent rounded border border-solid border-transparent"
-              on:click={() => toggleCollapseShow('hidden')}
+              on:click={() => toggleCollapseShow("hidden")}
             >
-              <i class="fas fa-times"></i>
+              <i class="fas fa-times" />
             </button>
           </div>
         </div>
@@ -80,7 +80,7 @@
           <input
             type="text"
             placeholder="Search"
-            class="border-0 px-3 py-2 h-12 border border-solid border-blueGray-500 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-base leading-snug shadow-none outline-none focus:outline-none w-full font-normal"
+            class="border-0 px-3 py-2 h-12 border-solid border-blueGray-500 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-base leading-snug shadow-none outline-none focus:outline-none w-full font-normal"
           />
         </div>
       </form>
@@ -100,11 +100,19 @@
           <a
             use:link
             href="/admin/dashboard"
-            class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/dashboard') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
+            class="text-xs uppercase py-3 font-bold block {location.href.indexOf(
+              '/admin/dashboard'
+            ) !== -1
+              ? 'text-red-500 hover:text-red-600'
+              : 'text-blueGray-700 hover:text-blueGray-500'}"
           >
             <i
-              class="fas fa-tv mr-2 text-sm {location.href.indexOf('/admin/dashboard') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
-            ></i>
+              class="fas fa-tv mr-2 text-sm {location.href.indexOf(
+                '/admin/dashboard'
+              ) !== -1
+                ? 'opacity-75'
+                : 'text-blueGray-300'}"
+            />
             Dashboard
           </a>
         </li>
@@ -113,11 +121,19 @@
           <a
             use:link
             href="/admin/settings"
-            class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/settings') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
+            class="text-xs uppercase py-3 font-bold block {location.href.indexOf(
+              '/admin/settings'
+            ) !== -1
+              ? 'text-red-500 hover:text-red-600'
+              : 'text-blueGray-700 hover:text-blueGray-500'}"
           >
             <i
-              class="fas fa-tools mr-2 text-sm {location.href.indexOf('/admin/settings') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
-            ></i>
+              class="fas fa-tools mr-2 text-sm {location.href.indexOf(
+                '/admin/settings'
+              ) !== -1
+                ? 'opacity-75'
+                : 'text-blueGray-300'}"
+            />
             Settings
           </a>
         </li>
@@ -126,11 +142,19 @@
           <a
             use:link
             href="/admin/tables"
-            class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/tables') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
+            class="text-xs uppercase py-3 font-bold block {location.href.indexOf(
+              '/admin/tables'
+            ) !== -1
+              ? 'text-red-500 hover:text-red-600'
+              : 'text-blueGray-700 hover:text-blueGray-500'}"
           >
             <i
-              class="fas fa-table mr-2 text-sm {location.href.indexOf('/admin/tables') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
-            ></i>
+              class="fas fa-table mr-2 text-sm {location.href.indexOf(
+                '/admin/tables'
+              ) !== -1
+                ? 'opacity-75'
+                : 'text-blueGray-300'}"
+            />
             Tables
           </a>
         </li>
@@ -139,11 +163,19 @@
           <a
             use:link
             href="/admin/maps"
-            class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/maps') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
+            class="text-xs uppercase py-3 font-bold block {location.href.indexOf(
+              '/admin/maps'
+            ) !== -1
+              ? 'text-red-500 hover:text-red-600'
+              : 'text-blueGray-700 hover:text-blueGray-500'}"
           >
             <i
-              class="fas fa-map-marked mr-2 text-sm {location.href.indexOf('/admin/maps') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
-            ></i>
+              class="fas fa-map-marked mr-2 text-sm {location.href.indexOf(
+                '/admin/maps'
+              ) !== -1
+                ? 'opacity-75'
+                : 'text-blueGray-300'}"
+            />
             Maps
           </a>
         </li>
@@ -166,7 +198,7 @@
             class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
             href="/auth/login"
           >
-            <i class="fas fa-fingerprint text-blueGray-300 mr-2 text-sm"></i>
+            <i class="fas fa-fingerprint text-blueGray-300 mr-2 text-sm" />
             Login
           </a>
         </li>
@@ -177,7 +209,7 @@
             class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
             href="/auth/register"
           >
-            <i class="fas fa-clipboard-list text-blueGray-300 mr-2 text-sm"></i>
+            <i class="fas fa-clipboard-list text-blueGray-300 mr-2 text-sm" />
             Register
           </a>
         </li>
@@ -200,7 +232,7 @@
             class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
             href="/landing"
           >
-            <i class="fas fa-newspaper text-blueGray-300 mr-2 text-sm"></i>
+            <i class="fas fa-newspaper text-blueGray-300 mr-2 text-sm" />
             Landing Page
           </a>
         </li>
@@ -211,7 +243,7 @@
             class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
             href="/profile"
           >
-            <i class="fas fa-user-circle text-blueGray-300 mr-2 text-sm"></i>
+            <i class="fas fa-user-circle text-blueGray-300 mr-2 text-sm" />
             Profile Page
           </a>
         </li>
@@ -231,9 +263,10 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/svelte/colors/notus"
             target="_blank"
+            rel="noreferrer"
             class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fas fa-paint-brush mr-2 text-blueGray-300 text-base"></i>
+            <i class="fas fa-paint-brush mr-2 text-blueGray-300 text-base" />
             Styles
           </a>
         </li>
@@ -242,9 +275,10 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/svelte/alerts/notus"
             target="_blank"
+            rel="noreferrer"
             class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-css3-alt mr-2 text-blueGray-300 text-base"></i>
+            <i class="fab fa-css3-alt mr-2 text-blueGray-300 text-base" />
             CSS Components
           </a>
         </li>
@@ -253,9 +287,10 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/angular/overview/notus"
             target="_blank"
+            rel="noreferrer"
             class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-angular mr-2 text-blueGray-300 text-base"></i>
+            <i class="fab fa-angular mr-2 text-blueGray-300 text-base" />
             Angular
           </a>
         </li>
@@ -264,9 +299,10 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/js/overview/notus"
             target="_blank"
+            rel="noreferrer"
             class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-js-square mr-2 text-blueGray-300 text-base"></i>
+            <i class="fab fa-js-square mr-2 text-blueGray-300 text-base" />
             Javascript
           </a>
         </li>
@@ -275,9 +311,10 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/overview/notus"
             target="_blank"
+            rel="noreferrer"
             class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-react mr-2 text-blueGray-300 text-base"></i>
+            <i class="fab fa-react mr-2 text-blueGray-300 text-base" />
             NextJS
           </a>
         </li>
@@ -286,9 +323,10 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/react/overview/notus"
             target="_blank"
+            rel="noreferrer"
             class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-react mr-2 text-blueGray-300 text-base"></i>
+            <i class="fab fa-react mr-2 text-blueGray-300 text-base" />
             React
           </a>
         </li>
@@ -297,9 +335,10 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus"
             target="_blank"
+            rel="noreferrer"
             class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fas fa-link mr-2 text-blueGray-300 text-base"></i>
+            <i class="fas fa-link mr-2 text-blueGray-300 text-base" />
             Svelte
           </a>
         </li>
@@ -308,13 +347,13 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/vue/overview/notus"
             target="_blank"
+            rel="noreferrer"
             class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
           >
-            <i class="fab fa-vuejs mr-2 text-blueGray-300 text-base"></i>
+            <i class="fab fa-vuejs mr-2 text-blueGray-300 text-base" />
             VueJS
           </a>
         </li>
-
       </ul>
     </div>
   </div>
diff --git a/src/views/Index.svelte b/src/views/Index.svelte
index 666c0001..eabbf140 100644
--- a/src/views/Index.svelte
+++ b/src/views/Index.svelte
@@ -16,7 +16,7 @@
   const login = "/assets/img/login.jpg";
   const profile = "/assets/img/profile.jpg";
   const landing = "/assets/img/landing.jpg";
-  export let location;
+  export const location = null;
 </script>
 
 <IndexNavbar />
@@ -28,21 +28,24 @@
           Notus Svelte - A beautiful extension for Tailwind CSS.
         </h2>
         <p class="mt-4 text-lg leading-relaxed text-blueGray-500">
-          Notus Svelte is Free and Open Source. It does not change any of the CSS from
+          Notus Svelte is Free and Open Source. It does not change any of the
+          CSS from
           <a
             href="https://tailwindcss.com/?ref=creativetim"
             class="text-blueGray-600"
             target="_blank"
+            rel="noreferrer"
           >
             Tailwind CSS.
           </a>
-          It features multiple HTML elements and it comes with dynamic
-          components for ReactJS, Vue and Angular.
+          It features multiple HTML elements and it comes with dynamic components
+          for ReactJS, Vue and Angular.
         </p>
         <div class="mt-12">
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus?ref=ns-index"
             target="_blank"
+            rel="noreferrer"
             class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-red-400 active:bg-red-500 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
           >
             Get started
@@ -51,6 +54,7 @@
             href="https://github.com/creativetimofficial/notus-svelte?ref=ns-index"
             class="github-star ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
             target="_blank"
+            rel="noreferrer"
           >
             Github Star
           </a>
@@ -61,7 +65,7 @@
 
   <img
     class="absolute top-0 b-auto right-0 pt-16 sm:w-6/12 -mt-48 sm:mt-0 w-10/12 max-h-860-px"
-    src="{patternVue}"
+    src={patternVue}
     alt="..."
   />
 </section>
@@ -83,7 +87,7 @@
       <polygon
         class="text-blueGray-100 fill-current"
         points="2560 0 2560 100 0 100"
-      ></polygon>
+      />
     </svg>
   </div>
   <div class="container mx-auto">
@@ -92,7 +96,7 @@
         class="w-10/12 md:w-6/12 lg:w-4/12 px-12 md:px-4 mr-auto ml-auto -mt-32"
       >
         <div
-          class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-red-400"
+          class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg"
         >
           <img
             alt="..."
@@ -109,7 +113,7 @@
               <polygon
                 points="-30,95 583,95 583,65"
                 class="text-red-400 fill-current"
-              ></polygon>
+              />
             </svg>
             <h4 class="text-xl font-bold text-white">
               Great for your awesome project
@@ -131,11 +135,9 @@
                 <div
                   class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
                 >
-                  <i class="fas fa-sitemap"></i>
+                  <i class="fas fa-sitemap" />
                 </div>
-                <h6 class="text-xl mb-1 font-semibold">
-                  CSS Components
-                </h6>
+                <h6 class="text-xl mb-1 font-semibold">CSS Components</h6>
                 <p class="mb-4 text-blueGray-500">
                   Notus Svelte comes with a huge number of Fully Coded CSS
                   components.
@@ -147,7 +149,7 @@
                 <div
                   class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
                 >
-                  <i class="fas fa-drafting-compass"></i>
+                  <i class="fas fa-drafting-compass" />
                 </div>
                 <h6 class="text-xl mb-1 font-semibold">
                   JavaScript Components
@@ -165,7 +167,7 @@
                 <div
                   class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
                 >
-                  <i class="fas fa-newspaper"></i>
+                  <i class="fas fa-newspaper" />
                 </div>
                 <h6 class="text-xl mb-1 font-semibold">Pages</h6>
                 <p class="mb-4 text-blueGray-500">
@@ -179,11 +181,9 @@
                 <div
                   class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
                 >
-                  <i class="fas fa-file-alt"></i>
+                  <i class="fas fa-file-alt" />
                 </div>
-                <h6 class="text-xl mb-1 font-semibold">
-                  Documentation
-                </h6>
+                <h6 class="text-xl mb-1 font-semibold">Documentation</h6>
                 <p class="mb-4 text-blueGray-500">
                   Built by developers for developers. You will love how easy is
                   to to work with Notus Svelte.
@@ -202,54 +202,56 @@
         <div
           class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
         >
-          <i class="fas fa-sitemap text-xl"></i>
+          <i class="fas fa-sitemap text-xl" />
         </div>
         <h3 class="text-3xl mb-2 font-semibold leading-normal">
           CSS Components
         </h3>
-        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600">
+        <p
+          class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600"
+        >
           Every element that you need in a product comes built in as a
           component. All components fit perfectly with each other and can have
           different colours.
         </p>
         <div class="block pb-6">
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Buttons
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Inputs
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Labels
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Menus
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Navbars
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Pagination
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Progressbars
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Typography
           </span>
@@ -257,10 +259,11 @@
         <a
           href="https://www.creative-tim.com/learning-lab/tailwind/svelte/alerts/notus?ref=ns-index"
           target="_blank"
+          rel="noreferrer"
           class="font-bold text-blueGray-700 hover:text-blueGray-500 ease-linear transition-all duration-150"
         >
           View All
-          <i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
+          <i class="fa fa-angle-double-right ml-1 leading-relaxed" />
         </a>
       </div>
 
@@ -268,32 +271,32 @@
         <div class="relative flex flex-col min-w-0 w-full mb-6 mt-48 md:mt-0">
           <img
             alt="..."
-            src="{componentBtn}"
+            src={componentBtn}
             class="w-full align-middle rounded absolute shadow-lg max-w-100-px left-145-px -top-29-px z-3"
           />
           <img
             alt="..."
-            src="{componentProfileCard}"
+            src={componentProfileCard}
             class="w-full align-middle rounded-lg absolute shadow-lg max-w-210-px left-260-px -top-160-px"
           />
           <img
             alt="..."
-            src="{componentInfoCard}"
+            src={componentInfoCard}
             class="w-full align-middle rounded-lg absolute shadow-lg max-w-180-px left-40-px -top-225-px z-2"
           />
           <img
             alt="..."
-            src="{componentInfo2}"
+            src={componentInfo2}
             class="w-full align-middle rounded-lg absolute shadow-2xl max-w-200-px -left-50-px top-25-px"
           />
           <img
             alt="..."
-            src="{componentMenu}"
+            src={componentMenu}
             class="w-full align-middle rounded absolute shadow-lg max-w-580-px -left-20-px top-210-px"
           />
           <img
             alt="..."
-            src="{componentBtnPink}"
+            src={componentBtnPink}
             class="w-full align-middle rounded absolute shadow-xl max-w-120-px left-195-px top-95-px"
           />
         </div>
@@ -307,38 +310,37 @@
             <a
               href="https://www.creative-tim.com/learning-lab/tailwind/svelte/alerts/notus?ref=ns-index"
               target="_blank"
+              rel="noreferrer"
             >
-              <div
-                class="bg-red-600 shadow-lg rounded-lg text-center p-8"
-              >
+              <div class="bg-red-600 shadow-lg rounded-lg text-center p-8">
                 <img
                   alt="..."
                   class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
                   src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/svelte.jpg"
                 />
-                <p class="text-lg text-white mt-4 font-semibold">
-                  Svelte
-                </p>
+                <p class="text-lg text-white mt-4 font-semibold">Svelte</p>
               </div>
             </a>
             <a
               href="https://www.creative-tim.com/learning-lab/tailwind/react/alerts/notus?ref=ns-index"
               target="_blank"
+              rel="noreferrer"
             >
-              <div class="bg-lightBlue-500 shadow-lg rounded-lg text-center p-8 mt-8">
+              <div
+                class="bg-lightBlue-500 shadow-lg rounded-lg text-center p-8 mt-8"
+              >
                 <img
                   alt="..."
                   class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
                   src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/react.jpg"
                 />
-                <p class="text-lg text-white mt-4 font-semibold">
-                  ReactJS
-                </p>
+                <p class="text-lg text-white mt-4 font-semibold">ReactJS</p>
               </div>
             </a>
             <a
               href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/alerts/notus?ref=ns-index"
               target="_blank"
+              rel="noreferrer"
             >
               <div
                 class="bg-blueGray-700 shadow-lg rounded-lg text-center p-8 mt-8"
@@ -348,9 +350,7 @@
                   class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
                   src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/nextjs.jpg"
                 />
-                <p class="text-lg text-white mt-4 font-semibold">
-                  NextJS
-                </p>
+                <p class="text-lg text-white mt-4 font-semibold">NextJS</p>
               </div>
             </a>
           </div>
@@ -358,6 +358,7 @@
             <a
               href="https://www.creative-tim.com/learning-lab/tailwind/js/alerts/notus?ref=ns-index"
               target="_blank"
+              rel="noreferrer"
             >
               <div class="bg-yellow-500 shadow-lg rounded-lg text-center p-8">
                 <img
@@ -365,14 +366,13 @@
                   class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
                   src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/js.png"
                 />
-                <p class="text-lg text-white mt-4 font-semibold">
-                  JavaScript
-                </p>
+                <p class="text-lg text-white mt-4 font-semibold">JavaScript</p>
               </div>
             </a>
             <a
               href="https://www.creative-tim.com/learning-lab/tailwind/angular/alerts/notus?ref=ns-index"
               target="_blank"
+              rel="noreferrer"
             >
               <div class="bg-red-700 shadow-lg rounded-lg text-center p-8 mt-8">
                 <img
@@ -380,14 +380,13 @@
                   class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
                   src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/angular.jpg"
                 />
-                <p class="text-lg text-white mt-4 font-semibold">
-                  Angular
-                </p>
+                <p class="text-lg text-white mt-4 font-semibold">Angular</p>
               </div>
             </a>
             <a
               href="https://www.creative-tim.com/learning-lab/tailwind/vue/alerts/notus?ref=ns-index"
               target="_blank"
+              rel="noreferrer"
             >
               <div
                 class="bg-emerald-500 shadow-lg rounded-lg text-center p-8 mt-8"
@@ -397,9 +396,7 @@
                   class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
                   src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/vue.jpg"
                 />
-                <p class="text-lg text-white mt-4 font-semibold">
-                  Vue.js
-                </p>
+                <p class="text-lg text-white mt-4 font-semibold">Vue.js</p>
               </div>
             </a>
           </div>
@@ -410,57 +407,61 @@
         <div
           class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
         >
-          <i class="fas fa-drafting-compass text-xl"></i>
+          <i class="fas fa-drafting-compass text-xl" />
         </div>
         <h3 class="text-3xl mb-2 font-semibold leading-normal">
           Javascript Components
         </h3>
-        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600">
+        <p
+          class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600"
+        >
           In order to create a great User Experience some components require
           JavaScript. In this way you can manipulate the elements on the page
           and give more options to your users.
         </p>
-        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600">
+        <p
+          class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600"
+        >
           We created a set of Components that are dynamic and come to help you.
         </p>
         <div class="block pb-6">
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Alerts
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Dropdowns
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Menus
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Modals
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Navbars
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Popovers
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Tabs
           </span>
           <span
-            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
+            class="text-xs font-semibold inline-block py-1 px-2 rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
           >
             Tooltips
           </span>
@@ -468,10 +469,11 @@
         <a
           href="https://www.creative-tim.com/learning-lab/tailwind/svelte/alerts/notus?ref=ns-index"
           target="_blank"
+          rel="noreferrer"
           class="font-bold text-blueGray-700 hover:text-blueGray-500 ease-linear transition-all duration-150"
         >
           View all
-          <i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
+          <i class="fa fa-angle-double-right ml-1 leading-relaxed" />
         </a>
       </div>
     </div>
@@ -484,11 +486,9 @@
           <div
             class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
           >
-            <i class="fas fa-file-alt text-xl"></i>
+            <i class="fas fa-file-alt text-xl" />
           </div>
-          <h3 class="text-3xl font-semibold">
-            Complex Documentation
-          </h3>
+          <h3 class="text-3xl font-semibold">Complex Documentation</h3>
           <p class="mt-4 text-lg leading-relaxed text-blueGray-500">
             This extension comes a lot of fully coded examples that help you get
             started faster. You can adjust the colors and also the programming
@@ -501,7 +501,7 @@
                   <span
                     class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-blueGray-50 mr-3"
                   >
-                    <i class="fas fa-fingerprint"></i>
+                    <i class="fas fa-fingerprint" />
                   </span>
                 </div>
                 <div>
@@ -517,7 +517,7 @@
                   <span
                     class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-blueGray-50 mr-3"
                   >
-                    <i class="fab fa-html5"></i>
+                    <i class="fab fa-html5" />
                   </span>
                 </div>
                 <div>
@@ -533,7 +533,7 @@
                   <span
                     class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-blueGray-50 mr-3"
                   >
-                    <i class="far fa-paper-plane"></i>
+                    <i class="far fa-paper-plane" />
                   </span>
                 </div>
                 <div>
@@ -555,7 +555,7 @@
             transform: scale(1) perspective(1040px) rotateY(-11deg)
               rotateX(2deg) rotate(2deg);
           "
-          src="{documentation}"
+          src={documentation}
         />
       </div>
     </div>
@@ -565,9 +565,9 @@
     <div class="w-full md:w-6/12 px-12 md:px-4">
       <h2 class="font-semibold text-4xl">Beautiful Example Pages</h2>
       <p class="text-lg leading-relaxed mt-4 mb-4 text-blueGray-500">
-        Notus Svelte is a completly new product built using our past
-        experience in web templates. Take the examples we made for you and start
-        playing with them.
+        Notus Svelte is a completly new product built using our past experience
+        in web templates. Take the examples we made for you and start playing
+        with them.
       </p>
     </div>
   </div>
@@ -579,9 +579,7 @@
       <div class="w-full lg:w-12/12 px-4 -mt-24">
         <div class="flex flex-wrap">
           <div class="w-full lg:w-4/12 px-4">
-            <h5 class="text-xl font-semibold pb-4 text-center">
-              Login Page
-            </h5>
+            <h5 class="text-xl font-semibold pb-4 text-center">Login Page</h5>
             <Link to="/auth/login">
               <div
                 class="hover:-mt-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg ease-linear transition-all duration-150"
@@ -589,16 +587,14 @@
                 <img
                   alt="..."
                   class="align-middle border-none max-w-full h-auto rounded-lg"
-                  src="{login}"
+                  src={login}
                 />
               </div>
             </Link>
           </div>
 
           <div class="w-full lg:w-4/12 px-4">
-            <h5 class="text-xl font-semibold pb-4 text-center">
-              Profile Page
-            </h5>
+            <h5 class="text-xl font-semibold pb-4 text-center">Profile Page</h5>
             <Link to="/profile">
               <div
                 class="hover:-mt-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg ease-linear transition-all duration-150"
@@ -606,16 +602,14 @@
                 <img
                   alt="..."
                   class="align-middle border-none max-w-full h-auto rounded-lg"
-                  src="{profile}"
+                  src={profile}
                 />
               </div>
             </Link>
           </div>
 
           <div class="w-full lg:w-4/12 px-4">
-            <h5 class="text-xl font-semibold pb-4 text-center">
-              Landing Page
-            </h5>
+            <h5 class="text-xl font-semibold pb-4 text-center">Landing Page</h5>
             <Link to="/landing">
               <div
                 class="hover:-mt-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg ease-linear transition-all duration-150"
@@ -623,7 +617,7 @@
                 <img
                   alt="..."
                   class="align-middle border-none max-w-full h-auto rounded-lg"
-                  src="{landing}"
+                  src={landing}
                 />
               </div>
             </Link>
@@ -641,30 +635,36 @@
         <div
           class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
         >
-          <i class="fas fa-code-branch text-xl"></i>
+          <i class="fas fa-code-branch text-xl" />
         </div>
         <h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
           Open Source
         </h3>
-        <p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-400">
+        <p
+          class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-400"
+        >
           Since
           <a
             href="https://tailwindcss.com/?ref=creativetim"
             class="text-blueGray-300"
             target="_blank"
+            rel="noreferrer"
           >
             Tailwind CSS
           </a>
           is an open source project we wanted to continue this movement too. You
-          can give this version a try to feel the design and also test the
-          quality of the code!
+          can give this version a try to feel the design and also test the quality
+          of the code!
         </p>
-        <p class="text-lg font-light leading-relaxed mt-0 mb-4 text-blueGray-400">
+        <p
+          class="text-lg font-light leading-relaxed mt-0 mb-4 text-blueGray-400"
+        >
           Get it free on Github and please help us spread the news with a Star!
         </p>
         <a
           href="https://github.com/creativetimofficial/notus-svelte?ref=ns-index"
           target="_blank"
+          rel="noreferrer"
           class="github-star mt-4 inline-block text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
         >
           Github Star
@@ -674,7 +674,7 @@
       <div class="w-full md:w-4/12 px-4 mr-auto ml-auto mt-32 relative">
         <i
           class="fab fa-github text-blueGray-700 text-55 absolute -top-150-px -right-100 left-auto opacity-80"
-        ></i>
+        />
       </div>
     </div>
   </div>
@@ -697,7 +697,7 @@
       <polygon
         class="text-blueGray-200 fill-current"
         points="2560 0 2560 100 0 100"
-      ></polygon>
+      />
     </svg>
   </div>
 
@@ -707,13 +707,9 @@
     >
       <div class="w-full text-center lg:w-8/12">
         <p class="text-4xl text-center">
-          <span role="img" aria-label="love">
-            😍
-          </span>
+          <span role="img" aria-label="love"> 😍 </span>
         </p>
-        <h3 class="font-semibold text-3xl">
-          Do you love this Starter Kit?
-        </h3>
+        <h3 class="font-semibold text-3xl">Do you love this Starter Kit?</h3>
         <p class="text-blueGray-500 text-lg leading-relaxed mt-4 mb-4">
           Cause if you do, it can be yours now. Hit the buttons below to
           navigate to get the Free version for your next project. Build a new
@@ -723,6 +719,7 @@
           <a
             href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus?ref=ns-index"
             target="_blank"
+            rel="noreferrer"
             class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-2 bg-red-400 active:bg-red-500 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
           >
             Get started
@@ -730,13 +727,14 @@
           <a
             href="https://github.com/creativetimofficial/notus-svelte?ref=ns-index"
             target="_blank"
+            rel="noreferrer"
             class="github-star sm:ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
           >
-            <i class="fab fa-github text-lg mr-1"></i>
+            <i class="fab fa-github text-lg mr-1" />
             <span>Help With a Star</span>
           </a>
         </div>
-        <div class="text-center mt-16"></div>
+        <div class="text-center mt-16" />
       </div>
     </div>
   </div>
diff --git a/src/views/admin/Dashboard.svelte b/src/views/admin/Dashboard.svelte
index 2b933d26..9d5d9bc4 100644
--- a/src/views/admin/Dashboard.svelte
+++ b/src/views/admin/Dashboard.svelte
@@ -4,7 +4,7 @@
   import CardBarChart from "components/Cards/CardBarChart.svelte";
   import CardPageVisits from "components/Cards/CardPageVisits.svelte";
   import CardSocialTraffic from "components/Cards/CardSocialTraffic.svelte";
-  export let location;
+  export const location = null;
 </script>
 
 <div>
diff --git a/src/views/admin/Maps.svelte b/src/views/admin/Maps.svelte
index dd1a9223..70909813 100644
--- a/src/views/admin/Maps.svelte
+++ b/src/views/admin/Maps.svelte
@@ -1,7 +1,7 @@
 <script>
   // core components
   import MapExample from "components/Maps/MapExample.svelte";
-  export let location;
+  export const location = null;
 </script>
 
 <div class="flex flex-wrap">
diff --git a/src/views/admin/Settings.svelte b/src/views/admin/Settings.svelte
index c7c7cd59..575e468a 100644
--- a/src/views/admin/Settings.svelte
+++ b/src/views/admin/Settings.svelte
@@ -2,7 +2,7 @@
   // core components
   import CardSettings from "components/Cards/CardSettings.svelte";
   import CardProfile from "components/Cards/CardProfile.svelte";
-  export let location;
+  export const location = null;
 </script>
 
 <div class="flex flex-wrap">
diff --git a/src/views/admin/Tables.svelte b/src/views/admin/Tables.svelte
index 190320ef..e0c26194 100644
--- a/src/views/admin/Tables.svelte
+++ b/src/views/admin/Tables.svelte
@@ -1,7 +1,7 @@
 <script>
   // core components
   import CardTable from "components/Cards/CardTable.svelte";
-  export let location;
+  export const location = null;
 </script>
 
 <div class="flex flex-wrap mt-4">
diff --git a/src/views/auth/Login.svelte b/src/views/auth/Login.svelte
index f896deb2..e280ba4b 100644
--- a/src/views/auth/Login.svelte
+++ b/src/views/auth/Login.svelte
@@ -4,7 +4,7 @@
   // core components
   const github = "../assets/img/github.svg";
   const google = "../assets/img/google.svg";
-  export let location;
+  export const location = null;
 </script>
 
 <div class="container mx-auto px-4 h-full">
@@ -15,23 +15,21 @@
       >
         <div class="rounded-t mb-0 px-6 py-6">
           <div class="text-center mb-3">
-            <h6 class="text-blueGray-500 text-sm font-bold">
-              Sign in with
-            </h6>
+            <h6 class="text-blueGray-500 text-sm font-bold">Sign in with</h6>
           </div>
           <div class="btn-wrapper text-center">
             <button
               class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
               type="button"
             >
-              <img alt="..." class="w-5 mr-1" src="{github}" />
+              <img alt="..." class="w-5 mr-1" src={github} />
               Github
             </button>
             <button
               class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
               type="button"
             >
-              <img alt="..." class="w-5 mr-1" src="{google}" />
+              <img alt="..." class="w-5 mr-1" src={google} />
               Google
             </button>
           </div>
@@ -97,7 +95,11 @@
       </div>
       <div class="flex flex-wrap mt-6 relative">
         <div class="w-1/2">
-          <a href="#pablo" on:click={(e) => e.preventDefault()} class="text-blueGray-200">
+          <a
+            href="#pablo"
+            on:click={(e) => e.preventDefault()}
+            class="text-blueGray-200"
+          >
             <small>Forgot password?</small>
           </a>
         </div>

From 3ffd8ba0419736391505cc8aa1f41b1d9da62134 Mon Sep 17 00:00:00 2001
From: Miguel Rivera <miguel@alphachronos.com>
Date: Tue, 18 Oct 2022 09:32:58 -0500
Subject: [PATCH 2/5] Additional cleanup.

---
 src/layouts/Admin.svelte       |  12 ++--
 src/layouts/Auth.svelte        |  10 +--
 src/views/Landing.svelte       | 108 ++++++++++++++++-----------------
 src/views/Profile.svelte       |  18 +++---
 src/views/auth/Register.svelte |  20 +++---
 5 files changed, 85 insertions(+), 83 deletions(-)

diff --git a/src/layouts/Admin.svelte b/src/layouts/Admin.svelte
index 8649bdb5..e86e570e 100644
--- a/src/layouts/Admin.svelte
+++ b/src/layouts/Admin.svelte
@@ -14,20 +14,20 @@
   import Maps from "views/admin/Maps.svelte";
 
   export let location;
-  export let admin = "";
+  export const admin = "";
 </script>
 
 <div>
-  <Sidebar location={location}/>
+  <Sidebar {location} />
   <div class="relative md:ml-64 bg-blueGray-100">
     <AdminNavbar />
     <HeaderStats />
     <div class="px-4 md:px-10 mx-auto w-full -m-24">
       <Router url="admin">
-        <Route path="dashboard" component="{Dashboard}" />
-        <Route path="settings" component="{Settings}" />
-        <Route path="tables" component="{Tables}" />
-        <Route path="maps" component="{Maps}" />
+        <Route path="dashboard" component={Dashboard} />
+        <Route path="settings" component={Settings} />
+        <Route path="tables" component={Tables} />
+        <Route path="maps" component={Maps} />
       </Router>
       <FooterAdmin />
     </div>
diff --git a/src/layouts/Auth.svelte b/src/layouts/Auth.svelte
index f89082ad..72ca67c0 100644
--- a/src/layouts/Auth.svelte
+++ b/src/layouts/Auth.svelte
@@ -10,8 +10,8 @@
   import Register from "views/auth/Register.svelte";
 
   const registerBg2 = "../assets/img/register_bg_2.png";
-  export let location;
-  export let auth = "";
+  export const location = null;
+  export const auth = "";
 </script>
 
 <div>
@@ -21,10 +21,10 @@
       <div
         class="absolute top-0 w-full h-full bg-blueGray-800 bg-no-repeat bg-full"
         style="background-image: url({registerBg2});"
-      ></div>
+      />
       <Router url="auth">
-        <Route path="login" component="{Login}" />
-        <Route path="register" component="{Register}" />
+        <Route path="login" component={Login} />
+        <Route path="register" component={Register} />
       </Router>
       <FooterSmall absolute="true" />
     </section>
diff --git a/src/views/Landing.svelte b/src/views/Landing.svelte
index f4846feb..0cf3631d 100644
--- a/src/views/Landing.svelte
+++ b/src/views/Landing.svelte
@@ -9,7 +9,7 @@
   const team2 = "/assets/img/team-2-800x800.jpg";
   const team3 = "/assets/img/team-3-800x800.jpg";
   const team4 = "/assets/img/team-4-470x470.png";
-  export let location;
+  export const location = null;
 </script>
 
 <div>
@@ -27,7 +27,7 @@
         <span
           id="blackOverlay"
           class="w-full h-full absolute opacity-75 bg-black"
-        ></span>
+        />
       </div>
       <div class="container relative mx-auto">
         <div class="items-center flex flex-wrap">
@@ -38,8 +38,8 @@
               </h1>
               <p class="mt-4 text-lg text-blueGray-200">
                 This is a simple example of a Landing Page you can build using
-                Notus Svelte. It features multiple CSS components
-                based on the Tailwind CSS design system.
+                Notus Svelte. It features multiple CSS components based on the
+                Tailwind CSS design system.
               </p>
             </div>
           </div>
@@ -61,7 +61,7 @@
           <polygon
             class="text-blueGray-200 fill-current"
             points="2560 0 2560 100 0 100"
-          ></polygon>
+          />
         </svg>
       </div>
     </div>
@@ -77,7 +77,7 @@
                 <div
                   class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-red-400"
                 >
-                  <i class="fas fa-award"></i>
+                  <i class="fas fa-award" />
                 </div>
                 <h6 class="text-xl font-semibold">Awarded Agency</h6>
                 <p class="mt-2 mb-4 text-blueGray-500">
@@ -96,7 +96,7 @@
                 <div
                   class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-lightBlue-400"
                 >
-                  <i class="fas fa-retweet"></i>
+                  <i class="fas fa-retweet" />
                 </div>
                 <h6 class="text-xl font-semibold">Free Revisions</h6>
                 <p class="mt-2 mb-4 text-blueGray-500">
@@ -115,7 +115,7 @@
                 <div
                   class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-emerald-400"
                 >
-                  <i class="fas fa-fingerprint"></i>
+                  <i class="fas fa-fingerprint" />
                 </div>
                 <h6 class="text-xl font-semibold">Verified Company</h6>
                 <p class="mt-2 mb-4 text-blueGray-500">
@@ -132,7 +132,7 @@
             <div
               class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
             >
-              <i class="fas fa-user-friends text-xl"></i>
+              <i class="fas fa-user-friends text-xl" />
             </div>
             <h3 class="text-3xl mb-2 font-semibold leading-normal">
               Working with us is a pleasure
@@ -157,7 +157,7 @@
 
           <div class="w-full md:w-4/12 px-4 mr-auto ml-auto">
             <div
-              class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-red-400"
+              class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg"
             >
               <img
                 alt="..."
@@ -174,11 +174,9 @@
                   <polygon
                     points="-30,95 583,95 583,65"
                     class="text-red-400 fill-current"
-                  ></polygon>
+                  />
                 </svg>
-                <h4 class="text-xl font-bold text-white">
-                  Top Notch Services
-                </h4>
+                <h4 class="text-xl font-bold text-white">Top Notch Services</h4>
                 <p class="text-md font-light mt-2 text-white">
                   The Arctic Ocean freezes every winter and much of the sea-ice
                   then thaws every summer, and that process will continue
@@ -208,7 +206,7 @@
           <polygon
             class="text-white fill-current"
             points="2560 0 2560 100 0 100"
-          ></polygon>
+          />
         </svg>
       </div>
 
@@ -226,7 +224,7 @@
               <div
                 class="text-red-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-red-300"
               >
-                <i class="fas fa-rocket text-xl"></i>
+                <i class="fas fa-rocket text-xl" />
               </div>
               <h3 class="text-3xl font-semibold">A growing company</h3>
               <p class="mt-4 text-lg leading-relaxed text-blueGray-500">
@@ -241,7 +239,7 @@
                       <span
                         class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-red-600 bg-red-200 mr-3"
                       >
-                        <i class="fas fa-fingerprint"></i>
+                        <i class="fas fa-fingerprint" />
                       </span>
                     </div>
                     <div>
@@ -257,13 +255,11 @@
                       <span
                         class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-red-600 bg-red-200 mr-3"
                       >
-                        <i class="fab fa-html5"></i>
+                        <i class="fab fa-html5" />
                       </span>
                     </div>
                     <div>
-                      <h4 class="text-blueGray-500">
-                        Amazing page examples
-                      </h4>
+                      <h4 class="text-blueGray-500">Amazing page examples</h4>
                     </div>
                   </div>
                 </li>
@@ -273,7 +269,7 @@
                       <span
                         class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-red-600 bg-red-200 mr-3"
                       >
-                        <i class="far fa-paper-plane"></i>
+                        <i class="far fa-paper-plane" />
                       </span>
                     </div>
                     <div>
@@ -305,12 +301,14 @@
             <div class="px-6">
               <img
                 alt="..."
-                src="{team1}"
+                src={team1}
                 class="shadow-lg rounded-full mx-auto max-w-120-px"
               />
               <div class="pt-6 text-center">
                 <h5 class="text-xl font-bold">Ryan Tompson</h5>
-                <p class="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
+                <p
+                  class="mt-1 text-sm text-blueGray-400 uppercase font-semibold"
+                >
                   Web Developer
                 </p>
                 <div class="mt-6">
@@ -318,19 +316,19 @@
                     class="bg-lightBlue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
-                    <i class="fab fa-twitter"></i>
+                    <i class="fab fa-twitter" />
                   </button>
                   <button
                     class="bg-lightBlue-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
-                    <i class="fab fa-facebook-f"></i>
+                    <i class="fab fa-facebook-f" />
                   </button>
                   <button
                     class="bg-pink-500 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
-                    <i class="fab fa-dribbble"></i>
+                    <i class="fab fa-dribbble" />
                   </button>
                 </div>
               </div>
@@ -340,12 +338,14 @@
             <div class="px-6">
               <img
                 alt="..."
-                src="{team2}"
+                src={team2}
                 class="shadow-lg rounded-full mx-auto max-w-120-px"
               />
               <div class="pt-6 text-center">
                 <h5 class="text-xl font-bold">Romina Hadid</h5>
-                <p class="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
+                <p
+                  class="mt-1 text-sm text-blueGray-400 uppercase font-semibold"
+                >
                   Marketing Specialist
                 </p>
                 <div class="mt-6">
@@ -353,13 +353,13 @@
                     class="bg-red-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
-                    <i class="fab fa-google"></i>
+                    <i class="fab fa-google" />
                   </button>
                   <button
                     class="bg-lightBlue-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
-                    <i class="fab fa-facebook-f"></i>
+                    <i class="fab fa-facebook-f" />
                   </button>
                 </div>
               </div>
@@ -369,12 +369,14 @@
             <div class="px-6">
               <img
                 alt="..."
-                src="{team3}"
+                src={team3}
                 class="shadow-lg rounded-full mx-auto max-w-120-px"
               />
               <div class="pt-6 text-center">
                 <h5 class="text-xl font-bold">Alexa Smith</h5>
-                <p class="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
+                <p
+                  class="mt-1 text-sm text-blueGray-400 uppercase font-semibold"
+                >
                   UI/UX Designer
                 </p>
                 <div class="mt-6">
@@ -382,19 +384,19 @@
                     class="bg-red-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
-                    <i class="fab fa-google"></i>
+                    <i class="fab fa-google" />
                   </button>
                   <button
                     class="bg-lightBlue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
-                    <i class="fab fa-twitter"></i>
+                    <i class="fab fa-twitter" />
                   </button>
                   <button
                     class="bg-blueGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
-                    <i class="fab fa-instagram"></i>
+                    <i class="fab fa-instagram" />
                   </button>
                 </div>
               </div>
@@ -404,12 +406,14 @@
             <div class="px-6">
               <img
                 alt="..."
-                src="{team4}"
+                src={team4}
                 class="shadow-lg rounded-full mx-auto max-w-120-px"
               />
               <div class="pt-6 text-center">
                 <h5 class="text-xl font-bold">Jenna Kardi</h5>
-                <p class="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
+                <p
+                  class="mt-1 text-sm text-blueGray-400 uppercase font-semibold"
+                >
                   Founder and CEO
                 </p>
                 <div class="mt-6">
@@ -417,25 +421,25 @@
                     class="bg-pink-500 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
-                    <i class="fab fa-dribbble"></i>
+                    <i class="fab fa-dribbble" />
                   </button>
                   <button
                     class="bg-red-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
-                    <i class="fab fa-google"></i>
+                    <i class="fab fa-google" />
                   </button>
                   <button
                     class="bg-lightBlue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
-                    <i class="fab fa-twitter"></i>
+                    <i class="fab fa-twitter" />
                   </button>
                   <button
                     class="bg-blueGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
-                    <i class="fab fa-instagram"></i>
+                    <i class="fab fa-instagram" />
                   </button>
                 </div>
               </div>
@@ -462,16 +466,14 @@
           <polygon
             class="text-blueGray-800 fill-current"
             points="2560 0 2560 100 0 100"
-          ></polygon>
+          />
         </svg>
       </div>
 
       <div class="container mx-auto px-4 lg:pt-24 lg:pb-64">
         <div class="flex flex-wrap text-center justify-center">
           <div class="w-full lg:w-6/12 px-4">
-            <h2 class="text-4xl font-semibold text-white">
-              Build something
-            </h2>
+            <h2 class="text-4xl font-semibold text-white">Build something</h2>
             <p class="text-lg leading-relaxed mt-4 mb-4 text-blueGray-400">
               Put the potentially record low maximum sea ice extent tihs year
               down to low ice. According to the National Oceanic and Atmospheric
@@ -484,7 +486,7 @@
             <div
               class="text-blueGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
             >
-              <i class="fas fa-medal text-xl"></i>
+              <i class="fas fa-medal text-xl" />
             </div>
             <h6 class="text-xl mt-5 font-semibold text-white">
               Excelent Services
@@ -498,7 +500,7 @@
             <div
               class="text-blueGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
             >
-              <i class="fas fa-poll text-xl"></i>
+              <i class="fas fa-poll text-xl" />
             </div>
             <h5 class="text-xl mt-5 font-semibold text-white">
               Grow your market
@@ -512,11 +514,9 @@
             <div
               class="text-blueGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
             >
-              <i class="fas fa-lightbulb text-xl"></i>
+              <i class="fas fa-lightbulb text-xl" />
             </div>
-            <h5 class="text-xl mt-5 font-semibold text-white">
-              Launch time
-            </h5>
+            <h5 class="text-xl mt-5 font-semibold text-white">Launch time</h5>
             <p class="mt-2 mb-4 text-blueGray-400">
               Some quick example text to build on the card title and make up the
               bulk of the card's content.
@@ -533,9 +533,7 @@
               class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-200"
             >
               <div class="flex-auto p-5 lg:p-10">
-                <h4 class="text-2xl font-semibold">
-                  Want to work with us?
-                </h4>
+                <h4 class="text-2xl font-semibold">Want to work with us?</h4>
                 <p class="leading-relaxed mt-1 mb-4 text-blueGray-500">
                   Complete this form and we will get back to you in 24 hours.
                 </p>
diff --git a/src/views/Profile.svelte b/src/views/Profile.svelte
index 912d08d8..4e88117c 100644
--- a/src/views/Profile.svelte
+++ b/src/views/Profile.svelte
@@ -4,7 +4,7 @@
   import Footer from "components/Footers/Footer.svelte";
 
   const team2 = "/assets/img/team-2-800x800.jpg";
-  export let location;
+  export const location = null;
 </script>
 
 <div>
@@ -20,7 +20,7 @@
         <span
           id="blackOverlay"
           class="w-full h-full absolute opacity-50 bg-black"
-        ></span>
+        />
       </div>
       <div
         class="top-auto bottom-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden h-70-px"
@@ -38,7 +38,7 @@
           <polygon
             class="text-blueGray-200 fill-current"
             points="2560 0 2560 100 0 100"
-          ></polygon>
+          />
         </svg>
       </div>
     </section>
@@ -53,7 +53,7 @@
                 <div class="relative">
                   <img
                     alt="..."
-                    src="{team2}"
+                    src={team2}
                     class="shadow-xl rounded-full h-auto align-middle border-none absolute -m-16 -ml-20 lg:-ml-16 max-w-150-px"
                   />
                 </div>
@@ -101,22 +101,24 @@
             </div>
             <div class="text-center mt-12">
               <h3
-                class="text-4xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2"
+                class="text-4xl font-semibold leading-normal mb-2 text-blueGray-700"
               >
                 Jenna Stones
               </h3>
               <div
                 class="text-sm leading-normal mt-0 mb-2 text-blueGray-400 font-bold uppercase"
               >
-                <i class="fas fa-map-marker-alt mr-2 text-lg text-blueGray-400"></i>
+                <i
+                  class="fas fa-map-marker-alt mr-2 text-lg text-blueGray-400"
+                />
                 Los Angeles, California
               </div>
               <div class="mb-2 text-blueGray-600 mt-10">
-                <i class="fas fa-briefcase mr-2 text-lg text-blueGray-400"></i>
+                <i class="fas fa-briefcase mr-2 text-lg text-blueGray-400" />
                 Solution Manager - Creative Tim Officer
               </div>
               <div class="mb-2 text-blueGray-600">
-                <i class="fas fa-university mr-2 text-lg text-blueGray-400"></i>
+                <i class="fas fa-university mr-2 text-lg text-blueGray-400" />
                 University of Computer Science
               </div>
             </div>
diff --git a/src/views/auth/Register.svelte b/src/views/auth/Register.svelte
index b5d194d9..55a2b96b 100644
--- a/src/views/auth/Register.svelte
+++ b/src/views/auth/Register.svelte
@@ -2,7 +2,7 @@
   // core components
   const github = "../assets/img/github.svg";
   const google = "../assets/img/google.svg";
-  export let location;
+  export const location = null;
 </script>
 
 <div class="container mx-auto px-4 h-full">
@@ -13,23 +13,21 @@
       >
         <div class="rounded-t mb-0 px-6 py-6">
           <div class="text-center mb-3">
-            <h6 class="text-blueGray-500 text-sm font-bold">
-              Sign up with
-            </h6>
+            <h6 class="text-blueGray-500 text-sm font-bold">Sign up with</h6>
           </div>
           <div class="btn-wrapper text-center">
             <button
-              class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
+              class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center text-xs ease-linear transition-all duration-150"
               type="button"
             >
-              <img alt="..." class="w-5 mr-1" src="{github}" />
+              <img alt="..." class="w-5 mr-1" src={github} />
               Github
             </button>
             <button
-              class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
+              class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center text-xs ease-linear transition-all duration-150"
               type="button"
             >
-              <img alt="..." class="w-5 mr-1" src="{google}" />
+              <img alt="..." class="w-5 mr-1" src={google} />
               Google
             </button>
           </div>
@@ -94,7 +92,11 @@
                 />
                 <span class="ml-2 text-sm font-semibold text-blueGray-600">
                   I agree with the
-                  <a href="#pablo" on:click={(e) => e.preventDefault()} class="text-red-500">
+                  <a
+                    href="#pablo"
+                    on:click={(e) => e.preventDefault()}
+                    class="text-red-500"
+                  >
                     Privacy Policy
                   </a>
                 </span>

From 7af594c0377c14bf54f5a54f17d5e2fe3540db51 Mon Sep 17 00:00:00 2001
From: Miguel Rivera <miguel@alphachronos.com>
Date: Tue, 18 Oct 2022 09:41:32 -0500
Subject: [PATCH 3/5] Change lightBlue to sky.

---
 public/assets/styles/tailwind.css             | 3205 +++++++++--------
 src/components/Cards/CardSocialTraffic.svelte |   16 +-
 src/components/Footers/Footer.svelte          |   14 +-
 src/views/Index.svelte                        |    4 +-
 src/views/Landing.svelte                      |   12 +-
 5 files changed, 1759 insertions(+), 1492 deletions(-)

diff --git a/public/assets/styles/tailwind.css b/public/assets/styles/tailwind.css
index 8c87688d..16a4bf86 100644
--- a/public/assets/styles/tailwind.css
+++ b/public/assets/styles/tailwind.css
@@ -1,6 +1,6 @@
-/*! tailwindcss v2.0.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com */
 
-/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
 /*
 Document
@@ -12,8 +12,8 @@ Use a better box model (opinionated).
 */
 
 *,
-*::before,
-*::after {
+::before,
+::after {
   box-sizing: border-box;
 }
 
@@ -21,7 +21,7 @@ Use a better box model (opinionated).
 Use a more readable tab size (opinionated).
 */
 
-:root {
+html {
   -moz-tab-size: 4;
   -o-tab-size: 4;
      tab-size: 4;
@@ -33,8 +33,10 @@ Use a more readable tab size (opinionated).
 */
 
 html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
+  line-height: 1.15;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
 }
 
 /*
@@ -78,8 +80,10 @@ Grouping content
 */
 
 hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
 }
 
 /*
@@ -120,8 +124,10 @@ pre {
 		Consolas,
 		'Liberation Mono',
 		Menlo,
-		monospace; /* 1 */
-  font-size: 1em; /* 2 */
+		monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
 }
 
 /**
@@ -163,8 +169,10 @@ Tabular data
 */
 
 table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
 }
 
 /*
@@ -182,10 +190,14 @@ input,
 optgroup,
 select,
 textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */
 }
 
 /**
@@ -194,7 +206,8 @@ Remove the inheritance of text transform in Edge and Firefox.
 */
 
 button,
-select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 
@@ -213,6 +226,11 @@ button,
 Remove the inner border and padding in Firefox.
 */
 
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
 /**
 Restore the focus styles unset by the previous rule.
 */
@@ -242,25 +260,43 @@ progress {
 Correct the cursor style of increment and decrement buttons in Safari.
 */
 
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
 /**
 1. Correct the odd appearance in Chrome and Safari.
 2. Correct the outline style in Safari.
 */
 
 [type='search'] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
 }
 
 /**
 Remove the inner padding in Chrome and Safari on macOS.
 */
 
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
 /**
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Change font properties to 'inherit' in Safari.
 */
 
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
 /*
 Interactive
 ===========
@@ -305,16 +341,6 @@ button {
   background-image: none;
 }
 
-/**
- * Work around a Firefox/IE bug where the transparent `button` background
- * results in a loss of the default `button` focus styles.
- */
-
-button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
 fieldset {
   margin: 0;
   padding: 0;
@@ -339,8 +365,10 @@ ul {
  */
 
 html {
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
-  line-height: 1.5; /* 2 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 1 */
+  line-height: 1.5;
+  /* 2 */
 }
 
 /**
@@ -382,10 +410,14 @@ body {
 *,
 ::before,
 ::after {
-  box-sizing: border-box; /* 1 */
-  border-width: 0; /* 2 */
-  border-style: solid; /* 2 */
-  border-color: #e4e4e7; /* 2 */
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: currentColor;
+  /* 2 */
 }
 
 /*
@@ -419,11 +451,6 @@ input::-moz-placeholder, textarea::-moz-placeholder {
   color: #a1a1aa;
 }
 
-input:-ms-input-placeholder, textarea:-ms-input-placeholder {
-  opacity: 1;
-  color: #a1a1aa;
-}
-
 input::placeholder,
 textarea::placeholder {
   opacity: 1;
@@ -435,6 +462,14 @@ button,
   cursor: pointer;
 }
 
+/**
+ * Override legacy focus reset from Normalize with modern Firefox focus styles.
+ *
+ * This is actually an improvement over the new defaults in Firefox in our testing,
+ * as it triggers the better focus styles even for links, which still use a dotted
+ * outline in Firefox by default.
+ */
+
 table {
   border-collapse: collapse;
 }
@@ -492,11 +527,20 @@ samp {
 }
 
 /**
- * Make replaced elements `display: block` by default as that's
- * the behavior you want almost all of the time. Inspired by
- * CSS Remedy, with `svg` added as well.
+ * 1. Make replaced elements `display: block` by default as that's
+ *    the behavior you want almost all of the time. Inspired by
+ *    CSS Remedy, with `svg` added as well.
  *
- * https://github.com/mozdevs/cssremedy/issues/14
+ *    https://github.com/mozdevs/cssremedy/issues/14
+ * 
+ * 2. Add `vertical-align: middle` to align replaced elements more
+ *    sensibly by default when overriding `display` by adding a
+ *    utility like `inline`.
+ *
+ *    This can trigger a poorly considered linting error in some
+ *    tools but is included by design.
+ * 
+ *    https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
  */
 
 img,
@@ -508,12 +552,14 @@ iframe,
 embed,
 object {
   display: block;
+  /* 1 */
   vertical-align: middle;
+  /* 2 */
 }
 
 /**
  * Constrain images and videos to the parent width and preserve
- * their instrinsic aspect ratio.
+ * their intrinsic aspect ratio.
  *
  * https://github.com/mozdevs/cssremedy/issues/14
  */
@@ -524,6 +570,19 @@ video {
   height: auto;
 }
 
+/**
+ * Ensure the default browser behavior of the `hidden` attribute.
+ */
+
+[hidden] {
+  display: none;
+}
+
+*, ::before, ::after {
+  --tw-border-opacity: 1;
+  border-color: rgba(228, 228, 231, var(--tw-border-opacity));
+}
+
 
       [type='text'],
       [type='email'],
@@ -574,14 +633,17 @@ input::-moz-placeholder, textarea::-moz-placeholder {
   opacity: 1;
 }
 
-input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+input::placeholder, textarea::placeholder {
   color: #71717a;
   opacity: 1;
 }
 
-input::placeholder, textarea::placeholder {
-  color: #71717a;
-  opacity: 1;
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+::-webkit-date-and-time-value {
+  min-height: 1.5em;
 }
 
 select {
@@ -619,7 +681,6 @@ select {
   background-origin: border-box;
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   flex-shrink: 0;
   height: 1rem;
@@ -1111,60 +1172,6 @@ select {
   }
 }
 
-.space-x-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1rem * var(--tw-space-x-reverse));
-  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-y-reverse > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 1;
-}
-
-.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 1;
-}
-
-.divide-y > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-y-reverse: 0;
-  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
-  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
-}
-
-.divide-x > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-x-reverse: 0;
-  border-right-width: calc(1px * var(--tw-divide-x-reverse));
-  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
-}
-
-.divide-y-reverse > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-y-reverse: 1;
-}
-
-.divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-x-reverse: 1;
-}
-
-.divide-solid > :not([hidden]) ~ :not([hidden]) {
-  border-style: solid;
-}
-
-.divide-dashed > :not([hidden]) ~ :not([hidden]) {
-  border-style: dashed;
-}
-
-.divide-dotted > :not([hidden]) ~ :not([hidden]) {
-  border-style: dotted;
-}
-
-.divide-double > :not([hidden]) ~ :not([hidden]) {
-  border-style: double;
-}
-
-.divide-none > :not([hidden]) ~ :not([hidden]) {
-  border-style: none;
-}
-
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1188,464 +1195,417 @@ select {
   white-space: normal;
 }
 
-.appearance-none {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
+.pointer-events-none {
+  pointer-events: none;
 }
 
-.bg-fixed {
-  background-attachment: fixed;
+.pointer-events-auto {
+  pointer-events: auto;
 }
 
-.bg-local {
-  background-attachment: local;
+.visible {
+  visibility: visible;
 }
 
-.bg-scroll {
-  background-attachment: scroll;
+.invisible {
+  visibility: hidden;
 }
 
-.bg-clip-border {
-  background-clip: border-box;
+.static {
+  position: static;
 }
 
-.bg-clip-padding {
-  background-clip: padding-box;
+.fixed {
+  position: fixed;
 }
 
-.bg-clip-content {
-  background-clip: content-box;
+.absolute {
+  position: absolute;
 }
 
-.bg-clip-text {
-  -webkit-background-clip: text;
-          background-clip: text;
+.relative {
+  position: relative;
 }
 
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
+.sticky {
+  position: sticky;
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+.top-0 {
+  top: 0px;
 }
 
-.bg-pink-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(236, 72, 153, var(--tw-bg-opacity));
+.top-auto {
+  top: auto;
 }
 
-.bg-purple-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(233, 213, 255, var(--tw-bg-opacity));
+.-top-225-px {
+  top: -225px;
 }
 
-.bg-purple-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(168, 85, 247, var(--tw-bg-opacity));
+.-top-160-px {
+  top: -160px;
 }
 
-.bg-indigo-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
+.-top-150-px {
+  top: -150px;
 }
 
-.bg-lightBlue-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(186, 230, 253, var(--tw-bg-opacity));
+.-top-94-px {
+  top: -94px;
 }
 
-.bg-lightBlue-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(56, 189, 248, var(--tw-bg-opacity));
+.-top-29-px {
+  top: -29px;
 }
 
-.bg-lightBlue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(14, 165, 233, var(--tw-bg-opacity));
+.top-25-px {
+  top: 25px;
 }
 
-.bg-lightBlue-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(2, 132, 199, var(--tw-bg-opacity));
+.top-95-px {
+  top: 95px;
 }
 
-.bg-teal-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(153, 246, 228, var(--tw-bg-opacity));
+.top-210-px {
+  top: 210px;
 }
 
-.bg-teal-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(20, 184, 166, var(--tw-bg-opacity));
+.right-0 {
+  right: 0px;
 }
 
-.bg-emerald-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(167, 243, 208, var(--tw-bg-opacity));
+.-right-100 {
+  right: -100%;
 }
 
-.bg-emerald-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(52, 211, 153, var(--tw-bg-opacity));
+.bottom-0 {
+  bottom: 0px;
 }
 
-.bg-emerald-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
+.bottom-auto {
+  bottom: auto;
 }
 
-.bg-yellow-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(234, 179, 8, var(--tw-bg-opacity));
+.left-0 {
+  left: 0px;
 }
 
-.bg-orange-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(254, 215, 170, var(--tw-bg-opacity));
+.left-auto {
+  left: auto;
 }
 
-.bg-orange-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(249, 115, 22, var(--tw-bg-opacity));
+.-left-50-px {
+  left: -50px;
 }
 
-.bg-red-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
+.-left-20-px {
+  left: -20px;
 }
 
-.bg-red-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(252, 165, 165, var(--tw-bg-opacity));
+.left-40-px {
+  left: 40px;
 }
 
-.bg-red-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
+.left-145-px {
+  left: 145px;
 }
 
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
+.left-195-px {
+  left: 195px;
 }
 
-.bg-red-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
+.left-260-px {
+  left: 260px;
 }
 
-.bg-red-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
+.isolate {
+  isolation: isolate;
 }
 
-.bg-red-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(153, 27, 27, var(--tw-bg-opacity));
+.isolation-auto {
+  isolation: auto;
 }
 
-.bg-gray-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
+.z-2 {
+  z-index: 2;
 }
 
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
+.z-3 {
+  z-index: 3;
 }
 
-.bg-blueGray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(248, 250, 252, var(--tw-bg-opacity));
+.z-10 {
+  z-index: 10;
 }
 
-.bg-blueGray-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(241, 245, 249, var(--tw-bg-opacity));
+.z-40 {
+  z-index: 40;
 }
 
-.bg-blueGray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(226, 232, 240, var(--tw-bg-opacity));
+.z-50 {
+  z-index: 50;
 }
 
-.bg-blueGray-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(71, 85, 105, var(--tw-bg-opacity));
+.float-right {
+  float: right;
 }
 
-.bg-blueGray-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(51, 65, 85, var(--tw-bg-opacity));
+.float-left {
+  float: left;
 }
 
-.bg-blueGray-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(30, 41, 59, var(--tw-bg-opacity));
+.float-none {
+  float: none;
 }
 
-.focus\:bg-white:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+.clear-left {
+  clear: left;
 }
 
-.focus\:bg-gray-200:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
+.clear-right {
+  clear: right;
 }
 
-.active\:bg-indigo-600:active {
-  --tw-bg-opacity: 1;
-  background-color: rgba(79, 70, 229, var(--tw-bg-opacity));
+.clear-both {
+  clear: both;
 }
 
-.active\:bg-red-500:active {
-  --tw-bg-opacity: 1;
-  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
+.clear-none {
+  clear: none;
 }
 
-.active\:bg-blueGray-50:active {
-  --tw-bg-opacity: 1;
-  background-color: rgba(248, 250, 252, var(--tw-bg-opacity));
+.m-2 {
+  margin: 0.5rem;
 }
 
-.active\:bg-blueGray-600:active {
-  --tw-bg-opacity: 1;
-  background-color: rgba(71, 85, 105, var(--tw-bg-opacity));
+.m-3 {
+  margin: 0.75rem;
 }
 
-.bg-center {
-  background-position: center;
+.m-4 {
+  margin: 1rem;
 }
 
-.bg-repeat {
-  background-repeat: repeat;
+.m-8 {
+  margin: 2rem;
 }
 
-.bg-no-repeat {
-  background-repeat: no-repeat;
+.m-14 {
+  margin: 3.5rem;
 }
 
-.bg-repeat-x {
-  background-repeat: repeat-x;
+.m-16 {
+  margin: 4rem;
 }
 
-.bg-repeat-y {
-  background-repeat: repeat-y;
+.-m-16 {
+  margin: -4rem;
 }
 
-.bg-repeat-round {
-  background-repeat: round;
+.-m-24 {
+  margin: -6rem;
 }
 
-.bg-repeat-space {
-  background-repeat: space;
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
 }
 
-.bg-cover {
-  background-size: cover;
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.bg-full {
-  background-size: 100%;
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
-.border-collapse {
-  border-collapse: collapse;
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
-.border-separate {
-  border-collapse: separate;
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
 }
 
-.border-red-600 {
-  --tw-border-opacity: 1;
-  border-color: rgba(220, 38, 38, var(--tw-border-opacity));
+.mt-0 {
+  margin-top: 0px;
 }
 
-.border-gray-200 {
-  --tw-border-opacity: 1;
-  border-color: rgba(228, 228, 231, var(--tw-border-opacity));
+.mt-1 {
+  margin-top: 0.25rem;
 }
 
-.border-gray-300 {
-  --tw-border-opacity: 1;
-  border-color: rgba(212, 212, 216, var(--tw-border-opacity));
+.mt-2 {
+  margin-top: 0.5rem;
 }
 
-.border-blueGray-50 {
-  --tw-border-opacity: 1;
-  border-color: rgba(248, 250, 252, var(--tw-border-opacity));
+.mt-3 {
+  margin-top: 0.75rem;
 }
 
-.border-blueGray-100 {
-  --tw-border-opacity: 1;
-  border-color: rgba(241, 245, 249, var(--tw-border-opacity));
+.mt-4 {
+  margin-top: 1rem;
 }
 
-.border-blueGray-200 {
-  --tw-border-opacity: 1;
-  border-color: rgba(226, 232, 240, var(--tw-border-opacity));
+.mt-5 {
+  margin-top: 1.25rem;
 }
 
-.border-blueGray-300 {
-  --tw-border-opacity: 1;
-  border-color: rgba(203, 213, 225, var(--tw-border-opacity));
+.mt-6 {
+  margin-top: 1.5rem;
 }
 
-.border-blueGray-500 {
-  --tw-border-opacity: 1;
-  border-color: rgba(100, 116, 139, var(--tw-border-opacity));
+.mt-8 {
+  margin-top: 2rem;
 }
 
-.border-blueGray-600 {
-  --tw-border-opacity: 1;
-  border-color: rgba(71, 85, 105, var(--tw-border-opacity));
+.mt-10 {
+  margin-top: 2.5rem;
 }
 
-.focus\:border-black:focus {
-  --tw-border-opacity: 1;
-  border-color: rgba(0, 0, 0, var(--tw-border-opacity));
+.mt-12 {
+  margin-top: 3rem;
 }
 
-.focus\:border-indigo-300:focus {
-  --tw-border-opacity: 1;
-  border-color: rgba(165, 180, 252, var(--tw-border-opacity));
+.mt-16 {
+  margin-top: 4rem;
 }
 
-.focus\:border-gray-300:focus {
-  --tw-border-opacity: 1;
-  border-color: rgba(212, 212, 216, var(--tw-border-opacity));
+.mt-20 {
+  margin-top: 5rem;
 }
 
-.focus\:border-gray-500:focus {
-  --tw-border-opacity: 1;
-  border-color: rgba(113, 113, 122, var(--tw-border-opacity));
+.mt-24 {
+  margin-top: 6rem;
 }
 
-.rounded {
-  border-radius: 0.25rem;
+.mt-32 {
+  margin-top: 8rem;
 }
 
-.rounded-md {
-  border-radius: 0.375rem;
+.mt-48 {
+  margin-top: 12rem;
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
+.-mt-20 {
+  margin-top: -5rem;
 }
 
-.rounded-full {
-  border-radius: 9999px;
+.-mt-24 {
+  margin-top: -6rem;
 }
 
-.rounded-t {
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
+.-mt-32 {
+  margin-top: -8rem;
 }
 
-.rounded-r {
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
+.-mt-48 {
+  margin-top: -12rem;
 }
 
-.rounded-b {
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+.-mt-64 {
+  margin-top: -16rem;
 }
 
-.rounded-l {
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+.mr-0 {
+  margin-right: 0px;
 }
 
-.rounded-t-lg {
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
+.mr-1 {
+  margin-right: 0.25rem;
 }
 
-.rounded-tl {
-  border-top-left-radius: 0.25rem;
+.mr-2 {
+  margin-right: 0.5rem;
 }
 
-.rounded-tr {
-  border-top-right-radius: 0.25rem;
+.mr-3 {
+  margin-right: 0.75rem;
 }
 
-.rounded-br {
-  border-bottom-right-radius: 0.25rem;
+.mr-4 {
+  margin-right: 1rem;
 }
 
-.rounded-bl {
-  border-bottom-left-radius: 0.25rem;
+.mr-auto {
+  margin-right: auto;
 }
 
-.border-solid {
-  border-style: solid;
+.mb-0 {
+  margin-bottom: 0px;
 }
 
-.border-dashed {
-  border-style: dashed;
+.mb-1 {
+  margin-bottom: 0.25rem;
 }
 
-.border-dotted {
-  border-style: dotted;
+.mb-2 {
+  margin-bottom: 0.5rem;
 }
 
-.border-double {
-  border-style: double;
+.mb-3 {
+  margin-bottom: 0.75rem;
 }
 
-.border-none {
-  border-style: none;
+.mb-4 {
+  margin-bottom: 1rem;
 }
 
-.border-0 {
-  border-width: 0px;
+.mb-5 {
+  margin-bottom: 1.25rem;
 }
 
-.border-2 {
-  border-width: 2px;
+.mb-6 {
+  margin-bottom: 1.5rem;
 }
 
-.border {
-  border-width: 1px;
+.mb-8 {
+  margin-bottom: 2rem;
 }
 
-.border-t-0 {
-  border-top-width: 0px;
+.mb-12 {
+  margin-bottom: 3rem;
 }
 
-.border-r-0 {
-  border-right-width: 0px;
+.mb-24 {
+  margin-bottom: 6rem;
 }
 
-.border-l-0 {
-  border-left-width: 0px;
+.ml-1 {
+  margin-left: 0.25rem;
 }
 
-.border-b-2 {
-  border-bottom-width: 2px;
+.ml-2 {
+  margin-left: 0.5rem;
 }
 
-.border-t {
-  border-top-width: 1px;
+.ml-3 {
+  margin-left: 0.75rem;
 }
 
-.border-r {
-  border-right-width: 1px;
+.ml-auto {
+  margin-left: auto;
 }
 
-.border-b {
-  border-bottom-width: 1px;
+.-ml-4 {
+  margin-left: -1rem;
 }
 
-.border-l {
-  border-left-width: 1px;
+.-ml-20 {
+  margin-left: -5rem;
+}
+
+.last\:mr-0:last-child {
+  margin-right: 0px;
+}
+
+.hover\:-mt-4:hover {
+  margin-top: -1rem;
 }
 
 .box-border {
@@ -1656,10 +1616,6 @@ select {
   box-sizing: content-box;
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
 .block {
   display: block;
 }
@@ -1684,6 +1640,10 @@ select {
   display: table;
 }
 
+.inline-table {
+  display: inline-table;
+}
+
 .table-caption {
   display: table-caption;
 }
@@ -1732,901 +1692,1350 @@ select {
   display: contents;
 }
 
+.list-item {
+  display: list-item;
+}
+
 .hidden {
   display: none;
 }
 
-.flex-row {
-  flex-direction: row;
+.h-0 {
+  height: 0px;
 }
 
-.flex-row-reverse {
-  flex-direction: row-reverse;
+.h-2 {
+  height: 0.5rem;
 }
 
-.flex-col {
-  flex-direction: column;
+.h-5 {
+  height: 1.25rem;
 }
 
-.flex-col-reverse {
-  flex-direction: column-reverse;
+.h-8 {
+  height: 2rem;
 }
 
-.flex-wrap {
-  flex-wrap: wrap;
+.h-10 {
+  height: 2.5rem;
 }
 
-.flex-wrap-reverse {
-  flex-wrap: wrap-reverse;
+.h-12 {
+  height: 3rem;
 }
 
-.flex-nowrap {
-  flex-wrap: nowrap;
+.h-16 {
+  height: 4rem;
 }
 
-.place-items-auto {
-  place-items: auto;
+.h-20 {
+  height: 5rem;
 }
 
-.place-items-start {
-  place-items: start;
+.h-24 {
+  height: 6rem;
 }
 
-.place-items-end {
-  place-items: end;
+.h-auto {
+  height: auto;
 }
 
-.place-items-center {
-  place-items: center;
+.h-full {
+  height: 100%;
 }
 
-.place-items-stretch {
-  place-items: stretch;
+.h-screen {
+  height: 100vh;
 }
 
-.place-content-center {
-  place-content: center;
+.h-95-px {
+  height: 95px;
 }
 
-.place-content-start {
-  place-content: start;
+.h-70-px {
+  height: 70px;
 }
 
-.place-content-end {
-  place-content: end;
+.h-350-px {
+  height: 350px;
 }
 
-.place-content-between {
-  place-content: space-between;
+.h-500-px {
+  height: 500px;
 }
 
-.place-content-around {
-  place-content: space-around;
+.h-600-px {
+  height: 600px;
 }
 
-.place-content-evenly {
-  place-content: space-evenly;
+.max-h-860-px {
+  max-height: 860px;
 }
 
-.place-content-stretch {
-  place-content: stretch;
+.min-h-screen {
+  min-height: 100vh;
 }
 
-.place-self-auto {
-  place-self: auto;
+.min-h-screen-75 {
+  min-height: 75vh;
 }
 
-.place-self-start {
-  place-self: start;
+.w-5 {
+  width: 1.25rem;
 }
 
-.place-self-end {
-  place-self: end;
+.w-8 {
+  width: 2rem;
 }
 
-.place-self-center {
-  place-self: center;
+.w-10 {
+  width: 2.5rem;
 }
 
-.place-self-stretch {
-  place-self: stretch;
+.w-12 {
+  width: 3rem;
 }
 
-.items-start {
-  align-items: flex-start;
+.w-16 {
+  width: 4rem;
 }
 
-.items-end {
-  align-items: flex-end;
+.w-auto {
+  width: auto;
 }
 
-.items-center {
-  align-items: center;
+.w-1\/2 {
+  width: 50%;
 }
 
-.items-baseline {
-  align-items: baseline;
+.w-6\/12 {
+  width: 50%;
 }
 
-.items-stretch {
-  align-items: stretch;
+.w-10\/12 {
+  width: 83.333333%;
 }
 
-.content-center {
-  align-content: center;
+.w-full {
+  width: 100%;
 }
 
-.content-start {
-  align-content: flex-start;
+.min-w-0 {
+  min-width: 0px;
 }
 
-.content-end {
-  align-content: flex-end;
+.min-w-48 {
+  min-width: 12rem;
 }
 
-.content-between {
-  align-content: space-between;
+.min-w-140-px {
+  min-width: 140px;
 }
 
-.content-around {
-  align-content: space-around;
+.max-w-md {
+  max-width: 28rem;
 }
 
-.content-evenly {
-  align-content: space-evenly;
+.max-w-xl {
+  max-width: 36rem;
 }
 
-.self-auto {
-  align-self: auto;
+.max-w-4xl {
+  max-width: 56rem;
 }
 
-.self-start {
-  align-self: flex-start;
+.max-w-full {
+  max-width: 100%;
 }
 
-.self-end {
-  align-self: flex-end;
+.max-w-100-px {
+  max-width: 100px;
 }
 
-.self-center {
-  align-self: center;
+.max-w-120-px {
+  max-width: 120px;
 }
 
-.self-stretch {
-  align-self: stretch;
+.max-w-150-px {
+  max-width: 150px;
 }
 
-.justify-items-auto {
-  justify-items: auto;
+.max-w-180-px {
+  max-width: 180px;
 }
 
-.justify-items-start {
-  justify-items: start;
+.max-w-200-px {
+  max-width: 200px;
 }
 
-.justify-items-end {
-  justify-items: end;
+.max-w-210-px {
+  max-width: 210px;
 }
 
-.justify-items-center {
-  justify-items: center;
+.max-w-580-px {
+  max-width: 580px;
 }
 
-.justify-items-stretch {
-  justify-items: stretch;
+.flex-1 {
+  flex: 1 1 0%;
 }
 
-.justify-start {
-  justify-content: flex-start;
-}
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-initial {
+  flex: 0 1 auto;
+}
+
+.flex-shrink {
+  flex-shrink: 1;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.table-auto {
+  table-layout: auto;
+}
+
+.table-fixed {
+  table-layout: fixed;
+}
+
+.border-collapse {
+  border-collapse: collapse;
+}
+
+.border-separate {
+  border-collapse: separate;
+}
+
+.transform {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform-gpu {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform-none {
+  transform: none;
+}
+
+.rotate-90 {
+  --tw-rotate: 90deg;
+}
+
+.rotate-180 {
+  --tw-rotate: 180deg;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.select-text {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+}
+
+.select-all {
+  -webkit-user-select: all;
+     -moz-user-select: all;
+          user-select: all;
+}
+
+.select-auto {
+  -webkit-user-select: auto;
+     -moz-user-select: auto;
+          user-select: auto;
+}
+
+.resize-none {
+  resize: none;
+}
+
+.resize-y {
+  resize: vertical;
+}
+
+.resize-x {
+  resize: horizontal;
+}
+
+.resize {
+  resize: both;
+}
+
+.list-inside {
+  list-style-position: inside;
+}
+
+.list-outside {
+  list-style-position: outside;
+}
+
+.list-none {
+  list-style-type: none;
+}
+
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.grid-flow-row {
+  grid-auto-flow: row;
+}
+
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
+.grid-flow-row-dense {
+  grid-auto-flow: row dense;
+}
+
+.grid-flow-col-dense {
+  grid-auto-flow: column dense;
+}
+
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.place-content-center {
+  place-content: center;
+}
+
+.place-content-start {
+  place-content: start;
+}
+
+.place-content-end {
+  place-content: end;
+}
+
+.place-content-between {
+  place-content: space-between;
+}
+
+.place-content-around {
+  place-content: space-around;
+}
+
+.place-content-evenly {
+  place-content: space-evenly;
+}
+
+.place-content-stretch {
+  place-content: stretch;
+}
+
+.place-items-start {
+  place-items: start;
+}
+
+.place-items-end {
+  place-items: end;
+}
+
+.place-items-center {
+  place-items: center;
+}
+
+.place-items-stretch {
+  place-items: stretch;
+}
+
+.content-center {
+  align-content: center;
+}
+
+.content-start {
+  align-content: flex-start;
+}
+
+.content-end {
+  align-content: flex-end;
+}
+
+.content-between {
+  align-content: space-between;
+}
+
+.content-around {
+  align-content: space-around;
+}
+
+.content-evenly {
+  align-content: space-evenly;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-baseline {
+  align-items: baseline;
+}
+
+.items-stretch {
+  align-items: stretch;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
+.justify-items-start {
+  justify-items: start;
+}
+
+.justify-items-end {
+  justify-items: end;
+}
+
+.justify-items-center {
+  justify-items: center;
+}
+
+.justify-items-stretch {
+  justify-items: stretch;
+}
+
+.gap-6 {
+  gap: 1.5rem;
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-reverse > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 1;
+}
+
+.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 1;
+}
+
+.divide-x > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(1px * var(--tw-divide-x-reverse));
+  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+}
+
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
 
-.justify-end {
-  justify-content: flex-end;
+.divide-y-reverse > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 1;
 }
 
-.justify-center {
-  justify-content: center;
+.divide-x-reverse > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 1;
 }
 
-.justify-between {
-  justify-content: space-between;
+.divide-solid > :not([hidden]) ~ :not([hidden]) {
+  border-style: solid;
 }
 
-.justify-around {
-  justify-content: space-around;
+.divide-dashed > :not([hidden]) ~ :not([hidden]) {
+  border-style: dashed;
 }
 
-.justify-evenly {
-  justify-content: space-evenly;
+.divide-dotted > :not([hidden]) ~ :not([hidden]) {
+  border-style: dotted;
 }
 
-.justify-self-auto {
-  justify-self: auto;
+.divide-double > :not([hidden]) ~ :not([hidden]) {
+  border-style: double;
 }
 
-.justify-self-start {
-  justify-self: start;
+.divide-none > :not([hidden]) ~ :not([hidden]) {
+  border-style: none;
 }
 
-.justify-self-end {
-  justify-self: end;
+.place-self-auto {
+  place-self: auto;
 }
 
-.justify-self-center {
-  justify-self: center;
+.place-self-start {
+  place-self: start;
 }
 
-.justify-self-stretch {
-  justify-self: stretch;
+.place-self-end {
+  place-self: end;
 }
 
-.flex-1 {
-  flex: 1 1 0%;
+.place-self-center {
+  place-self: center;
 }
 
-.flex-auto {
-  flex: 1 1 auto;
+.place-self-stretch {
+  place-self: stretch;
 }
 
-.flex-initial {
-  flex: 0 1 auto;
+.self-auto {
+  align-self: auto;
 }
 
-.flex-grow {
-  flex-grow: 1;
+.self-start {
+  align-self: flex-start;
 }
 
-.flex-shrink {
-  flex-shrink: 1;
+.self-end {
+  align-self: flex-end;
 }
 
-.float-right {
-  float: right;
+.self-center {
+  align-self: center;
 }
 
-.float-left {
-  float: left;
+.self-stretch {
+  align-self: stretch;
 }
 
-.float-none {
-  float: none;
+.self-baseline {
+  align-self: baseline;
 }
 
-.clear-left {
-  clear: left;
+.justify-self-auto {
+  justify-self: auto;
 }
 
-.clear-right {
-  clear: right;
+.justify-self-start {
+  justify-self: start;
 }
 
-.clear-both {
-  clear: both;
+.justify-self-end {
+  justify-self: end;
 }
 
-.clear-none {
-  clear: none;
+.justify-self-center {
+  justify-self: center;
 }
 
-.font-light {
-  font-weight: 300;
+.justify-self-stretch {
+  justify-self: stretch;
 }
 
-.font-normal {
-  font-weight: 400;
+.overflow-auto {
+  overflow: auto;
 }
 
-.font-semibold {
-  font-weight: 600;
+.overflow-hidden {
+  overflow: hidden;
 }
 
-.font-bold {
-  font-weight: 700;
+.overflow-visible {
+  overflow: visible;
 }
 
-.h-0 {
-  height: 0px;
+.overflow-scroll {
+  overflow: scroll;
 }
 
-.h-2 {
-  height: 0.5rem;
+.overflow-x-auto {
+  overflow-x: auto;
 }
 
-.h-5 {
-  height: 1.25rem;
+.overflow-y-auto {
+  overflow-y: auto;
 }
 
-.h-8 {
-  height: 2rem;
+.overflow-x-hidden {
+  overflow-x: hidden;
 }
 
-.h-10 {
-  height: 2.5rem;
+.overflow-y-hidden {
+  overflow-y: hidden;
 }
 
-.h-12 {
-  height: 3rem;
+.overflow-x-visible {
+  overflow-x: visible;
 }
 
-.h-16 {
-  height: 4rem;
+.overflow-y-visible {
+  overflow-y: visible;
 }
 
-.h-20 {
-  height: 5rem;
+.overflow-x-scroll {
+  overflow-x: scroll;
 }
 
-.h-24 {
-  height: 6rem;
+.overflow-y-scroll {
+  overflow-y: scroll;
 }
 
-.h-auto {
-  height: auto;
+.overscroll-auto {
+  overscroll-behavior: auto;
 }
 
-.h-full {
-  height: 100%;
+.overscroll-contain {
+  overscroll-behavior: contain;
 }
 
-.h-screen {
-  height: 100vh;
+.overscroll-none {
+  overscroll-behavior: none;
 }
 
-.h-95-px {
-  height: 95px;
+.overscroll-y-auto {
+  overscroll-behavior-y: auto;
 }
 
-.h-70-px {
-  height: 70px;
+.overscroll-y-contain {
+  overscroll-behavior-y: contain;
 }
 
-.h-350-px {
-  height: 350px;
+.overscroll-y-none {
+  overscroll-behavior-y: none;
 }
 
-.h-500-px {
-  height: 500px;
+.overscroll-x-auto {
+  overscroll-behavior-x: auto;
 }
 
-.h-600-px {
-  height: 600px;
+.overscroll-x-contain {
+  overscroll-behavior-x: contain;
 }
 
-.text-55 {
-  font-size: 55rem;
+.overscroll-x-none {
+  overscroll-behavior-x: none;
 }
 
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+.overflow-ellipsis {
+  text-overflow: ellipsis;
 }
 
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
+.overflow-clip {
+  text-overflow: clip;
 }
 
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+.whitespace-normal {
+  white-space: normal;
 }
 
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
+.whitespace-nowrap {
+  white-space: nowrap;
 }
 
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
+.whitespace-pre {
+  white-space: pre;
 }
 
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
+.whitespace-pre-line {
+  white-space: pre-line;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
 }
 
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
+.break-normal {
+  overflow-wrap: normal;
+  word-break: normal;
 }
 
-.leading-none {
-  line-height: 1;
+.break-words {
+  overflow-wrap: break-word;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
+.rounded-t-lg {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
 }
 
-.leading-snug {
-  line-height: 1.375;
+.rounded-r {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
 }
 
-.leading-normal {
-  line-height: 1.5;
+.rounded-b {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
 }
 
-.leading-relaxed {
-  line-height: 1.625;
+.rounded-l {
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
 }
 
-.list-inside {
-  list-style-position: inside;
+.rounded-tl {
+  border-top-left-radius: 0.25rem;
 }
 
-.list-outside {
-  list-style-position: outside;
+.rounded-tr {
+  border-top-right-radius: 0.25rem;
 }
 
-.list-none {
-  list-style-type: none;
+.rounded-br {
+  border-bottom-right-radius: 0.25rem;
 }
 
-.m-2 {
-  margin: 0.5rem;
+.rounded-bl {
+  border-bottom-left-radius: 0.25rem;
 }
 
-.m-3 {
-  margin: 0.75rem;
+.border-0 {
+  border-width: 0px;
 }
 
-.m-4 {
-  margin: 1rem;
+.border-2 {
+  border-width: 2px;
 }
 
-.m-8 {
-  margin: 2rem;
+.border {
+  border-width: 1px;
 }
 
-.m-14 {
-  margin: 3.5rem;
+.border-t-0 {
+  border-top-width: 0px;
 }
 
-.m-16 {
-  margin: 4rem;
+.border-t {
+  border-top-width: 1px;
 }
 
-.-m-16 {
-  margin: -4rem;
+.border-r-0 {
+  border-right-width: 0px;
 }
 
-.-m-24 {
-  margin: -6rem;
+.border-r {
+  border-right-width: 1px;
 }
 
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+.border-b-2 {
+  border-bottom-width: 2px;
 }
 
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+.border-b {
+  border-bottom-width: 1px;
 }
 
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
+.border-l-0 {
+  border-left-width: 0px;
 }
 
-.my-6 {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
+.border-l {
+  border-left-width: 1px;
 }
 
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
+.border-solid {
+  border-style: solid;
 }
 
-.mt-0 {
-  margin-top: 0px;
+.border-dashed {
+  border-style: dashed;
 }
 
-.mr-0 {
-  margin-right: 0px;
+.border-dotted {
+  border-style: dotted;
 }
 
-.mb-0 {
-  margin-bottom: 0px;
+.border-double {
+  border-style: double;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
+.border-none {
+  border-style: none;
 }
 
-.mr-1 {
-  margin-right: 0.25rem;
+.border-red-600 {
+  --tw-border-opacity: 1;
+  border-color: rgba(220, 38, 38, var(--tw-border-opacity));
 }
 
-.mb-1 {
-  margin-bottom: 0.25rem;
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgba(228, 228, 231, var(--tw-border-opacity));
 }
 
-.ml-1 {
-  margin-left: 0.25rem;
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgba(212, 212, 216, var(--tw-border-opacity));
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
+.border-blueGray-50 {
+  --tw-border-opacity: 1;
+  border-color: rgba(248, 250, 252, var(--tw-border-opacity));
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
+.border-blueGray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgba(241, 245, 249, var(--tw-border-opacity));
 }
 
-.mb-2 {
-  margin-bottom: 0.5rem;
+.border-blueGray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgba(226, 232, 240, var(--tw-border-opacity));
 }
 
-.ml-2 {
-  margin-left: 0.5rem;
+.border-blueGray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgba(203, 213, 225, var(--tw-border-opacity));
 }
 
-.mt-3 {
-  margin-top: 0.75rem;
+.border-blueGray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgba(100, 116, 139, var(--tw-border-opacity));
 }
 
-.mr-3 {
-  margin-right: 0.75rem;
+.border-blueGray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgba(71, 85, 105, var(--tw-border-opacity));
 }
 
-.mb-3 {
-  margin-bottom: 0.75rem;
+.focus\:border-black:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(0, 0, 0, var(--tw-border-opacity));
 }
 
-.ml-3 {
-  margin-left: 0.75rem;
+.focus\:border-indigo-300:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(165, 180, 252, var(--tw-border-opacity));
 }
 
-.mt-4 {
-  margin-top: 1rem;
+.focus\:border-gray-300:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(212, 212, 216, var(--tw-border-opacity));
 }
 
-.mr-4 {
-  margin-right: 1rem;
+.focus\:border-gray-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(113, 113, 122, var(--tw-border-opacity));
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
 }
 
-.mt-5 {
-  margin-top: 1.25rem;
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
-.mb-5 {
-  margin-bottom: 1.25rem;
+.bg-pink-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(236, 72, 153, var(--tw-bg-opacity));
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
+.bg-purple-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(233, 213, 255, var(--tw-bg-opacity));
 }
 
-.mb-6 {
-  margin-bottom: 1.5rem;
+.bg-purple-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(168, 85, 247, var(--tw-bg-opacity));
 }
 
-.mt-8 {
-  margin-top: 2rem;
+.bg-indigo-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
 }
 
-.mb-8 {
-  margin-bottom: 2rem;
+.bg-lightBlue-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(186, 230, 253, var(--tw-bg-opacity));
 }
 
-.mt-10 {
-  margin-top: 2.5rem;
+.bg-lightBlue-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(56, 189, 248, var(--tw-bg-opacity));
 }
 
-.mt-12 {
-  margin-top: 3rem;
+.bg-lightBlue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(14, 165, 233, var(--tw-bg-opacity));
 }
 
-.mb-12 {
-  margin-bottom: 3rem;
+.bg-lightBlue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(2, 132, 199, var(--tw-bg-opacity));
 }
 
-.mt-16 {
-  margin-top: 4rem;
+.bg-teal-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(153, 246, 228, var(--tw-bg-opacity));
 }
 
-.mt-20 {
-  margin-top: 5rem;
+.bg-teal-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(20, 184, 166, var(--tw-bg-opacity));
 }
 
-.mt-24 {
-  margin-top: 6rem;
+.bg-emerald-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(167, 243, 208, var(--tw-bg-opacity));
 }
 
-.mb-24 {
-  margin-bottom: 6rem;
+.bg-emerald-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(52, 211, 153, var(--tw-bg-opacity));
 }
 
-.mt-32 {
-  margin-top: 8rem;
+.bg-emerald-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
 }
 
-.mt-48 {
-  margin-top: 12rem;
+.bg-yellow-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(234, 179, 8, var(--tw-bg-opacity));
 }
 
-.mr-auto {
-  margin-right: auto;
+.bg-orange-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(254, 215, 170, var(--tw-bg-opacity));
 }
 
-.ml-auto {
-  margin-left: auto;
+.bg-orange-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(249, 115, 22, var(--tw-bg-opacity));
 }
 
-.-ml-4 {
-  margin-left: -1rem;
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
 }
 
-.-mt-20 {
-  margin-top: -5rem;
+.bg-red-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(252, 165, 165, var(--tw-bg-opacity));
 }
 
-.-ml-20 {
-  margin-left: -5rem;
+.bg-red-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
 }
 
-.-mt-24 {
-  margin-top: -6rem;
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
 }
 
-.-mt-32 {
-  margin-top: -8rem;
+.bg-red-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(220, 38, 38, var(--tw-bg-opacity));
 }
 
-.-mt-48 {
-  margin-top: -12rem;
+.bg-red-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
 }
 
-.-mt-64 {
-  margin-top: -16rem;
+.bg-red-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(153, 27, 27, var(--tw-bg-opacity));
 }
 
-.last\:mr-0:last-child {
-  margin-right: 0px;
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
 }
 
-.hover\:-mt-4:hover {
-  margin-top: -1rem;
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
 }
 
-.max-h-860-px {
-  max-height: 860px;
+.bg-blueGray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 250, 252, var(--tw-bg-opacity));
 }
 
-.max-w-md {
-  max-width: 28rem;
+.bg-blueGray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(241, 245, 249, var(--tw-bg-opacity));
 }
 
-.max-w-xl {
-  max-width: 36rem;
+.bg-blueGray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(226, 232, 240, var(--tw-bg-opacity));
 }
 
-.max-w-4xl {
-  max-width: 56rem;
+.bg-blueGray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(71, 85, 105, var(--tw-bg-opacity));
 }
 
-.max-w-full {
-  max-width: 100%;
+.bg-blueGray-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(51, 65, 85, var(--tw-bg-opacity));
 }
 
-.max-w-100-px {
-  max-width: 100px;
+.bg-blueGray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(30, 41, 59, var(--tw-bg-opacity));
 }
 
-.max-w-120-px {
-  max-width: 120px;
+.focus\:bg-white:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
-.max-w-150-px {
-  max-width: 150px;
+.focus\:bg-gray-200:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
 }
 
-.max-w-180-px {
-  max-width: 180px;
+.active\:bg-indigo-600:active {
+  --tw-bg-opacity: 1;
+  background-color: rgba(79, 70, 229, var(--tw-bg-opacity));
 }
 
-.max-w-200-px {
-  max-width: 200px;
+.active\:bg-red-500:active {
+  --tw-bg-opacity: 1;
+  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
 }
 
-.max-w-210-px {
-  max-width: 210px;
+.active\:bg-blueGray-50:active {
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 250, 252, var(--tw-bg-opacity));
 }
 
-.max-w-580-px {
-  max-width: 580px;
+.active\:bg-blueGray-600:active {
+  --tw-bg-opacity: 1;
+  background-color: rgba(71, 85, 105, var(--tw-bg-opacity));
 }
 
-.min-h-screen {
-  min-height: 100vh;
+.decoration-slice {
+  -webkit-box-decoration-break: slice;
+          box-decoration-break: slice;
 }
 
-.min-h-screen-75 {
-  min-height: 75vh;
+.decoration-clone {
+  -webkit-box-decoration-break: clone;
+          box-decoration-break: clone;
 }
 
-.min-w-0 {
-  min-width: 0px;
+.bg-cover {
+  background-size: cover;
 }
 
-.min-w-48 {
-  min-width: 12rem;
+.bg-full {
+  background-size: 100%;
 }
 
-.min-w-140-px {
-  min-width: 140px;
+.bg-fixed {
+  background-attachment: fixed;
 }
 
-.object-contain {
-  -o-object-fit: contain;
-     object-fit: contain;
+.bg-local {
+  background-attachment: local;
 }
 
-.object-cover {
-  -o-object-fit: cover;
-     object-fit: cover;
+.bg-scroll {
+  background-attachment: scroll;
 }
 
-.object-fill {
-  -o-object-fit: fill;
-     object-fit: fill;
+.bg-clip-border {
+  background-clip: border-box;
 }
 
-.object-none {
-  -o-object-fit: none;
-     object-fit: none;
+.bg-clip-padding {
+  background-clip: padding-box;
 }
 
-.object-scale-down {
-  -o-object-fit: scale-down;
-     object-fit: scale-down;
+.bg-clip-content {
+  background-clip: content-box;
 }
 
-.opacity-50 {
-  opacity: 0.5;
+.bg-clip-text {
+  -webkit-background-clip: text;
+          background-clip: text;
 }
 
-.opacity-75 {
-  opacity: 0.75;
+.bg-center {
+  background-position: center;
 }
 
-.opacity-80 {
-  opacity: .8;
+.bg-repeat {
+  background-repeat: repeat;
 }
 
-.outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
+.bg-no-repeat {
+  background-repeat: no-repeat;
 }
 
-.focus\:outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
+.bg-repeat-x {
+  background-repeat: repeat-x;
 }
 
-.overflow-auto {
-  overflow: auto;
+.bg-repeat-y {
+  background-repeat: repeat-y;
 }
 
-.overflow-hidden {
-  overflow: hidden;
+.bg-repeat-round {
+  background-repeat: round;
 }
 
-.overflow-visible {
-  overflow: visible;
+.bg-repeat-space {
+  background-repeat: space;
 }
 
-.overflow-scroll {
-  overflow: scroll;
+.bg-origin-border {
+  background-origin: border-box;
 }
 
-.overflow-x-auto {
-  overflow-x: auto;
+.bg-origin-padding {
+  background-origin: padding-box;
 }
 
-.overflow-y-auto {
-  overflow-y: auto;
+.bg-origin-content {
+  background-origin: content-box;
 }
 
-.overflow-x-hidden {
-  overflow-x: hidden;
+.fill-current {
+  fill: currentColor;
 }
 
-.overflow-y-hidden {
-  overflow-y: hidden;
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
 }
 
-.overflow-x-visible {
-  overflow-x: visible;
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
-.overflow-y-visible {
-  overflow-y: visible;
+.object-fill {
+  -o-object-fit: fill;
+     object-fit: fill;
 }
 
-.overflow-x-scroll {
-  overflow-x: scroll;
+.object-none {
+  -o-object-fit: none;
+     object-fit: none;
 }
 
-.overflow-y-scroll {
-  overflow-y: scroll;
+.object-scale-down {
+  -o-object-fit: scale-down;
+     object-fit: scale-down;
 }
 
-.overscroll-auto {
-  -ms-scroll-chaining: chained;
-      overscroll-behavior: auto;
+.p-1 {
+  padding: 0.25rem;
 }
 
-.overscroll-contain {
-  -ms-scroll-chaining: none;
-      overscroll-behavior: contain;
+.p-2 {
+  padding: 0.5rem;
 }
 
-.overscroll-none {
-  -ms-scroll-chaining: none;
-      overscroll-behavior: none;
+.p-3 {
+  padding: 0.75rem;
 }
 
-.overscroll-y-auto {
-  overscroll-behavior-y: auto;
+.p-4 {
+  padding: 1rem;
 }
 
-.overscroll-y-contain {
-  overscroll-behavior-y: contain;
+.p-5 {
+  padding: 1.25rem;
 }
 
-.overscroll-y-none {
-  overscroll-behavior-y: none;
+.p-8 {
+  padding: 2rem;
 }
 
-.overscroll-x-auto {
-  overscroll-behavior-x: auto;
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
 }
 
-.overscroll-x-contain {
-  overscroll-behavior-x: contain;
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
 
-.overscroll-x-none {
-  overscroll-behavior-x: none;
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 
-.p-2 {
-  padding: 0.5rem;
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
 }
 
-.p-3 {
-  padding: 0.75rem;
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
-.p-4 {
-  padding: 1rem;
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 }
 
-.p-5 {
-  padding: 1.25rem;
+.px-12 {
+  padding-left: 3rem;
+  padding-right: 3rem;
 }
 
-.p-8 {
-  padding: 2rem;
+.px-0\.5 {
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
 }
 
-.px-0 {
-  padding-left: 0px;
-  padding-right: 0px;
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
 }
 
 .py-1 {
@@ -2639,31 +3048,16 @@ select {
   padding-bottom: 0.5rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
 
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
 
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
 .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
@@ -2674,11 +3068,6 @@ select {
   padding-bottom: 1.5rem;
 }
 
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -2694,11 +3083,6 @@ select {
   padding-bottom: 3rem;
 }
 
-.px-12 {
-  padding-left: 3rem;
-  padding-right: 3rem;
-}
-
 .py-16 {
   padding-top: 4rem;
   padding-bottom: 4rem;
@@ -2719,19 +3103,10 @@ select {
   padding-bottom: 10rem;
 }
 
-.px-0\.5 {
-  padding-left: 0.125rem;
-  padding-right: 0.125rem;
-}
-
 .pt-0 {
   padding-top: 0px;
 }
 
-.pb-0 {
-  padding-bottom: 0px;
-}
-
 .pt-1 {
   padding-top: 0.25rem;
 }
@@ -2740,66 +3115,26 @@ select {
   padding-top: 0.5rem;
 }
 
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
-.pl-3 {
-  padding-left: 0.75rem;
-}
-
-.pr-4 {
-  padding-right: 1rem;
-}
-
-.pb-4 {
-  padding-bottom: 1rem;
-}
-
-.pl-4 {
-  padding-left: 1rem;
-}
-
 .pt-6 {
   padding-top: 1.5rem;
 }
 
-.pb-6 {
-  padding-bottom: 1.5rem;
-}
-
 .pt-8 {
   padding-top: 2rem;
 }
 
-.pl-10 {
-  padding-left: 2.5rem;
-}
-
 .pt-12 {
   padding-top: 3rem;
 }
 
-.pr-12 {
-  padding-right: 3rem;
-}
-
 .pt-16 {
   padding-top: 4rem;
 }
 
-.pb-16 {
-  padding-bottom: 4rem;
-}
-
 .pt-20 {
   padding-top: 5rem;
 }
 
-.pb-20 {
-  padding-bottom: 5rem;
-}
-
 .pt-24 {
   padding-top: 6rem;
 }
@@ -2808,312 +3143,266 @@ select {
   padding-top: 8rem;
 }
 
-.pb-32 {
-  padding-bottom: 8rem;
-}
-
-.pb-40 {
-  padding-bottom: 10rem;
-}
-
 .pt-48 {
   padding-top: 12rem;
 }
 
-.pb-48 {
-  padding-bottom: 12rem;
-}
-
-.pb-64 {
-  padding-bottom: 16rem;
-}
-
-.placeholder-blueGray-300::-moz-placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgba(203, 213, 225, var(--tw-placeholder-opacity));
-}
-
-.placeholder-blueGray-300:-ms-input-placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgba(203, 213, 225, var(--tw-placeholder-opacity));
-}
-
-.placeholder-blueGray-300::placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgba(203, 213, 225, var(--tw-placeholder-opacity));
-}
-
-.pointer-events-none {
-  pointer-events: none;
-}
-
-.pointer-events-auto {
-  pointer-events: auto;
+.pr-4 {
+  padding-right: 1rem;
 }
 
-.static {
-  position: static;
+.pr-12 {
+  padding-right: 3rem;
 }
 
-.fixed {
-  position: fixed;
+.pb-0 {
+  padding-bottom: 0px;
 }
 
-.absolute {
-  position: absolute;
+.pb-2 {
+  padding-bottom: 0.5rem;
 }
 
-.relative {
-  position: relative;
+.pb-4 {
+  padding-bottom: 1rem;
 }
 
-.sticky {
-  position: sticky;
+.pb-6 {
+  padding-bottom: 1.5rem;
 }
 
-.top-0 {
-  top: 0px;
+.pb-16 {
+  padding-bottom: 4rem;
 }
 
-.right-0 {
-  right: 0px;
+.pb-20 {
+  padding-bottom: 5rem;
 }
 
-.bottom-0 {
-  bottom: 0px;
+.pb-32 {
+  padding-bottom: 8rem;
 }
 
-.left-0 {
-  left: 0px;
+.pb-40 {
+  padding-bottom: 10rem;
 }
 
-.top-auto {
-  top: auto;
+.pb-48 {
+  padding-bottom: 12rem;
 }
 
-.bottom-auto {
-  bottom: auto;
+.pb-64 {
+  padding-bottom: 16rem;
 }
 
-.left-auto {
-  left: auto;
+.pl-3 {
+  padding-left: 0.75rem;
 }
 
-.-right-100 {
-  right: -100%;
+.pl-4 {
+  padding-left: 1rem;
 }
 
-.-top-225-px {
-  top: -225px;
+.pl-10 {
+  padding-left: 2.5rem;
 }
 
-.-top-160-px {
-  top: -160px;
+.text-left {
+  text-align: left;
 }
 
-.-top-150-px {
-  top: -150px;
+.text-center {
+  text-align: center;
 }
 
-.-top-94-px {
-  top: -94px;
+.text-right {
+  text-align: right;
 }
 
-.-left-50-px {
-  left: -50px;
+.text-justify {
+  text-align: justify;
 }
 
-.-top-29-px {
-  top: -29px;
+.align-baseline {
+  vertical-align: baseline;
 }
 
-.-left-20-px {
-  left: -20px;
+.align-top {
+  vertical-align: top;
 }
 
-.top-25-px {
-  top: 25px;
+.align-middle {
+  vertical-align: middle;
 }
 
-.left-40-px {
-  left: 40px;
+.align-bottom {
+  vertical-align: bottom;
 }
 
-.top-95-px {
-  top: 95px;
+.align-text-top {
+  vertical-align: text-top;
 }
 
-.left-145-px {
-  left: 145px;
+.align-text-bottom {
+  vertical-align: text-bottom;
 }
 
-.left-195-px {
-  left: 195px;
+.text-55 {
+  font-size: 55rem;
 }
 
-.top-210-px {
-  top: 210px;
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 
-.left-260-px {
-  left: 260px;
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
-.resize-none {
-  resize: none;
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
 }
 
-.resize-y {
-  resize: vertical;
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
 }
-
-.resize-x {
-  resize: horizontal;
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
 }
 
-.resize {
-  resize: both;
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
 }
 
-* {
-  --tw-shadow: 0 0 #0000;
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
 }
 
-.shadow-sm {
-  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
 }
 
-.shadow {
-  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
 }
 
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+.font-light {
+  font-weight: 300;
 }
 
-.shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+.font-normal {
+  font-weight: 400;
 }
 
-.shadow-xl {
-  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+.font-semibold {
+  font-weight: 600;
 }
 
-.shadow-2xl {
-  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+.font-bold {
+  font-weight: 700;
 }
 
-.shadow-none {
-  --tw-shadow: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+.hover\:font-bold:hover {
+  font-weight: 700;
 }
 
-.hover\:shadow-md:hover {
-  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+.uppercase {
+  text-transform: uppercase;
 }
 
-.hover\:shadow-lg:hover {
-  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+.lowercase {
+  text-transform: lowercase;
 }
 
-* {
-  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgba(59, 130, 246, 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
+.capitalize {
+  text-transform: capitalize;
 }
 
-.ring {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+.normal-case {
+  text-transform: none;
 }
 
-.ring-inset {
-  --tw-ring-inset: inset;
+.italic {
+  font-style: italic;
 }
 
-.focus\:ring-0:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+.not-italic {
+  font-style: normal;
 }
 
-.focus\:ring-1:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions {
+  --tw-ordinal: var(--tw-empty,/*!*/ /*!*/);
+  --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/);
+  --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/);
+  --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/);
+  --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/);
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
 
-.focus\:ring:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+.normal-nums {
+  font-variant-numeric: normal;
 }
 
-.focus\:ring-offset-0:focus {
-  --tw-ring-offset-width: 0px;
+.ordinal {
+  --tw-ordinal: ordinal;
 }
 
-.focus\:ring-offset-2:focus {
-  --tw-ring-offset-width: 2px;
+.slashed-zero {
+  --tw-slashed-zero: slashed-zero;
 }
 
-.focus\:ring-black:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(0, 0, 0, var(--tw-ring-opacity));
+.lining-nums {
+  --tw-numeric-figure: lining-nums;
 }
 
-.focus\:ring-indigo-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(199, 210, 254, var(--tw-ring-opacity));
+.oldstyle-nums {
+  --tw-numeric-figure: oldstyle-nums;
 }
 
-.focus\:ring-gray-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(113, 113, 122, var(--tw-ring-opacity));
+.proportional-nums {
+  --tw-numeric-spacing: proportional-nums;
 }
 
-.focus\:ring-opacity-50:focus {
-  --tw-ring-opacity: 0.5;
+.tabular-nums {
+  --tw-numeric-spacing: tabular-nums;
 }
 
-.fill-current {
-  fill: currentColor;
+.diagonal-fractions {
+  --tw-numeric-fraction: diagonal-fractions;
 }
 
-.table-auto {
-  table-layout: auto;
+.stacked-fractions {
+  --tw-numeric-fraction: stacked-fractions;
 }
 
-.table-fixed {
-  table-layout: fixed;
+.leading-none {
+  line-height: 1;
 }
 
-.text-left {
-  text-align: left;
+.leading-snug {
+  line-height: 1.375;
 }
 
-.text-center {
-  text-align: center;
+.leading-normal {
+  line-height: 1.5;
 }
 
-.text-right {
-  text-align: right;
+.leading-relaxed {
+  line-height: 1.625;
 }
 
-.text-justify {
-  text-align: justify;
+.tracking-wide {
+  letter-spacing: 0.025em;
 }
 
 .text-black {
@@ -3266,327 +3555,371 @@ select {
   color: rgba(30, 41, 59, var(--tw-text-opacity));
 }
 
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.underline {
+  text-decoration: underline;
 }
 
-.overflow-ellipsis {
-  text-overflow: ellipsis;
+.line-through {
+  text-decoration: line-through;
 }
 
-.overflow-clip {
-  text-overflow: clip;
+.no-underline {
+  text-decoration: none;
 }
 
-.italic {
-  font-style: italic;
+.antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.not-italic {
-  font-style: normal;
+.subpixel-antialiased {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
 }
 
-.uppercase {
-  text-transform: uppercase;
+.placeholder-blueGray-300::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgba(203, 213, 225, var(--tw-placeholder-opacity));
 }
 
-.lowercase {
-  text-transform: lowercase;
+.placeholder-blueGray-300::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgba(203, 213, 225, var(--tw-placeholder-opacity));
 }
 
-.capitalize {
-  text-transform: capitalize;
+.opacity-50 {
+  opacity: 0.5;
 }
 
-.normal-case {
-  text-transform: none;
+.opacity-75 {
+  opacity: 0.75;
 }
 
-.underline {
-  text-decoration: underline;
+.opacity-80 {
+  opacity: .8;
 }
 
-.line-through {
-  text-decoration: line-through;
+.bg-blend-normal {
+  background-blend-mode: normal;
 }
 
-.no-underline {
-  text-decoration: none;
+.bg-blend-multiply {
+  background-blend-mode: multiply;
 }
 
-.antialiased {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.bg-blend-screen {
+  background-blend-mode: screen;
 }
 
-.subpixel-antialiased {
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
+.bg-blend-overlay {
+  background-blend-mode: overlay;
 }
 
-.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions {
-  --tw-ordinal: var(--tw-empty,/*!*/ /*!*/);
-  --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/);
-  --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/);
-  --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/);
-  --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/);
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+.bg-blend-darken {
+  background-blend-mode: darken;
 }
 
-.normal-nums {
-  font-variant-numeric: normal;
+.bg-blend-lighten {
+  background-blend-mode: lighten;
 }
 
-.ordinal {
-  --tw-ordinal: ordinal;
+.bg-blend-color-dodge {
+  background-blend-mode: color-dodge;
 }
 
-.slashed-zero {
-  --tw-slashed-zero: slashed-zero;
+.bg-blend-color-burn {
+  background-blend-mode: color-burn;
 }
 
-.lining-nums {
-  --tw-numeric-figure: lining-nums;
+.bg-blend-hard-light {
+  background-blend-mode: hard-light;
 }
 
-.oldstyle-nums {
-  --tw-numeric-figure: oldstyle-nums;
+.bg-blend-soft-light {
+  background-blend-mode: soft-light;
 }
 
-.proportional-nums {
-  --tw-numeric-spacing: proportional-nums;
+.bg-blend-difference {
+  background-blend-mode: difference;
 }
 
-.tabular-nums {
-  --tw-numeric-spacing: tabular-nums;
+.bg-blend-exclusion {
+  background-blend-mode: exclusion;
 }
 
-.diagonal-fractions {
-  --tw-numeric-fraction: diagonal-fractions;
+.bg-blend-hue {
+  background-blend-mode: hue;
 }
 
-.stacked-fractions {
-  --tw-numeric-fraction: stacked-fractions;
+.bg-blend-saturation {
+  background-blend-mode: saturation;
 }
 
-.tracking-wide {
-  letter-spacing: 0.025em;
+.bg-blend-color {
+  background-blend-mode: color;
 }
 
-.select-none {
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+.bg-blend-luminosity {
+  background-blend-mode: luminosity;
+}
+
+.mix-blend-normal {
+  mix-blend-mode: normal;
+}
+
+.mix-blend-multiply {
+  mix-blend-mode: multiply;
+}
+
+.mix-blend-screen {
+  mix-blend-mode: screen;
+}
+
+.mix-blend-overlay {
+  mix-blend-mode: overlay;
+}
+
+.mix-blend-darken {
+  mix-blend-mode: darken;
+}
+
+.mix-blend-lighten {
+  mix-blend-mode: lighten;
+}
+
+.mix-blend-color-dodge {
+  mix-blend-mode: color-dodge;
 }
 
-.select-text {
-  -webkit-user-select: text;
-     -moz-user-select: text;
-      -ms-user-select: text;
-          user-select: text;
+.mix-blend-color-burn {
+  mix-blend-mode: color-burn;
 }
 
-.select-all {
-  -webkit-user-select: all;
-     -moz-user-select: all;
-          user-select: all;
+.mix-blend-hard-light {
+  mix-blend-mode: hard-light;
 }
 
-.select-auto {
-  -webkit-user-select: auto;
-     -moz-user-select: auto;
-      -ms-user-select: auto;
-          user-select: auto;
+.mix-blend-soft-light {
+  mix-blend-mode: soft-light;
 }
 
-.align-baseline {
-  vertical-align: baseline;
+.mix-blend-difference {
+  mix-blend-mode: difference;
 }
 
-.align-top {
-  vertical-align: top;
+.mix-blend-exclusion {
+  mix-blend-mode: exclusion;
 }
 
-.align-middle {
-  vertical-align: middle;
+.mix-blend-hue {
+  mix-blend-mode: hue;
 }
 
-.align-bottom {
-  vertical-align: bottom;
+.mix-blend-saturation {
+  mix-blend-mode: saturation;
 }
 
-.align-text-top {
-  vertical-align: text-top;
+.mix-blend-color {
+  mix-blend-mode: color;
 }
 
-.align-text-bottom {
-  vertical-align: text-bottom;
+.mix-blend-luminosity {
+  mix-blend-mode: luminosity;
 }
 
-.visible {
-  visibility: visible;
+*, ::before, ::after {
+  --tw-shadow: 0 0 #0000;
 }
 
-.invisible {
-  visibility: hidden;
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.whitespace-normal {
-  white-space: normal;
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.whitespace-nowrap {
-  white-space: nowrap;
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.whitespace-pre {
-  white-space: pre;
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.whitespace-pre-line {
-  white-space: pre-line;
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.whitespace-pre-wrap {
-  white-space: pre-wrap;
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.break-normal {
-  overflow-wrap: normal;
-  word-break: normal;
+.shadow-none {
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.break-words {
-  overflow-wrap: break-word;
+.hover\:shadow-md:hover {
+  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.break-all {
-  word-break: break-all;
+.hover\:shadow-lg:hover {
+  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.w-5 {
-  width: 1.25rem;
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 
-.w-8 {
-  width: 2rem;
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 
-.w-10 {
-  width: 2.5rem;
+*, ::before, ::after {
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(59, 130, 246, 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
 }
 
-.w-12 {
-  width: 3rem;
+.ring {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.w-16 {
-  width: 4rem;
+.focus\:ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.w-auto {
-  width: auto;
+.focus\:ring-1:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.w-1\/2 {
-  width: 50%;
+.focus\:ring:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.w-6\/12 {
-  width: 50%;
+.ring-inset {
+  --tw-ring-inset: inset;
 }
 
-.w-10\/12 {
-  width: 83.333333%;
+.focus\:ring-black:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(0, 0, 0, var(--tw-ring-opacity));
 }
 
-.w-full {
-  width: 100%;
+.focus\:ring-indigo-200:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(199, 210, 254, var(--tw-ring-opacity));
 }
 
-.z-2 {
-  z-index: 2;
+.focus\:ring-gray-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(113, 113, 122, var(--tw-ring-opacity));
 }
 
-.z-3 {
-  z-index: 3;
+.focus\:ring-opacity-50:focus {
+  --tw-ring-opacity: 0.5;
 }
 
-.z-10 {
-  z-index: 10;
+.focus\:ring-offset-0:focus {
+  --tw-ring-offset-width: 0px;
 }
 
-.z-40 {
-  z-index: 40;
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
 }
 
-.z-50 {
-  z-index: 50;
+.filter {
+  --tw-blur: var(--tw-empty,/*!*/ /*!*/);
+  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
+  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
+  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
+  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-invert: var(--tw-empty,/*!*/ /*!*/);
+  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
+  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.gap-6 {
-  gap: 1.5rem;
+.filter-none {
+  filter: none;
 }
 
-.grid-flow-row {
-  grid-auto-flow: row;
+.blur {
+  --tw-blur: blur(8px);
 }
 
-.grid-flow-col {
-  grid-auto-flow: column;
+.drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
 }
 
-.grid-flow-row-dense {
-  grid-auto-flow: row dense;
+.grayscale {
+  --tw-grayscale: grayscale(100%);
 }
 
-.grid-flow-col-dense {
-  grid-auto-flow: column dense;
+.invert {
+  --tw-invert: invert(100%);
 }
 
-.grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
+.sepia {
+  --tw-sepia: sepia(100%);
 }
 
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+.backdrop-filter {
+  --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
+  --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
-.transform {
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+.backdrop-filter-none {
+  -webkit-backdrop-filter: none;
+          backdrop-filter: none;
 }
 
-.transform-gpu {
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+.backdrop-blur {
+  --tw-backdrop-blur: blur(8px);
 }
 
-.transform-none {
-  transform: none;
+.backdrop-grayscale {
+  --tw-backdrop-grayscale: grayscale(100%);
 }
 
-.rotate-90 {
-  --tw-rotate: 90deg;
+.backdrop-invert {
+  --tw-backdrop-invert: invert(100%);
 }
 
-.rotate-180 {
-  --tw-rotate: 180deg;
+.backdrop-sepia {
+  --tw-backdrop-sepia: sepia(100%);
 }
 
 .transition-all {
@@ -3596,11 +3929,17 @@ select {
 }
 
 .transition {
-  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
+.duration-150 {
+  transition-duration: 150ms;
+}
+
 .ease-linear {
   transition-timing-function: linear;
 }
@@ -3617,103 +3956,77 @@ select {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.duration-150 {
-  transition-duration: 150ms;
-}
+@media (min-width: 640px) {
+  .sm\:mt-0 {
+    margin-top: 0px;
+  }
 
-@-webkit-keyframes spin {
-  to {
-    transform: rotate(360deg);
+  .sm\:mr-2 {
+    margin-right: 0.5rem;
   }
-}
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
+  .sm\:ml-1 {
+    margin-left: 0.25rem;
   }
-}
 
-@-webkit-keyframes ping {
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0;
+  .sm\:block {
+    display: block;
   }
-}
 
-@keyframes ping {
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0;
+  .sm\:w-6\/12 {
+    width: 50%;
   }
-}
 
-@-webkit-keyframes pulse {
-  50% {
-    opacity: .5;
+  .sm\:pt-0 {
+    padding-top: 0px;
   }
 }
 
-@keyframes pulse {
-  50% {
-    opacity: .5;
+@media (min-width: 768px) {
+  .md\:fixed {
+    position: fixed;
   }
-}
 
-@-webkit-keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
-            animation-timing-function: cubic-bezier(0.8,0,1,1);
+  .md\:relative {
+    position: relative;
   }
 
-  50% {
-    transform: none;
-    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
-            animation-timing-function: cubic-bezier(0,0,0.2,1);
+  .md\:top-0 {
+    top: 0px;
   }
-}
 
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
-            animation-timing-function: cubic-bezier(0.8,0,1,1);
+  .md\:bottom-0 {
+    bottom: 0px;
   }
 
-  50% {
-    transform: none;
-    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
-            animation-timing-function: cubic-bezier(0,0,0.2,1);
+  .md\:left-0 {
+    left: 0px;
   }
-}
 
-@media (min-width: 640px) {
-  .sm\:block {
-    display: block;
+  .md\:mt-0 {
+    margin-top: 0px;
   }
 
-  .sm\:mt-0 {
-    margin-top: 0px;
+  .md\:mt-4 {
+    margin-top: 1rem;
   }
 
-  .sm\:ml-1 {
-    margin-left: 0.25rem;
+  .md\:mt-40 {
+    margin-top: 10rem;
   }
 
-  .sm\:mr-2 {
-    margin-right: 0.5rem;
+  .md\:mt-64 {
+    margin-top: 16rem;
   }
 
-  .sm\:pt-0 {
-    padding-top: 0px;
+  .md\:mb-4 {
+    margin-bottom: 1rem;
   }
 
-  .sm\:w-6\/12 {
-    width: 50%;
+  .md\:ml-64 {
+    margin-left: 16rem;
   }
-}
 
-@media (min-width: 768px) {
   .md\:block {
     display: block;
   }
@@ -3726,72 +4039,68 @@ select {
     display: none;
   }
 
-  .md\:flex-row {
-    flex-direction: row;
-  }
-
-  .md\:flex-col {
-    flex-direction: column;
+  .md\:min-h-full {
+    min-height: 100%;
   }
 
-  .md\:flex-nowrap {
-    flex-wrap: nowrap;
+  .md\:w-64 {
+    width: 16rem;
   }
 
-  .md\:items-stretch {
-    align-items: stretch;
+  .md\:w-4\/12 {
+    width: 33.333333%;
   }
 
-  .md\:justify-start {
-    justify-content: flex-start;
+  .md\:w-5\/12 {
+    width: 41.666667%;
   }
 
-  .md\:justify-end {
-    justify-content: flex-end;
+  .md\:w-6\/12 {
+    width: 50%;
   }
 
-  .md\:justify-between {
-    justify-content: space-between;
+  .md\:w-8\/12 {
+    width: 66.666667%;
   }
 
-  .md\:mt-0 {
-    margin-top: 0px;
+  .md\:min-w-full {
+    min-width: 100%;
   }
 
-  .md\:mt-4 {
-    margin-top: 1rem;
+  .md\:max-w-4xl {
+    max-width: 56rem;
   }
 
-  .md\:mb-4 {
-    margin-bottom: 1rem;
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .md\:mt-40 {
-    margin-top: 10rem;
+  .md\:flex-row {
+    flex-direction: row;
   }
 
-  .md\:mt-64 {
-    margin-top: 16rem;
+  .md\:flex-col {
+    flex-direction: column;
   }
 
-  .md\:ml-64 {
-    margin-left: 16rem;
+  .md\:flex-nowrap {
+    flex-wrap: nowrap;
   }
 
-  .md\:max-w-4xl {
-    max-width: 56rem;
+  .md\:items-stretch {
+    align-items: stretch;
   }
 
-  .md\:min-h-full {
-    min-height: 100%;
+  .md\:justify-start {
+    justify-content: flex-start;
   }
 
-  .md\:min-w-full {
-    min-width: 100%;
+  .md\:justify-end {
+    justify-content: flex-end;
   }
 
-  .md\:opacity-100 {
-    opacity: 1;
+  .md\:justify-between {
+    justify-content: space-between;
   }
 
   .md\:overflow-hidden {
@@ -3816,75 +4125,75 @@ select {
     padding-top: 0px;
   }
 
-  .md\:pb-2 {
-    padding-bottom: 0.5rem;
+  .md\:pt-32 {
+    padding-top: 8rem;
   }
 
   .md\:pr-12 {
     padding-right: 3rem;
   }
 
-  .md\:pt-32 {
-    padding-top: 8rem;
+  .md\:pb-2 {
+    padding-bottom: 0.5rem;
   }
 
-  .md\:fixed {
-    position: fixed;
+  .md\:text-left {
+    text-align: left;
   }
 
-  .md\:relative {
-    position: relative;
+  .md\:opacity-100 {
+    opacity: 1;
   }
 
-  .md\:top-0 {
-    top: 0px;
+  .md\:shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
+}
 
-  .md\:bottom-0 {
-    bottom: 0px;
+@media (min-width: 1024px) {
+  .lg\:static {
+    position: static;
   }
 
-  .md\:left-0 {
-    left: 0px;
+  .lg\:order-1 {
+    order: 1;
   }
 
-  .md\:shadow-none {
-    --tw-shadow: 0 0 #0000;
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  .lg\:order-2 {
+    order: 2;
   }
 
-  .md\:text-left {
-    text-align: left;
+  .lg\:order-3 {
+    order: 3;
   }
 
-  .md\:w-64 {
-    width: 16rem;
+  .lg\:mt-16 {
+    margin-top: 4rem;
   }
 
-  .md\:w-4\/12 {
-    width: 33.333333%;
+  .lg\:-mt-64 {
+    margin-top: -16rem;
   }
 
-  .md\:w-5\/12 {
-    width: 41.666667%;
+  .lg\:mr-1 {
+    margin-right: 0.25rem;
   }
 
-  .md\:w-6\/12 {
-    width: 50%;
+  .lg\:mr-4 {
+    margin-right: 1rem;
   }
 
-  .md\:w-8\/12 {
-    width: 66.666667%;
+  .lg\:mb-0 {
+    margin-bottom: 0px;
   }
 
-  .md\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .lg\:ml-auto {
+    margin-left: auto;
   }
-}
 
-@media (min-width: 1024px) {
-  .lg\:bg-opacity-0 {
-    --tw-bg-opacity: 0;
+  .lg\:-ml-16 {
+    margin-left: -4rem;
   }
 
   .lg\:block {
@@ -3903,72 +4212,60 @@ select {
     display: none;
   }
 
-  .lg\:flex-row {
-    flex-direction: row;
-  }
-
-  .lg\:self-center {
-    align-self: center;
-  }
-
-  .lg\:justify-start {
-    justify-content: flex-start;
-  }
-
-  .lg\:order-1 {
-    order: 1;
+  .lg\:w-auto {
+    width: auto;
   }
 
-  .lg\:order-2 {
-    order: 2;
+  .lg\:w-3\/12 {
+    width: 25%;
   }
 
-  .lg\:order-3 {
-    order: 3;
+  .lg\:w-4\/12 {
+    width: 33.333333%;
   }
 
-  .lg\:mb-0 {
-    margin-bottom: 0px;
+  .lg\:w-6\/12 {
+    width: 50%;
   }
 
-  .lg\:mr-1 {
-    margin-right: 0.25rem;
+  .lg\:w-8\/12 {
+    width: 66.666667%;
   }
 
-  .lg\:mr-4 {
-    margin-right: 1rem;
+  .lg\:w-9\/12 {
+    width: 75%;
   }
 
-  .lg\:mt-16 {
-    margin-top: 4rem;
+  .lg\:flex-row {
+    flex-direction: row;
   }
 
-  .lg\:ml-auto {
-    margin-left: auto;
+  .lg\:justify-start {
+    justify-content: flex-start;
   }
 
-  .lg\:-ml-16 {
-    margin-left: -4rem;
+  .lg\:self-center {
+    align-self: center;
   }
 
-  .lg\:-mt-64 {
-    margin-top: -16rem;
+  .lg\:bg-opacity-0 {
+    --tw-bg-opacity: 0;
   }
 
   .lg\:p-10 {
     padding: 2.5rem;
   }
 
-  .lg\:py-2 {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
   .lg\:px-10 {
     padding-left: 2.5rem;
     padding-right: 2.5rem;
   }
 
+  .lg\:py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
   .lg\:pt-0 {
     padding-top: 0px;
   }
@@ -3989,15 +4286,6 @@ select {
     padding-bottom: 16rem;
   }
 
-  .lg\:static {
-    position: static;
-  }
-
-  .lg\:shadow-none {
-    --tw-shadow: 0 0 #0000;
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  }
-
   .lg\:text-left {
     text-align: left;
   }
@@ -4021,28 +4309,9 @@ select {
     color: rgba(226, 232, 240, var(--tw-text-opacity));
   }
 
-  .lg\:w-auto {
-    width: auto;
-  }
-
-  .lg\:w-3\/12 {
-    width: 25%;
-  }
-
-  .lg\:w-4\/12 {
-    width: 33.333333%;
-  }
-
-  .lg\:w-6\/12 {
-    width: 50%;
-  }
-
-  .lg\:w-8\/12 {
-    width: 66.666667%;
-  }
-
-  .lg\:w-9\/12 {
-    width: 75%;
+  .lg\:shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
 }
 
diff --git a/src/components/Cards/CardSocialTraffic.svelte b/src/components/Cards/CardSocialTraffic.svelte
index beb88836..a7f97ced 100644
--- a/src/components/Cards/CardSocialTraffic.svelte
+++ b/src/components/Cards/CardSocialTraffic.svelte
@@ -35,7 +35,7 @@
           </th>
           <th
             class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left min-w-140-px"
-          ></th>
+          />
         </tr>
       </thead>
       <tbody>
@@ -62,7 +62,7 @@
                   <div
                     style="width: 60%;"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"
-                  ></div>
+                  />
                 </div>
               </div>
             </div>
@@ -91,7 +91,7 @@
                   <div
                     style="width: 70%;"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"
-                  ></div>
+                  />
                 </div>
               </div>
             </div>
@@ -120,7 +120,7 @@
                   <div
                     style="width: 80%;"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500"
-                  ></div>
+                  />
                 </div>
               </div>
             </div>
@@ -144,12 +144,12 @@
               <span class="mr-2">75%</span>
               <div class="relative w-full">
                 <div
-                  class="overflow-hidden h-2 text-xs flex rounded bg-lightBlue-200"
+                  class="overflow-hidden h-2 text-xs flex rounded bg-sky-200"
                 >
                   <div
                     style="width: 75%;"
-                    class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-500"
-                  ></div>
+                    class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-sky-500"
+                  />
                 </div>
               </div>
             </div>
@@ -178,7 +178,7 @@
                   <div
                     style="width: 30%;"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500"
-                  ></div>
+                  />
                 </div>
               </div>
             </div>
diff --git a/src/components/Footers/Footer.svelte b/src/components/Footers/Footer.svelte
index 6e9d126a..587b924e 100644
--- a/src/components/Footers/Footer.svelte
+++ b/src/components/Footers/Footer.svelte
@@ -20,7 +20,7 @@
       <polygon
         class="text-blueGray-200 fill-current"
         points="2560 0 2560 100 0 100"
-      ></polygon>
+      />
     </svg>
   </div>
   <div class="container mx-auto px-4">
@@ -32,28 +32,28 @@
         </h5>
         <div class="mt-6 lg:mb-0 mb-6">
           <button
-            class="bg-white text-lightBlue-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
+            class="bg-white text-sky-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
             type="button"
           >
-            <i class="fab fa-twitter"></i>
+            <i class="fab fa-twitter" />
           </button>
           <button
-            class="bg-white text-lightBlue-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
+            class="bg-white text-sky-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
             type="button"
           >
-            <i class="fab fa-facebook-square"></i>
+            <i class="fab fa-facebook-square" />
           </button>
           <button
             class="bg-white text-pink-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
             type="button"
           >
-            <i class="fab fa-dribbble"></i>
+            <i class="fab fa-dribbble" />
           </button>
           <button
             class="bg-white text-blueGray-800 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
             type="button"
           >
-            <i class="fab fa-github"></i>
+            <i class="fab fa-github" />
           </button>
         </div>
       </div>
diff --git a/src/views/Index.svelte b/src/views/Index.svelte
index eabbf140..2744d567 100644
--- a/src/views/Index.svelte
+++ b/src/views/Index.svelte
@@ -326,9 +326,7 @@
               target="_blank"
               rel="noreferrer"
             >
-              <div
-                class="bg-lightBlue-500 shadow-lg rounded-lg text-center p-8 mt-8"
-              >
+              <div class="bg-sky-500 shadow-lg rounded-lg text-center p-8 mt-8">
                 <img
                   alt="..."
                   class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
diff --git a/src/views/Landing.svelte b/src/views/Landing.svelte
index 0cf3631d..321fdcb3 100644
--- a/src/views/Landing.svelte
+++ b/src/views/Landing.svelte
@@ -94,7 +94,7 @@
             >
               <div class="px-4 py-5 flex-auto">
                 <div
-                  class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-lightBlue-400"
+                  class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-sky-400"
                 >
                   <i class="fas fa-retweet" />
                 </div>
@@ -313,13 +313,13 @@
                 </p>
                 <div class="mt-6">
                   <button
-                    class="bg-lightBlue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
+                    class="bg-sky-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
                     <i class="fab fa-twitter" />
                   </button>
                   <button
-                    class="bg-lightBlue-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
+                    class="bg-sky-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
                     <i class="fab fa-facebook-f" />
@@ -356,7 +356,7 @@
                     <i class="fab fa-google" />
                   </button>
                   <button
-                    class="bg-lightBlue-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
+                    class="bg-sky-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
                     <i class="fab fa-facebook-f" />
@@ -387,7 +387,7 @@
                     <i class="fab fa-google" />
                   </button>
                   <button
-                    class="bg-lightBlue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
+                    class="bg-sky-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
                     <i class="fab fa-twitter" />
@@ -430,7 +430,7 @@
                     <i class="fab fa-google" />
                   </button>
                   <button
-                    class="bg-lightBlue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
+                    class="bg-sky-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
                     type="button"
                   >
                     <i class="fab fa-twitter" />

From cf555a2c85287aec331c128479312b9e45033b09 Mon Sep 17 00:00:00 2001
From: Miguel Rivera <miguel@alphachronos.com>
Date: Tue, 18 Oct 2022 12:56:48 -0500
Subject: [PATCH 4/5] Changes to remove warnings.

---
 package.json                      |  4 ++--
 public/assets/styles/index.css    |  4 +---
 public/assets/styles/tailwind.css | 14 +++++++-------
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index a8a45e0d..84e3c0e1 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "build": "rollup -c",
     "dev": "rollup -c -w",
     "start": "sirv public -s",
-    "build:tailwind": "tailwind build public/assets/styles/index.css -o public/assets/styles/tailwind.css",
+    "build:tailwind": "tailwind build -i public/assets/styles/index.css -o public/assets/styles/tailwind.css",
     "build:fontawesome": "mkdir -p public/assets/vendor/@fortawesome/fontawesome-free/webfonts && mkdir -p public/assets/vendor/@fortawesome/fontawesome-free/css && cp -a ./node_modules/@fortawesome/fontawesome-free/webfonts public/assets/vendor/@fortawesome/fontawesome-free/ && cp ./node_modules/@fortawesome/fontawesome-free/css/all.min.css public/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css",
     "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf public/build && npm install && npm run build:tailwind && npm run build:fontawesome && npm run dev"
   },
@@ -34,4 +34,4 @@
     "svelte-routing": "1.5.0",
     "tailwindcss": "^2.2.19"
   }
-}
+}
\ No newline at end of file
diff --git a/public/assets/styles/index.css b/public/assets/styles/index.css
index 7f393742..bd6213e1 100644
--- a/public/assets/styles/index.css
+++ b/public/assets/styles/index.css
@@ -1,5 +1,3 @@
 @tailwind base;
-
 @tailwind components;
-
-@tailwind utilities;
+@tailwind utilities;
\ No newline at end of file
diff --git a/public/assets/styles/tailwind.css b/public/assets/styles/tailwind.css
index 16a4bf86..807ad792 100644
--- a/public/assets/styles/tailwind.css
+++ b/public/assets/styles/tailwind.css
@@ -2688,22 +2688,22 @@ select {
   background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
 }
 
-.bg-lightBlue-200 {
+.bg-sky-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(186, 230, 253, var(--tw-bg-opacity));
 }
 
-.bg-lightBlue-400 {
+.bg-sky-400 {
   --tw-bg-opacity: 1;
   background-color: rgba(56, 189, 248, var(--tw-bg-opacity));
 }
 
-.bg-lightBlue-500 {
+.bg-sky-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(14, 165, 233, var(--tw-bg-opacity));
 }
 
-.bg-lightBlue-600 {
+.bg-sky-600 {
   --tw-bg-opacity: 1;
   background-color: rgba(2, 132, 199, var(--tw-bg-opacity));
 }
@@ -3425,12 +3425,12 @@ select {
   color: rgba(79, 70, 229, var(--tw-text-opacity));
 }
 
-.text-lightBlue-400 {
+.text-sky-400 {
   --tw-text-opacity: 1;
   color: rgba(56, 189, 248, var(--tw-text-opacity));
 }
 
-.text-lightBlue-600 {
+.text-sky-600 {
   --tw-text-opacity: 1;
   color: rgba(2, 132, 199, var(--tw-text-opacity));
 }
@@ -4338,4 +4338,4 @@ select {
 }
 
 @media (min-width: 1536px) {
-}
+}
\ No newline at end of file

From b2cd166c264fd21ee2f431a2071fc531cdc355e5 Mon Sep 17 00:00:00 2001
From: Miguel Rivera <miguel@alphachronos.com>
Date: Tue, 18 Oct 2022 13:43:19 -0500
Subject: [PATCH 5/5] More dup directive cleanup.

---
 src/components/Cards/CardBarChart.svelte      |  14 +-
 src/components/Cards/CardLineChart.svelte     |  14 +-
 src/components/Cards/CardPageVisits.svelte    |  14 +-
 src/components/Cards/CardProfile.svelte       |  16 ++-
 src/components/Cards/CardStats.svelte         |   6 +-
 src/components/Cards/CardTable.svelte         | 131 +++++++++++-------
 src/components/Dropdowns/IndexDropdown.svelte |  10 +-
 .../Dropdowns/NotificationDropdown.svelte     |  24 ++--
 src/components/Dropdowns/PagesDropdown.svelte |  10 +-
 src/components/Dropdowns/TableDropdown.svelte |  21 +--
 src/components/Dropdowns/UserDropdown.svelte  |  24 ++--
 src/components/Footers/FooterSmall.svelte     |   4 +-
 src/components/Maps/MapExample.svelte         |   2 +-
 src/components/Navbars/AdminNavbar.svelte     |   9 +-
 14 files changed, 177 insertions(+), 122 deletions(-)

diff --git a/src/components/Cards/CardBarChart.svelte b/src/components/Cards/CardBarChart.svelte
index 26bbfb4c..05cdc24b 100644
--- a/src/components/Cards/CardBarChart.svelte
+++ b/src/components/Cards/CardBarChart.svelte
@@ -24,7 +24,7 @@
             borderColor: "#ed64a6",
             data: [30, 78, 56, 34, 100, 45, 13],
             fill: false,
-            barThickness: 8
+            barThickness: 8,
           },
           {
             label: new Date().getFullYear() - 1,
@@ -32,9 +32,9 @@
             backgroundColor: "#4c51bf",
             borderColor: "#4c51bf",
             data: [27, 68, 86, 74, 10, 4, 87],
-            barThickness: 8
-          }
-        ]
+            barThickness: 8,
+          },
+        ],
       },
       options: {
         maintainAspectRatio: false,
@@ -111,15 +111,13 @@
         <h6 class="uppercase text-blueGray-400 mb-1 text-xs font-semibold">
           Performance
         </h6>
-        <h2 class="text-blueGray-700 text-xl font-semibold">
-          Total orders
-        </h2>
+        <h2 class="text-blueGray-700 text-xl font-semibold">Total orders</h2>
       </div>
     </div>
   </div>
   <div class="p-4 flex-auto">
     <div class="relative h-350-px">
-      <canvas id="bar-chart"></canvas>
+      <canvas id="bar-chart" />
     </div>
   </div>
 </div>
diff --git a/src/components/Cards/CardLineChart.svelte b/src/components/Cards/CardLineChart.svelte
index 7ae900ec..9cfd382a 100644
--- a/src/components/Cards/CardLineChart.svelte
+++ b/src/components/Cards/CardLineChart.svelte
@@ -23,16 +23,16 @@
             backgroundColor: "#4c51bf",
             borderColor: "#4c51bf",
             data: [65, 78, 66, 44, 56, 67, 75],
-            fill: false
+            fill: false,
           },
           {
             label: new Date().getFullYear() - 1,
             fill: false,
             backgroundColor: "#fff",
             borderColor: "#fff",
-            data: [40, 68, 86, 74, 56, 60, 87]
-          }
-        ]
+            data: [40, 68, 86, 74, 56, 60, 87],
+          },
+        ],
       },
       options: {
         maintainAspectRatio: false,
@@ -119,16 +119,14 @@
         <h6 class="uppercase text-blueGray-100 mb-1 text-xs font-semibold">
           Overview
         </h6>
-        <h2 class="text-white text-xl font-semibold">
-          Sales value
-        </h2>
+        <h2 class="text-white text-xl font-semibold">Sales value</h2>
       </div>
     </div>
   </div>
   <div class="p-4 flex-auto">
     <!-- Chart -->
     <div class="relative h-350-px">
-      <canvas id="line-chart"></canvas>
+      <canvas id="line-chart" />
     </div>
   </div>
 </div>
diff --git a/src/components/Cards/CardPageVisits.svelte b/src/components/Cards/CardPageVisits.svelte
index a68b7d3c..908ee9eb 100644
--- a/src/components/Cards/CardPageVisits.svelte
+++ b/src/components/Cards/CardPageVisits.svelte
@@ -4,9 +4,7 @@
   <div class="rounded-t mb-0 px-4 py-3 border-0">
     <div class="flex flex-wrap items-center">
       <div class="relative w-full px-4 max-w-full flex-grow flex-1">
-        <h3 class="font-semibold text-base text-blueGray-700">
-          Page visits
-        </h3>
+        <h3 class="font-semibold text-base text-blueGray-700">Page visits</h3>
       </div>
       <div class="relative w-full px-4 max-w-full flex-grow flex-1 text-right">
         <button
@@ -65,7 +63,7 @@
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
-            <i class="fas fa-arrow-up text-emerald-500 mr-4"></i>
+            <i class="fas fa-arrow-up text-emerald-500 mr-4" />
             46,53%
           </td>
         </tr>
@@ -88,7 +86,7 @@
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
-            <i class="fas fa-arrow-down text-orange-500 mr-4"></i>
+            <i class="fas fa-arrow-down text-orange-500 mr-4" />
             46,53%
           </td>
         </tr>
@@ -111,7 +109,7 @@
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
-            <i class="fas fa-arrow-down text-orange-500 mr-4"></i>
+            <i class="fas fa-arrow-down text-orange-500 mr-4" />
             36,49%
           </td>
         </tr>
@@ -134,7 +132,7 @@
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
-            <i class="fas fa-arrow-up text-emerald-500 mr-4"></i>
+            <i class="fas fa-arrow-up text-emerald-500 mr-4" />
             50,87%
           </td>
         </tr>
@@ -157,7 +155,7 @@
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
-            <i class="fas fa-arrow-down text-red-500 mr-4"></i>
+            <i class="fas fa-arrow-down text-red-500 mr-4" />
             46,53%
           </td>
         </tr>
diff --git a/src/components/Cards/CardProfile.svelte b/src/components/Cards/CardProfile.svelte
index 6adfae85..0fd82cb9 100644
--- a/src/components/Cards/CardProfile.svelte
+++ b/src/components/Cards/CardProfile.svelte
@@ -12,7 +12,7 @@
         <div class="relative">
           <img
             alt="..."
-            src="{team2}"
+            src={team2}
             class="shadow-xl rounded-full h-auto align-middle border-none absolute -m-16 -ml-20 lg:-ml-16 max-w-150-px"
           />
         </div>
@@ -47,21 +47,21 @@
       </div>
     </div>
     <div class="text-center mt-12">
-      <h3 class="text-xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2">
+      <h3 class="text-xl font-semibold leading-normal mb-2 text-blueGray-700">
         Jenna Stones
       </h3>
       <div
         class="text-sm leading-normal mt-0 mb-2 text-blueGray-400 font-bold uppercase"
       >
-        <i class="fas fa-map-marker-alt mr-2 text-lg text-blueGray-400"></i>
+        <i class="fas fa-map-marker-alt mr-2 text-lg text-blueGray-400" />
         Los Angeles, California
       </div>
       <div class="mb-2 text-blueGray-600 mt-10">
-        <i class="fas fa-briefcase mr-2 text-lg text-blueGray-400"></i>
+        <i class="fas fa-briefcase mr-2 text-lg text-blueGray-400" />
         Solution Manager - Creative Tim Officer
       </div>
       <div class="mb-2 text-blueGray-600">
-        <i class="fas fa-university mr-2 text-lg text-blueGray-400"></i>
+        <i class="fas fa-university mr-2 text-lg text-blueGray-400" />
         University of Computer Science
       </div>
     </div>
@@ -74,7 +74,11 @@
             records all of his own music, giving it a warm, intimate feel with a
             solid groove structure. An artist of considerable range.
           </p>
-          <a href="#pablo" on:click={(e) => e.preventDefault()} class="font-normal text-red-500">
+          <a
+            href="#pablo"
+            on:click={(e) => e.preventDefault()}
+            class="font-normal text-red-500"
+          >
             Show more
           </a>
         </div>
diff --git a/src/components/Cards/CardStats.svelte b/src/components/Cards/CardStats.svelte
index 75dfed5f..dd80b05b 100644
--- a/src/components/Cards/CardStats.svelte
+++ b/src/components/Cards/CardStats.svelte
@@ -34,15 +34,15 @@
         <div
           class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full {statIconColor}"
         >
-          <i class="{statIconName}"></i>
+          <i class={statIconName} />
         </div>
       </div>
     </div>
     <p class="text-sm text-blueGray-400 mt-4">
       <span class="mr-2 {statPercentColor}">
         <i
-          class="{statArrow === 'up' ? 'fas fa-arrow-up' : 'fas fa-arrow-down'}"
-        ></i>
+          class={statArrow === "up" ? "fas fa-arrow-up" : "fas fa-arrow-down"}
+        />
         {statPercent}%
       </span>
       <span class="whitespace-nowrap">{statDescripiron}</span>
diff --git a/src/components/Cards/CardTable.svelte b/src/components/Cards/CardTable.svelte
index 85dc9b07..31faa5c0 100644
--- a/src/components/Cards/CardTable.svelte
+++ b/src/components/Cards/CardTable.svelte
@@ -18,13 +18,18 @@
 </script>
 
 <div
-  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
+  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color ===
+  'light'
+    ? 'bg-white'
+    : 'bg-red-800 text-white'}"
 >
   <div class="rounded-t mb-0 px-4 py-3 border-0">
     <div class="flex flex-wrap items-center">
       <div class="relative w-full px-4 max-w-full flex-grow flex-1">
         <h3
-          class="font-semibold text-lg {color === 'light' ? 'text-blueGray-700' : 'text-white'}"
+          class="font-semibold text-lg {color === 'light'
+            ? 'text-blueGray-700'
+            : 'text-white'}"
         >
           Card Tables
         </h3>
@@ -37,33 +42,51 @@
       <thead>
         <tr>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color ===
+            'light'
+              ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
+              : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Project
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color ===
+            'light'
+              ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
+              : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Budget
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color ===
+            'light'
+              ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
+              : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Status
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color ===
+            'light'
+              ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
+              : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Users
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color ===
+            'light'
+              ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
+              : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Completion
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
-          ></th>
+            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color ===
+            'light'
+              ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100'
+              : 'bg-red-700 text-red-200 border-red-600'}"
+          />
         </tr>
       </thead>
       <tbody>
@@ -72,12 +95,14 @@
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
           >
             <img
-              src="{bootstrap}"
+              src={bootstrap}
               class="h-12 w-12 bg-white rounded-full border"
               alt="..."
             />
             <span
-              class="ml-3 font-bold {color === 'light' ? 'btext-blueGray-600' : 'text-whit'}"
+              class="ml-3 font-bold {color === 'light'
+                ? 'btext-blueGray-600'
+                : 'text-whit'}"
             >
               Argon Design System
             </span>
@@ -90,29 +115,29 @@
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
-            <i class="fas fa-circle text-orange-500 mr-2"></i> pending
+            <i class="fas fa-circle text-orange-500 mr-2" /> pending
           </td>
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex">
               <img
-                src="{team1}"
+                src={team1}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
               />
               <img
-                src="{team2}"
+                src={team2}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
-                src="{team3}"
+                src={team3}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
-                src="{team4}"
+                src={team4}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
@@ -130,7 +155,7 @@
                   <div
                     style="width: 60%;"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"
-                  ></div>
+                  />
                 </div>
               </div>
             </div>
@@ -146,12 +171,14 @@
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
           >
             <img
-              src="{angular}"
+              src={angular}
               class="h-12 w-12 bg-white rounded-full border"
               alt="..."
             />
             <span
-              class="ml-3 font-bold {color === 'light' ? 'btext-blueGray-600' : 'text-whit'}"
+              class="ml-3 font-bold {color === 'light'
+                ? 'btext-blueGray-600'
+                : 'text-whit'}"
             >
               Angular Now UI Kit PRO
             </span>
@@ -164,7 +191,7 @@
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
-            <i class="fas fa-circle text-emerald-500 mr-2"></i>
+            <i class="fas fa-circle text-emerald-500 mr-2" />
             completed
           </td>
           <td
@@ -172,22 +199,22 @@
           >
             <div class="flex">
               <img
-                src="{team1}"
+                src={team1}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
               />
               <img
-                src="{team2}"
+                src={team2}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
-                src="{team3}"
+                src={team3}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
-                src="{team4}"
+                src={team4}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
@@ -205,7 +232,7 @@
                   <div
                     style="width: 100%;"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"
-                  ></div>
+                  />
                 </div>
               </div>
             </div>
@@ -221,12 +248,14 @@
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
           >
             <img
-              src="{sketch}"
+              src={sketch}
               class="h-12 w-12 bg-white rounded-full border"
               alt="..."
             />
             <span
-              class="ml-3 font-bold {color === 'light' ? 'btext-blueGray-600' : 'text-whit'}"
+              class="ml-3 font-bold {color === 'light'
+                ? 'btext-blueGray-600'
+                : 'text-whit'}"
             >
               Black Dashboard Sketch
             </span>
@@ -239,29 +268,29 @@
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
-            <i class="fas fa-circle text-red-500 mr-2"></i> delayed
+            <i class="fas fa-circle text-red-500 mr-2" /> delayed
           </td>
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex">
               <img
-                src="{team1}"
+                src={team1}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
               />
               <img
-                src="{team2}"
+                src={team2}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
-                src="{team3}"
+                src={team3}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
-                src="{team4}"
+                src={team4}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
@@ -279,7 +308,7 @@
                   <div
                     style="width: 73%;"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"
-                  ></div>
+                  />
                 </div>
               </div>
             </div>
@@ -295,12 +324,14 @@
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
           >
             <img
-              src="{react}"
+              src={react}
               class="h-12 w-12 bg-white rounded-full border"
               alt="..."
             />
             <span
-              class="ml-3 font-bold {color === 'light' ? 'btext-blueGray-600' : 'text-whit'}"
+              class="ml-3 font-bold {color === 'light'
+                ? 'btext-blueGray-600'
+                : 'text-whit'}"
             >
               React Material Dashboard
             </span>
@@ -313,29 +344,29 @@
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
-            <i class="fas fa-circle text-teal-500 mr-2"></i> on schedule
+            <i class="fas fa-circle text-teal-500 mr-2" /> on schedule
           </td>
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
             <div class="flex">
               <img
-                src="{team1}"
+                src={team1}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
               />
               <img
-                src="{team2}"
+                src={team2}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
-                src="{team3}"
+                src={team3}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
-                src="{team4}"
+                src={team4}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
@@ -353,7 +384,7 @@
                   <div
                     style="width: 90%;"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500"
-                  ></div>
+                  />
                 </div>
               </div>
             </div>
@@ -369,12 +400,14 @@
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
           >
             <img
-              src="{vue}"
+              src={vue}
               class="h-12 w-12 bg-white rounded-full border"
               alt="..."
             />
             <span
-              class="ml-3 font-bold {color === 'light' ? 'btext-blueGray-600' : 'text-whit'}"
+              class="ml-3 font-bold {color === 'light'
+                ? 'btext-blueGray-600'
+                : 'text-whit'}"
             >
               React Material Dashboard
             </span>
@@ -387,7 +420,7 @@
           <td
             class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
           >
-            <i class="fas fa-circle text-emerald-500 mr-2"></i>
+            <i class="fas fa-circle text-emerald-500 mr-2" />
             completed
           </td>
           <td
@@ -395,22 +428,22 @@
           >
             <div class="flex">
               <img
-                src="{team1}"
+                src={team1}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
               />
               <img
-                src="{team2}"
+                src={team2}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
-                src="{team3}"
+                src={team3}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
               <img
-                src="{team4}"
+                src={team4}
                 alt="..."
                 class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
               />
@@ -428,7 +461,7 @@
                   <div
                     style="width: 100%;"
                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"
-                  ></div>
+                  />
                 </div>
               </div>
             </div>
diff --git a/src/components/Dropdowns/IndexDropdown.svelte b/src/components/Dropdowns/IndexDropdown.svelte
index a02159a3..7a2d8479 100644
--- a/src/components/Dropdowns/IndexDropdown.svelte
+++ b/src/components/Dropdowns/IndexDropdown.svelte
@@ -26,14 +26,16 @@
   <a
     class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
     href="#pablo"
-    bind:this="{btnDropdownRef}"
-    on:click="{toggleDropdown}"
+    bind:this={btnDropdownRef}
+    on:click={toggleDropdown}
   >
     Demo Pages
   </a>
   <div
-    bind:this="{popoverDropdownRef}"
-    class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
+    bind:this={popoverDropdownRef}
+    class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow
+      ? 'block'
+      : 'hidden'}"
   >
     <span
       class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
diff --git a/src/components/Dropdowns/NotificationDropdown.svelte b/src/components/Dropdowns/NotificationDropdown.svelte
index 35ada38e..d9f213ad 100644
--- a/src/components/Dropdowns/NotificationDropdown.svelte
+++ b/src/components/Dropdowns/NotificationDropdown.svelte
@@ -26,36 +26,42 @@
   <a
     class="text-blueGray-500 block py-1 px-3"
     href="#pablo"
-    bind:this="{btnDropdownRef}"
-    on:click="{toggleDropdown}"
+    bind:this={btnDropdownRef}
+    on:click={toggleDropdown}
   >
-    <i class="fas fa-bell"></i>
+    <i class="fas fa-bell" />
   </a>
   <div
-    bind:this="{popoverDropdownRef}"
-    class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
+    bind:this={popoverDropdownRef}
+    class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow
+      ? 'block'
+      : 'hidden'}"
   >
     <a
-      href="#pablo" on:click={(e) => e.preventDefault()}
+      href="#pablo"
+      on:click={(e) => e.preventDefault()}
       class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Action
     </a>
     <a
-      href="#pablo" on:click={(e) => e.preventDefault()}
+      href="#pablo"
+      on:click={(e) => e.preventDefault()}
       class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Another action
     </a>
     <a
-      href="#pablo" on:click={(e) => e.preventDefault()}
+      href="#pablo"
+      on:click={(e) => e.preventDefault()}
       class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Something else here
     </a>
     <div class="h-0 my-2 border border-solid border-blueGray-100" />
     <a
-      href="#pablo" on:click={(e) => e.preventDefault()}
+      href="#pablo"
+      on:click={(e) => e.preventDefault()}
       class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Seprated link
diff --git a/src/components/Dropdowns/PagesDropdown.svelte b/src/components/Dropdowns/PagesDropdown.svelte
index 50bd808a..8f5d0fd2 100644
--- a/src/components/Dropdowns/PagesDropdown.svelte
+++ b/src/components/Dropdowns/PagesDropdown.svelte
@@ -27,14 +27,16 @@
   <a
     class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
     href="#pablo"
-    bind:this="{btnDropdownRef}"
-    on:click="{toggleDropdown}"
+    bind:this={btnDropdownRef}
+    on:click={toggleDropdown}
   >
     Demo Pages
   </a>
   <div
-    bind:this="{popoverDropdownRef}"
-    class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
+    bind:this={popoverDropdownRef}
+    class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow
+      ? 'block'
+      : 'hidden'}"
   >
     <span
       class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
diff --git a/src/components/Dropdowns/TableDropdown.svelte b/src/components/Dropdowns/TableDropdown.svelte
index 2fd83124..1aaaee67 100644
--- a/src/components/Dropdowns/TableDropdown.svelte
+++ b/src/components/Dropdowns/TableDropdown.svelte
@@ -26,29 +26,34 @@
   <a
     class="text-blueGray-500 py-1 px-3"
     href="#pablo"
-    bind:this="{btnDropdownRef}"
-    on:click="{toggleDropdown}"
+    bind:this={btnDropdownRef}
+    on:click={toggleDropdown}
   >
-    <i class="fas fa-ellipsis-v"></i>
+    <i class="fas fa-ellipsis-v" />
   </a>
   <div
-    bind:this="{popoverDropdownRef}"
-    class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
+    bind:this={popoverDropdownRef}
+    class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow
+      ? 'block'
+      : 'hidden'}"
   >
     <a
-      href="#pablo" on:click={(e) => e.preventDefault()}
+      href="#pablo"
+      on:click={(e) => e.preventDefault()}
       class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Action
     </a>
     <a
-      href="#pablo" on:click={(e) => e.preventDefault()}
+      href="#pablo"
+      on:click={(e) => e.preventDefault()}
       class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Another action
     </a>
     <a
-      href="#pablo" on:click={(e) => e.preventDefault()}
+      href="#pablo"
+      on:click={(e) => e.preventDefault()}
       class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Something else here
diff --git a/src/components/Dropdowns/UserDropdown.svelte b/src/components/Dropdowns/UserDropdown.svelte
index f797d8ed..552b17fa 100644
--- a/src/components/Dropdowns/UserDropdown.svelte
+++ b/src/components/Dropdowns/UserDropdown.svelte
@@ -28,8 +28,8 @@
   <a
     class="text-blueGray-500 block"
     href="#pablo"
-    bind:this="{btnDropdownRef}"
-    on:click="{toggleDropdown}"
+    bind:this={btnDropdownRef}
+    on:click={toggleDropdown}
   >
     <div class="items-center flex">
       <span
@@ -38,36 +38,42 @@
         <img
           alt="..."
           class="w-full rounded-full align-middle border-none shadow-lg"
-          src="{image}"
+          src={image}
         />
       </span>
     </div>
   </a>
   <div
-    bind:this="{popoverDropdownRef}"
-    class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
+    bind:this={popoverDropdownRef}
+    class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow
+      ? 'block'
+      : 'hidden'}"
   >
     <a
-      href="#pablo" on:click={(e) => e.preventDefault()}
+      href="#pablo"
+      on:click={(e) => e.preventDefault()}
       class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Action
     </a>
     <a
-      href="#pablo" on:click={(e) => e.preventDefault()}
+      href="#pablo"
+      on:click={(e) => e.preventDefault()}
       class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Another action
     </a>
     <a
-      href="#pablo" on:click={(e) => e.preventDefault()}
+      href="#pablo"
+      on:click={(e) => e.preventDefault()}
       class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Something else here
     </a>
     <div class="h-0 my-2 border border-solid border-blueGray-100" />
     <a
-      href="#pablo" on:click={(e) => e.preventDefault()}
+      href="#pablo"
+      on:click={(e) => e.preventDefault()}
       class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
     >
       Seprated link
diff --git a/src/components/Footers/FooterSmall.svelte b/src/components/Footers/FooterSmall.svelte
index fb435a3d..9c14bf9b 100644
--- a/src/components/Footers/FooterSmall.svelte
+++ b/src/components/Footers/FooterSmall.svelte
@@ -6,7 +6,9 @@
 </script>
 
 <footer
-  class="pb-6 {absolute ? 'absolute w-full bottom-0 bg-blueGray-800' : 'relative'}"
+  class="pb-6 {absolute
+    ? 'absolute w-full bottom-0 bg-blueGray-800'
+    : 'relative'}"
 >
   <div class="container mx-auto px-4">
     <hr class="mb-6 border-b-1 border-blueGray-600" />
diff --git a/src/components/Maps/MapExample.svelte b/src/components/Maps/MapExample.svelte
index bc3f3355..48d4193e 100644
--- a/src/components/Maps/MapExample.svelte
+++ b/src/components/Maps/MapExample.svelte
@@ -86,4 +86,4 @@
   class="relative w-full rounded h-600-px"
   data-lat="40.748817"
   data-lng="-73.985428"
-></div>
+/>
diff --git a/src/components/Navbars/AdminNavbar.svelte b/src/components/Navbars/AdminNavbar.svelte
index edfb9154..327c4109 100644
--- a/src/components/Navbars/AdminNavbar.svelte
+++ b/src/components/Navbars/AdminNavbar.svelte
@@ -13,7 +13,8 @@
     <!-- Brand -->
     <a
       class="text-white text-sm uppercase hidden lg:inline-block font-semibold"
-      href="#pablo" on:click={(e) => e.preventDefault()}
+      href="#pablo"
+      on:click={(e) => e.preventDefault()}
     >
       Dashboard
     </a>
@@ -23,14 +24,14 @@
     >
       <div class="relative flex w-full flex-wrap items-stretch">
         <span
-          class="z-10 h-full leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3"
+          class="z-10 h-full leading-snug font-normal absolute text-center text-blueGray-300 bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3"
         >
-          <i class="fas fa-search"></i>
+          <i class="fas fa-search" />
         </span>
         <input
           type="text"
           placeholder="Search here..."
-          class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm shadow outline-none focus:outline-none focus:ring w-full pl-10"
+          class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 relative bg-white rounded text-sm shadow outline-none focus:outline-none focus:ring w-full pl-10"
         />
       </div>
     </form>