From 7b721924fe91b9a1926e9aa1d848e5a5ecda9cae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Damla=20K=C3=B6ksal?= <me@damlakoksal.com>
Date: Tue, 9 Feb 2021 18:29:16 +0300
Subject: [PATCH] [#48] feat: add Grid component

---
 components/grid/grid.component.tsx | 40 ++++++++++++++++++++++++++++++
 components/grid/grid.module.scss   | 17 +++++++++++++
 pages/about-us/index.tsx           |  2 ++
 3 files changed, 59 insertions(+)
 create mode 100644 components/grid/grid.component.tsx
 create mode 100644 components/grid/grid.module.scss

diff --git a/components/grid/grid.component.tsx b/components/grid/grid.component.tsx
new file mode 100644
index 0000000..65ef695
--- /dev/null
+++ b/components/grid/grid.component.tsx
@@ -0,0 +1,40 @@
+import React, { ReactElement } from 'react'
+// import Image from 'next/image'
+
+import styles from './grid.module.scss'
+
+// interface Props {
+//   children: ReactNode
+// }
+
+export default function Grid (
+): ReactElement {
+  return (
+    <div className={styles.container}>
+      <div className={styles.child}>
+        <p>test</p>
+        <p>test2</p>
+      </div>
+      <div className={styles.child}>
+        <p>test</p>
+        <p>test2</p>
+      </div>
+      <div className={styles.child}>
+        <p>test</p>
+        <p>test2</p>
+      </div>
+      <div className={styles.child}>
+        <p>test</p>
+        <p>test2</p>
+      </div>
+      <div className={styles.child}>
+        <p>test</p>
+        <p>test2</p>
+      </div>
+      <div className={styles.child}>
+        <p>test</p>
+        <p>test2</p>
+      </div>
+    </div>
+  )
+}
diff --git a/components/grid/grid.module.scss b/components/grid/grid.module.scss
new file mode 100644
index 0000000..52b56e7
--- /dev/null
+++ b/components/grid/grid.module.scss
@@ -0,0 +1,17 @@
+@use "../../global/variables.scss" as variables;
+
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 2rem;
+    justify-content: space-between;
+    width: 70vw;
+    align-content: flex-start;
+
+    .child {
+        background-color: blueviolet;
+        margin-top: 1rem;
+        height: 90px;
+        width: 90px;
+    }
+}
diff --git a/pages/about-us/index.tsx b/pages/about-us/index.tsx
index 7424472..a9ff67b 100644
--- a/pages/about-us/index.tsx
+++ b/pages/about-us/index.tsx
@@ -10,6 +10,7 @@ import Paragraph from '../../components/paragraph/paragraph.component'
 import { getData } from '../../lib'
 import { CommonModel, AboutUsModel } from '../../interfaces/index'
 import styles from './about-us.module.scss'
+import Grid from '../../components/grid/grid.component'
 
 interface Props {
   common: CommonModel
@@ -62,6 +63,7 @@ export default function AboutUs ({
               Bir Karsal müşterisi, sadece kumaş numunesi veya seçimi yaptıktan sonra hiçbir işlemin sorumluluğu ve terminini takip etmek zorunda kalmadan faaliyet konusuna yoğunlaşabilmektedir. Bu nedenle Karsal üretimi kolaylaştırmaktadır. Karsal; Rusya, Hırvatistan, Bulgaristan, İtalya, Almanya, Portekiz, İspanya başta olmak üzere, birçok Avrupa ve Doğu Bloku ülkesine doğrudan ihracat yapmaktadır. Aileden gelen tekstil tecrübesi ile entegre bir sistemde üretimin yapılması, Karsal’a; üretilen kumaşların kalitesinin tüm sorumluluğunu üstlenebilmesini sağlamaktadır. Karsal; işinin profesyonelleri sayesinde müşterilerine, sağladığı kaliteli hammaddeyi, titiz bir işçilik ve düzenli ve hızlı sunumla müşteriye ulaştırmaktadır.
               </Paragraph>
             </div>
+            <Grid/>
           </div>
         </Section>
       </Layout>