Merge pull request #304 from significa/SIGN-599

Change Get a Quote budget selector to radio button
significa · Jan 10, 2024 · ba0fa94 · ba0fa94
2 parents 2bee8a5 + 68660c2
commit ba0fa94
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 52 deletions.
diff --git a/src/components/contact-form.svelte b/src/components/contact-form.svelte
@@ -9,6 +9,7 @@
   import { browser } from '$app/environment';
   import { applyAction, enhance } from '$app/forms';
   import { page } from '$app/stores';
+  import { drawerLinks } from '$lib/actions/drawer-links';
   import { t } from '$lib/i18n';
   import { TrackingEvent, track } from '$lib/track';
   import {
@@ -74,7 +75,39 @@
     input: string;
   }>();
 
-  const budgetOptions = ['10k - 25k', '25k - 50k', '50k - 100k', '100k+'];
+  const budgetOptions = [
+    {
+      budget: '15.000€ to 50.000€',
+      description:
+        'For small or pilot projects, like marketing sites, PoCs, or branding, like  <a class="text-foreground-accent underline" href="/projects/yonder">Kota</a>. Ranging from 1 to 3 months.'
+    },
+    {
+      budget: '50.000€ to 100.000€',
+      description:
+        'For mid-size projects, like corporate websites or MVPs, like <a class="text-foreground-accent underline" href="/projects/passaporte-natura">PN2000</a>. Ranging from 3 to 6 months.'
+    },
+    {
+      budget: '100.000€ to 200.000€',
+      description:
+        'For projects like tailor-made e-commerces and mid-sized products, like <a class="text-foreground-accent underline" href="/projects/dia">Dia</a>. Ranging from 6 to 9 months.'
+    },
+    {
+      budget: '200.000€ to 300.000€',
+      description:
+        'For full-fledged, single-platform products of a higher complexity, like <a class="text-foreground-accent underline" href="/projects/bion">Bion</a>. Ranging from 6 to 12 months.'
+    },
+    {
+      budget: '300.000€ to 400.000€',
+      description:
+        'For full-fledged, multi-platform, larger products like <a class="text-foreground-accent underline" href="/projects/allo">allO</a>. Around a 1 year project.'
+    },
+    {
+      budget: '400.000€ and above',
+      description:
+        'For full-fledged, multi-platform, largely-complex products, like <a class="text-foreground-accent underline" href="/projects/oopsie">Oopsie</a>. Around a 1 year project.'
+    }
+  ];
+
   const careers = [
     DEFAULT_POSITION,
     ...($page.data.careers || []).map((j: ISbStoryData) => j.name)
@@ -217,20 +250,39 @@
       on:input={() => dispatch('input', 'message')}
     />
     {#if type === 'quote'}
-      <FloatingSelect
-        name="budget"
-        class="w-full"
-        label={t('contact.label.budget')}
-        bind:value={budget}
-        on:focus={() => dispatch('focus', 'budget')}
-        on:blur={() => dispatch('blur', 'budget')}
-        on:change={() => dispatch('input', 'budget')}
-      >
-        <option value="" class="text-foreground">Select budget</option>
-        {#each budgetOptions as option}
-          <option value={option} class="text-foreground">{option}</option>
-        {/each}
-      </FloatingSelect>
+      <div use:drawerLinks class="@container">
+        <p class="pt-5 block leading-none text-foreground-secondary">{t('contact.range')}</p>
+        <div class="mt-4 grid grid-cols-1 gap-4 mb-4 @2xl:grid-cols-2">
+          {#each budgetOptions as option}
+            <label
+              for={option.budget}
+              class={clsx(
+                'flex flex-col items-start gap-1 p-4 transition-all hover:bg-foreground/2 cursor-pointer border rounded-md hover:border-border-active hover:ring-2',
+                option.budget &&
+                  budget.includes(option.budget) &&
+                  'hover:ring-4 border-border-active ring-4'
+              )}
+            >
+              <div class="flex items-center justify-between w-full">
+                <p class="font-medium">{option.budget}</p>
+                <Radio
+                  bind:group={budget}
+                  id={option.budget}
+                  value={option.budget ?? ''}
+                  on:change={() => dispatch('input', 'budget')}
+                  name="budget"
+                  class={clsx(
+                    'shrink-0 cursor-pointer',
+                    option.budget && budget.includes(option.budget) && '[&+p:after]:animate-strike'
+                  )}
+                />
+              </div>
+              <!-- eslint-disable svelte/no-at-html-tags -->
+              <p class="text-sm text-foreground-secondary">{@html option.description}</p>
+            </label>
+          {/each}
+        </div>
+      </div>
     {/if}
     {#if type !== 'contact'}
       <FileUpload

diff --git a/src/components/pages/get-a-quote/form.svelte b/src/components/pages/get-a-quote/form.svelte
@@ -64,13 +64,17 @@
       character = 'attach';
     }
   } else if (lastChangedInput === 'budget') {
-    if (['10k - 25k'].includes(budget)) {
+    if (['15.000€ to 50.000€'].includes(budget)) {
       character = 'budget10';
-    } else if (['25k - 50k'].includes(budget)) {
+    } else if (['50.000€ to 100.000€'].includes(budget)) {
       character = 'budget25';
-    } else if (['50k - 100k'].includes(budget)) {
+    } else if (['100.000€ to 200.000€'].includes(budget)) {
+      character = 'budget25';
+    } else if (['200.000€ to 300.000€'].includes(budget)) {
+      character = 'budget50';
+    } else if (['300.000€ to 400.000€'].includes(budget)) {
       character = 'budget50';
-    } else if (['100k+'].includes(budget)) {
+    } else if (['400.000€ and above'].includes(budget)) {
       character = 'budget100';
     }
   } else if (
@@ -104,21 +108,47 @@
 {/if}
 <div
   class={clsx(
-    'container relative mx-auto mt-10 gap-8 overflow-hidden px-container pb-12',
+    'container relative mx-auto mt-10 gap-8 px-container pb-12',
     'md:mt-14 md:pb-20',
     'lg:mt-20 lg:flex lg:justify-between lg:pb-32'
   )}
 >
-  <div class="flex-1">
-    <div class="lg:max-w-xl">
-      <h1 class="text-7xl text-foreground-secondary">
-        {page.title}
-      </h1>
-      <span class="text-7xl">{page.subtitle}</span>
+  <div class="flex-2">
+    <div class="lg:max-w-xl h-full relative flex flex-col justify-between">
+      <div>
+        <h1 class="text-7xl text-foreground-secondary relative">
+          {page.title}
+        </h1>
+        <span class="text-7xl">{page.subtitle}</span>
+      </div>
+      {#if visible || dirty}
+        <!-- eslint-disable svelte/no-at-html-tags -->
+        <div
+          data-theme="light"
+          transition:fly|global={{ y: 250, opacity: 0, easing: circOut, duration: 250 }}
+          aria-hidden="true"
+          class="container mx-auto mt-10 gap-8 px-container relative bg-transparent pointer-events-none grow hidden lg:flex"
+        >
+          <div class="-mb-12 -ml-16 sticky -bottom-12 mt-auto">
+            {@html eggs[character]}
+            {#if character === 't-shirt' && truncatedText}
+              <div
+                class="absolute left-[235px] top-[40px] line-clamp-2 flex h-[76px] w-36 items-center justify-center text-center font-comic font-bold leading-snug"
+                style="transform: rotate(-4deg);"
+              >
+                <div class="h-fit w-24">
+                  I <span class="text-error">{'<3'}</span>
+                  {truncatedText}
+                </div>
+              </div>
+            {/if}
+          </div>
+        </div>
+      {/if}
     </div>
   </div>
   <div class={clsx('flex-1', 'lg:flex lg:justify-end')}>
-    <div class={clsx('mt-5 w-full', 'lg:max-w-xl')}>
+    <div class={clsx('mt-5 w-full', 'lg:max-w-3xl')}>
       <div>
         <ContactForm
           variant="quote"
@@ -138,29 +168,6 @@
           on:error={() => (error = true)}
           on:input={onInput}
         />
-        {#if visible || dirty}
-          <!-- eslint-disable svelte/no-at-html-tags -->
-          <div
-            data-theme="light"
-            transition:fly|global={{ y: 500, opacity: 1, easing: circOut, duration: 250 }}
-            aria-hidden="true"
-            class="absolute -bottom-20 left-2 hidden bg-transparent drop-shadow lg:block"
-            style="transform: rotate(-10deg)"
-          >
-            {@html eggs[character]}
-            {#if character === 't-shirt' && truncatedText}
-              <div
-                class="absolute left-[235px] top-[40px] line-clamp-2 flex h-[76px] w-36 items-center justify-center text-center font-comic font-bold leading-snug"
-                style="transform: rotate(-4deg);"
-              >
-                <div class="h-fit w-24">
-                  I <span class="text-error">{'<3'}</span>
-                  {truncatedText}
-                </div>
-              </div>
-            {/if}
-          </div>
-        {/if}
       </div>
     </div>
   </div>

diff --git a/src/lib/i18n/data.json b/src/lib/i18n/data.json
@@ -131,5 +131,6 @@
   "proposals.clients.description": "Some clients we work with",
   "proposals.awards": "Awards",
   "proposals.awards.description": "Celebrating great work achievements.",
-  "proposals.projects": "Projects"
+  "proposals.projects": "Projects",
+  "contact.range": "Choose a range"
 }
diff --git a/src/lib/i18n/types.ts b/src/lib/i18n/types.ts
@@ -131,7 +131,8 @@ export const TranslationKeys = [
   'proposals.clients.description',
   'proposals.awards',
   'proposals.awards.description',
-  'proposals.projects'
+  'proposals.projects',
+  'contact.range'
 ] as const;
 
 export type TranslationKey = (typeof TranslationKeys)[number];