Add content heading wrapper

public/index.html

@@ -9,6 +9,7 @@
   <style>
     body {
       margin: 0;
+      background-color: rgb(235, 235, 235)
     }
   </style>
 </head>

src/ui/atoms/content-heading-layout/index.js

@@ -7,6 +7,7 @@ const ContentHeadingLayout = styled.div`
 	background-size: cover;
 	background-position-y: center;
 	justify-content: center;
+	align-items: flex-end;
 	padding-top: 70px;
 `
 

src/ui/atoms/content-heading-wrapper/index.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+
+const ContentHeadingWrapper = styled.div`
+	display: flex;
+	width: 960px;
+	height: 490px;
+	background: linear-gradient(
+		to bottom,
+		rgba(235, 235, 235, 0.2) 0%,
+		rgba(235, 235, 235, 1) 100%
+	);
+`
+
+export default ContentHeadingWrapper

src/ui/molecules/content-heading/index.js

@@ -1,9 +1,12 @@
 import React from 'react'
 
 import ContentHeadingLayout from '../../atoms/content-heading-layout'
+import ContentHeadingWrapper from '../../atoms/content-heading-wrapper'
 
 const ContentHeading = () => (
-	<ContentHeadingLayout>This is the page content</ContentHeadingLayout>
+	<ContentHeadingLayout>
+		<ContentHeadingWrapper>This is the page content</ContentHeadingWrapper>
+	</ContentHeadingLayout>
 )
 
 export default ContentHeading