added masthead

src/components/A/index.ts

@@ -0,0 +1,16 @@
+import styled from 'styled-components/macro';
+
+const A = styled.a`
+  color: ${p => p.theme.primary};
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:active {
+    opacity: 0.4;
+  }
+`;
+
+export default A;

src/components/Lead/index.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components/macro';
+
+const Lead = styled.div`
+  font-size: 1.5rem;
+  font-weight: 300;
+  line-height: 1.5;
+`;
+
+export default Lead;

src/components/Masthead/Logos.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+import { ReactComponent as CRALogo } from './cra-logo.svg';
+import { ReactComponent as RPLogo } from './rp-logo.svg';
+import { ReactComponent as PlusSign } from './plus-sign.svg';
+
+export default function Logos() {
+  return (
+    <Wrapper>
+      <CRALogo className="logo" />
+      <PlusSign className="sign" />
+      <RPLogo className="logo" />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  .logo {
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+
+  .sign {
+    width: 2rem;
+    height: 2rem;
+    margin: 0 2rem;
+  }
+`;

src/components/Masthead/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components/macro';
+import Container from 'components/Container';
+import Logos from './Logos';
+import Title from 'components/Title';
+import Lead from 'components/Lead';
+import A from 'components/A';
+
+export default function Masthead() {
+  return (
+    <Wrapper>
+      <Container>
+        <Logos />
+        <Title>React Boilerplate meets CRA</Title>
+        <Lead>
+          Now you can use the{' '}
+          <A
+            href="https://www.reactboilerplate.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            React Boilerplate
+          </A>{' '}
+          as{' '}
+          <A
+            href="https://create-react-app.dev/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Create React App
+          </A>{' '}
+          template.
+        </Lead>
+      </Container>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.main`
+  height: 75vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 320px;
+
+  ${Container} {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+`;

src/components/Title/index.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components/macro';
+
+const Title = styled.h1`
+  font-size: 32px;
+  font-weight: bold;
+  color: ${p => p.theme.text};
+  margin: 1rem 0;
+`;
+
+export default Title;

src/features/HomePage/index.tsx

@@ -21,6 +21,7 @@ import {
 import { actions, reducer, sliceKey } from './slice';
 import { homepageSaga } from './saga';
 import NavBar from 'components/NavBar';
+import Masthead from 'components/Masthead';
 
 export default function HomePage() {
   useInjectReducer({ key: sliceKey, reducer: reducer });
@@ -66,6 +67,7 @@ export default function HomePage() {
         />
       </Helmet>
       <NavBar />
+      <Masthead />
       {/* <div>
         Hello Inter Font Family, this is test text
         <Form onSubmit={onSubmitForm}>