Merge pull request #59 from damla/dev

[#48] feat: add title

components/section/section.component.tsx

@@ -18,11 +18,12 @@ export default function Section ({
 ): ReactElement {
   return (
     <section
-      className={classNames(
-        styles.container,
-        banner !== undefined && styles.container__banner,
-        relative !== undefined && styles.relative
-      )}
+      className={
+        classNames(
+          styles.container,
+          banner !== undefined && styles.container__banner,
+          relative !== undefined && styles.relative
+        )}
       id={id}
     >
       {children}

pages/about-us/about-us.module.scss

@@ -0,0 +1,12 @@
+.h1 {
+    font-family: "Zaph Humanist", sans-serif;
+    margin-left: 1.5rem;
+    font-size: 3rem;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    text-transform: uppercase;
+    color: white;
+}
+// TODO: media query for mobile

pages/about-us/index.tsx

@@ -8,6 +8,7 @@ import ImageBox from '../../components/image-box/image-box.component'
 
 import { getData } from '../../lib'
 import { CommonModel, AboutUsModel } from '../../interfaces/index'
+import styles from './about-us.module.scss'
 
 interface Props {
   common: CommonModel
@@ -37,7 +38,7 @@ export default function AboutUs ({
         <title>{title}</title>
       </Head>
       <Layout data={common} navbarBg>
-        <Section banner>
+        <Section banner relative>
           <ImageBox
             src="/assets/images/about_us_hero.png"
             alt="banner-image"
@@ -46,12 +47,12 @@ export default function AboutUs ({
             hero
             placeholderColor="#404040"
           />
+          <h1 className={styles.h1}>{title}</h1>
         </Section>
         <Section relative>
           <div style={{
             minHeight: '100vh'
           }}>
-            <p>test</p>
           </div>
         </Section>
       </Layout>