feat: add Scope, Team, Estimates sections and "footer"components [SIGN-571, SIGN-572, SIGN-573, SIGN-575, SIGN-576, SIGN-577, SIGN-578]]

components.198185.json

@@ -2526,7 +2526,7 @@
       "name": "proposal-department",
       "display_name": null,
       "created_at": "2023-09-11T15:40:29.996Z",
-      "updated_at": "2023-09-11T15:40:38.569Z",
+      "updated_at": "2023-09-21T09:46:47.753Z",
       "id": 4555221,
       "schema": {
         "title": {
@@ -2539,9 +2539,9 @@
       },
       "image": null,
       "preview_field": null,
-      "is_root": false,
+      "is_root": true,
       "preview_tmpl": null,
-      "is_nestable": true,
+      "is_nestable": false,
       "all_presets": [
         {
           "id": 1897410,
@@ -2845,7 +2845,7 @@
       "name": "proposal-team-entry",
       "display_name": null,
       "created_at": "2023-09-11T15:39:52.162Z",
-      "updated_at": "2023-09-13T16:08:55.251Z",
+      "updated_at": "2023-09-21T09:47:12.652Z",
       "id": 4555220,
       "schema": {
         "team_member": {
@@ -2855,15 +2855,18 @@
           "options": []
         },
         "department": {
-          "type": "bloks",
+          "type": "option",
           "restrict_type": "",
           "restrict_components": true,
           "component_whitelist": ["proposal-department"],
           "minimum": 1,
           "maximum": 1,
           "required": true,
           "pos": 1,
-          "key": "department"
+          "key": "department",
+          "use_uuid": true,
+          "source": "internal_stories",
+          "filter_content_type": ["proposal-department"]
         },
         "role": {
           "type": "bloks",

src/components/awards-entry.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { Button } from '@significa/svelte-ui';
+  import { getImageAttributes } from '$lib/utils/cms';
+  import type { AssetStoryblok } from '$types/bloks';
+
+  export let linkHref: string | undefined;
+  export let image: AssetStoryblok | undefined;
+  export let label: string | undefined;
+  export let name: string | undefined;
+  export let project: string | undefined;
+  export let linkText: string | undefined;
+</script>
+
+<div class="flex w-full flex-col-reverse items-center lg:flex-row">
+  <div class="mb-4 flex w-full items-center lg:mb-0">
+    {#if image?.filename}
+      {@const { alt, src, width, height } = getImageAttributes(image, {
+        size: [120, 0]
+      })}
+      <img class="mr-2 h-auto w-14 rounded-xs bg-background-offset" {src} {alt} {width} {height} />
+    {/if}
+    <div class="ml-4 flex-col">
+      <p class="text-base font-semibold text-foreground-secondary">
+        {label}
+      </p>
+      <p class="text-base font-semibold">{name}</p>
+    </div>
+  </div>
+  <div class="mb-4 w-full lg:mb-0">
+    <p class="text-3xl font-semibold">{project}</p>
+  </div>
+</div>
+<div class="w-1/3">
+  {#if linkHref}
+    <div class="flex-1 justify-end text-foreground-tertiary xl:flex">
+      <Button variant="secondary" arrow>
+        {linkText}
+      </Button>
+    </div>
+  {/if}
+</div>

src/components/clients.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { ClientLogoStoryblok } from '$types/bloks';
+  import { theme } from '$lib/stores/theme';
+  import { getImageAttributes } from '$lib/utils/cms';
+
+  export let clients: ClientLogoStoryblok[];
+</script>
+
+<div class="flex flex-wrap justify-center gap-12 p-6">
+  {#each clients as client}
+    {#if client.light_mode?.filename && $theme === 'light'}
+      {@const { src, alt, width, height } = getImageAttributes(client.light_mode)}
+      <img {src} {alt} {width} {height} class="h-auto max-h-9 w-auto object-contain" />
+    {/if}
+
+    {#if client.dark_mode?.filename && $theme === 'dark'}
+      {@const { src, alt, width, height } = getImageAttributes(client.dark_mode)}
+      <img {src} {alt} {width} {height} class="h-auto max-h-9 w-auto object-contain" />
+    {/if}
+  {/each}
+</div>

src/components/pages/services.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-  import { Button } from '@significa/svelte-ui';
   import Seo from '$components/seo.svelte';
   import Testimonials from '$components/testimonials.svelte';
   import PreFooter from '$components/pre-footer.svelte';
   import Square from './services/illustrations/square.svelte';
   import Hand from './services/illustrations/hand.svelte';
   import Duck from './services/illustrations/duck.svelte';
   import Timeline from './services/timeline.svelte';
-  import { theme } from '$lib/stores/theme';
   import { getAnchorFromCmsLink, getImageAttributes } from '$lib/utils/cms';
   import type { ServicesPageStoryblok } from '$types/bloks';
   import { drawerLinks } from '$lib/actions/drawer-links';
   import clsx from 'clsx';
   import { TrackingEvent, track } from '$lib/track';
   import { page } from '$app/stores';
+  import AwardsEntry from '$components/awards-entry.svelte';
+  import Clients from '$components/clients.svelte';
 
   export let data: ServicesPageStoryblok;
 </script>
@@ -70,40 +70,14 @@
                     }}
                     class="container mx-auto flex flex-col justify-between px-container py-5 lg:flex-row"
                   >
-                    <div class="flex w-full flex-col-reverse items-center lg:flex-row">
-                      <div class="mb-4 flex w-full items-center lg:mb-0">
-                        {#if award.image?.filename}
-                          {@const { alt, src, width, height } = getImageAttributes(award.image, {
-                            size: [120, 0]
-                          })}
-                          <img
-                            class="mr-2 h-auto w-14 rounded-xs bg-background-offset"
-                            {src}
-                            {alt}
-                            {width}
-                            {height}
-                          />
-                        {/if}
-                        <div class="ml-4 flex-col">
-                          <p class="text-base font-semibold text-foreground-secondary">
-                            {award.label}
-                          </p>
-                          <p class="text-base font-semibold">{award.name}</p>
-                        </div>
-                      </div>
-                      <div class="mb-4 w-full lg:mb-0">
-                        <p class="text-3xl font-semibold">{award.project}</p>
-                      </div>
-                    </div>
-                    <div class="w-1/3">
-                      {#if href}
-                        <div class="flex-1 justify-end text-foreground-tertiary xl:flex">
-                          <Button variant="secondary" arrow>
-                            {award.link_text}
-                          </Button>
-                        </div>
-                      {/if}
-                    </div>
+                    <AwardsEntry
+                      linkHref={href}
+                      image={award.image}
+                      label={award.label}
+                      name={award.name}
+                      project={award.project}
+                      linkText={award.link_text}
+                    ></AwardsEntry>
                   </a>
                 </li>
               {/each}
@@ -205,19 +179,7 @@
   <section class=" container mx-auto px-container pb-16 pt-20 lg:pb-20 lg:pt-40">
     <h3 class="text-center text-2xl text-foreground-secondary">{data.clients_title}</h3>
     {#if data.clients}
-      <div class="flex flex-wrap justify-center gap-12 p-6">
-        {#each data.clients as client}
-          {#if client.light_mode?.filename && $theme === 'light'}
-            {@const { src, alt, width, height } = getImageAttributes(client.light_mode)}
-            <img {src} {alt} {width} {height} class="h-auto max-h-9 w-auto object-contain" />
-          {/if}
-
-          {#if client.dark_mode?.filename && $theme === 'dark'}
-            {@const { src, alt, width, height } = getImageAttributes(client.dark_mode)}
-            <img {src} {alt} {width} {height} class="h-auto max-h-9 w-auto object-contain" />
-          {/if}
-        {/each}
-      </div>
+      <Clients clients={data.clients}></Clients>
     {/if}
   </section>
 

src/components/testimonials.svelte

@@ -20,6 +20,7 @@
   export let ctaLink: MultilinkStoryblok | undefined = undefined;
   export let ctaLabel: string | undefined = undefined;
   export let testimonials: RichtextTestimonialStoryblok[] | undefined = undefined;
+  export let hasBorder: boolean | undefined = true;
 
   let scroll: number;
   let testimonialsSection: HTMLElement;
@@ -31,7 +32,7 @@
 
 <svelte:window bind:scrollY={scroll} />
 
-<section class="border-t" bind:this={testimonialsSection}>
+<section class={clsx(hasBorder && 'border-t')} bind:this={testimonialsSection}>
   <div class="container mx-auto px-container pt-16 lg:pt-20">
     <div class="mx-auto flex max-w-xl flex-col items-center">
       <svelte:element this={as} class="text-center text-5xl text-foreground-secondary"

src/lib/i18n/data.json

@@ -102,5 +102,34 @@
   "proposals.hero.client": "Client",
   "proposals.hero.createdby": "Created by",
   "proposals.hero.date": "Date",
-  "proposals.nav.versions": "Versions"
+  "proposals.nav.versions": "Versions",
+  "proposals.scope.delivarable": "Delivarable",
+  "proposals.scope.service": "service",
+  "proposals.scope.multiple-features": "Multiple Features",
+  "proposals.show": "Show",
+  "proposals.hide": "Hide",
+  "proposals.team.department": "Department",
+  "proposals.team.team-member": "Team Member",
+  "proposals.team.role": "Role",
+  "proposals.team.rate": "Rate",
+  "proposals.included": "Included",
+  "proposals.scope.features": "Features",
+  "proposals.estimates.area": "Area",
+  "proposals.estimates.phases": "Phases",
+  "proposals.estimates.team": "Team",
+  "proposals.estimates.duration": "Duration",
+  "proposals.estimates.predicted-cost": "Predicted Cost",
+  "proposals.estimates.phase": "Phase",
+  "proposals.estimates.people": "People",
+  "proposals.estimates.person": "Person",
+  "proposals.estimates.subtotal": "Subtotal",
+  "proposals.estimates.discount": "Discount",
+  "proposals.estimates.gran-total": "Gran Total",
+  "proposals.reply.description": "Ready to start a wonderful product journey with us?",
+  "proposals.testimonials": "Testimonials",
+  "proposals.testimonials.description": "How it feels to work with Significa team.",
+  "proposals.clients.description": "Some clients we work with",
+  "proposals.awards": "Awards",
+  "proposals.awards.description": "Celebrating great work achievements.",
+  "proposals.projects": "Projects"
 }

src/lib/i18n/types.ts

@@ -102,7 +102,36 @@ export const TranslationKeys = [
   'proposals.hero.client',
   'proposals.hero.createdby',
   'proposals.hero.date',
-  'proposals.nav.versions'
+  'proposals.nav.versions',
+  'proposals.scope.delivarable',
+  'proposals.scope.service',
+  'proposals.scope.multiple-features',
+  'proposals.show',
+  'proposals.hide',
+  'proposals.team.department',
+  'proposals.team.team-member',
+  'proposals.team.role',
+  'proposals.team.rate',
+  'proposals.included',
+  'proposals.scope.features',
+  'proposals.estimates.area',
+  'proposals.estimates.phases',
+  'proposals.estimates.team',
+  'proposals.estimates.duration',
+  'proposals.estimates.predicted-cost',
+  'proposals.estimates.phase',
+  'proposals.estimates.people',
+  'proposals.estimates.person',
+  'proposals.estimates.subtotal',
+  'proposals.estimates.discount',
+  'proposals.estimates.gran-total',
+  'proposals.reply.description',
+  'proposals.testimonials',
+  'proposals.testimonials.description',
+  'proposals.clients.description',
+  'proposals.awards',
+  'proposals.awards.description',
+  'proposals.projects'
 ] as const;
 
 export type TranslationKey = (typeof TranslationKeys)[number];

src/lib/utils/currency.ts

@@ -0,0 +1,4 @@
+export const formatter = new Intl.NumberFormat('pt-PT', {
+  style: 'currency',
+  currency: 'EUR'
+});

src/lib/utils/proposalTables.ts

@@ -0,0 +1,44 @@
+export function getColumnsWidthClassName(
+  col: 'first' | 'central' | 'last' | 'sticky' | 'last-empty'
+) {
+  switch (col) {
+    case 'first':
+      return 'lg:w-[calc(var(--container-margin)+var(--section-title-width)+theme(padding.container)+3rem)]';
+    case 'central':
+      return 'lg:w-[--central-cols-width]';
+    case 'last':
+      return 'lg:w-[calc(var(--container-margin)+var(--last-col-content-width)+theme(padding.container))]';
+    case 'sticky':
+      return 'w-[--sticky-col-content-width]';
+    case 'last-empty':
+      return 'lg:w-[calc(var(--container-margin)+theme(padding.container))]';
+    default:
+      break;
+  }
+}
+
+export function getContainersPaddingClassName(side: 'left' | 'right') {
+  switch (side) {
+    case 'left':
+      return 'pl-[calc(theme(padding.container)+var(--container-margin))]';
+    case 'right':
+      return 'pr-[calc(theme(padding.container)+var(--container-margin))]';
+    default:
+      break;
+  }
+}
+
+export function getHeaderCellTextClassName(side: 'left' | 'right') {
+  switch (side) {
+    case 'left':
+      return 'text-xs uppercase tracking-wider text-foreground-secondary text-left';
+    case 'right':
+      return 'text-xs uppercase tracking-wider text-foreground-secondary text-right';
+    default:
+      break;
+  }
+}
+
+export function getStickyColClassName() {
+  return 'right-0 sticky md:relative bg-background md:bg-transparent drop-shadow-md md:drop-shadow-none';
+}