CustomContainer Component Created & Implemented and Data Added to Contact Page

components/custom-container/custom-container.component.tsx

@@ -0,0 +1,46 @@
+import React, { CSSProperties, ReactElement, ReactNode } from 'react'
+
+import styles from './custom-container.module.scss'
+import classNames from 'classnames'
+
+interface Props {
+  page?: string
+  children: ReactNode
+  h1?: string
+  h2?: string
+  h3?: string
+  justifyContent?: string
+}
+
+export default function CustomContainer ({
+  page,
+  children,
+  h1,
+  h2,
+  h3,
+  justifyContent
+}: Props
+): ReactElement {
+  const style: CSSProperties = {
+    justifyContent
+  }
+  return (
+    <div className={styles.container}>
+      {
+        h1 !== undefined && <h1 className={styles.h1}>{h1}</h1>
+      }
+      {
+        h2 !== undefined && <h2 className={styles.h2}>{h3}</h2>
+      }
+      {
+        h3 !== undefined && <h3 className={styles.h3}>{h3}</h3>
+      }
+      <div className={classNames(
+        styles.body,
+        page === 'about-us' && styles.body_aboutUs,
+        page === 'contact' && styles.body_contact)} style={style}>
+        {children}
+      </div>
+    </div>
+  )
+}

components/custom-container/custom-container.module.scss

@@ -0,0 +1,75 @@
+@use "../../global/variables.scss" as variables;
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 100%;
+    padding: 2.4rem 0;
+
+    .h1 {
+        font-family: "Zaph Humanist", sans-serif;
+        font-size: 3rem;
+        text-transform: uppercase;
+        color: variables.$secondary-color;
+        margin-bottom: 2.4rem;
+
+        @media only screen and (max-width: variables.$max-width-middle) {
+            font-size: 2.5rem;
+        }
+    }
+
+    .h2 {
+        font-family: "SuisseInt-Regular", sans-serif;
+        font-size: 1.4rem;
+        color: variables.$secondary-color;
+        max-width: 70vw;
+        text-align: justify;
+        margin-bottom: 1.5rem;
+
+        @media only screen and (max-width: variables.$max-width-middle) {
+            font-size: 1rem;
+        }
+        @media only screen and (max-width: variables.$max-width-paragraph) {
+            text-align: center;
+        }
+    }
+
+    .h3 {
+        font-family: "SuisseInt-Regular", sans-serif;
+        font-size: 1.7rem;
+        color: variables.$secondary-color;
+        max-width: 70vw;
+        text-align: center;
+        margin-bottom: 1.5rem;
+
+        @media only screen and (max-width: variables.$max-width-tablet) {
+            font-size: 1.3rem;
+        }
+    }
+
+    .body {
+        &_aboutUs {
+            display: flex;
+            width: 70vw;
+
+            @media only screen and (max-width: variables.$max-width-paragraph) {
+                display: flex;
+                flex-direction: column;
+            }
+        }
+
+        &_contact {
+            display: flex;
+            min-width: 100%;
+            width: 70vw;
+
+            @media only screen and (max-width: variables.$max-width-tablet) {
+                display: flex;
+                flex-direction: column;
+                min-width: 70%;
+                min-height: 100vh;
+            }
+        }
+    }
+}

components/section/section.component.tsx

