From 3cefad871e9b5ca5884e635079ff4e710b5a951e Mon Sep 17 00:00:00 2001
From: kaaps <joao.guimaraes.ribeiro@gmail.com>
Date: Wed, 14 Feb 2024 17:11:22 +0000
Subject: [PATCH 1/9] fix: estimations

---
 src/components/blocks/estimation.svelte | 145 ++++++++++--------------
 src/lib/estimations.ts                  |  80 ++++++++++---
 2 files changed, 129 insertions(+), 96 deletions(-)

diff --git a/src/components/blocks/estimation.svelte b/src/components/blocks/estimation.svelte
index fd7783f6..1072e3e3 100644
--- a/src/components/blocks/estimation.svelte
+++ b/src/components/blocks/estimation.svelte
@@ -2,49 +2,40 @@
   import type { EstimationStoryblok } from '$types/bloks';
   import IllustrationEmply from '../illustrations/assets/illustration-emply.webp';
   import IllustrationEmplyLight from '../illustrations/assets/illustration-emply-light.webp';
-  import ArrowLight from '../illustrations/assets/arrow-estimations-white.webp';
-  import ArrowDark from '../illustrations/assets/arrow-estimations.webp';
   import { theme } from '$lib/stores/theme';
-  import { Icon, MultiSelect } from '@significa/svelte-ui';
+  import { Radio } from '@significa/svelte-ui';
   import clsx from 'clsx';
   import ContactForm from '$components/contact-form.svelte';
   import { estimations } from '$lib/estimations';
-  import type { ListboxOption } from '@melt-ui/svelte/dist/builders/listbox/types';
+
   import HandAsset from '../illustrations/assets/hand.webp';
-  import PreFooterAsset from '../illustrations/assets/pre-footer.webp';
-  import PreFooterAssetLight from '../illustrations/assets/pre-footer-light.webp';
+
   import { t } from '$lib/i18n';
 
   export let block: EstimationStoryblok;
 
   let open = false;
 
-  $: src = $theme === 'dark' ? IllustrationEmply : IllustrationEmplyLight;
-  $: srcArrow = $theme === 'dark' ? ArrowDark : ArrowLight;
-
-  let selected: Record<string, ListboxOption<string>[]> = {};
+  let selected: Array<string> = [];
 
-  $: selectedMap = Object.entries(selected).map(([key, value]) => ({ key, value }));
-
-  $: selectedKeyValues = selectedMap.map(({ value }) => value.map((v) => v.value)).flat();
+  $: src = $theme === 'dark' ? IllustrationEmply : IllustrationEmplyLight;
 
-  let estimationsMap = estimations.map((v) => v.options.filter((o) => o.name)).flat();
+  $: estimationsMap = estimations
+    .map((v, i) => v.options.filter((o) => o.name === selected[i]))
+    .flat();
 
-  $: combinedBudgetPower = estimationsMap
-    .filter((r) => selectedKeyValues.includes(r.name))
-    .reduce(
-      (a, b) => {
-        return {
-          lowBudget: a.lowBudget + Number(b['low-bud-point']),
-          highBudget: a.highBudget + Number(b['high-bud-point']),
-          lowPower: a.lowPower + Number(b['low-est-point']),
-          highPower: a.highPower + Number(b['high-est-point'])
-        };
-      },
-      { lowBudget: 0, highBudget: 0, lowPower: 0, highPower: 0 }
-    );
+  $: combinedBudgetPower = estimationsMap.reduce(
+    (a, b) => {
+      return {
+        lowBudget: a.lowBudget + Number(b['low-est-point']) * 14500,
+        highBudget: a.highBudget + Number(b['high-est-point']) * 14500,
+        lowPower: a.lowPower + Number(b['low-est-point']),
+        highPower: a.highPower + Number(b['high-est-point'])
+      };
+    },
+    { lowBudget: 0, highBudget: 0, lowPower: 0, highPower: 0 }
+  );
 
-  // open / close form
   $: Object.values(combinedBudgetPower).every((val) => val !== 0) ? (open = true) : (open = false);
 </script>
 
@@ -60,25 +51,16 @@
 
 <section class="container mx-auto px-container @container pt-20 pb-16 flex">
   <div
-    class="rounded-lg border w-full overflow-hidden flex min-h-[unset] xl:min-h-[710px] flex-col xl:flex-row relative"
+    class="rounded-lg border w-full overflow-hidden flex min-h-[unset] flex-col xl:flex-row relative"
   >
-    <img
-      class={clsx(
-        'absolute right-1/2 hidden xl:block transition-all ease-motion duration-500',
-        !open ? '-bottom-96 opacity-0 select-none' : 'bottom-0 opacity-100'
-      )}
-      src={$theme === 'dark' ? PreFooterAsset : PreFooterAssetLight}
-      width="354"
-      alt=""
-    />
     <div
       class={clsx(
-        'flex transition-all duration-500 ease-motion bg-background-panel rounded-b-lg xl:rounded-r-lg',
-        open ? 'xl:w-1/2 w-full ring-1 ring-border' : 'w-full'
+        'flex transition-all duration-300 ease-motion bg-background-panel rounded-b-lg xl:rounded-r-lg',
+        open ? 'ring-1 ring-border w-2/3' : 'w-full min-w-full'
       )}
     >
-      <div class="w-full @5xl:flex">
-        <div class="p-6 xl:p-8 flex flex-col justify-between h-full xl:max-w-2xl">
+      <div class="block w-full">
+        <div class="p-6 xl:p-8 flex flex-col h-full relative z-10">
           <div>
             <h3 class="text-4xl max-w-md">
               {block.title}
@@ -86,48 +68,38 @@
             <p class="my-4 text-xl text-foreground-secondary max-w-md">
               {block.description}
             </p>
