Adds logo asset, adds env var placeholders, adds 404 page

src/App.tsx

@@ -3,6 +3,7 @@ import Styled from 'styled-components';
 import Home from 'pages/Home';
 import Results from 'pages/Results';
 import About from 'pages/About';
+import NotFound from 'pages/NotFound';
 import colors from 'styles/colors';
 
 const Container = Styled.main`
@@ -17,6 +18,7 @@ function App() {
   return (
     <Container>
       <Routes>
+        <Route path="*" element={<NotFound />} />
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
         <Route path="/results/:address" element={<Results />} />

src/components/Results/DnsServer.tsx

@@ -21,7 +21,7 @@ const DnsServerCard = (props: {data: any, title: string, actionButtons: any }):
         return (<>
           { dnsSecurity.dns.length > 1 && <Heading as="h4" size="small" color={colors.primary}>DNS Server #{index+1}</Heading> }
           <Row lbl="IP Address" val={dns.address} />
-          <Row lbl="Hostname" val={dns.hostname} />
+          { dns.hostname && <Row lbl="Hostname" val={dns.hostname} /> }
           <Row lbl="DoH Support" val={dns.dohDirectSupports ? '✅ Yes*' : '❌ No*'} />
         </>);
       })}

src/pages/NotFound.tsx

@@ -0,0 +1,64 @@
+
+import styled from 'styled-components';
+
+import colors from 'styles/colors';
+import Heading from 'components/Form/Heading';
+import Footer from 'components/misc/Footer';
+import Nav from 'components/Form/Nav';
+import Button from 'components/Form/Button';
+import { StyledCard } from 'components/Form/Card';
+
+const AboutContainer = styled.div`
+  width: 95vw;
+  max-width: 1000px;
+  margin: 2rem auto;
+  padding-bottom: 1rem;
+  header {
+    margin 1rem 0;
+  }
+  a {
+    color: ${colors.primary};
+  }
+  .im-drink { font-size: 6rem; }
+`;
+
+const HeaderLinkContainer = styled.nav`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  a {
+    text-decoration: none;
+  }
+`;
+
+const NotFoundInner = styled(StyledCard)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 1rem;
+  gap: 0.5rem;
+  h2 { font-size: 8rem; }
+`;
+
+
+const NotFound = (): JSX.Element => {
+  return (
+    <>
+    <AboutContainer>
+    <Nav />
+    <NotFoundInner>
+      <Heading as="h2" size="large" color={colors.primary}>404</Heading>
+      <span className="im-drink">🥴</span>
+      <Heading as="h3" size="large" color={colors.primary}>Not Found</Heading>
+      <HeaderLinkContainer>
+        <a href="/"><Button>Back to Homepage</Button></a>
+      </HeaderLinkContainer>
+      <a href="https://github.com/lissy93/web-check">Report Issue</a>
+    </NotFoundInner>
+    </AboutContainer>
+    <Footer isFixed={true} />
+    </>
+  );
+};
+
+export default NotFound;

src/utils/get-keys.ts

@@ -2,8 +2,6 @@
 const keys = {
   shodan: process.env.REACT_APP_SHODAN_API_KEY,
   whoApi: process.env.REACT_APP_WHO_API_KEY,
-  builtWith: process.env.REACT_APP_BUILT_WITH_API_KEY,
-  googleCloud: process.env.REACT_APP_GOOGLE_CLOUD_API_KEY,
 };
 
 export default keys;