Astro app

src/components/Nav.astro

@@ -0,0 +1,84 @@
+---
+
+---
+
+<nav class="navbar">
+  <div class="nav-left">
+    <a href="/" class="logo-link" aria-label="Home">
+      <img width="64" src="/web-check.png" alt="Site Logo" />
+      <span class="site-title">Web Check</span>
+    </a>
+  </div>
+  <div class="nav-right">
+    <a href="/check" class="nav-link">Try Live</a>
+    <a href="/check/about" class="nav-link">About</a>
+    <a href="/account" class="nav-link">Join</a>
+  </div>
+</nav>
+
+
+<style lang="scss">
+  .navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    flex-wrap: wrap;
+    background-color: var(--background);
+    color: var(--text-color);
+    width: 80vw;
+    margin: 0 auto;
+    border-radius: 2rem;
+    border: 1px solid var(--primary-transparent);
+
+    
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    .nav-left {
+      display: flex;
+      align-items: center;
+
+      .logo-link {
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        color: var(--text-color);
+
+        img {
+          width: 2rem;
+          max-width: 64px;
+          margin-right: 0.5rem;
+        }
+
+        .site-title {
+          font-weight: bold;
+          color: var(--primary);
+          font-size: 1.8rem;
+        }
+      }
+    }
+
+    .nav-right {
+      display: flex;
+
+      .nav-link {
+        text-decoration: none;
+        color: var(--text-color);
+        margin-left: 1rem;
+        padding: 0.5rem;
+        transition: background-color 0.3s;
+
+        &:hover {
+          background-color: var(--primary-light);
+        }
+
+        &:focus {
+          outline: none;
+          background-color: var(--primary-dark);
+          box-shadow: 0 0 0 3px var(--primary);
+        }
+      }
+    }
+  }
+</style>

src/layouts/Base.astro

@@ -5,6 +5,11 @@ import MetaTags from '@layouts/MetaTags.astro';
 // import Footer from '@components/scafold/Footer.astro';
 // import config from '../site-config';
 
