Skip to content

Commit

Permalink
Merge pull request #285 from significa/sign-571-components-sections-s…
Browse files Browse the repository at this point in the history
…cope

feat: add Scope, Team, Estimates sections and "footer"components [SIGN-571, SIGN-572, SIGN-573, SIGN-575, SIGN-576, SIGN-577, SIGN-578]]
  • Loading branch information
julietafrade97 authored Oct 12, 2023
2 parents 47bc58e + e4b9403 commit 3b68f57
Show file tree
Hide file tree
Showing 23 changed files with 1,098 additions and 85 deletions.
15 changes: 9 additions & 6 deletions components.198185.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand All @@ -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,
Expand Down Expand Up @@ -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": {
Expand All @@ -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",
Expand Down
41 changes: 41 additions & 0 deletions src/components/awards-entry.svelte
Original file line number Diff line number Diff line change
@@ -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>
21 changes: 21 additions & 0 deletions src/components/clients.svelte
Original file line number Diff line number Diff line change
@@ -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>
60 changes: 11 additions & 49 deletions src/components/pages/services.svelte
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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>

Expand Down
3 changes: 2 additions & 1 deletion src/components/testimonials.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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"
Expand Down
31 changes: 30 additions & 1 deletion src/lib/i18n/data.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
31 changes: 30 additions & 1 deletion src/lib/i18n/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down
4 changes: 4 additions & 0 deletions src/lib/utils/currency.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export const formatter = new Intl.NumberFormat('pt-PT', {
style: 'currency',
currency: 'EUR'
});
44 changes: 44 additions & 0 deletions src/lib/utils/proposalTables.ts
Original file line number Diff line number Diff line change
@@ -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';
}
Loading

0 comments on commit 3b68f57

Please sign in to comment.