-            <div class="py-4 xl:py-6 inline-flex lg:flex-row flex-col flex-wrap gap-4 relative">
-              <img
-                class={clsx(
-                  'hidden xl:block absolute top-12 -right-4 translate-x-full',
-                  open ? 'xl:hidden xl:opacity-0' : 'opacity-100'
-                )}
-                width="164"
-                src={srcArrow}
-                alt=""
-              />
-              {#each estimations as { name, options }}
-                <MultiSelect
-                  options={options.map((o) => o.name)}
-                  bind:selected={selected[name]}
-                  selectedLabel={name}
-                  icon="plus"
-                  class="w-full xs:w-fit"
-                />
-              {/each}
-            </div>
-
-            <div class="flex flex-wrap gap-4 max-w-xl z-10 relative">
-              {#each selectedMap as option}
-                {#each option.value as op}
+            <div class={clsx('pb-4 pt-2 xl:pb-8 gap-4 relative', open ? 'w-full' : 'w-2/3')}>
+              <div class="grid grid-cols-3 gap-y-4 gap-x-5">
+                {#each estimations as options, i}
                   <div
-                    class="flex items-center justify-between px-2.5 py-1.5 border border-border bg-background-offset text-xs font-semibold rounded-xs w-fit hover:transition-all focus-within:border-border-active focus-within:outline-none focus-within:ring-4 focus-within:ring-outline focus-within:transition-all hover:opacity-80"
+                    class="gap-2 grid last:col-span-2 last:grid-cols-2 last:gap-x-5 [&:last-child>p]:col-span-2"
                   >
-                    {op.label}
-                    <button
-                      class="outline-none flex"
-                      on:click={() => {
-                        let opSelected = selected[option.key].filter(
-                          (value) => value.label !== op.label
-                        );
-                        selected[option.key] = opSelected;
-                      }}
-                    >
-                      <Icon class="ml-2" icon="close" />
-                    </button>
+                    <p class="pt-4 leading-none text-foreground-secondary text-sm grid pb-2">
+                      {options.name}
+                    </p>
+
+                    {#each options.options as opt}
+                      <label
+                        for={`${options.name} / ${opt.name}`}
+                        class={clsx(
+                          'flex flex-col items-start py-2 px-3 transition-all hover:bg-foreground/2 cursor-pointer border rounded-sm hover:border-border-active hover:ring-2 text-sm/[20px] select-none'
+                        )}
+                      >
+                        <div class="flex items-center justify-between w-full">
+                          <p class="font-medium pr-3">{opt.name}</p>
+                          <Radio
+                            class="cursor-pointer shrink-0"
+                            id={`${options.name} / ${opt.name}`}
+                            value={opt.name}
+                            name={options.name}
+                            bind:group={selected[i]}
+                          />
+                        </div>
+                      </label>
+                    {/each}
                   </div>
                 {/each}
-              {/each}
+              </div>
             </div>
           </div>
 
@@ -152,11 +124,18 @@
             open ? 'xl:hidden xl:opacity-0' : 'right-0 opacity-100'
           )}
         >
-          <img class="max-w-[710px]" {src} alt="" />
+          <img class="max-w-[710px] pointer-events-none" {src} alt="" />
         </div>
       </div>
     </div>
-    <div class={clsx('xl:w-1/2 w-full p-8', open ? 'flex flex-col justify-between' : 'hidden')}>
+    <div
+      class={clsx(
+        'p-8 transition-all duration-300 ease-motion',
+        open
+          ? 'flex flex-col justify-between flex-0.5 shrink-0 translate-x-0 w-1/3'
+          : 'flex-0 translate-x-full'
+      )}
+    >
       <div>
         <h3 class="text-4xl max-w-[300px]">
           {block.form_title}
@@ -167,7 +146,7 @@
       </div>
       <ContactForm variant="estimations">
         <svelte:fragment slot="estimationsform">
-          <input name="estimations" hidden bind:value={selectedKeyValues} />
+          <!-- <input name="estimations" hidden bind:value={selectedKeyValues} /> -->
         </svelte:fragment>
       </ContactForm>
     </div>
diff --git a/src/lib/estimations.ts b/src/lib/estimations.ts
index 3c904348..6384716d 100644
--- a/src/lib/estimations.ts
+++ b/src/lib/estimations.ts
@@ -1,27 +1,81 @@
 export const estimations = [
   {
-    name: 'Strategy',
+    name: 'Website',
     options: [
       {
-        name: 'UX Research',
+        name: 'Design',
         'low-est-point': '1',
-        'high-est-point': '2',
-        'low-bud-point': '10000',
-        'high-bud-point': '20000'
+        'high-est-point': '2'
       },
       {
-        name: 'MVP build',
+        name: 'Design and development',
+        'low-est-point': '2',
+        'high-est-point': '4'
+      }
+    ]
+  },
+  {
+    name: 'E-commerce',
+    options: [
+      {
+        name: 'Design',
+        'low-est-point': '2',
+        'high-est-point': '3'
+      },
+      {
+        name: 'Design and development',
+        'low-est-point': '5',
+        'high-est-point': '8'
+      }
+    ]
+  },
+  {
+    name: 'Web app',
+    options: [
+      {
+        name: 'Design',
         'low-est-point': '1',
-        'high-est-point': '2',
-        'low-bud-point': '10000',
-        'high-bud-point': '20000'
+        'high-est-point': '3'
       },
       {
-        name: 'Website',
+        name: 'Design and development',
+        'low-est-point': '3',
+        'high-est-point': '6'
+      }
+    ]
+  },
+  {
+    name: 'Mobile app',
+    options: [
+      {
+        name: 'Design',
         'low-est-point': '1',
-        'high-est-point': '2',
-        'low-bud-point': '10000',
-        'high-bud-point': '20000'
+        'high-est-point': '3'
+      },
+      {
+        name: 'Design and development',
+        'low-est-point': '3',
+        'high-est-point': '6'
+      }
+    ]
+  },
+  {
+    name: 'Others (design and development)',
+    options: [
+      {
+        name: 'TV App',
+        'low-est-point': '2',
+        'high-est-point': '5'
+      },
+      {
+        name: 'Desktop App',
+        'low-est-point': '3',
+        'high-est-point': '6'
+      },
+      {
+        name: 'Watch App',
+        'low-est-point': '2',
+        'high-est-point': '4'
       }
     ]
   }

From 564746af8b608f459c75ec3e406b6c84edc63fc8 Mon Sep 17 00:00:00 2001
From: kaaps <joao.guimaraes.ribeiro@gmail.com>
Date: Fri, 23 Feb 2024 11:34:31 +0000
Subject: [PATCH 2/9] fix: checkbox

---
 src/components/blocks/estimation.svelte | 70 ++++++++++++++++++-------
 1 file changed, 50 insertions(+), 20 deletions(-)

diff --git a/src/components/blocks/estimation.svelte b/src/components/blocks/estimation.svelte
index 1072e3e3..3b385459 100644
--- a/src/components/blocks/estimation.svelte
+++ b/src/components/blocks/estimation.svelte
@@ -3,7 +3,7 @@
   import IllustrationEmply from '../illustrations/assets/illustration-emply.webp';
   import IllustrationEmplyLight from '../illustrations/assets/illustration-emply-light.webp';
   import { theme } from '$lib/stores/theme';
-  import { Radio } from '@significa/svelte-ui';
+  import { CheckboxGroup, Radio } from '@significa/svelte-ui';
   import clsx from 'clsx';
   import ContactForm from '$components/contact-form.svelte';
   import { estimations } from '$lib/estimations';
@@ -15,15 +15,25 @@
   export let block: EstimationStoryblok;
 
   let open = false;
+  $: src = $theme === 'dark' ? IllustrationEmply : IllustrationEmplyLight;
 
   let selected: Array<string> = [];
 
-  $: src = $theme === 'dark' ? IllustrationEmply : IllustrationEmplyLight;
+  $: selectedValuesToNotion = estimations
+    .map((estimation, index) => {
+      return estimation.options
+        .filter((option) => option.name === selected[index])
+        .map((option) => `${estimation.name} / ${option.name}`);
+    })
+    .flat()
+    .join(' , ');
 
   $: estimationsMap = estimations
     .map((v, i) => v.options.filter((o) => o.name === selected[i]))
     .flat();
 
+  $: console.log(selectedValuesToNotion);
+
   $: combinedBudgetPower = estimationsMap.reduce(
     (a, b) => {
       return {
@@ -71,6 +81,7 @@
             <div class={clsx('pb-4 pt-2 xl:pb-8 gap-4 relative', open ? 'w-full' : 'w-2/3')}>
               <div class="grid grid-cols-3 gap-y-4 gap-x-5">
                 {#each estimations as options, i}
+                  {@const isLast = estimations.length === i + 1}
                   <div
                     class="gap-2 grid last:col-span-2 last:grid-cols-2 last:gap-x-5 [&:last-child>p]:col-span-2"
                   >
@@ -79,23 +90,42 @@
                     </p>
 
                     {#each options.options as opt}
-                      <label
-                        for={`${options.name} / ${opt.name}`}
-                        class={clsx(
-                          'flex flex-col items-start py-2 px-3 transition-all hover:bg-foreground/2 cursor-pointer border rounded-sm hover:border-border-active hover:ring-2 text-sm/[20px] select-none'
-                        )}
-                      >
-                        <div class="flex items-center justify-between w-full">
-                          <p class="font-medium pr-3">{opt.name}</p>
-                          <Radio
-                            class="cursor-pointer shrink-0"
-                            id={`${options.name} / ${opt.name}`}
-                            value={opt.name}
-                            name={options.name}
-                            bind:group={selected[i]}
-                          />
-                        </div>
-                      </label>
+                      {#if isLast}
+                        <label
+                          for={`${options.name} / ${opt.name}`}
+                          class={clsx(
+                            'flex flex-col items-start py-2 px-3 transition-all hover:bg-foreground/2 cursor-pointer border rounded-sm hover:border-border-active hover:ring-2 text-sm/[20px] select-none'
+                          )}
+                        >
+                          <div class="flex items-center justify-between w-full">
+                            <p class="font-medium pr-3">{opt.name}</p>
+                            <CheckboxGroup
+                              bind:group={selected}
+                              id={`${options.name} / ${opt.name}`}
+                              value={opt.name}
+                              name={options.name}
+                            />
+                          </div>
+                        </label>
+                      {:else}
+                        <label
+                          for={`${options.name} / ${opt.name}`}
+                          class={clsx(
+                            'flex flex-col items-start py-2 px-3 transition-all hover:bg-foreground/2 cursor-pointer border rounded-sm hover:border-border-active hover:ring-2 text-sm/[20px] select-none'
+                          )}
+                        >
+                          <div class="flex items-center justify-between w-full">
+                            <p class="font-medium pr-3">{opt.name}</p>
+                            <Radio
+                              class="cursor-pointer shrink-0"
+                              id={`${options.name} / ${opt.name}`}
+                              value={opt.name}
+                              name={options.name}
+                              bind:group={selected[i]}
+                            />
+                          </div>
+                        </label>
+                      {/if}
                     {/each}
                   </div>
                 {/each}
@@ -146,7 +176,7 @@
       </div>
       <ContactForm variant="estimations">
         <svelte:fragment slot="estimationsform">
-          <!-- <input name="estimations" hidden bind:value={selectedKeyValues} /> -->
+          <input name="estimations" hidden bind:value={selectedValuesToNotion} />
         </svelte:fragment>
       </ContactForm>
     </div>

From d01787d66317325f4f9cac965382d70abcbe4fe2 Mon Sep 17 00:00:00 2001
From: kaaps <joao.guimaraes.ribeiro@gmail.com>
Date: Tue, 27 Feb 2024 14:59:40 +0000
Subject: [PATCH 3/9] refactor: estimations

---
 src/components/blocks/estimation.svelte | 119 +++++++++++++-----------
 src/lib/estimations.ts                  |   5 +-
 2 files changed, 70 insertions(+), 54 deletions(-)

diff --git a/src/components/blocks/estimation.svelte b/src/components/blocks/estimation.svelte
index 3b385459..e168013a 100644
--- a/src/components/blocks/estimation.svelte
+++ b/src/components/blocks/estimation.svelte
@@ -6,7 +6,7 @@
   import { CheckboxGroup, Radio } from '@significa/svelte-ui';
   import clsx from 'clsx';
   import ContactForm from '$components/contact-form.svelte';
-  import { estimations } from '$lib/estimations';
+  import { estimations, estimationsCheckbox } from '$lib/estimations';
 
   import HandAsset from '../illustrations/assets/hand.webp';
 
@@ -17,24 +17,31 @@
   let open = false;
   $: src = $theme === 'dark' ? IllustrationEmply : IllustrationEmplyLight;
 
-  let selected: Array<string> = [];
+  let selectedRadio: Array<string> = [];
+  let selectedCheckbox: Array<string> = [];
 
-  $: selectedValuesToNotion = estimations
-    .map((estimation, index) => {
-      return estimation.options
-        .filter((option) => option.name === selected[index])
-        .map((option) => `${estimation.name} / ${option.name}`);
-    })
-    .flat()
-    .join(' , ');
+  $: selectedValuesToNotion = [
+    ...estimations.flatMap((estimation, index) =>
+      estimation.options
+        .filter((option) => option.name === selectedRadio[index])
+        .map((option) => `${estimation.name} / ${option.name}`)
+    ),
+    ...estimationsCheckbox.flatMap((estimation) =>
+      estimation.options
+        .filter((option) => selectedCheckbox.includes(option.name))
+        .map((option) => `${estimation.name} / ${option.name}`)
+    )
+  ].join(' , ');
 
-  $: estimationsMap = estimations
-    .map((v, i) => v.options.filter((o) => o.name === selected[i]))
+  $: estimationsMapRadio = estimations
+    .map((v, i) => v.options.filter((o) => o.name === selectedRadio[i]))
     .flat();
 
-  $: console.log(selectedValuesToNotion);
+  $: estimationsMapCheckbox = estimationsCheckbox
+    .map((v) => v.options.filter((v) => selectedCheckbox.includes(v.name)))
+    .flat();
 
-  $: combinedBudgetPower = estimationsMap.reduce(
+  $: combinedBudgetPower = [...estimationsMapRadio, ...estimationsMapCheckbox].reduce(
     (a, b) => {
       return {
         lowBudget: a.lowBudget + Number(b['low-est-point']) * 14500,
@@ -46,7 +53,7 @@
     { lowBudget: 0, highBudget: 0, lowPower: 0, highPower: 0 }
   );
 
-  $: Object.values(combinedBudgetPower).every((val) => val !== 0) ? (open = true) : (open = false);
+  $: open = Object.values(combinedBudgetPower).every((val) => val !== 0);
 </script>
 
 <section class="border-t mt-20" id="estimation">
@@ -81,51 +88,57 @@
             <div class={clsx('pb-4 pt-2 xl:pb-8 gap-4 relative', open ? 'w-full' : 'w-2/3')}>
               <div class="grid grid-cols-3 gap-y-4 gap-x-5">
                 {#each estimations as options, i}
-                  {@const isLast = estimations.length === i + 1}
+                  <div class="gap-2 grid">
+                    <p class="pt-4 leading-none text-foreground-secondary text-sm grid pb-2">
+                      {options.name}
+                    </p>
+
+                    {#each options.options as opt}
+                      <label
+                        for={`${options.name} / ${opt.name}`}
+                        class={clsx(
+                          'flex flex-col items-start py-2 px-3 transition-all hover:bg-foreground/2 cursor-pointer border rounded-sm hover:border-border-active hover:ring-2 text-sm/[20px] select-none'
+                        )}
+                      >
+                        <div class="flex items-center justify-between w-full">
+                          <p class="font-medium pr-3">{opt.name}</p>
+                          <Radio
+                            class="cursor-pointer shrink-0"
+                            id={`${options.name} / ${opt.name}`}
+                            value={opt.name}
+                            name={options.name}
+                            bind:group={selectedRadio[i]}
+                          />
+                        </div>
+                      </label>
+                    {/each}
+                  </div>
+                {/each}
+                {#each estimationsCheckbox as options}
                   <div
-                    class="gap-2 grid last:col-span-2 last:grid-cols-2 last:gap-x-5 [&:last-child>p]:col-span-2"
+                    class="gap-2 grid col-span-2 grid-cols-2 gap-x-5 [&:last-child>p]:col-span-2"
                   >
                     <p class="pt-4 leading-none text-foreground-secondary text-sm grid pb-2">
                       {options.name}
                     </p>
 
                     {#each options.options as opt}
-                      {#if isLast}
-                        <label
-                          for={`${options.name} / ${opt.name}`}
-                          class={clsx(
-                            'flex flex-col items-start py-2 px-3 transition-all hover:bg-foreground/2 cursor-pointer border rounded-sm hover:border-border-active hover:ring-2 text-sm/[20px] select-none'
-                          )}
-                        >
-                          <div class="flex items-center justify-between w-full">
-                            <p class="font-medium pr-3">{opt.name}</p>
-                            <CheckboxGroup
-                              bind:group={selected}
-                              id={`${options.name} / ${opt.name}`}
-                              value={opt.name}
-                              name={options.name}
-                            />
-                          </div>
-                        </label>
-                      {:else}
-                        <label
-                          for={`${options.name} / ${opt.name}`}
-                          class={clsx(
-                            'flex flex-col items-start py-2 px-3 transition-all hover:bg-foreground/2 cursor-pointer border rounded-sm hover:border-border-active hover:ring-2 text-sm/[20px] select-none'
-                          )}
-                        >
-                          <div class="flex items-center justify-between w-full">
-                            <p class="font-medium pr-3">{opt.name}</p>
-                            <Radio
-                              class="cursor-pointer shrink-0"
-                              id={`${options.name} / ${opt.name}`}
-                              value={opt.name}
-                              name={options.name}
-                              bind:group={selected[i]}
-                            />
-                          </div>
-                        </label>
-                      {/if}
+                      <label
+                        for={`${options.name} / ${opt.name}`}
+                        class={clsx(
+                          'flex flex-col items-start py-2 px-3 transition-all hover:bg-foreground/2 cursor-pointer border rounded-sm hover:border-border-active hover:ring-2 text-sm/[20px] select-none'
+                        )}
+                      >
+                        <div class="flex items-center justify-between w-full">
+                          <p class="font-medium pr-3">{opt.name}</p>
+                          <CheckboxGroup
+                            bind:group={selectedCheckbox}
+                            id={`${options.name} / ${opt.name}`}
+                            value={opt.name}
+                            name={options.name}
+                          />
+                        </div>
+                      </label>
                     {/each}
                   </div>
                 {/each}
diff --git a/src/lib/estimations.ts b/src/lib/estimations.ts
index 6384716d..8f7e2bce 100644
--- a/src/lib/estimations.ts
+++ b/src/lib/estimations.ts
@@ -58,7 +58,10 @@ export const estimations = [
         'high-est-point': '6'
       }
     ]
-  },
+  }
+];
+
+export const estimationsCheckbox = [
   {
     name: 'Others (design and development)',
     options: [

From 74645a93f1a3de981ae3ba7762d94ea44fac6c59 Mon Sep 17 00:00:00 2001
From: kaaps <joao.guimaraes.ribeiro@gmail.com>
Date: Tue, 27 Feb 2024 17:07:47 +0000
Subject: [PATCH 4/9] fix: mobile

---
 src/components/blocks/estimation.svelte | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/blocks/estimation.svelte b/src/components/blocks/estimation.svelte
index e168013a..048c4181 100644
--- a/src/components/blocks/estimation.svelte
+++ b/src/components/blocks/estimation.svelte
@@ -72,8 +72,8 @@
   >
     <div
       class={clsx(
-        'flex transition-all duration-300 ease-motion bg-background-panel rounded-b-lg xl:rounded-r-lg',
-        open ? 'ring-1 ring-border w-2/3' : 'w-full min-w-full'
+        'flex transition-all duration-300 w-full ease-motion bg-background-panel rounded-b-lg xl:rounded-r-lg z-50',
+        open ? 'ring-1 ring-border xl:w-2/3' : 'w-full min-w-full'
       )}
     >
       <div class="block w-full">
@@ -85,8 +85,10 @@
             <p class="my-4 text-xl text-foreground-secondary max-w-md">
               {block.description}
             </p>
-            <div class={clsx('pb-4 pt-2 xl:pb-8 gap-4 relative', open ? 'w-full' : 'w-2/3')}>
-              <div class="grid grid-cols-3 gap-y-4 gap-x-5">
+            <div
+              class={clsx('pb-4 pt-2 xl:pb-8 gap-4 relative w-full', open ? 'w-full' : 'xl:w-2/3')}
+            >
+              <div class="flex flex-col sm:grid sm:grid-cols-3 gap-y-4 gap-x-5">
                 {#each estimations as options, i}
                   <div class="gap-2 grid">
                     <p class="pt-4 leading-none text-foreground-secondary text-sm grid pb-2">
@@ -116,7 +118,7 @@
                 {/each}
                 {#each estimationsCheckbox as options}
                   <div
-                    class="gap-2 grid col-span-2 grid-cols-2 gap-x-5 [&:last-child>p]:col-span-2"
+                    class="gap-2 flex flex-col sm:grid sm:col-span-2 sm:grid-cols-2 gap-x-5 [&:last-child>p]:col-span-2"
                   >
                     <p class="pt-4 leading-none text-foreground-secondary text-sm grid pb-2">
                       {options.name}
@@ -173,10 +175,10 @@
     </div>
     <div
       class={clsx(
-        'p-8 transition-all duration-300 ease-motion',
+        'p-8  transition-all duration-300 ease-motion w-full xl:w-auto z-10',
         open
-          ? 'flex flex-col justify-between flex-0.5 shrink-0 translate-x-0 w-1/3'
-          : 'flex-0 translate-x-full'
+          ? 'flex flex-col justify-between flex-0.5 shrink-0 translate-y-0 xl:translate-x-0 xl:w-1/3 xl:translate-y-0'
+          : '-translate-y-full xl:translate-x-full xl:translate-y-0 hidden xl:flex'
       )}
     >
       <div>

From ec80cab291f27acb379323e4dfe4f6a622e49ab1 Mon Sep 17 00:00:00 2001
From: kaaps <joao.guimaraes.ribeiro@gmail.com>
Date: Thu, 29 Feb 2024 11:11:22 +0000
Subject: [PATCH 5/9] fix: btn

---
 src/components/blocks/estimation.svelte | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/blocks/estimation.svelte b/src/components/blocks/estimation.svelte
index 048c4181..918dae92 100644
--- a/src/components/blocks/estimation.svelte
+++ b/src/components/blocks/estimation.svelte
@@ -3,7 +3,7 @@
   import IllustrationEmply from '../illustrations/assets/illustration-emply.webp';
   import IllustrationEmplyLight from '../illustrations/assets/illustration-emply-light.webp';
   import { theme } from '$lib/stores/theme';
-  import { CheckboxGroup, Radio } from '@significa/svelte-ui';
+  import { Button, CheckboxGroup, Radio } from '@significa/svelte-ui';
   import clsx from 'clsx';
   import ContactForm from '$components/contact-form.svelte';
   import { estimations, estimationsCheckbox } from '$lib/estimations';
@@ -72,7 +72,7 @@
   >
     <div
       class={clsx(
-        'flex transition-all duration-300 w-full ease-motion bg-background-panel rounded-b-lg xl:rounded-r-lg z-50',
+        'flex transition-all duration-300 ease-motion w-full  bg-background-panel rounded-b-lg xl:rounded-r-lg z-50',
         open ? 'ring-1 ring-border xl:w-2/3' : 'w-full min-w-full'
       )}
     >
@@ -91,10 +91,18 @@
               <div class="flex flex-col sm:grid sm:grid-cols-3 gap-y-4 gap-x-5">
                 {#each estimations as options, i}
                   <div class="gap-2 grid">
-                    <p class="pt-4 leading-none text-foreground-secondary text-sm grid pb-2">
-                      {options.name}
-                    </p>
-
+                    <div class="flex items-center pt-4 justify-between pb-2">
+                      <p class="leading-none text-foreground-secondary text-sm grid">
+                        {options.name}
+                      </p>
+                      <Button
+                        aria-label="Clear All"
+                        variant="ghost"
+                        icon="close"
+                        size="sm"
+                        on:click={() => {}}>Clear all</Button
+                      >
+                    </div>
                     {#each options.options as opt}
                       <label
                         for={`${options.name} / ${opt.name}`}
@@ -175,7 +183,7 @@
     </div>
     <div
       class={clsx(
-        'p-8  transition-all duration-300 ease-motion w-full xl:w-auto z-10',
+        'p-8 transition-all duration-300  w-full xl:w-auto z-10',
         open
           ? 'flex flex-col justify-between flex-0.5 shrink-0 translate-y-0 xl:translate-x-0 xl:w-1/3 xl:translate-y-0'
           : '-translate-y-full xl:translate-x-full xl:translate-y-0 hidden xl:flex'

From 3d4eb723d51a3d2eb2a071db132ad4baa8c78a74 Mon Sep 17 00:00:00 2001
From: kaaps <joao.guimaraes.ribeiro@gmail.com>
Date: Thu, 29 Feb 2024 11:50:54 +0000
Subject: [PATCH 6/9] feat: clear all

---
 src/components/blocks/estimation.svelte | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/blocks/estimation.svelte b/src/components/blocks/estimation.svelte
index 918dae92..44e98722 100644
--- a/src/components/blocks/estimation.svelte
+++ b/src/components/blocks/estimation.svelte
@@ -3,7 +3,7 @@
   import IllustrationEmply from '../illustrations/assets/illustration-emply.webp';
   import IllustrationEmplyLight from '../illustrations/assets/illustration-emply-light.webp';
   import { theme } from '$lib/stores/theme';
-  import { Button, CheckboxGroup, Radio } from '@significa/svelte-ui';
+  import { CheckboxGroup, Radio } from '@significa/svelte-ui';
   import clsx from 'clsx';
   import ContactForm from '$components/contact-form.svelte';
   import { estimations, estimationsCheckbox } from '$lib/estimations';
@@ -53,6 +53,8 @@
     { lowBudget: 0, highBudget: 0, lowPower: 0, highPower: 0 }
   );
 
+  $: console.log(selectedRadio);
+
   $: open = Object.values(combinedBudgetPower).every((val) => val !== 0);
 </script>
 
@@ -92,16 +94,17 @@
                 {#each estimations as options, i}
                   <div class="gap-2 grid">
                     <div class="flex items-center pt-4 justify-between pb-2">
-                      <p class="leading-none text-foreground-secondary text-sm grid">
+                      <p class="leading-none text-foreground-secondary text-sm">
                         {options.name}
                       </p>
-                      <Button
-                        aria-label="Clear All"
-                        variant="ghost"
-                        icon="close"
-                        size="sm"
-                        on:click={() => {}}>Clear all</Button
+                      <button
+                        class="leading-none text-foreground-secondary text-sm hover:opacity-80 transition-all"
+                        on:click={() => {
+                          selectedRadio[i] = '';
+                        }}
                       >
+                        Clear all
+                      </button>
                     </div>
                     {#each options.options as opt}
                       <label
@@ -117,6 +120,7 @@
                             id={`${options.name} / ${opt.name}`}
                             value={opt.name}
                             name={options.name}
+                            checked={selectedRadio[i] === opt.name}
                             bind:group={selectedRadio[i]}
                           />
                         </div>

From 708519361f691d69b657d5f6dc6165274a414469 Mon Sep 17 00:00:00 2001
From: kaaps <joao.guimaraes.ribeiro@gmail.com>
Date: Thu, 29 Feb 2024 15:16:50 +0000
Subject: [PATCH 7/9] feat: sticky2

---
 src/components/blocks/estimation.svelte | 103 ++++++++++++++----------
 src/lib/estimations.ts                  |  10 +--
 2 files changed, 65 insertions(+), 48 deletions(-)

diff --git a/src/components/blocks/estimation.svelte b/src/components/blocks/estimation.svelte
index 44e98722..19a3759c 100644
--- a/src/components/blocks/estimation.svelte
+++ b/src/components/blocks/estimation.svelte
@@ -70,67 +70,71 @@
 
 <section class="container mx-auto px-container @container pt-20 pb-16 flex">
   <div
-    class="rounded-lg border w-full overflow-hidden flex min-h-[unset] flex-col xl:flex-row relative"
+    class="rounded-lg xl:border w-full xl:overflow-hidden flex min-h-[unset] flex-col xl:flex-row relative"
   >
     <div
       class={clsx(
-        'flex transition-all duration-300 ease-motion w-full  bg-background-panel rounded-b-lg xl:rounded-r-lg z-50',
-        open ? 'ring-1 ring-border xl:w-2/3' : 'w-full min-w-full'
+        'flex transition-all duration-300 ease-motion w-full xl:bg-background-panel xl:rounded-b-lg xl:rounded-r-lg z-50',
+        open ? 'xl:ring-1 xl:ring-border xl:w-2/3' : 'w-full min-w-full'
       )}
     >
       <div class="block w-full">
-        <div class="p-6 xl:p-8 flex flex-col h-full relative z-10">
-          <div>
+        <div class="xl:p-8 flex flex-col h-full relative z-10">
+          <div class="order-1">
             <h3 class="text-4xl max-w-md">
               {block.title}
             </h3>
             <p class="my-4 text-xl text-foreground-secondary max-w-md">
               {block.description}
             </p>
+          </div>
+          <div class="xl:order-2 order-3">
             <div
               class={clsx('pb-4 pt-2 xl:pb-8 gap-4 relative w-full', open ? 'w-full' : 'xl:w-2/3')}
             >
               <div class="flex flex-col sm:grid sm:grid-cols-3 gap-y-4 gap-x-5">
                 {#each estimations as options, i}
                   <div class="gap-2 grid">
-                    <div class="flex items-center pt-4 justify-between pb-2">
+                    <div class="grid grid-cols-2 items-center pt-4 pb-2">
                       <p class="leading-none text-foreground-secondary text-sm">
                         {options.name}
                       </p>
                       <button
-                        class="leading-none text-foreground-secondary text-sm hover:opacity-80 transition-all"
+                        class="leading-none text-foreground-tertiary text-sm hover:text-foreground-secondary transition-all flex justify-end"
                         on:click={() => {
                           selectedRadio[i] = '';
                         }}
                       >
-                        Clear all
+                        {t('clear-all')}
                       </button>
                     </div>
-                    {#each options.options as opt}
-                      <label
-                        for={`${options.name} / ${opt.name}`}
-                        class={clsx(
-                          'flex flex-col items-start py-2 px-3 transition-all hover:bg-foreground/2 cursor-pointer border rounded-sm hover:border-border-active hover:ring-2 text-sm/[20px] select-none'
-                        )}
-                      >
-                        <div class="flex items-center justify-between w-full">
-                          <p class="font-medium pr-3">{opt.name}</p>
-                          <Radio
-                            class="cursor-pointer shrink-0"
-                            id={`${options.name} / ${opt.name}`}
-                            value={opt.name}
-                            name={options.name}
-                            checked={selectedRadio[i] === opt.name}
-                            bind:group={selectedRadio[i]}
-                          />
-                        </div>
-                      </label>
-                    {/each}
+                    <div class="grid grid-cols-2 xl:flex xl:flex-col gap-2">
+                      {#each options.options as opt}
+                        <label
+                          for={`${options.name} / ${opt.name}`}
+                          class={clsx(
+                            'flex flex-col items-start py-2 px-3 transition-all hover:bg-foreground/2 cursor-pointer border rounded-sm hover:border-border-active hover:ring-2 text-sm/[20px] select-none'
+                          )}
+                        >
+                          <div class="flex items-center justify-between w-full">
+                            <p class="font-medium pr-3">{opt.name}</p>
+                            <Radio
+                              class="cursor-pointer shrink-0"
+                              id={`${options.name} / ${opt.name}`}
+                              value={opt.name}
+                              name={options.name}
+                              checked={selectedRadio[i] === opt.name}
+                              bind:group={selectedRadio[i]}
+                            />
+                          </div>
+                        </label>
+                      {/each}
+                    </div>
                   </div>
                 {/each}
                 {#each estimationsCheckbox as options}
                   <div
-                    class="gap-2 flex flex-col sm:grid sm:col-span-2 sm:grid-cols-2 gap-x-5 [&:last-child>p]:col-span-2"
+                    class="gap-2 grid col-span-2 grid-cols-2 gap-x-5 [&:last-child>p]:col-span-2"
                   >
                     <p class="pt-4 leading-none text-foreground-secondary text-sm grid pb-2">
                       {options.name}
@@ -160,19 +164,32 @@
             </div>
           </div>
 
-          <div class="flex flex-col mt-5 xl:mt-3">
-            <p class="text-base font-medium text-foreground/60">{t('estimation.man.power')}</p>
-            <p class="text-xl font-medium">
-              {combinedBudgetPower.lowPower === 0
-                ? '-'
-                : combinedBudgetPower.lowPower + ` to ` + combinedBudgetPower.highPower}
-            </p>
-            <p class="text-base font-medium text-foreground/60 mt-6">{t('estimation.total')}</p>
-            <p class="text-xl font-medium text-foreground-accent">
-              {combinedBudgetPower.lowBudget === 0
-                ? '-'
-                : combinedBudgetPower.lowBudget + `€ to ` + combinedBudgetPower.highBudget + `€`}
-            </p>
+          <div
+            class="flex flex-col mt-2 xl:mt-3 mb-4 xl:mb-0 sticky top-0 xl:relative xl:top-auto order-2 xl:order-3 z-10 border-b xl:border-none w-screen xl:w-full -ml-5 xl:-m-0 bg-background xl:bg-transparent"
+          >
+            <div class="py-3 px-6 xl:py-0 xl:px-0 flex xl:block gap-9">
+              <div>
+                <p class="text-base font-medium text-foreground/60">{t('estimation.man.power')}</p>
+                <p class="text-md xl:text-xl font-medium">
+                  {combinedBudgetPower.lowPower === 0
+                    ? '-'
+                    : combinedBudgetPower.lowPower + ` to ` + combinedBudgetPower.highPower}
+                </p>
+              </div>
+              <div>
+                <p class="text-base font-medium text-foreground/60 mt-0 xl:mt-6">
+                  {t('estimation.total')}
+                </p>
+                <p class="text-md xl:text-xl font-medium text-foreground-accent">
+                  {combinedBudgetPower.lowBudget === 0
+                    ? '-'
+                    : combinedBudgetPower.lowBudget +
+                      `€ to ` +
+                      combinedBudgetPower.highBudget +
+                      `€`}
+                </p>
+              </div>
+            </div>
           </div>
         </div>
         <div
@@ -187,7 +204,7 @@
     </div>
     <div
       class={clsx(
-        'p-8 transition-all duration-300  w-full xl:w-auto z-10',
+        'pt-4 xl:p-8 transition-all duration-300  w-full xl:w-auto z-10',
         open
           ? 'flex flex-col justify-between flex-0.5 shrink-0 translate-y-0 xl:translate-x-0 xl:w-1/3 xl:translate-y-0'
           : '-translate-y-full xl:translate-x-full xl:translate-y-0 hidden xl:flex'
diff --git a/src/lib/estimations.ts b/src/lib/estimations.ts
index 8f7e2bce..6584e91b 100644
--- a/src/lib/estimations.ts
+++ b/src/lib/estimations.ts
@@ -8,7 +8,7 @@ export const estimations = [
         'high-est-point': '2'
       },
       {
-        name: 'Design and development',
+        name: 'Design and dev.',
         'low-est-point': '2',
         'high-est-point': '4'
       }
@@ -23,7 +23,7 @@ export const estimations = [
         'high-est-point': '3'
       },
       {
-        name: 'Design and development',
+        name: 'Design and dev.',
         'low-est-point': '5',
         'high-est-point': '8'
       }
@@ -38,7 +38,7 @@ export const estimations = [
         'high-est-point': '3'
       },
       {
-        name: 'Design and development',
+        name: 'Design and dev.',
         'low-est-point': '3',
         'high-est-point': '6'
       }
@@ -53,7 +53,7 @@ export const estimations = [
         'high-est-point': '3'
       },
       {
-        name: 'Design and development',
+        name: 'Design and dev.',
         'low-est-point': '3',
         'high-est-point': '6'
       }
@@ -63,7 +63,7 @@ export const estimations = [
 
 export const estimationsCheckbox = [
   {
-    name: 'Others (design and development)',
+    name: 'Others (design and dev.)',
     options: [
       {
         name: 'TV App',

From 6041e3ec7710fb110a998e7be4699de731026769 Mon Sep 17 00:00:00 2001
From: kaaps <joao.guimaraes.ribeiro@gmail.com>
Date: Thu, 29 Feb 2024 16:57:50 +0000
Subject: [PATCH 8/9] fix: mobile

---
 components.198185.json                        | 27 ++++++++++++-----
 src/components/blocks/estimation.svelte       | 30 +++++++++----------
 .../blocks/work-recognitions.svelte           |  2 +-
 src/components/top-navigation.svelte          |  4 ++-
 src/types/bloks.d.ts                          | 19 +++++++++---
 5 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/components.198185.json b/components.198185.json
index a69c258f..47671801 100644
--- a/components.198185.json
+++ b/components.198185.json
@@ -2247,31 +2247,40 @@
       "name": "landing-page",
       "display_name": null,
       "created_at": "2024-01-09T16:40:58.537Z",
-      "updated_at": "2024-01-16T10:35:21.911Z",
+      "updated_at": "2024-02-29T15:42:02.200Z",
       "id": 5142044,
       "schema": {
+        "keep_top_bar_hidden": {
+          "type": "boolean",
+          "pos": 0,
+          "required": false
+        },
         "blocks": {
           "type": "bloks",
           "restrict_type": "groups",
           "restrict_components": true,
           "component_whitelist": [],
-          "component_group_whitelist": ["c9011224-9690-43bd-b686-e8f60ef6c7f6"]
+          "component_group_whitelist": ["c9011224-9690-43bd-b686-e8f60ef6c7f6"],
+          "pos": 1
         },
         "tab-577daf7c-b61e-4a23-8184-bd9c01ae0af3": {
           "display_name": "SEO",
           "keys": ["seo_title", "seo_description", "seo_og_image", "change_frequency", "priority"],
-          "pos": 0,
+          "pos": 2,
           "type": "tab"
         },
         "seo_title": {
-          "type": "text"
+          "type": "text",
+          "pos": 3
         },
         "seo_description": {
-          "type": "text"
+          "type": "text",
+          "pos": 4
         },
         "seo_og_image": {
           "type": "asset",
-          "filetypes": ["images"]
+          "filetypes": ["images"],
+          "pos": 5
         },
         "change_frequency": {
           "type": "option",
@@ -2313,12 +2322,14 @@
               "value": "never",
               "name": "Never"
             }
-          ]
+          ],
+          "pos": 6
         },
         "priority": {
           "type": "number",
           "description": "The priority of the page relative to other pages on your site, where 0.1 is the lowest priority and 1.0 is the highest priority.\n\n1.0-0.8\nHomepage, product information, landing pages.\n\n0.7-0.4\nNews articles, some weather services, blog posts, pages that no site would be complete without.\n\n0.3-0.0\nFAQs, outdated info, old press releases, completely static pages that are still relevant enough to keep from deleting entirely.",
-          "decimals": 1
+          "decimals": 1,
+          "pos": 7
         }
       },
       "image": null,
diff --git a/src/components/blocks/estimation.svelte b/src/components/blocks/estimation.svelte
index 19a3759c..53b7146f 100644
--- a/src/components/blocks/estimation.svelte
+++ b/src/components/blocks/estimation.svelte
@@ -53,8 +53,6 @@
     { lowBudget: 0, highBudget: 0, lowPower: 0, highPower: 0 }
   );
 
-  $: console.log(selectedRadio);
-
   $: open = Object.values(combinedBudgetPower).every((val) => val !== 0);
 </script>
 
@@ -68,7 +66,7 @@
   </div>
 </section>
 
-<section class="container mx-auto px-container @container pt-20 pb-16 flex">
+<section class="container mx-auto xl:px-container @container pt-20 pb-16 flex">
   <div
     class="rounded-lg xl:border w-full xl:overflow-hidden flex min-h-[unset] flex-col xl:flex-row relative"
   >
@@ -79,8 +77,8 @@
       )}
     >
       <div class="block w-full">
-        <div class="xl:p-8 flex flex-col h-full relative z-10">
-          <div class="order-1">
+        <div class="flex flex-col h-full relative z-10">
+          <div class="order-1 xl:pt-8 xl:px-8 px-container">
             <h3 class="text-4xl max-w-md">
               {block.title}
             </h3>
@@ -88,11 +86,11 @@
               {block.description}
             </p>
           </div>
-          <div class="xl:order-2 order-3">
+          <div class="xl:order-2 order-3 xl:px-8 px-container">
             <div
               class={clsx('pb-4 pt-2 xl:pb-8 gap-4 relative w-full', open ? 'w-full' : 'xl:w-2/3')}
             >
-              <div class="flex flex-col sm:grid sm:grid-cols-3 gap-y-4 gap-x-5">
+              <div class="flex flex-col md:grid md:grid-cols-2 xl:grid-cols-3 gap-y-4 gap-x-5">
                 {#each estimations as options, i}
                   <div class="gap-2 grid">
                     <div class="grid grid-cols-2 items-center pt-4 pb-2">
@@ -165,19 +163,21 @@
           </div>
 
           <div
-            class="flex flex-col mt-2 xl:mt-3 mb-4 xl:mb-0 sticky top-0 xl:relative xl:top-auto order-2 xl:order-3 z-10 border-b xl:border-none w-screen xl:w-full -ml-5 xl:-m-0 bg-background xl:bg-transparent"
+            class="flex flex-col mt-2 xl:mt-3 mb-4 xl:mb-0 sticky top-0 xl:relative xl:top-auto order-2 xl:order-3 z-10 border-b xl:border-none w-screen xl:w-full bg-background xl:bg-transparent xl:pb-8 xl:px-8"
           >
-            <div class="py-3 px-6 xl:py-0 xl:px-0 flex xl:block gap-9">
-              <div>
-                <p class="text-base font-medium text-foreground/60">{t('estimation.man.power')}</p>
-                <p class="text-md xl:text-xl font-medium">
+            <div class="py-3 px-container xl:py-0 xl:px-0 flex xl:block gap-2 xl:gap-0">
+              <div class="w-1/2 xl:w-auto">
+                <p class="text-base/5 xl:text-base font-medium text-foreground/60">
+                  {t('estimation.man.power')}
+                </p>
+                <p class="text-md md:text-xl font-medium">
                   {combinedBudgetPower.lowPower === 0
                     ? '-'
                     : combinedBudgetPower.lowPower + ` to ` + combinedBudgetPower.highPower}
                 </p>
               </div>
-              <div>
-                <p class="text-base font-medium text-foreground/60 mt-0 xl:mt-6">
+              <div class="w-1/2 xl:w-auto">
+                <p class="text-base/5 xl:text-base font-medium text-foreground/60 mt-0 xl:mt-6">
                   {t('estimation.total')}
                 </p>
                 <p class="text-md xl:text-xl font-medium text-foreground-accent">
@@ -204,7 +204,7 @@
     </div>
     <div
       class={clsx(
-        'pt-4 xl:p-8 transition-all duration-300  w-full xl:w-auto z-10',
+        'pt-8 xl:p-8 transition-all duration-300  w-full xl:w-auto z-10 px-container',
         open
           ? 'flex flex-col justify-between flex-0.5 shrink-0 translate-y-0 xl:translate-x-0 xl:w-1/3 xl:translate-y-0'
           : '-translate-y-full xl:translate-x-full xl:translate-y-0 hidden xl:flex'
diff --git a/src/components/blocks/work-recognitions.svelte b/src/components/blocks/work-recognitions.svelte
index 57caf1ec..b339da2d 100644
--- a/src/components/blocks/work-recognitions.svelte
+++ b/src/components/blocks/work-recognitions.svelte
@@ -33,7 +33,7 @@
 
 <div style="background-image: url({src});">
   <section
-    class="container mx-auto px-container @container flex flex-col max-w-[1056px] pt-32 relative"
+    class="container mx-auto px-container @container flex flex-col max-w-[1056px] pt-16 xl:pt-32 relative"
   >
     <img src={EggChicken} class="absolute block drop-shadow-md -right-56 -bottom-80" alt="" />
     <img src={QuimHead} class="absolute block drop-shadow-md -left-60 top-12" alt="" />
diff --git a/src/components/top-navigation.svelte b/src/components/top-navigation.svelte
index c6948402..db234a95 100644
--- a/src/components/top-navigation.svelte
+++ b/src/components/top-navigation.svelte
@@ -19,6 +19,8 @@
   });
 
   const scrollStatus = createTopNavScrollStatus();
+
+  $: isNavHidden = $page.data?.page?.story?.content?.keep_top_bar_hidden;
 </script>
 
 <div class="mb-px h-[--topnav-height]">
@@ -28,7 +30,7 @@
       !$scrollStatus.isPastZero ? 'border-b-transparent' : 'border-b-border',
       !$scrollStatus.isPastThreshold
         ? 'translate-y-0'
-        : $scrollStatus.direction === 'down'
+        : $scrollStatus.direction === 'down' || isNavHidden
         ? '-translate-y-full'
         : 'translate-y-0'
     )}
diff --git a/src/types/bloks.d.ts b/src/types/bloks.d.ts
index 18779e7f..80a5a715 100644
--- a/src/types/bloks.d.ts
+++ b/src/types/bloks.d.ts
@@ -6,6 +6,7 @@ export type MultilinkStoryblok =
       cached_url?: string;
       anchor?: string;
       linktype?: 'story';
+      target?: '_self' | '_blank';
       story?: {
         name: string;
         created_at?: string;
@@ -42,11 +43,13 @@ export type MultilinkStoryblok =
       cached_url?: string;
       anchor?: string;
       linktype?: 'asset' | 'url';
+      target?: '_self' | '_blank';
       [k: string]: any;
     }
   | {
       email?: string;
       linktype?: 'email';
+      target?: '_self' | '_blank';
       [k: string]: any;
     };
 
@@ -88,13 +91,20 @@ export interface AboutPageStoryblok {
 }
 
 export interface AssetStoryblok {
-  alt?: string;
-  copyright?: string;
+  _uid?: string;
   id: number;
-  filename: string;
+  alt?: string;
   name: string;
-  title?: string;
   focus?: string;
+  source?: string;
+  title?: string;
+  filename: string;
+  copyright?: string;
+  fieldtype?: string;
+  meta_data?: null | {
+    [k: string]: any;
+  };
+  is_external_url?: boolean;
   [k: string]: any;
 }
 
@@ -589,6 +599,7 @@ export interface ImageGridStoryblok {
 }
 
 export interface LandingPageStoryblok {
+  keep_top_bar_hidden?: boolean;
   blocks?: (
     | ClientsStoryblok
     | CtaCardStoryblok

From 2ebfc6fd02a840062bf3816e1456fcfcd42b3d1b Mon Sep 17 00:00:00 2001
From: kaaps <joao.guimaraes.ribeiro@gmail.com>
Date: Fri, 1 Mar 2024 10:51:43 +0000
Subject: [PATCH 9/9] fix: spacing

---
 src/components/blocks/estimation.svelte | 4 ++--
 src/lib/i18n/data.json                  | 3 ++-
 src/lib/i18n/types.ts                   | 3 ++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/blocks/estimation.svelte b/src/components/blocks/estimation.svelte
index 53b7146f..818b5541 100644
--- a/src/components/blocks/estimation.svelte
+++ b/src/components/blocks/estimation.svelte
@@ -103,7 +103,7 @@
                           selectedRadio[i] = '';
                         }}
                       >
-                        {t('clear-all')}
+                        {t('estimate.clear')}
                       </button>
                     </div>
                     <div class="grid grid-cols-2 xl:flex xl:flex-col gap-2">
@@ -132,7 +132,7 @@
                 {/each}
                 {#each estimationsCheckbox as options}
                   <div
-                    class="gap-2 grid col-span-2 grid-cols-2 gap-x-5 [&:last-child>p]:col-span-2"
+                    class="gap-2 grid col-span-2 grid-cols-2 xl:gap-x-5 [&:last-child>p]:col-span-2"
                   >
                     <p class="pt-4 leading-none text-foreground-secondary text-sm grid pb-2">
                       {options.name}
diff --git a/src/lib/i18n/data.json b/src/lib/i18n/data.json
index 1c4a1240..68da7659 100644
--- a/src/lib/i18n/data.json
+++ b/src/lib/i18n/data.json
@@ -171,5 +171,6 @@
   "proposals.package.reply.manpower.title": "What is estimated manpower?",
   "proposals.package.reply.manpower.desc": "Manpower refers to the total capacity available for the project.",
   "handbook.last.updated": "Last updated",
-  "handbook.navigation.website": "Significa website"
+  "handbook.navigation.website": "Significa website",
+  "estimate.clear": "Clear"
 }
diff --git a/src/lib/i18n/types.ts b/src/lib/i18n/types.ts
index 987dca7c..ed609894 100644
--- a/src/lib/i18n/types.ts
+++ b/src/lib/i18n/types.ts
@@ -171,7 +171,8 @@ export const TranslationKeys = [
   'proposals.package.reply.manpower.title',
   'proposals.package.reply.manpower.desc',
   'handbook.last.updated',
-  'handbook.navigation.website'
+  'handbook.navigation.website',
+  'estimate.clear'
 ] as const;
 
 export type TranslationKey = (typeof TranslationKeys)[number];