@@ -22,8 +22,8 @@ export default function Section ({
 }: Props
 ): ReactElement {
   const style: CSSProperties = {
-    minHeight: minHeight,
-    marginBottom: marginBottom
+    minHeight,
+    marginBottom
   }
 
   return (

interfaces/index.ts

@@ -126,6 +126,8 @@ export interface ContactModel {
   _id: ObjectID
   lang: string
   title: string
+  maintitle: string
+  subtitle: string
 }
 
 export interface FactoryModel {

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

@@ -1,57 +0,0 @@
-@use "../../global/variables.scss" as variables;
-
-.section {
-    &_container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        min-width: 100%;
-        padding: 2.4rem 0;
-    }
-    &_body {
-        display: flex;
-        justify-content: space-between;
-        width: 70vw;
-    }
-}
-
-.h1 {
-    font-family: "Zaph Humanist", sans-serif;
-    font-size: 3rem;
-    text-transform: uppercase;
-    color: variables.$secondary-color;
-    margin-bottom: 2.4rem;
-}
-
-.h3 {
-    font-family: "SuisseInt-Regular", sans-serif;
-    font-size: 1.4rem;
-    color: variables.$secondary-color;
-    max-width: 70vw;
-    text-align: justify;
-    margin-bottom: 1.5rem;
-}
-
-@media only screen and (max-width: variables.$max-width-paragraph) {
-    .section {
-        &_body {
-            display: flex;
-            flex-direction: column;
-        }
-    }
-
-    .h3 {
-        text-align: center;
-    }
-}
-
-@media only screen and (max-width: variables.$max-width-middle) {
-    .h1 {
-        font-size: 2.5rem;
-    }
-
-    .h3 {
-        font-size: 1rem;
-    }
-}
-// TODO: ORTALA

pages/about-us/index.tsx

@@ -7,11 +7,10 @@ import Section from '../../components/section/section.component'
 import ImageBox from '../../components/image-box/image-box.component'
 import Paragraph from '../../components/paragraph/paragraph.component'
 
-import styles from './about-us.module.scss'
-
 import { CommonModel, AboutUsModel } from '../../interfaces/index'
 import { getData } from '../../utils/dbUtils'
 import { getBase64Values } from '../../utils/imageUtils'
+import CustomContainer from '../../components/custom-container/custom-container.component'
 // import Grid from '../../components/grid/grid.component'
 
 interface Props {
@@ -64,19 +63,14 @@ export default function AboutUs ({
           />
         </Section>
         <Section relative>
-          <div className={styles.section_container}>
-            <h1 className={styles.h1}>{title}</h1>
-            <h3 className={styles.h3}>{subtitle}</h3>
-            <div className={styles.section_body}>
-              <Paragraph>
-                {paragraphs[0]}
-              </Paragraph>
-              <Paragraph>
-                {paragraphs[1]}
-              </Paragraph>
-            </div>
-            {/* <Grid/> */}
-          </div>
+          <CustomContainer page="about-us" h1={title} h2={subtitle} justifyContent='space-between'>
+            <Paragraph>
+              {paragraphs[0]}
+            </Paragraph>
+            <Paragraph>
+              {paragraphs[1]}
+            </Paragraph>
+          </CustomContainer>
         </Section>
       </Layout>
     </>

pages/contact/contact.module.scss

@@ -0,0 +1,22 @@
+@use "../../global/variables.scss" as variables;
+
+.left {
+    border: 1px solid green;
+    flex-basis: 40%;
+    min-height: 50vh;
+    display: flex;
+
+    @media only screen and (max-width: variables.$max-width-tablet) {
+        min-height: 40vh;
+    }
+}
+
+.right {
+    border: 1px solid pink;
+    flex-basis: 40%;
+    min-height: 50vh;
+
+    @media only screen and (max-width: variables.$max-width-tablet) {
+        min-height: 40vh;
+    }
+}

pages/contact/index.tsx

@@ -5,6 +5,9 @@ import Head from 'next/head'
 import Layout from '../../components/layout/layout.component'
 import Section from '../../components/section/section.component'
 import ImageBox from '../../components/image-box/image-box.component'
+import CustomContainer from '../../components/custom-container/custom-container.component'
+
+import styles from './contact.module.scss'
 
 import { CommonModel, ContactModel } from '../../interfaces/index'
 import { getBase64Values } from '../../utils/imageUtils'
@@ -34,7 +37,9 @@ export const getStaticProps: GetStaticProps = async ({ locale = 'tr' }) => {
 export default function Contact ({
   common,
   page: {
-    title
+    title,
+    maintitle,
+    subtitle
   },
   Base64Values
 }: Props
@@ -57,9 +62,16 @@ export default function Contact ({
           />
         </Section>
         <Section relative>
-          <div style={{ minHeight: '100vh' }}>
-
-          </div>
+          <CustomContainer page='contact' h1={maintitle} h3={subtitle} justifyContent='space-around'>
+            <div className={styles.left}>
+              <h4>test</h4>
+              <p>test</p>
+            </div>
+            <div className={styles.right}>
+              <h4>test</h4>
+              <p>test</p>
+            </div>
+          </CustomContainer>
         </Section>
       </Layout>
     </>