Merge pull request #319 from significa/SIGN-623

Block -> Steps, Services, Testimonials, Projects & Estimate card

package.json

@@ -62,7 +62,7 @@
     "@aws-sdk/s3-request-presigner": "3.413.0",
     "@melt-ui/svelte": "^0.70.0",
     "@notionhq/client": "^2.2.13",
-    "@significa/svelte-ui": "^0.0.32",
+    "@significa/svelte-ui": "^0.0.33",
     "@storyblok/js": "^2.3.0",
     "matter-js": "^0.19.0",
     "posthog-js": "^1.96.1",

src/components/blocks/clients.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { theme } from '$lib/stores/theme';
+  import { getImageAttributes } from '$lib/utils/cms';
+  import type { ClientStoryblok } from '$types/bloks';
+
+  export let block: ClientStoryblok;
+</script>
+
+<section class=" container mx-auto px-container pb-16 pt-20 lg:py-20">
+  <h3 class="text-center text-2xl text-foreground-secondary">{block.clients_title}</h3>
+  {#if block.clients}
+    <div class="flex flex-wrap justify-center gap-12 p-6">
+      {#each block.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>
+  {/if}
+</section>

src/components/blocks/cta-card.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { CtaCardStoryblok } from '$types/bloks';
+  import { Button } from '@significa/svelte-ui';
+  import CtaLight from '$components/illustrations/assets/cta-card-light.webp';
+  import CtaDark from '$components/illustrations/assets/cta-card-dark.webp';
+  import { theme } from '$lib/stores/theme';
+
+  export let block: CtaCardStoryblok;
+
+  $: src = $theme === 'dark' ? CtaLight : CtaDark;
+</script>
+
+<section class="container mx-auto px-container @container mt-8 md:mt-10 lg:mt-12">
+  <div class="flex overflow-hidden rounded-lg border bg-background-offset/80">
+    <div class="flex flex-col p-8">
+      <p class="text-2xl font-semibold">{block.title}</p>
+      <p class="text-2xl font-semibold text-foreground-secondary max-w-md">
+        {block.description}
+      </p>
+      {#if block.link_text}
+        <Button as="a" href="#estimation" size="md" class="w-fit mt-8 scroll-b"
+          >{block.link_text}</Button
+        >
+      {/if}
+    </div>
+    <div
+      class="hidden flex-1 flex-col justify-end ml-16 bg-no-repeat bg-cover bg-center lg:flex"
+      style="background-image: url({src});"
+    />
+  </div>
+</section>

src/components/blocks/dynamic-block.svelte

@@ -15,7 +15,13 @@
     hero: Hero,
     packages: Packages,
     'work-recognitions': WorkRecognitions,
-    estimation: Estimation
+    estimation: Estimation,
+    steps: Steps,
+    services: Services,
+    testimonials: Testimonials,
+    clients: Clients,
+    projects: Projects,
+    'cta-card': CtaCard
   };
 
   export type Blocks = keyof typeof map;
@@ -38,6 +44,12 @@
   import Packages from './packages.svelte';
   import WorkRecognitions from './work-recognitions.svelte';
   import Estimation from './estimation.svelte';
+  import Steps from './steps.svelte';
+  import Services from './services.svelte';
+  import Testimonials from './testimonials.svelte';
+  import Clients from './clients.svelte';
+  import Projects from './projects.svelte';
+  import CtaCard from './cta-card.svelte';
 
   export let block: { component: string };
 

src/components/blocks/estimation.svelte

@@ -2,6 +2,8 @@
   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 clsx from 'clsx';
@@ -18,6 +20,7 @@
   let open = false;
 
   $: src = $theme === 'dark' ? IllustrationEmply : IllustrationEmplyLight;
+  $: srcArrow = $theme === 'dark' ? ArrowDark : ArrowLight;
 
   let selected: Record<string, ListboxOption<string>[]> = {};
 
@@ -45,7 +48,7 @@
   $: Object.values(combinedBudgetPower).every((val) => val !== 0) ? (open = true) : (open = false);
 </script>
 
-<section class="border-t mt-20">
+<section class="border-t mt-20" id="estimation">
   <div
     class="container mx-auto px-container @container flex flex-col items-center text-center max-w-md"
   >
@@ -70,7 +73,7 @@
     />
     <div
       class={clsx(
-        'flex transition-all duration-300 ease-motion bg-background-panel rounded-b-lg xl:rounded-r-lg',
+        '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'
       )}
     >
@@ -83,7 +86,16 @@
             <p class="my-4 text-xl text-foreground-secondary max-w-md">
               {block.description}
             </p>
-            <div class="py-4 xl:py-6 flex lg:flex-row flex-col flex-wrap gap-4">
+            <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)}
@@ -95,7 +107,7 @@
               {/each}
             </div>
 
