Astro pages build up

src/pages/account/index.astro

@@ -1,6 +1,6 @@
 ---
 import BaseLayout from '@layouts/Base.astro';
-import Nav from '@components/Nav.astro';
+import Nav from '@/components/scafold/Nav.astro';
 
 ---
 
@@ -16,7 +16,6 @@ import Nav from '@components/Nav.astro';
     padding: 1rem 0;
     background: rgb(20,29,43);
     background: radial-gradient(circle,#141d2b 0%,#0d1521 75%,#141d2b 100%);
-
     h2 {
       font-weight: 300;
     }

src/pages/check/[...target].astro

@@ -24,7 +24,7 @@ if (searchUrl) {
   // And if form has been submitted with ?url=, redirect to the results page
   const searchParams = new URL(window.location.href).searchParams;
   if (searchParams.has('url')) {
-    window.location.href = `/check/${searchParams.get('url')}`;
+    window.location.href = `/check/${encodeURIComponent(searchParams.get('url') || '')}`;
   }
 
   // And add a manual no-react form submit handler

src/pages/docs-api.astro

@@ -1,5 +1,9 @@
 ---
 import BaseLayout from '@layouts/Base.astro';
+import NavBar from '@components/scafold/Nav.astro';
+// import Footer from '@components/scafold/Footer.astro';
+// import config from '../site-config';
+
 ---
 
 <BaseLayout
@@ -11,6 +15,7 @@ import BaseLayout from '@layouts/Base.astro';
     <link rel="stylesheet" href="https://rawcdn.githack.com/Amoenus/SwaggerDark/2064ccd45b571865a64c731fa6bfddfbf2a01fe1/SwaggerDark.css">
   </Fragment>
   <main>
+    <NavBar />
     <div id="swagger-ui"></div>
   </main>
 </BaseLayout>
@@ -33,7 +38,7 @@ import BaseLayout from '@layouts/Base.astro';
 <style lang="scss">
   @import '@styles/global.scss';
   main {
-    padding: 0 2rem;
+    padding: 2rem;
     margin: 0 auto;
     height: 100vh;
     width: 100vw;

src/pages/index.astro

@@ -1,14 +1,15 @@
 ---
 import BaseLayout from '@layouts/Base.astro';
-import Nav from '@components/Nav.astro';
-import HomeBackground from '@/components/HomeBackground';
+import HeroForm from '@components/homepage/HeroForm.astro';
+import HomeBackground from '@/components/homepage/HomeBackground';
 
 const isBossServer = import.meta.env.BOSS_SERVER === true;
 
-const searchUrl = new URLSearchParams(new URL(Astro.request.url).search).get('url');
-
-if (!isBossServer && searchUrl) {
-  Astro.redirect(`/check/${encodeURIComponent(searchUrl)}`);
+// Redirect strait to /check or /check/:url if running as self-hosted instance
+if (!isBossServer) {
+  const searchUrl = new URLSearchParams(new URL(Astro.request.url).search).get('url');
+  const redirectUrl = searchUrl ? `/check/${encodeURIComponent(searchUrl)}` : '/check';
+  Astro.redirect(redirectUrl);
 }
 
 ---
@@ -17,26 +18,23 @@ if (!isBossServer && searchUrl) {
   <Fragment slot="head">
     {!isBossServer && (<meta http-equiv="refresh" content="0; url=/check" />)}
   </Fragment>
-  <main class="fancy-background">
-    <HomeBackground client:only="react" />
-    <Nav />
-    <!-- <div class="left"></div>
-    <div class="right"></div>
-    <h1>Web Check</h1>
-    <h2>X-Ray vision for your website's security</h2>
-    <img width="600" class="screenshot" src="https://i.ibb.co/r0jXN6s/web-check.png" alt="Web Check Screenshot" /> -->
+  <main>
+    <HeroForm />
   </main>
+  <HomeBackground client:only="react" />
 </BaseLayout>
 
 <style lang="scss">
+  @import '@styles/global.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;
+    min-height: 100vh;
+    padding: 2rem;
+    width: 80vw;
+    margin: 0 auto;
+    z-index: 3;
+    background: var(--background);
+    @include tablet-landscape-down {
+      width: 96vw;
     }
 
     .screenshot {