Adding under construction sign

src/components/UnderConstruction.tsx

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+import Button from './Button';
+import stockImage from '../static/images/Construction-pana.svg';
+
+const UnderConstruction = () => {
+    return (
+    <UnderConstructionDiv>
+        <Image src={stockImage} alt='Under Construction'></Image>
+        <StyledLink href="https://storyset.com/work">Work illustrations by Storyset</StyledLink>
+        <h1>We're working on this!</h1>
+        <h3>Sorry, our website is still under construction. You might be able to find what you are looking for here</h3>
+        <a href="https://linktr.ee/cublueprint">Visit our Linktree</a>
+    </UnderConstructionDiv>
+    );
+};
+
+const UnderConstructionDiv = styled.div`
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 8px;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 36px;
+    text-align: center;
+`;
+
+const StyledLink = styled.a`
+    font-size: 8px;
+    color: #000000;
+    text-decoration: none;
+    margin-top: 24px;
+
+`;
+
+const Image = styled.img`
+    width: 250px;
+    height: auto;
+    margin: 0 0 24px 0;
+    @media ${(props) => props.theme.viewport.laptop} {
+        width: 500px;
+    }
+`;
+
+export default UnderConstruction;

src/pages/apply/Apply.tsx

@@ -1,17 +1,18 @@
 import styled from 'styled-components';
 import blueprintIcon from '../../static/images/blueprint.png';
 import ApplicationText from './ApplyOptions';
+import UnderConstruction from '../../components/UnderConstruction';
 
 const Apply = () => {
   return (
     <Container>
-      <TitleContainer>
+    {/*<TitleContainer>
         <StyledBlueprintImage alt='Blueprint' src={blueprintIcon} />
         <Title>blueprint</Title>
         <Subtitle>Come work with us!</Subtitle>
-      </TitleContainer>
+    </TitleContainer>
 
-      <BodyContainer>
+    <BodyContainer>
         <SectionHeader>I am:</SectionHeader>
         <ApplicationTextContainer>
           <ApplicationText
@@ -31,7 +32,8 @@ const Apply = () => {
             linkText={'Learn more!'}
           />
         </ApplicationTextContainer>
-      </BodyContainer>
+    </BodyContainer> */}
+      <UnderConstruction></UnderConstruction>
     </Container>
   );
 };

src/pages/teams/Teams.tsx

@@ -3,10 +3,11 @@ import { NewTitleBlock, ContentBlock } from '../../components';
 
 import content from '../../static/json/teams';
 import PersonCard from './PersonCard';
+import UnderConstruction from '../../components/UnderConstruction';
 
 const Teams = () => (
-  <>
-    <NewTitleBlock content={content.titleBlock}></NewTitleBlock>
+  <Container>
+    {/*<NewTitleBlock content={content.titleBlock}></NewTitleBlock>
     <>
       {content.teamsList.map((team, index) => (
         <ContentBlock title={team.name} changeBackground={!index}>
@@ -17,10 +18,21 @@ const Teams = () => (
           </TeamFlexBox>
         </ContentBlock>
       ))}
-    </>
-  </>
+            </>*/}
+        <UnderConstruction></UnderConstruction>
+  </Container>
 );
 
+const Container = styled.div`
+  margin: auto;
+  width: 80vw;
+  padding: 50px 0;
+
+  @media ${(props) => props.theme.viewport.laptop} {
+    width: 820px;
+  }
+`;
+
 const TeamFlexBox = styled.div`
   padding: 50px 0px;
   display: flex;