nex session

frontend/src/lib/components/Pagebuilder/Pagebuilder.svelte

@@ -15,6 +15,7 @@
     import TopDown from "../widgets/topDown.svelte"
     import { rerender } from "../../store"
     import IconCycleCircle from "../widgets/iconCycleCircle.svelte"
+    import IconCycleBox from "../widgets/iconCycleBox.svelte"
 
     export let row: Row
     export let pageId: string
@@ -36,7 +37,7 @@
 
 {#if Object.keys(row).length}
     {#if row.topTitle}
-        <h3>{row.topTitle}</h3>
+        <h3 class:red="{row.topTitleRed}">{row.topTitle}</h3>
     {/if}
     {#if nestedPath}
         <h3
@@ -59,9 +60,9 @@
     {#if row.subTitle}
         <h3>{row.subTitle}</h3>
     {/if}
-    <div class="row">
+    <div class="row" class:dominant="{row.columns.some((col) => col.contentType == 'iconCycleCircle')}">
         {#each row?.columns as col}
-            <div class="col">
+            <div class="col" class:dominant="{col.contentType == 'iconCycleCircle'}">
                 {#if col?.contentType == "text"}
                     <Text text="{col?.text}" />
                 {:else if col?.contentType == "textLink"}
@@ -90,6 +91,8 @@
                     <Persons col="{col}" pageId="{pageId}" />
                 {:else if col.contentType == "iconCycleCircle"}
                     <IconCycleCircle col="{col}" pageId="{pageId}" />
+                {:else}
+                    <IconCycleBox col="{col}" pageId="{pageId}" />
                 {/if}
             </div>
         {/each}
@@ -98,10 +101,13 @@
 
 <style lang="less">
     @import "../../assets/css/main.less";
+    .red {
+        color: #fa00ff !important;
+    }
     @media @tablet {
         h3 {
             font-size: 1.2rem;
-            padding-bottom: 20px;
+
             display: flex;
             align-items: center;
             gap: 10px;
@@ -111,25 +117,34 @@
             }
         }
         h2 {
-            font-size: 3.2rem;
+            font-size: 2.3rem;
         }
         h1 {
             font-size: 5rem;
         }
     }
-    h1,
-    h2 {
-        padding-bottom: 40px;
-    }
 
     .row {
+        padding-top: 40px;
         display: flex;
         align-items: flex-start;
         flex-wrap: wrap;
+        &.dominant {
+            @media (max-width: 1024px) {
+                flex-direction: row-reverse;
+            }
+        }
         @media (max-width: 640px) {
             flex-direction: column-reverse;
         }
         & > .col {
+            &.dominant {
+                @media (max-width: 1024px) {
+                    min-width: 80% !important;
+                }
+                flex: 5 !important;
+            }
+
             min-width: 40% !important;
 
             @media @desktop {