add basic profile section

src/app/modules/profile/basic-information/basic-information.component.html

@@ -1 +1,31 @@
-<p>basic-information works!</p>
+<section
+  class="basic-info gap-20"
+  fxLayout="row wrap"
+  fxLayoutAlign="start start"
+>
+  <button class="edit">Edit</button>
+  <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="28">
+    <h1 class="bold">Birth Date</h1>
+    <p>10/10/2000</p>
+  </div>
+  <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="28">
+    <h1 class="bold">ID Number</h1>
+    <p>1059404</p>
+  </div>
+  <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="28">
+    <h1 class="bold">Passport Number</h1>
+    <p>10102000</p>
+  </div>
+  <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="28">
+    <h1 class="bold">Email</h1>
+    <p>User@gmail.com</p>
+  </div>
+  <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="28">
+    <h1 class="bold">Mobile Number</h1>
+    <p>+0201012345678</p>
+  </div>
+  <div class="card" fxFlex.lt-md="100" fxFlex.gt-sm="28">
+    <h1 class="bold">Tax declaration</h1>
+    <p>1236 - 20 - 10%</p>
+  </div>
+</section>

src/app/modules/profile/profile-theme.scss

@@ -67,6 +67,49 @@
           }
         }
       }
+
+      .basic-info {
+        background-color: $off-white;
+        padding: 20px;
+        border-radius: 18px;
+        height: 80%;
+        position: relative;
+        .card {
+          background: $white-color;
+          box-shadow: 0px 5px 6px #2f2c8324;
+          border: 0.5px solid #2f2c83;
+          padding: 20px 0;
+          border-radius: 20px;
+          padding-bottom: 0;
+          h1 {
+            text-align: center;
+            font-size: 15px;
+            color: $main-color;
+            border-bottom: 1px solid #ccc;
+            padding-bottom: 10px;
+          }
+
+          p {
+            text-align: center;
+            padding: 2rem 0;
+            font-size: 13px;
+          }
+        }
+      }
     }
   }
+
+  .edit {
+    color: $main-color;
+    background-color: #2f2c8326;
+    box-shadow: -2px 6px 9px #2f2c8333;
+    border-radius: 18px;
+    padding: 10px 30px;
+    border: none;
+    font-size: 16px;
+    font-weight: 700;
+    cursor: pointer;
+    position: absolute;
+    right: 1rem;
+  }
 }