+import '@styles/typography.scss';
+import '@styles/global.scss';
+import '@styles/colors.scss';
+import '@styles/media-queries.scss';
+
 interface Props {
 	title?: string;
 	description?: string;
@@ -37,7 +42,7 @@ interface Props {
 	
 
 <style is:global>
-
+	@import '@styles/global.scss';
 	html {
 		::selection {
 			background: var(--accent);

src/layouts/MetaTags.astro

@@ -14,7 +14,8 @@ interface Props {
 // Default meta tag values
 const siteInfo = {
   title: 'Web Check',
-  description: '',
+	titleLong: 'Web Check - X-Ray Vision for any Website',
+  description: 'Web Check is the all-in-one OSINT and security tool, for revealing the inner workings of any website',
   keywords: '',
   author: 'Alicia Sykes',
   twitter: '@Lissy_Sykes',
@@ -36,7 +37,7 @@ const {
 } = Astro.props;
 
 // Set non-customizable values for meta tags, from the siteInfo
-const { site, author, twitter, analytics } = siteInfo;
+const { site, author, twitter, analytics, titleLong } = siteInfo;
 
 // Given a map of breadcrumbs, return the JSON-LD for the BreadcrumbList schema
 const makeBreadcrumbs = () => {
@@ -68,20 +69,21 @@ const makeBreadcrumbs = () => {
 <meta name="robots" content="index, follow">
 
 <!-- Icons and colors -->
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<!-- <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> -->
-<link rel="icon" type="image/png" sizes="64x64" href="/favicon.png">
+<link rel="icon" type="image/png" sizes="512x512" href="/web-check.png">
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 
 <!-- Social media meta tags (Open Graphh + Twitter) -->
 <meta property="og:site_name" content={title}>
 <meta property="og:type" content="website">
 <meta property="og:url" content={site}>
-<meta property="og:title" content={title}>
+<meta property="og:title" content={titleLong}>
 <meta property="og:description" content={description}>
 <meta property="og:image" content={`${site}/banner.png`}>
 <meta name="twitter:card" content="summary">
+<meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:url" content={site}>
-<meta name="twitter:title" content={title}>
+<meta name="twitter:title" content={titleLong}>
 <meta name="twitter:description" content={description}>
 <meta name="twitter:image" content=`${site}/banner.png`}>
 <link rel="twitter:image" sizes="180x180" href={`${site}/apple-touch-icon.png`}>

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

@@ -1,4 +1,5 @@
 ---
+import BaseLayout from '@layouts/Base.astro';
 import Main from '../../web-check-live/main.tsx';
 import '../../web-check-live/styles/index.css';
 
@@ -14,21 +15,28 @@ if (searchUrl) {
 
 ---
 
-<html>
+<BaseLayout>
-  <head>
+  <Main {pathname} client:load />
-    <title>Results</title>
+</BaseLayout>
-    <meta charset="UTF-8">
-  </head>
-  <body>
-    <Main {pathname} client:load />
-  </body>
-</html>
 
 <script>
-  // Fallback, if Astro hasn't initialized the RC comp yet, use JS to redirect
+  // Fallback, if Astro hasn't initialized the RC comp yet, then check the url
+  // 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')}`;
   }
-</script>
 
+  // And add a manual no-react form submit handler
+  const form = document.querySelector<HTMLFormElement>('form');
+  if (form) {
+    form.addEventListener('submit', function(event: Event) {
+      event.preventDefault();
+      const input = (this as HTMLFormElement).querySelector<HTMLInputElement>('input[name="url"]');  
+      if (input && input.value) {
+        window.location.href = `/check/${encodeURIComponent(input.value)}`;
+      }
+    });
+  }
+
+</script>

src/pages/docs-api.astro

@@ -2,7 +2,10 @@
 import BaseLayout from '@layouts/Base.astro';
 ---
 
-<BaseLayout title="API Docs | Web Check">
+<BaseLayout
+  title="API Docs | Web Check"
+  description="API documentation for the Web Check backend REST endpoints"
+>
   <Fragment slot="head">
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.3/swagger-ui.css">
     <link rel="stylesheet" href="https://rawcdn.githack.com/Amoenus/SwaggerDark/2064ccd45b571865a64c731fa6bfddfbf2a01fe1/SwaggerDark.css">
@@ -23,20 +26,21 @@ import BaseLayout from '@layouts/Base.astro';
         SwaggerUIBundle.presets.apis,
         SwaggerUIBundle.SwaggerUIStandalonePreset
       ],
-      plugins: [
-        SwaggerUIBundle.plugins.DownloadUrl
-      ]
     });
   }
 </script>
 
 <style lang="scss">
+  @import '@styles/global.scss';
   main {
     padding: 0 2rem;
     margin: 0 auto;
     height: 100vh;
     width: 100vw;
     max-width: 1600px;
+    @include mobile-down {
+      padding: 0;
+    }
   }
 
 </style>

src/pages/index.astro

@@ -1,19 +1,72 @@
 ---
+import BaseLayout from '@layouts/Base.astro';
+import Nav from '@components/Nav.astro';
 
 const isBossServer = import.meta.env.BOSS_SERVER === true;
+console.log('IS BOSS?', isBossServer)
+
+const searchUrl = new URLSearchParams(new URL(Astro.request.url).search).get('url');
+
+if (!isBossServer && searchUrl) {
+  Astro.redirect(`/check/${encodeURIComponent(searchUrl)}`);
+}
 
 ---
 
-<html>
+<BaseLayout>
-  <head>
+  <Fragment slot="head">
-    <title>Results</title>
+    {!isBossServer && (<meta http-equiv="refresh" content="0; url=/check" />)}
-    <meta charset="UTF-8">
+  </Fragment>
-		{!isBossServer && (
+  <main class="fancy-background">
-			<meta http-equiv="refresh" content="0; url=/check" />
+    <Nav />
-			<script type="text/javascript">window.location.href = '/check';</script>
+    <!-- <div class="left"></div>
-    )}
+    <div class="right"></div>
-  </head>
+    <h1>Web Check</h1>
-  <body>
+    <h2>X-Ray vision for your website's security</h2>
-		<h1>hi</h1>
+    <img width="600" class="screenshot" src="https://i.ibb.co/r0jXN6s/web-check.png" alt="Web Check Screenshot" /> -->
-  </body>
+  </main>
-</html>
+</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;
+    }
+
+    .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);
+      }
+    }
+  }
+
+.fancy-background { 
+  background-size: cover;
+  background-position: center center;
+  background-repeat: repeat;
+  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 2000 1000%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask id=%22b%22 x=%220%22 y=%220%22 width=%222000%22 height=%221000%22%3E%3Cpath fill=%22url(%23a)%22 d=%22M0 0h2000v1000H0z%22%2F%3E%3C%2Fmask%3E%3Cpath fill=%22%23141d2b%22 d=%22M0 0h2000v1000H0z%22%2F%3E%3Cg style=%22transform-origin:center center%22 stroke=%22%23243044%22 stroke-width=%222%22 mask=%22url(%23b)%22%3E%3Cpath fill=%22none%22 d=%22M0 0h77v77H0zM77 0h77v77H77zM154 0h77v77h-77zM231 0h77v77h-77zM308 0h77v77h-77zM385 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304412%22 d=%22M462 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M539 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044ef%22 d=%22M616 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M693 0h77v77h-77zM770 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044df%22 d=%22M847 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M924 0h77v77h-77zM1001 0h77v77h-77zM1078 0h77v77h-77zM1155 0h77v77h-77zM1232 0h77v77h-77zM1309 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304484%22 d=%22M1386 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1463 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044db%22 d=%22M1540 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1617 0h77v77h-77zM1694 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044c6%22 d=%22M1771 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%232430442d%22 d=%22M1848 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1925 0h77v77h-77zM0 77h77v77H0zM77 77h77v77H77zM154 77h77v77h-77zM231 77h77v77h-77zM308 77h77v77h-77zM385 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304406%22 d=%22M462 77h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M539 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304430%22 d=%22M616 77h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M693 77h77v77h-77zM770 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044ed%22 d=%22M847 77h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M924 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304485%22 d=%22M1001 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304450%22 d=%22M1078 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044d7%22 d=%22M1155 77h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1232 77h77v77h-77zM1309 77h77v77h-77zM1386 77h77v77h-77zM1463 77h77v77h-77zM1540 77h77v77h-77zM1617 77h77v77h-77zM1694 77h77v77h-77zM1771 77h77v77h-77zM1848 77h77v77h-77zM1925 77h77v77h-77zM0 154h77v77H0zM77 154h77v77H77zM154 154h77v77h-77zM231 154h77v77h-77zM308 154h77v77h-77zM385 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304448%22 d=%22M462 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044d4%22 d=%22M539 154h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M616 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044e1%22 d=%22M693 154h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M770 154h77v77h-77zM847 154h77v77h-77zM924 154h77v77h-77zM1001 154h77v77h-77zM1078 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304479%22 d=%22M1155 154h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1232 154h77v77h-77zM1309 154h77v77h-77zM1386 154h77v77h-77zM1463 154h77v77h-77zM1540 154h77v77h-77zM1617 154h77v77h-77zM1694 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304461%22 d=%22M1771 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044a5%22 d=%22M1848 154h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1925 154h77v77h-77zM0 231h77v77H0zM77 231h77v77H77zM154 231h77v77h-77zM231 231h77v77h-77zM308 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044be%22 d=%22M385 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044f0%22 d=%22M462 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304464%22 d=%22M539 231h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M616 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304476%22 d=%22M693 231h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M770 231h77v77h-77zM847 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044d9%22 d=%22M924 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%232430448f%22 d=%22M1001 231h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1078 231h77v77h-77zM1155 231h77v77h-77zM1232 231h77v77h-77zM1309 231h77v77h-77zM1386 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%232430446a%22 d=%22M1463 231h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1540 231h77v77h-77zM1617 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304420%22 d=%22M1694 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%232430447a%22 d=%22M1771 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044cb%22 d=%22M1848 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044ad%22 d=%22M1925 231h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M0 308h77v77H0z%22%2F%3E%3Cpath fill=%22%2324304469%22 d=%22M77 308h77v77H77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M154 308h77v77h-77zM231 308h77v77h-77zM308 308h77v77h-77zM385 308h77v77h-77zM462 308h77v77h-77zM539 308h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044d0%22 d=%22M616 308h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304437%22 d=%22M693 308h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044e3%22 d=%22M770 308h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044cb%22 d=%22M847 308h77v77h-77z%22%2F%3E%3Cpath fill=%22none%Line truncated
+}
+
+
+
+
+
+</style>

