- added bando preview page;

- added bando form preview;

src/assets/scss/components/appPage.scss

@@ -12,30 +12,6 @@
     }
 }
 
-.appPageSection {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-
-    h2 {
-        color: var(--Black);
-        font-size: 21px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: normal;
-        margin: 0 0 24px;
-    }
-}
-
-.appPageSection__table {
-    width: 100%;
-}
-
-.appTableHeader {
-    display: flex;
-    justify-content: space-between;
-}
-
 .appPage__pageHeader {
     display: flex;
     flex-direction: column;
@@ -55,7 +31,7 @@
         line-height: 120%;
         margin: 0;
     }
-    
+
     span {
         margin-left: 10px;
         text-transform: uppercase;
@@ -67,6 +43,157 @@
     padding: 24px 0;
 }
 
+.appPageSection__hr {
+    position: relative;
+    width: 100%;
+    padding: 0 0 0 30px;
+
+    &:before {
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        content: '';
+        top: 50%;
+        left: 0;
+        z-index: 1;
+        background-color: #E5E7EB;
+    }
+
+    span {
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        padding: 0 10px;
+        background-color: white;
+        z-index: 9;
+        position: relative;
+    }
+}
+
+.appPage__content {
+    display: flex;
+    flex-direction: column;
+    gap: 48px;
+}
+
+.appPageSection {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    h2 {
+        color: var(--global-textColor);
+        font-size: 21px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        margin: 0 0 24px;
+    }
+}
+
+.appPageSection__withBorder {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+    width: 100%;
+    padding: 17px;
+    border-radius: 6px;
+    border: 1px solid var(--card-borderColor-color);
+
+    &.disabled {
+        filter: grayscale(1);
+        opacity: 0.8;
+    }
+
+    h2 {
+        color: var(--global-textColor);
+        font-size: 21px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        margin: 0;
+    }
+
+    .row {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        padding: 5px 0;
+
+        &.rowContent {
+            padding: 17px 0;
+        }
+
+        p {
+            margin: 0;
+            flex: 1 1 100%;
+        }
+
+        ul {
+            padding-left: 1rem;
+        }
+
+        button {
+            flex: 0 0 auto;
+        }
+    }
+}
+
+.appPageSection__hero {
+    display: flex;
+    height: 172px;
+    width: 100%;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+.appPageSection__preview {
+    padding: 17px 0;
+    background: repeating-linear-gradient(
+                    45deg,
+                    transparent,
+                    transparent 10px,
+                    #f8d282 10px,
+                    #f8d282 20px
+    );
+
+    .p-button {
+        background: white;
+    }
+}
+
+.appPageSection__row {
+    display: flex;
+    gap: 1rem;
+}
+
+.appPageSection__pMeta {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: space-between;
+
+    span {
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+    }
+}
+
+.appPageSection__table {
+    width: 100%;
+}
+
+.appTableHeader {
+    display: flex;
+    justify-content: space-between;
+}
+
 .appPageSection__actions {
     display: flex;
     gap: 24px;