-            <div class="flex flex-wrap gap-4 max-w-xl">
+            <div class="flex flex-wrap gap-4 max-w-xl z-10 relative">
               {#each selectedMap as option}
                 {#each option.value as op}
                   <div
@@ -136,7 +148,7 @@
         </div>
         <div
           class={clsx(
-            'absolute bottom-0 hidden xl:block transition-all duration-1000',
+            'absolute bottom-0 hidden xl:block transition-all',
             open ? 'xl:hidden xl:opacity-0' : 'right-0 opacity-100'
           )}
         >

src/components/blocks/projects.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import ProjectEntry from '$components/project-entry.svelte';
+  import type { ProjectsStoryblok } from '$types/bloks';
+
+  export let block: ProjectsStoryblok;
+</script>
+
+<section class="mt-10 md:mt-14 lg:mt-20">
+  <div class="container mx-auto px-container">
+    <h2 class="text-5xl">{block.work_title}</h2>
+  </div>
+  <div class="mt-4 md:mt-6 lg:mt-8">
+    {#each block.projects || [] as project}
+      <ProjectEntry {project} />
+    {/each}
+  </div>
+</section>

src/components/blocks/services.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import Duck from '$components/pages/services/illustrations/duck.svelte';
+  import Hand from '$components/pages/services/illustrations/hand.svelte';
+  import Square from '$components/pages/services/illustrations/square.svelte';
+  import type { ServiceStoryblok } from '$types/bloks';
+
+  export let block: ServiceStoryblok;
+</script>
+
+<section class="mt-14 md:mt-24 lg:mb-12">
+  <div class="container mx-auto flex px-container">
+    <div class="xl:max-w-3xl">
+      <h3 class="text-5xl text-foreground-secondary">{block.services_title}</h3>
+      <h3 class="mb-2 text-5xl">{block.services_subtitle}</h3>
+      <p class="text-2xl text-foreground-secondary">{block.services_description}</p>
+    </div>
+  </div>
+</section>
+
+<section>
+  <div class="flex mt-11 md:mt-0">
+    {#if block.services}
+      <div class="w-full justify-between lg:border-b lg:border-t">
+        <div class="container relative mx-auto grid grid-cols-1 px-container md:grid-cols-3">
+          <Square class="absolute -bottom-10 left-[20%] hidden drop-shadow-md lg:block" />
+          <Hand
+            class="absolute -top-[76px] left-[54%] hidden drop-shadow-md md:-top-[60px] lg:block"
+          />
+          <Duck
+            class="absolute -bottom-14 right-[20%] hidden drop-shadow-md md:right-[7%] lg:block"
+          />
+          {#each block.services as service}
+            <div
+              class="flex flex-col border-t mt-11 md:mt-0 last:border-b last:pb-11 pb-0 md:border-t-0 md:last:border-b-0 lg:border-r lg:p-8 lg:last:border-r-0 lg:first-of-type:pl-0"
+            >
+              <p class="mb-2 mt-11 text-3xl font-semibold lg:mt-0">{service.title}</p>
+              {#if service.entry}
+                {#each service.entry as entry}
+                  <div class="flex flex-col">
+                    <p class="mt-8 text-xl font-semibold">{entry.title}</p>
+                    {#if entry.list}
+                      {#each entry.list as item}
+                        <div class="flex flex-col">
+                          <p class="mt-3 text-xl text-foreground-secondary">{item.label}</p>
+                        </div>
+                      {/each}
+                    {/if}
+                  </div>
+                {/each}
+              {/if}
+            </div>
+          {/each}
+        </div>
+      </div>
+    {/if}
+  </div>
+</section>

src/components/pages/get-a-quote/steps.svelte → src/components/blocks/steps.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
-  import type { GetAQuotePageStoryblok } from '$types/bloks';
+  import { theme } from '$lib/stores/theme';
+  import type { GetAQuotePageStoryblok, StepsStoryblok } from '$types/bloks';
   import clsx from 'clsx';
 
-  export let page: GetAQuotePageStoryblok;
+  export let block: StepsStoryblok | GetAQuotePageStoryblok;
 
   let lastItemHeight = 0;
 </script>
 
-<div class="border-t">
+<div class={clsx('border-t', block.variant === 'block' && 'border-t-0 md:pb-8 lg:pb-20')}>
   <div class={clsx('container mx-auto px-container', 'lg:flex')}>
     <!-- Title -->
     <div class="lg:flex-1">
       <div class={clsx('max-w-md pt-12', 'md:pt-20', 'lg:max-w-sm')}>
-        <h3 class="text-5xl text-foreground-secondary">{page.steps_title}</h3>
-        <p class="text-5xl">{page.steps_subtitle}</p>
+        <h3 class="text-5xl text-foreground-secondary">{block.steps_title}</h3>
+        <p class="text-5xl">{block.steps_subtitle}</p>
       </div>
     </div>
 
@@ -26,11 +27,16 @@
         'lg:border-l lg:border-dashed'
       )}
     >
-      <div class="absolute -left-px -top-32 hidden h-32 border-l lg:block" />
+      <div
+        class={clsx(
+          'absolute -left-px -top-32 hidden h-32 border-l lg:block',
+          $theme === 'light' ? 'light-fade' : 'dark-fade'
+        )}
+      />
       <div>
-        {#each page.steps || [] as step, i}
+        {#each block.steps || [] as step, i}
           <div class="mb-12 last:mb-0">
-            {#if i === (page.steps || []).length - 1}
+            {#if i === (block.steps || []).length - 1}
               <div
                 class="absolute -left-2 bottom-0 hidden w-4 bg-background lg:block"
                 style="height: {lastItemHeight}px"
@@ -54,3 +60,14 @@
     </div>
   </div>
 </div>
+
+<style lang="postcss">
+  .dark-fade {
+    border-image: linear-gradient(to top, theme('colors.border.DEFAULT') 0%, rgba(46, 46, 46, 0)) 1
+      100%;
+  }
+  .light-fade {
+    border-image: linear-gradient(to top, theme('colors.border.DEFAULT') 0%, rgba(247, 247, 247, 0))
+      1 100%;
+  }
+</style>