src/styles/colors.scss

@@ -0,0 +1,33 @@
+:root {
+  --primary: #9fef00;
+  --primary-lighter: #cff97a;
+  --text-color: #ffffff;
+  --text-color-secondary: #a4b1cd;
+  --background: #141d2b;
+  --background-darker: #111927;
+  --background-lighter: #1a2332;
+  --bg-shadow-color: #0f1620;
+  --fg-shadow-color: #456602;
+  --primary-transparent: #9fef0030;
+
+  // Action Colors
+  --info: #04e4f4;
+  --success: #20e253;
+  --warning: #f6f000;
+  --error: #fca016;
+  --danger: #f80363;
+  --neutral: #272f4d;
+}
+
+html[data-theme="light"] {
+  --primary: #4a7700;
+  --primary-lighter: #a4cf50;
+  --text-color: #333333;
+  --text-color-secondary: #57667e;
+  --background: #ffffff;
+  --background-darker: #f0f0f0;
+  --background-lighter: #fafafa;
+  --bg-shadow-color: #e0e0e0;
+  --fg-shadow-color: #678800;
+  --primary-transparent: #4a770033;
+}

src/styles/global.scss

@@ -0,0 +1,123 @@
+/* Global Stylesheet */
+
+@import './media-queries.scss';
+
+/* CSS Reset - Normalize dimensions and spacing across browsers */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* HTML and body basic setup */
+html {
+  font-size: 16px; // Default text size; consider accessibility and user preferences
+  scroll-behavior: smooth; // Smooth scrolling on click to hash links
+}
+
+body {
+  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1;
+  color: var(--text-color);
+  background: var(--background);
+  overflow-x: hidden;
+  font-weight: 400;
+}
+
+/* Links */
+a {
+  color: inherit;
+  text-decoration: none;
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
+/* Images */
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  color: inherit;
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  font-weight: normal;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+ul, ol {
+  margin-top: 0;
+  margin-bottom: 1em;
+  padding-left: 20px;
+}
+
+/* Forms */
+input, button, textarea, select {
+  font: inherit;
+  &:focus {
+    outline: 1px solid var(--primary);
+  }
+}
+
+/* Utility Classes */
+.text-center {
+  text-align: center;
+}
+.hidden {
+  display: none;
+}
+
+/* Responsive Design - Example of a simple breakpoint */
+@media (max-width: 768px) {
+  html {
+    font-size: 14px; // Smaller font size on smaller screens
+  }
+}
+
+
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+h1 { font-size: 2.25rem; }
+h2 { font-size: 1.8rem; }
+h3 { font-size: 1.5rem; }
+h4 { font-size: 1.2rem; }
+h5 { font-size: 1rem; }
+h6 { font-size: 0.85rem; }
+
+p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+a {
+  color: var(--primary);
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// Responsive font sizes
+@media (max-width: 768px) {
+  h1 { font-size: 2rem; }
+  h2 { font-size: 1.6rem; }
+  h3 { font-size: 1.4rem; }
+  // Adjust more as necessary
+}
+

src/styles/media-queries.scss

@@ -0,0 +1,79 @@
+// Breakpoints
+$breakpoint-xs: 599px;  // Max width for mobile only
+$breakpoint-sm: 600px;  // Min width for tablet portrait
+$breakpoint-md: 768px;  // Min width for tablet landscape
+$breakpoint-lg: 1024px; // Min width for desktop
+$breakpoint-xl: 1440px; // Min width for large desktop
+
+// Mixins for specific breakpoints
+@mixin for-mobile-only {
+  @media (max-width: $breakpoint-xs) {
+    @content;
+  }
+}
+
+@mixin mobile-up {
+  @media (min-width: calc($breakpoint-xs + 1px)) {
+    @content;
+  }
+}
+
+@mixin for-tablet-portrait {
+  @media (min-width: $breakpoint-sm) and (max-width: calc($breakpoint-md - 1px)) {
+    @content;
+  }
+}
+
+@mixin tablet-portrait-down {
+  @media (max-width: calc($breakpoint-md - 1px)) {
+    @content;
+  }
+}
+
+@mixin tablet-up {
+  @media (min-width: $breakpoint-sm) {
+    @content;
+  }
+}
+
+@mixin for-tablet-landscape {
+  @media (min-width: $breakpoint-md) and (max-width: calc($breakpoint-lg - 1px)) {
+    @content;
+  }
+}
+
+@mixin tablet-landscape-down {
+  @media (max-width: calc($breakpoint-lg - 1px)) {
+    @content;
+  }
+}
+
+@mixin for-desktop {
+  @media (min-width: $breakpoint-lg) and (max-width: calc($breakpoint-xl - 1px)) {
+    @content;
+  }
+}
+
+@mixin desktop-down {
+  @media (max-width: calc($breakpoint-xl - 1px)) {
+    @content;
+  }
+}
+
+@mixin for-large-desktop {
+  @media (min-width: $breakpoint-xl) {
+    @content;
+  }
+}
+
+@mixin large-desktop-up {
+  @media (min-width: $breakpoint-xl) {
+    @content;
+  }
+}
+
+@mixin mobile-down {
+  @media (max-width: $breakpoint-xs) {
+    @content;
+  }
+}

src/styles/typography.scss

@@ -0,0 +1,62 @@
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+}

src/web-check-live/App.tsx

@@ -1,24 +1,34 @@
-import { Routes, Route, Outlet } from "react-router-dom";
+import { Routes, Route, Outlet } from 'react-router-dom';
 
 import Home from 'web-check-live/views/Home.tsx';
 import Results from 'web-check-live/views/Results.tsx';
 import About from 'web-check-live/views/About.tsx';
 import NotFound from 'web-check-live/views/NotFound.tsx';
 
+import ErrorBoundary from 'web-check-live/components/boundaries/PageError.tsx';
+import GlobalStyles from './styles/globals.tsx';
+
 export default function App() {
   return (
-    <Routes>
+    <ErrorBoundary>
-      <Route path="/check" element={<Layout />}>
+      <Routes>
-        <Route index element={<Home />} />
+        <Route path="/check" element={<Layout />}>
-        <Route path="home" element={<Home />} />
+          <Route index element={<Home />} />
-        <Route path="about" element={<About />} />
+          <Route path="home" element={<Home />} />
-        <Route path=":urlToScan" element={<Results />} />
+          <Route path="about" element={<About />} />
-        <Route path="*" element={<NotFound />} />
+          <Route path=":urlToScan" element={<Results />} />
-      </Route>
+          <Route path="*" element={<NotFound />} />
-    </Routes>
+        </Route>
+      </Routes>
+    </ErrorBoundary>
   );
 }
 
 function Layout() {
-  return (<Outlet />);
+  return (
+  <>
+    <GlobalStyles />
+    <Outlet />
+  </>
+  );
 }

src/web-check-live/main.tsx

@@ -1,7 +1,6 @@
 import { BrowserRouter } from "react-router-dom";
 import { StaticRouter } from "react-router-dom/server";
 import App from "./App.tsx";
-// import "./App.css";
 
 export default ({ pathname }: { pathname: string }) => (
     import.meta.env.SSR

src/web-check-live/styles/globals.tsx

@@ -9,7 +9,10 @@ const GlobalStyles = () => (
       font-weight: 400;
       src: url('/fonts/PTMono.ttf') format('ttf');
     }
-    body { font-family: PTMono; }
+    body, div, a, p, span, ul, li, small, h1, h2, h3, h4, button, section {
+      font-family: PTMono;
+      color: #fff;
+    }
     `}
   />
 );