Updated main page

src/pages/MainPage/Main.sass

@@ -14,3 +14,101 @@ h1
 
 .name
   font-size: 1.25rem
+
+.tabs
+  width: 100%
+
+  &[data-orientation="vertical"]
+    display: flex
+
+  &__list
+    position: relative
+    display: flex
+
+  &__list[data-orientation="horizontal"]
+    align-items: center
+
+  &__list[data-orientation="vertical"]
+    flex-direction: column
+    align-items: stretch
+
+  &__indicator
+    position: absolute
+    background-color: hsl(200 98% 39%)
+    transition: all 250ms
+
+  &__indicator[data-orientation="horizontal"]
+    bottom: -1px
+    height: 2px
+
+  &__indicator[data-orientation="vertical"]
+    right: -1px
+    width: 2px
+
+  &__trigger
+    display: inline-block
+    padding: 8px 16px
+    outline: none
+    cursor: pointer
+
+  &__trigger:hover
+    background-color: hsl(0 0% 98%)
+    color: hsl(240 5% 34%)
+
+  &__trigger:focus-visible
+    background-color: hsl(240 5% 96%)
+
+.tabs__trigger[data-disabled],
+.tabs__trigger[data-disabled]:hover
+  opacity: 0.5
+  background-color: transparent
+
+.tabs__content
+  padding: 16px
+
+.table
+  width: 100%
+  border-collapse: collapse
+  margin: 2rem
+
+  th, td
+    border: 1px solid vars.$tableBorderColor
+    padding: 0.75rem
+    text-align: left
+    font-size: 1.1rem
+
+  td:nth-child(1)
+    width: 12rem
+
+  td:nth-child(3)
+    width: 9rem
+
+  th
+    background-color: vars.$tableHeaderBackground
+    color: white
+
+.modal
+  font-weight: 500
+
+  &__application-number
+    font-size: 1.75rem
+
+  &__name
+    padding: 1rem 0 0 0
+    font-size: 1rem
+
+  &__row
+    display: flex
+    flex-direction: column
+    flex-wrap: wrap
+    justify-content: flex-start
+    align-items: flex-start
+    gap: 0.5rem
+    padding: 2rem 0 0 0
+
+    &__label
+      font-size: 0.75rem
+
+    &__detail
+      font-size: 1rem
+