feat: Adds coming soon to account

src/components/homepage/HomeBackground.tsx

@@ -41,9 +41,7 @@ const StyledSvg = styled.svg`
   height: 100%;
   width: 100%;
   fill: rgba(100, 100, 100, 0.5);
-  defs pattern circle {
-    z-index: 1;
-  }
+  height: 100vh;
 `;
 
 const StyledRect = styled.rect`

src/pages/account/index.astro

@@ -1,43 +1,79 @@
 ---
 import BaseLayout from '@layouts/Base.astro';
-import Nav from '@/components/scafold/Nav.astro';
+import NavBar from '@components/scafold/Nav.astro';
+import Footer from '@components/scafold/Footer.astro';
+import Icon from '@components/molecules/Icon.svelte';
 
 ---
 
-<BaseLayout>
-  <main>
-    <Nav />
-  </main>
+<BaseLayout
+  title="Account | Web Check"
+  description="Login or sign up for a free account on Web Check, to manage API access, save reports, enable website change notificiations and more!"
+>
+  <div class="web-check-page">
+    <NavBar />
+    <main>
+      <!-- <h1>Login</h1>
+      <p>
+        Your Web Check account is your gateway to managing API access, as well as additional functionality
+      </p> -->
+
+      <div class="under-development">
+        <h4>Account management is currently under development.</h4>
+        <p>
+          Once complete, you will be able to login to your account to manage API
+          access, save reports, enable website change notificiations and more!
+        </p>
+      </div>
+
+    </main>
+    <Footer />
+  </div>
 </BaseLayout>
 
+
 <style lang="scss">
-  main {
-    height: 100vh;
-    padding: 1rem 0;
-    background: rgb(20,29,43);
-    background: radial-gradient(circle,#141d2b 0%,#0d1521 75%,#141d2b 100%);
-    h2 {
-      font-weight: 300;
+  @import '@styles/global.scss';
+  .web-check-page {
+    padding-top: 2rem;
+    margin: 0 auto;
+    min-height: 100vh;
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background-image: url('/assets/images/background-dots.svg');
+    @include mobile-down {
+      padding: 0.5rem;
     }
-
-    .screenshot {
-      transform:
-        rotate3d(.5,-.866,0,15deg)
-        rotate(1deg);
-      box-shadow:
-        2em 4em 6em -2em rgba(0,0,0,.5),
-        1em 2em 3.5em -2.5em rgba(0,0,0,.5);
-      transition:
-        transform .4s ease,
-        box-shadow .4s ease;
-      border-radius: .5em;
-
-      &:hover {
-        transform:
-          rotate3d(0,0,0,0deg)
-          rotate(0deg);
+    .under-development {
+      border: 2px solid var(--warning);
+      background: #ffff0012;
+      padding: 1rem;
+      margin: 2rem auto;
+      border-radius: 4px;
+      h4 {
+        margin-bottom: 1rem;
+      }
+      p {
+        font-size: 1.1rem;
+        line-height: 1.5;
       }
     }
+    main {
+      width: 80vw;
+      margin: 0 auto;
+      min-height: 100%;
+      flex-grow: 1;
+      padding: 5rem 0 2rem 0;
+      max-width: 1200px;
+      @include mobile-down {
+      padding: 1rem 0;
+    }
+    }
+
   }
+  
+
 
 </style>

src/pages/index.astro

@@ -33,7 +33,6 @@ if (!isBossServer) {
   main {
     min-height: 100vh;
     padding: 2rem;
-    // width: 80vw;
     margin: 0 auto;
     z-index: 3;
     background: var(--background);