- added bando preview page;

- added bando form preview;

src/assets/scss/components/appForm.scss

@@ -8,6 +8,7 @@
   flex-direction: column;
   gap: 14px;
   padding: 5px 0;
+  width: 100%;
 
   label {
     font-size: 14px;

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;

src/assets/scss/components/formBuilder.scss

@@ -27,7 +27,14 @@
   padding: 20px;
   border: 1px #DDD;
   background: var(--surface-50);
-  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.10);
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.10);
+  
+  .dropzone {
+    width: 100%;
+    height: 100%;
+    border-radius: 1rem;
+    border: 3px dashed #bdbdbd;
+  }
 }
 
 .formBuilder__element {
@@ -36,11 +43,23 @@
   align-items: center;
   gap: 1rem;
   padding: 10px 20px;
-  border: 1px dashed var(--button-secondary-borderColor);
+  border: 1px solid var(--button-secondary-borderColor);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 21px;
+
+  .meta {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    align-items: flex-start;
+  }
+
+  .actions {
+    display: flex;
+    gap: 1rem;
+  }
 }
 
 .formBuilder__aside {
@@ -81,4 +100,17 @@
 
 .formBuilder__elementSettings {
   width: 40rem;
+}
+
+.formElementSettings {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.formElementSettings__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }

src/assets/scss/components/layout.scss

@@ -12,8 +12,7 @@ body {
   margin: 0;
   font-family: 'Montserrat';
 
-  p, span, input, label:not(.p-error), textarea, a, li, h1, h2, h3, h4, h5, h6, div, th, td, button {
-    font-family: 'Montserrat';
+  p, span:not(.p-button-label, .p-button-icon, .p-badge), input, label:not(.p-error), textarea, a, li, h1, h2, h3, h4, h5, h6, div, th, td {
     color: var(--global-textColor);
   }
 }
@@ -84,6 +83,21 @@ body {
   > main {
     flex: 1 1 auto;
     box-sizing: border-box;
-    padding: 0 24px 50px;
+    padding: 0 24px 20px;
+    display: flex;
+    flex-direction: column;
+
+    > footer {
+      margin-top: auto;
+      padding: 100px 0 0;
+
+      p {
+        text-align: center;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+    }
   }
 }

src/assets/scss/components/misc.scss

@@ -46,6 +46,14 @@
   }
 }
 
+.p-accordion {
+  width: 100%;
+}
+
+.p-steps .p-steps-item.p-highlight .p-steps-number {
+  background: var(--theme-highlight-background);
+  color: var(--primary-text);
+}
 
 
 .mb-2 {

src/assets/scss/components/pageBando.scss

@@ -3,10 +3,6 @@
   gap: 14px;
   align-items: flex-end;
   
-  .appForm__field {
-    width: 100%;
-  }
-  
   button {
     flex: 0 0 auto;
   }

src/assets/scss/theme.scss

@@ -13,6 +13,8 @@
   --button-secondary-borderColor: #C79807;
   --button-secondary-background: var(--menu-borderColor);
   --global-textColor: #4B5563;
+  --theme-highlight-background: #BADEBE;
+  --primary-text: #3B7C43;
 
   --card-full-background-color-2: #EEC137;
   --card-full-background-color-3: #FA8E42;