[#75] feat: start design of contact page

pages/contact/contact.module.scss

@@ -0,0 +1,74 @@
+@use "../../global/variables.scss" as variables;
+
+.section {
+    $self: &;
+
+    &_container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        // background-color: blueviolet;
+        min-width: 100%;
+        min-height: 100vh;
+        padding: 2.4rem 0;
+
+        .h1 {
+            font-family: "Zaph Humanist", sans-serif;
+            font-size: 3rem;
+            text-transform: uppercase;
+            color: variables.$secondary-color;
+            margin-bottom: 1rem;
+
+            @media only screen and (max-width: variables.$max-width-middle) {
+                font-size: 2.5rem;
+            }
+        }
+
+        .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;
+            }
+        }
+
+        #{ $self }_body {
+            display: flex;
+            min-width: 100%;
+            justify-content: space-around;
+
+            @media only screen and (max-width: variables.$max-width-tablet) {
+                display: flex;
+                flex-direction: column;
+                min-width: 70%;
+                min-height: 100vh;
+            }
+
+            &__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

@@ -6,6 +6,8 @@ import Layout from '../../components/layout/layout.component'
 import Section from '../../components/section/section.component'
 import ImageBox from '../../components/image-box/image-box.component'
 
+import styles from './contact.module.scss'
+
 import { CommonModel, ContactModel } from '../../interfaces/index'
 import { getBase64Values } from '../../utils/imageUtils'
 import { getData } from '../../utils/dbUtils'
@@ -57,8 +59,27 @@ export default function Contact ({
           />
         </Section>
         <Section relative>
-          <div style={{ minHeight: '100vh' }}>
+          <div className={styles.section_container}>
+            <h1 className={styles.h1}>Contact Us</h1>
+            <h3 className={styles.h3}>To get perfect fabric swatches, please reach us via phone, e-mail or contact form.</h3>
+            <div className={styles.section_body}>
+              <div className={styles.section_body__left}>
+                <ul style={{ display: 'flex', flexDirection: 'row' }}>
+                  <li>
+                    test
+                  </li>
+                  <li>
+                  test
+                  </li>
+                  <li>
+                  test
+                  </li>
+                </ul>
+              </div>
+              <div className={styles.section_body__right}>
 
+              </div>
+            </div>
           </div>
         </Section>
       </Layout>