CLASSROOMIO-T-79: Implement empty state pages

Co-authored-by: Rotimi Best <[email protected]> Merge-request: CLASSROOMIO-MR-32 Merged-by: Best Admin <[email protected]>
2023-08-02 21:17:17 +00:00
parent 8ae0bffc34
commit 60d0c6d837
14 changed files with 161 additions and 209 deletions
@@ -1,10 +0,0 @@
-{
-  "prettier.jsxSingleQuote": true,
-  "prettier.singleQuote": true,
-  "svelte.plugin.svelte.format.config.singleQuote": true,
-  "editor.formatOnPaste": false,
-  "[svelte]": {
-    "editor.defaultFormatter": "svelte.svelte-vscode"
-  },
-  "editor.formatOnSave": true
-}
@@ -3,7 +3,7 @@
 </script>

 <div
-  class="{className} w-full h-80 flex items-center justify-center flex-col border rounded border-gray-200"
+  class="{className} w-full h-[517px] flex items-center justify-center flex-col border rounded border-gray-200"
 >
  <slot />
 </div>
@@ -9,16 +9,14 @@
  import CheckboxQuestion from '$lib/components/Question/CheckboxQuestion/index.svelte';
  import TextareaQuestion from '$lib/components/Question/TextareaQuestion/index.svelte';
  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import Box from '$lib/components/Box/index.svelte';
  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
  import Progress from '$lib/components/Progress/index.svelte';
  import { removeDuplicate } from '$lib/utils/functions/removeDuplicate';
  import { QUESTION_TYPE } from '$lib/components/Question/constants';
  import { STATUS } from './constants';
  import { getPropsForQuestion, filterOutDeleted } from './functions';
-  import {
-    formatAnswers,
-    getGroupMemberId,
-  } from '$lib/components/Course/function';
+  import { formatAnswers, getGroupMemberId } from '$lib/components/Course/function';
  import { submitExercise } from '$lib/utils/services/courses';
  import { fetchSubmission } from '$lib/utils/services/submissions';
  import { profile } from '$lib/utils/store/user';
@@ -42,21 +40,18 @@

    const prevAnswer = answers[id] || [];
    const formattedAnswer =
-      typeof value === 'string'
-        ? value
-        : removeDuplicate([...prevAnswer, ...(value || [])]);
+      typeof value === 'string' ? value : removeDuplicate([...prevAnswer, ...(value || [])]);

    $questionnaireMetaData.answers = {
      ...answers,
-      [id]: formattedAnswer,
+      [id]: formattedAnswer
    };

    if (moveToNextQuestion) {
      $questionnaireMetaData.currentQuestionIndex += 1;
    }

-    const isFinished =
-      !questions[$questionnaireMetaData.currentQuestionIndex - 1];
+    const isFinished = !questions[$questionnaireMetaData.currentQuestionIndex - 1];
    console.log(`isFinished`, isFinished);
    console.log(
      `$questionnaireMetaData.currentQuestionIndex`,
@@ -87,11 +82,7 @@
      return 100;
    }

-    return (
-      Math.round(
-        ((currentQuestionIndex - 1) / $questionnaire.questions.length) * 100
-      ) || 0
-    );
+    return Math.round(((currentQuestionIndex - 1) / $questionnaire.questions.length) * 100) || 0;
  }

  function getTotalPossibleGrade() {
@@ -113,7 +104,7 @@
    const args = {
      exerciseId,
      courseId,
-      submittedBy: getGroupMemberId(people, profileId),
+      submittedBy: getGroupMemberId(people, profileId)
    };
    const { data } = await fetchSubmission(args);
    hasSubmission = true;
@@ -123,31 +114,26 @@

      $questionnaireMetaData.answers = formatAnswers({
        questions: $questionnaire.questions,
-        answers: submission.answers,
+        answers: submission.answers
      });

      $questionnaireMetaData.totalPossibleGrade = getTotalPossibleGrade();

-      $questionnaireMetaData.currentQuestionIndex =
-        $questionnaire.questions.length;
+      $questionnaireMetaData.currentQuestionIndex = $questionnaire.questions.length;
      $questionnaireMetaData.isFinished = true;
      $questionnaireMetaData.status = submission.status_id;
      $questionnaireMetaData.finalTotalGrade = 0;
-      $questionnaireMetaData.grades = submission.answers.reduce(
-        (acc, answer) => {
-          acc[answer.question_id] = answer.point;
-          $questionnaireMetaData.finalTotalGrade += answer.point;
+      $questionnaireMetaData.grades = submission.answers.reduce((acc, answer) => {
+        acc[answer.question_id] = answer.point;
+        $questionnaireMetaData.finalTotalGrade += answer.point;

-          return acc;
-        },
-        {}
-      );
+        return acc;
+      }, {});
    }
  }

  $: {
-    currentQuestion =
-      $questionnaire.questions[$questionnaireMetaData.currentQuestionIndex - 1];
+    currentQuestion = $questionnaire.questions[$questionnaireMetaData.currentQuestionIndex - 1];
    if ($questionnaireMetaData.currentQuestionIndex > 0 && !currentQuestion) {
      $questionnaireMetaData.isFinished = true;
    }
@@ -182,16 +168,15 @@
    questionnaireMetaData={$questionnaireMetaData}
  />
 {:else if !$questionnaire.questions.length}
-  <div
-    class="w-4/5 h-40 m-auto flex items-center justify-center text-center border-2 border-gray-200 rounded-md"
-  >
-    <h3 class="dark:text-white text-2xl">
-      No questions added. <br />
+  <Box>
+    <img src="/images/empty-exercise-icon.svg" alt="Exercise svg" class="my-2.5" />
+    <h2 class="text-xl my-1.5">No question added for this exercise</h2>
+    <p class="text-sm text-center px-44">
      <RoleBasedSecurity allowedRoles={[1, 2]}>
        Click the <span class="text-blue-700">Edit</span> button to add.
      </RoleBasedSecurity>
-    </h3>
-  </div>
+    </p>
+  </Box>
 {:else if $questionnaireMetaData.currentQuestionIndex === 0}
  <div>
    <h2 class="my-1">{$questionnaire.title}</h2>
@@ -219,12 +204,7 @@
      {@html marked($questionnaire.description || 'No desription')}
    </article>

-    <PrimaryButton
-      onClick={handleStart}
-      label="Start"
-      className="my-5 float-right"
-      type="button"
-    />
+    <PrimaryButton onClick={handleStart} label="Start" className="my-5 float-right" type="button" />
  </div>
 {:else if $questionnaireMetaData.isFinished}
  <div class="flex items-center justify-between">
@@ -1,7 +1,6 @@
 <script>
  import { goto } from '$app/navigation';
  import { onMount } from 'svelte';
-  import AudioConsoleIcon from 'carbon-icons-svelte/lib/AudioConsole.svelte';
  import Box from '$lib/components/Box/index.svelte';
  import { Moon } from 'svelte-loading-spinners';
  import Backdrop from '$lib/components/Backdrop/index.svelte';
@@ -26,19 +25,19 @@
  let newExercise = {
    id: 1,
    title: '',
-    description: '',
+    description: ''
  };

  async function handleAddExercise() {
    const { data, error } = await createExercise({
      title: newExercise.title,
-      lesson_id: lessonId,
+      lesson_id: lessonId
    });

    console.log(`data, error `, data, error);
    lesson.update((_lesson) => ({
      ..._lesson,
-      exercises: [..._lesson.exercises, data[0]],
+      exercises: [..._lesson.exercises, data[0]]
    }));

    handleCancelAddExercise();
@@ -49,7 +48,7 @@
    newExercise = {
      id: $lesson.exercises.length + 1,
      title: '',
-      description: '',
+      description: ''
    };
  }

@@ -133,41 +132,20 @@
 {/if}

 {#if exerciseId}
-  <Exercise
-    {exerciseId}
-    {goBack}
-    refetchExercise={() => getExercise(exerciseId)}
-  />
+  <Exercise {exerciseId} {goBack} refetchExercise={() => getExercise(exerciseId)} />
 {:else}
-  <Modal
-    onClose={handleCancelAddExercise}
-    bind:open
-    modalHeading="Create an Exercise"
-    width="w-80"
-  >
-    <TextField
-      bind:value={newExercise.title}
-      autofocus={true}
-      placeholder="Exercise name"
-    />
+  <Modal onClose={handleCancelAddExercise} bind:open modalHeading="Create an Exercise" width="w-80">
+    <TextField bind:value={newExercise.title} autofocus={true} placeholder="Exercise name" />

    <div class="mt-5 flex items-center">
-      <PrimaryButton
-        className="px-6 py-3"
-        label="Submit"
-        onClick={handleAddExercise}
-      />
+      <PrimaryButton className="px-6 py-3" label="Submit" onClick={handleAddExercise} />
    </div>
  </Modal>

  <PageBody>
    <slot:fragment slot="header">
      <RoleBasedSecurity allowedRoles={[1, 2]}>
-        <PrimaryButton
-          className="mr-2"
-          label="Add"
-          onClick={() => (open = !open)}
-        />
+        <PrimaryButton className="mr-2" label="Add" onClick={() => (open = !open)} />
      </RoleBasedSecurity>
    </slot:fragment>

@@ -181,11 +159,15 @@
          <p class="dark:text-white mt-4 text-sm">Created Jul 3, 2021</p>
        </a>
      {:else}
-        <Box>
-          <AudioConsoleIcon size={32} class="carbon-icon w-80" />
-          <h3 class="text-3xl text-gray-500 dark:text-white">
-            No Exercise Added
-          </h3>
+        <Box className="mt-3">
+          <div class="flex justify-between flex-col items-center w-96">
+            <img src="/images/empty-exercise-icon.svg" alt="Exercise" class="my-2.5 mx-auto" />
+            <h2 class="text-xl my-1.5 font-normal">No exercises added for this lesson</h2>
+            <p class="text-sm text-center text-slate-500">
+              Share your knowledge with the world by creating engaging exercises. Add an exercise
+              now.
+            </p>
+          </div>
        </Box>
      {/each}
    </div>
@@ -8,11 +8,7 @@
  import Box from '$lib/components/Box/index.svelte';
  import EditContent from '$lib/components/EditContent/index.svelte';
  import TextField from '$lib/components/Form/TextField.svelte';
-  import {
-    lesson,
-    handleUpdateLessonMaterials,
-    isLessonDirty,
-  } from '../store/lessons';
+  import { lesson, handleUpdateLessonMaterials, isLessonDirty } from '../store/lessons';
  import * as CONSTANTS from './constants';

  export let mode = MODES.view;
@@ -42,10 +38,7 @@
      } else if (tab.value === 2) {
        badgeValue = !!note ? 1 : 0;
      } else {
-        badgeValue =
-          typeof video_url === 'string' && !!video_url
-            ? video_url.split(',').length
-            : 0;
+        badgeValue = typeof video_url === 'string' && !!video_url ? video_url.split(',').length : 0;
      }

      tab.badgeValue = badgeValue;
@@ -81,8 +74,14 @@
        />
      {:else}
        <Box>
-          <h3 class="text-3xl text-gray-500 dark:text-white">No slide added</h3>
-          <img alt="Slide not found" src="/notfound.webp" class="w-80" />
+          <div class="flex justify-between flex-col items-center w-96">
+            <img src="/images/empty-slide-icon.svg" alt="No Slide" class="my-2.5 mx-auto" />
+            <h2 class="text-xl my-1.5 font-normal">No slides yet</h2>
+            <p class="text-sm text-center text-slate-500">
+              Share your knowledge with the world by creating engaging slides. Add your slide's link
+              now.
+            </p>
+          </div>
        </Box>
      {/if}
    </TabContent>
@@ -99,8 +98,13 @@
        <MarkdownRender content={$lesson.materials.note} />
      {:else}
        <Box>
-          <h3 class="text-3xl text-gray-500 dark:text-white">No note added</h3>
-          <img alt="Lesson note not found" src="/notfound.webp" class="w-80" />
+          <div class="flex justify-between flex-col items-center w-96">
+            <img src="/images/empty-note-icon.svg" alt="No Note" class="my-2.5 mx-auto" />
+            <h2 class="text-xl my-1.5 font-normal">No Notes yet</h2>
+            <p class="text-sm text-center text-slate-500">
+              Share your knowledge with the world by creating engaging notes. Add your notes now.
+            </p>
+          </div>
        </Box>
      {/if}
    </TabContent>
@@ -129,10 +133,14 @@
        {/each}
      {:else}
        <Box>
-          <h3 class="text-3xl text-gray-500 dark:text-white">
-            No youtube video added
-          </h3>
-          <img alt="Video not found" src="/notfound.webp" class="w-80" />
+          <div class="flex justify-between flex-col items-center w-96">
+            <img src="/images/empty-video-icon.svg" alt="No Video" class="my-2.5 mx-auto" />
+            <h2 class="text-xl my-1.5 font-normal">No videos yet</h2>
+            <p class="text-sm text-center text-slate-500">
+              Share your knowledge with the world by creating engaging videos. Add your video link
+              now.
+            </p>
+          </div>
        </Box>
      {/if}
    </TabContent>
@@ -22,12 +22,7 @@
  // import Footer from '$lib/components/Footer/index.svelte';
  import Apps from '$lib/components/Apps/index.svelte';
  import PlayQuiz from '$lib/components/Org/Quiz/Play/index.svelte';
-  import {
-    isCoursesPage,
-    isOrgPage,
-    isLMSPage,
-    isQuizPage,
-  } from '$lib/utils/functions/app';
+  import { isCoursesPage, isOrgPage, isLMSPage, isQuizPage } from '$lib/utils/functions/app';
  import showAppsSideBar from '$lib/utils/functions/showAppsSideBar';
  import isPublicRoute from '$lib/utils/functions/routes/isPublicRoute';
  import { user, profile } from '$lib/utils/store/user';
@@ -58,14 +53,14 @@
        integrations: [
          new Integrations.BrowserTracing(),
          new CaptureConsole({
-            levels: ['error'],
-          }),
+            levels: ['error']
+          })
        ],
        environment: !dev ? 'production' : 'development',
        // Set tracesSampleRate to 1.0 to capture 100%
        // of transactions for performance monitoring.
        // We recommend adjusting this value in production
-        tracesSampleRate: 1.0,
+        tracesSampleRate: 1.0
      });
    }
  }
@@ -74,7 +69,7 @@
    const params = new URLSearchParams(window.location.search);
    // Get user profile
    const {
-      data: { session },
+      data: { session }
    } = await supabase.auth.getSession();
    const { user: authUser } = session;
    console.log('Get user profile', authUser);
@@ -83,20 +78,14 @@
    let {
      data: profileData,
      error,
-      status,
-    } = await supabase
-      .from('profile')
-      .select(`*`)
-      .eq('id', authUser?.id)
-      .single();
+      status
+    } = await supabase.from('profile').select(`*`).eq('id', authUser?.id).single();

    if (error && !profileData && status === 406 && authUser) {
      // User wasn't found, create profile
      console.log(`User wasn't found, create profile`);

-      const [regexUsernameMatch] = [
-        ...(authUser.email?.matchAll(/(.*)@/g) || []),
-      ];
+      const [regexUsernameMatch] = [...(authUser.email?.matchAll(/(.*)@/g) || [])];

      const { data, error } = await supabase
        .from('profile')
@@ -104,7 +93,7 @@
          id: authUser.id,
          username: regexUsernameMatch[1] + '1669991321770',
          fullname: regexUsernameMatch[1],
-          email: authUser.email,
+          email: authUser.email
        })
        .select();

@@ -125,7 +114,7 @@
            .insert({
              organization_id: $currentOrg.id,
              profile_id: $profile.id,
-              role_id: 3,
+              role_id: 3
            })
            .select();
          if (error) {
@@ -188,9 +177,7 @@
      const subdomain = matches?.[1] ?? '';

      if (!blockedSubdomain.includes(subdomain)) {
-        const answer = Array.isArray(matches)
-          ? !!subdomain && subdomain !== 'www'
-          : false;
+        const answer = Array.isArray(matches) ? !!subdomain && subdomain !== 'www' : false;

        $appStore.isStudentDomain = debug || answer;
        $appStore.siteNameFromDomain = debug ? 'codingdojo' : subdomain;
@@ -230,32 +217,30 @@
    //   return goto('/login');
    // }

-    const { data: authListener } = supabase.auth.onAuthStateChange(
-      (event, session) => {
-        // Log key events
-        console.log(`event`, event);
-        if (event == 'PASSWORD_RECOVERY') {
-          console.log('PASSWORD RESET');
-        }
-
-        if (path.includes('reset')) {
-          console.log('Dont change auth when on reset page');
-          return;
-        }
-
-        // Skip Authentication
-        if (skipAuth) return;
-
-        // Authentication Steps
-        if (event === 'SIGNED_IN') {
-          $user.fetchingUser = true;
-          getProfile();
-        } else {
-          console.log('not logged in, go to login');
-          return goto('/login');
-        }
+    const { data: authListener } = supabase.auth.onAuthStateChange((event, session) => {
+      // Log key events
+      console.log(`event`, event);
+      if (event == 'PASSWORD_RECOVERY') {
+        console.log('PASSWORD RESET');
      }
-    );
+
+      if (path.includes('reset')) {
+        console.log('Dont change auth when on reset page');
+        return;
+      }
+
+      // Skip Authentication
+      if (skipAuth) return;
+
+      // Authentication Steps
+      if (event === 'SIGNED_IN') {
+        $user.fetchingUser = true;
+        getProfile();
+      } else {
+        console.log('not logged in, go to login');
+        return goto('/login');
+      }
+    });

    // Update theme - dark or light mode
    $appStore.isDark = localStorage.getItem('theme') === 'dark';
@@ -266,6 +251,7 @@
    }

    return () => {
+      console.log('unsubscribed');
      authListener?.unsubscribe();
    };
  });
@@ -23,7 +23,7 @@
    lessons,
    handleAddLesson,
    handleSaveLesson,
-    handleDelete,
+    handleDelete
  } from '$lib/components/Course/components/Lesson/store/lessons';
  import { course, setCourse, group } from '$lib/components/Course/store';

@@ -55,7 +55,7 @@
        ref.scrollIntoView({
          block: 'start',
          behavior: 'smooth',
-          inline: 'nearest',
+          inline: 'nearest'
        });
      }
    }, 100);
@@ -66,10 +66,7 @@
  }

  function handleDndFinalize(e) {
-    const prevLessonsByOrder = $lessons.reduce(
-      (acc, l) => ({ ...acc, [l.id]: l.order }),
-      {}
-    );
+    const prevLessonsByOrder = $lessons.reduce((acc, l) => ({ ...acc, [l.id]: l.order }), {});
    $lessons = e.detail.items;

    // Only update the lesson order that changed
@@ -98,9 +95,7 @@
  });

  $: {
-    const user = $group.people.find(
-      (person) => person.profile_id === $profile.id
-    );
+    const user = $group.people.find((person) => person.profile_id === $profile.id);

    if (user) {
      isStudent = user.role_id === 3;
@@ -112,11 +107,7 @@
  <PageNav title="Lessons">
    <div slot="widget">
      <RoleBasedSecurity allowedRoles={[1, 2]}>
-        <PrimaryButton
-          label="Add"
-          onClick={addLesson}
-          isDisabled={!!lessonEditing}
-        />
+        <PrimaryButton label="Add" onClick={addLesson} isDisabled={!!lessonEditing} />
      </RoleBasedSecurity>
    </div>
  </PageNav>
@@ -130,8 +121,8 @@
        dragDisabled: isStudent,
        dropTargetStyle: {
          border: '2px #1d4ed8 solid',
-          'border-style': 'dashed',
-        },
+          'border-style': 'dashed'
+        }
      }}
      on:consider={handleDndConsider}
      on:finalize={handleDndFinalize}
@@ -153,7 +144,7 @@
                ? {}
                : {
                    title: `Click to ${lesson.is_complete ? 'lock' : 'unlock'}`,
-                    direction: 'right',
+                    direction: 'right'
                  }}
            >
              {#if lesson.is_complete}
@@ -218,11 +209,7 @@
            >
              <div class="mb-3 lg:mb-0">
                {#if lessonEditing === lesson.id}
-                  <Select
-                    bind:value={lesson.profile}
-                    options={$group.tutors}
-                    labelKey="fullname"
-                  />
+                  <Select bind:value={lesson.profile} options={$group.tutors} labelKey="fullname" />
                {:else if !lesson.profile}
                  <p class="dark:text-white ml-2 text-sm">No tutor added</p>
                {:else}
@@ -268,11 +255,7 @@
                  />
                {:else}
                  <PhoneIcon size={24} class="carbon-icon" />
-                  <a
-                    class="text-md ml-2"
-                    href={lesson.call_url || '#'}
-                    target="_blank"
-                  >
+                  <a class="text-md ml-2" href={lesson.call_url || '#'} target="_blank">
                    {lesson.call_url ? 'Join lesson' : 'No link'}
                  </a>
                {/if}
@@ -290,10 +273,14 @@
        </div>
      {:else}
        <Box>
-          <h3 class="text-3xl text-gray-500 dark:text-white">
-            No lesson added
-          </h3>
-          <img alt="No lesson added" src="/notfound2.gif" class="w-80" />
+          <div class="flex justify-between flex-col items-center w-96">
+            <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="my-2.5 mx-auto" />
+            <h2 class="text-xl my-1.5 font-normal">No lessons yet</h2>
+            <p class="text-sm text-center text-slate-500">
+              Share your knowledge with the world by creating engaging lessons. Start by clicking on
+              the New Lesson button.
+            </p>
+          </div>
        </Box>
      {/each}
    </section>
@@ -8,7 +8,6 @@ export const load = ({ params = { id: '' } }) => {
  //   lessonId
  // }
  const splitparams = lessonParams.split('/');
-  console.log('splitparams', splitparams);
  const [lessonId, exerciseRouteName, exerciseId] = splitparams;

  return {
@@ -16,6 +15,6 @@ export const load = ({ params = { id: '' } }) => {
    lessonId,
    exerciseRouteName,
    exerciseId,
-    isMaterialsTabActive: !exerciseRouteName,
+    isMaterialsTabActive: !exerciseRouteName
  };
 };
@@ -27,9 +27,7 @@
    if (!$course.id) {
      const { data: _data } = await fetchCourse(data.courseId);

-      lessonData = _data.lessons.find(
-        (lesson = { id: '' }) => lesson.id === lessonId
-      );
+      lessonData = _data.lessons.find((lesson = { id: '' }) => lesson.id === lessonId);
      setCourse(_data);
    } else if (prevLessonId !== lessonId) {
      const lesson = await fetchLesson(lessonId);
@@ -38,8 +36,7 @@

    prevLessonId = lessonId;

-    const totalExercises =
-      lessonData?.totalExercises?.[0] && lessonData.totalExercises[0].count;
+    const totalExercises = lessonData?.totalExercises?.[0] && lessonData.totalExercises[0].count;
    setLesson(lessonData, totalExercises || 0);
    isFetching = false;
  }
@@ -51,7 +48,7 @@
      ...l,
      id: data.lessonId,
      totalExercises,
-      materials: lessonData,
+      materials: lessonData
    }));
  }

@@ -61,28 +58,22 @@
    mode = MODES.view;
    fetchReqData(data.lessonId);
  }
-
-  $: console.log('data changed', data);
 </script>

-<CourseContainer
-  {isFetching}
-  {path}
-  isExercisePage={!data.isMaterialsTabActive && data.exerciseId}
->
+<CourseContainer {isFetching} {path} isExercisePage={!data.isMaterialsTabActive && data.exerciseId}>
  <PageNav
    navItems={[
      {
        label: 'Materials',
        isActive: data.isMaterialsTabActive,
-        href: path,
+        href: path
      },
      {
        label: 'Exercises',
        badgeValue: $lesson.totalExercises,
        isActive: !data.isMaterialsTabActive,
-        href: `${path}/exercises`,
-      },
+        href: `${path}/exercises`
+      }
    ]}
  >
    <svelte:fragment slot="widget">
@@ -104,11 +95,7 @@
  </PageNav>

  {#if !data.isMaterialsTabActive}
-    <Exercises
-      lessonId={data.lessonId}
-      exerciseId={data.exerciseId}
-      path={`${path}/exercises`}
-    />
+    <Exercises lessonId={data.lessonId} exerciseId={data.exerciseId} path={`${path}/exercises`} />
  {:else if !!data.lessonId}
    <PageBody>
      <Materials lessonId={data.lessonId} {mode} {prevMode} />
@@ -0,0 +1,3 @@
+<svg width="103" height="60" viewBox="0 0 103 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M46.4167 20.0773C46.4167 19.3739 48.2124 18.3521 51.0272 18.3521C53.8474 18.3521 55.6431 19.3739 55.6431 20.0773C55.6431 20.7802 53.8474 21.8019 51.0272 21.8019C48.2124 21.8019 46.4167 20.7802 46.4167 20.0773ZM6.06812 19.0357C16.9526 15.6398 43.0952 5.80188 50.2285 3.1017L96.3938 18.8622L51.0272 38.5434L21.0728 25.546L46.3671 22.2085C47.4688 22.8871 49.1213 23.3057 51.0272 23.3057C54.5139 23.3057 57.1469 21.9171 57.1469 20.0773C57.1469 18.237 54.5139 16.8488 51.0272 16.8488C48.0196 16.8488 45.6565 17.8822 45.0616 19.3474L15.7132 23.2198L6.06812 19.0357ZM76.013 54.1623C76.013 55.3482 75.0435 56.3128 73.8592 56.3128H31.4505C30.2662 56.3128 29.2968 55.3482 29.2968 54.1623V32.3934L50.4323 41.5614C50.6251 41.6446 50.8234 41.6859 51.0272 41.6859C51.2365 41.6859 51.4348 41.6446 51.6276 41.5614L76.013 30.9838V54.1623ZM13.1078 47.5402L14.6556 38.3595C14.7438 37.8318 14.5455 37.298 14.1378 36.9554C13.8789 36.7411 13.7357 36.4282 13.7357 36.0955C13.7357 35.4791 14.237 34.9768 14.8539 34.9768C15.4708 34.9768 15.9721 35.4791 15.9721 36.0955C15.9721 36.4398 15.8234 36.6849 15.6967 36.8303C15.4102 37.1581 15.278 37.5938 15.3386 38.024L16.6552 47.5402H13.1078ZM13.9891 32.0607C12.1273 32.4589 10.7282 34.1158 10.7282 36.0955C10.7282 37.0077 11.0256 37.8797 11.5654 38.5908L9.84133 48.7939C9.76972 49.2301 9.89094 49.6769 10.1774 50.0151C10.4638 50.3533 10.8824 50.5478 11.3286 50.5478H18.3793C18.8144 50.5478 19.2276 50.3599 19.514 50.0322C19.8004 49.7039 19.9271 49.2687 19.872 48.8374L18.4013 38.2014C18.7759 37.5679 18.9797 36.8414 18.9797 36.0955C18.9797 34.6066 18.1865 33.3028 16.9967 32.5768V27.0574L26.2893 31.0885V54.1623C26.2893 57.0068 28.6027 59.3203 31.4505 59.3203H73.8592C76.707 59.3203 79.0205 57.0068 79.0205 54.1623V29.6789L101.153 20.074C101.726 19.8272 102.084 19.2549 102.062 18.6335C102.034 18.0133 101.632 17.4718 101.043 17.2713L50.6912 0.0809364C50.3607 -0.0330849 49.9971 -0.0259476 49.6721 0.0979881C32.431 6.62592 4.11819 17.0328 1.49072 17.1909C0.780142 17.197 0.174225 17.6955 0.0310085 18.3884C-0.112208 19.0863 0.251331 19.7909 0.901315 20.074L13.9891 25.752V32.0607Z" fill="#0F62FE"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="64" height="87" viewBox="0 0 64 87" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.1925 9.56C3.1925 6.04839 6.23904 3.19176 9.98346 3.19176H50.1719C53.9157 3.19176 56.9623 6.04839 56.9623 9.56V10.714C56.9623 11.2944 57.2764 11.829 57.7849 12.1103C59.6769 13.1602 60.8075 14.9007 60.8075 16.7654V78.0157C60.8075 81.1096 57.761 83.6253 54.0165 83.6253H9.98346C6.23904 83.6253 3.1925 80.7687 3.1925 77.2576V9.56ZM0 9.56V77.2576C0 82.5292 4.4785 86.8184 9.98346 86.8184H54.0165C59.5215 86.8184 64 82.8695 64 78.0157V16.7654C64 14.0207 62.5792 11.486 60.1548 9.82567V9.56C60.1548 4.28784 55.6768 -0.000717163 50.1719 -0.000717163H9.98346C4.4785 -0.000717163 0 4.28784 0 9.56Z" fill="#0233BD"/>
+<path d="M12.1344 8.75594H50.9449C51.9123 8.97315 52.5512 9.36078 52.8436 9.90771C53.0986 10.3861 53.1081 10.9893 53.0374 11.5045H37.134C36.2523 11.5045 35.5378 12.2191 35.5378 13.1007V37.789L30.1715 32.8895C29.8663 32.611 29.4803 32.4723 29.0954 32.4723C28.6978 32.4723 28.3007 32.6193 27.9932 32.9134L23.004 37.6765V13.1007C23.004 12.2191 22.2894 11.5045 21.4078 11.5045H12.5583C10.8969 10.0358 10.9269 9.38139 10.928 9.37637C10.9943 9.20205 11.5747 8.88738 12.1344 8.75594ZM10.9559 14.3333C11.2416 14.5689 11.6014 14.6975 11.9707 14.6975H19.8115V41.407C19.8115 42.0464 20.1925 42.6239 20.7801 42.8751C20.9817 42.9615 21.1956 43.0038 21.4066 43.0038C21.8104 43.0038 22.2064 42.8512 22.51 42.5621L29.1189 36.2518L36.0574 42.5866C36.5241 43.0127 37.1986 43.1235 37.7784 42.8679C38.3571 42.6128 38.7303 42.0397 38.7303 41.407V14.6975H54.256C54.8948 14.6975 55.4724 14.3172 55.723 13.7301C55.8495 13.4372 56.9172 10.7955 55.674 8.43177C55.1421 7.41811 53.9725 6.10482 51.4255 5.59409C51.3225 5.57404 51.2172 5.5629 51.112 5.5629H11.9707C11.8782 5.5629 11.7852 5.57179 11.6933 5.58794C11.3636 5.64587 8.45571 6.22513 7.84027 8.56324C7.14742 11.1971 10.0141 13.5574 10.9559 14.3333Z" fill="#0233BD"/>
+<path d="M27.5598 24.8179C27.8199 24.7806 28.0444 24.6169 28.1602 24.3813L28.6119 23.4673L29.0625 24.3813C29.1783 24.6169 29.4028 24.7806 29.6629 24.8179L30.6727 24.9644L29.943 25.6756C29.7553 25.8594 29.669 26.1229 29.713 26.3813L29.8862 27.3872L28.9834 26.9126C28.867 26.8508 28.7389 26.8213 28.6119 26.8213C28.4849 26.8213 28.3568 26.8508 28.2399 26.9126L27.3376 27.3872L27.5102 26.3824C27.5553 26.1234 27.469 25.8594 27.2813 25.6756L26.5517 24.9644L27.5598 24.8179ZM25.8655 26.5261L25.4901 28.7105C25.4383 29.0102 25.562 29.3126 25.8065 29.4919C25.9463 29.5933 26.11 29.6445 26.2766 29.6445C26.4036 29.6445 26.5311 29.6133 26.6481 29.5526L28.6119 28.5211L30.5746 29.5526C30.8436 29.6935 31.1689 29.6707 31.4151 29.4919C31.6607 29.3137 31.7832 29.0107 31.7325 28.7105L31.3577 26.5261L32.9445 24.9789C33.1634 24.7678 33.2408 24.4498 33.1472 24.1602C33.0536 23.8717 32.8036 23.6611 32.5028 23.6177L30.3089 23.2985L29.3281 21.3108C29.1934 21.0373 28.916 20.8646 28.6119 20.8646C28.3078 20.8646 28.0305 21.0373 27.8957 21.3108L26.9148 23.2985L24.7204 23.6177C24.4208 23.6611 24.1707 23.8717 24.076 24.1602C23.9825 24.4498 24.0604 24.7678 24.2788 24.9789L25.8655 26.5261Z" fill="#0233BD"/>
+</svg>
@@ -0,0 +1,18 @@
+<svg width="73" height="83" viewBox="0 0 73 83" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2631_30489)">
+<path d="M50.1088 71.5476C50.189 72.0715 49.8091 72.5635 49.2605 72.6471L34.4274 74.9078C33.8789 74.9914 33.3697 74.6347 33.2899 74.1111L33.0829 72.7515C33.0028 72.2275 33.3827 71.7352 33.9312 71.6516L48.7643 69.3909C49.3129 69.3073 49.8217 69.664 49.9019 70.188L50.1088 71.5476Z" fill="#0F62FE"/>
+<path d="M49.1937 76.4804C49.2735 77.0044 48.9797 77.4837 48.538 77.5512L36.583 79.3729C36.1409 79.4404 35.7181 79.0703 35.6384 78.5467L35.431 77.1871C35.3513 76.6635 35.6447 76.1842 36.0868 76.1167L48.0418 74.2947C48.4835 74.2275 48.9066 74.5972 48.9868 75.1212L49.1937 76.4804Z" fill="#0F62FE"/>
+<path d="M45.9403 79.2983C46.208 81.0546 45.0013 82.695 43.2449 82.9628C41.4886 83.2306 39.8479 82.0238 39.5801 80.2675" fill="#0F62FE"/>
+<path d="M31.9097 67.1429L49.519 64.4592C49.5218 64.3706 49.5172 64.2536 49.4954 64.1106C49.4649 63.9092 49.4234 63.77 49.3897 63.6843L48.7248 63.5803L48.6587 62.687C48.2644 57.3648 50.7946 52.6563 52.6423 49.2181C53.2703 48.0489 53.8129 47.0393 54.0996 46.2609L54.1116 46.2297C54.2198 45.9608 54.3245 45.6825 54.4229 45.4028L54.4275 45.3891C55.5053 42.3128 55.8114 38.9604 55.3138 35.6933C54.9128 33.0626 54.0241 30.5872 52.6732 28.3361C51.3695 26.1633 49.6915 24.2892 47.686 22.7666C45.6837 21.2464 43.4561 20.1528 41.0651 19.5164C38.5929 18.8589 36.0518 18.7211 33.5129 19.1084C30.9739 19.4956 28.5892 20.3837 26.4252 21.7479C24.3322 23.0674 22.5316 24.7749 21.0729 26.8229C19.6124 28.8738 18.5687 31.1625 17.9713 33.6252C17.3521 36.1761 17.2418 38.804 17.6428 41.4353C18.1892 45.0194 19.6739 48.3768 21.9374 51.1449L21.9584 51.1716C22.4687 51.8357 23.2899 52.6461 24.2412 53.5836C27.0613 56.3654 30.9237 60.1747 32.0756 65.3879L32.1968 65.9365L31.8384 66.3571C31.8177 66.3926 31.76 66.5532 31.7987 66.8073C31.8226 66.9622 31.8697 67.0733 31.9097 67.1429ZM50.2011 66.6372L32.0267 69.4074C30.8681 69.5841 29.7886 68.5914 29.5686 67.1475C29.4765 66.5441 29.5521 65.947 29.7714 65.453C28.6423 61.0944 25.1953 57.6941 22.6571 55.1903C21.6524 54.1993 20.7844 53.3429 20.1799 52.5596C17.667 49.482 16.0185 45.7528 15.4123 41.7752C14.9667 38.8525 15.0901 35.9312 15.7789 33.0932C16.4441 30.3501 17.6073 27.8002 19.235 25.5143C20.8652 23.2255 22.8791 21.316 25.222 19.839C27.6503 18.3086 30.3252 17.3123 33.1727 16.878C36.0205 16.444 38.8708 16.5979 41.6449 17.3362C44.3212 18.0482 46.8128 19.2707 49.0509 20.9698C51.2855 22.6671 53.1554 24.7545 54.6081 27.175C56.1108 29.6792 57.0986 32.4308 57.5438 35.3538C57.8253 37.1987 57.8791 39.0654 57.7041 40.9033C57.5733 42.2706 57.3165 43.6239 56.9373 44.9407L57.0164 44.959L56.5458 46.1668C56.4397 46.4672 56.3276 46.7663 56.2113 47.0562C55.8686 47.98 55.2944 49.049 54.6299 50.286C52.986 53.345 50.7605 57.4864 50.8789 61.9304C51.2444 62.2604 51.5811 62.8209 51.7258 63.7704C51.9968 65.5489 51.1555 66.4917 50.2011 66.6372Z" fill="#0F62FE"/>
+<path d="M32.3209 11.2838C31.7049 11.3777 31.1296 10.9546 31.0354 10.3389L29.6576 1.29531C29.5637 0.680335 29.9868 0.10402 30.6029 0.0126524C31.2185 -0.0822287 31.7941 0.339479 31.888 0.957965L33.2662 9.99872C33.36 10.6147 32.9369 11.19 32.3209 11.2838Z" fill="#0F62FE"/>
+<path d="M71.4025 32.2497L62.3607 33.6276C61.745 33.7214 61.1694 33.2983 61.0755 32.6827C60.9817 32.0666 61.4048 31.491 62.0208 31.3972L71.0627 30.019C71.6783 29.9251 72.2539 30.3486 72.3478 30.9642C72.4416 31.5799 72.0185 32.1559 71.4025 32.2497Z" fill="#0F62FE"/>
+<path d="M10.34 41.556L1.29813 42.9342C0.682108 43.0281 0.106853 42.6046 0.0130261 41.9886C-0.0808009 41.3729 0.342296 40.7977 0.958321 40.7038L10.0002 39.3256C10.6158 39.2318 11.1911 39.6552 11.2853 40.2709C11.3791 40.8869 10.9556 41.4622 10.34 41.556Z" fill="#0F62FE"/>
+<path d="M51.4539 13.6669C51.1985 13.7056 50.9289 13.6574 50.6921 13.5112C50.1618 13.1844 49.9973 12.489 50.3245 11.959L55.1279 4.17387C55.4551 3.64675 56.1502 3.48157 56.6805 3.80838C57.2108 4.1352 57.3752 4.831 57.0481 5.36163L52.2446 13.1437C52.0633 13.4371 51.7699 13.6188 51.4539 13.6669Z" fill="#0F62FE"/>
+<path d="M14.5366 19.2935C14.2207 19.342 13.8865 19.2566 13.6264 19.0303L6.72223 13.0313C6.25204 12.623 6.2018 11.9104 6.61049 11.4402C7.01918 10.9696 7.73149 10.9197 8.20168 11.3281L15.1059 17.3274C15.5764 17.736 15.6263 18.448 15.2176 18.9186C15.0349 19.1287 14.7917 19.2549 14.5366 19.2935Z" fill="#0F62FE"/>
+</g>
+<defs>
+<clipPath id="clip0_2631_30489">
+<rect width="72.3601" height="83" fill="white" transform="matrix(1 0 0 -1 0 83)"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="84" height="49" viewBox="0 0 84 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M49.4748 19.9446L28.352 44.9929L4.66582 4.12488L49.4748 19.9446ZM58.9949 12.7401L60.1898 29.5257L53.1539 18.4968L53.0646 18.3872L52.9655 18.2662L52.8713 18.1799L52.7919 18.1169L52.7026 18.0525C52.6431 18.0163 52.5837 17.9905 52.5242 17.9637L52.4201 17.9117L52.4151 17.9102L17.9246 5.73141L58.9949 12.7401ZM75.2633 3.26857L60.17 10.0006L19.065 2.98695L75.2633 3.26857ZM46.6435 27.8007L47.898 26.3112L51.7705 21.7157L58.5288 32.3138L46.6435 27.8007ZM1.44287 0L1.42307 0.00297928L1.33876 0.0109215C1.2743 0.0153847 1.20983 0.0198441 1.14537 0.0327339L1.1305 0.036705L1.09578 0.0485916L1.01647 0.0709152C0.892509 0.109097 0.773479 0.159172 0.664395 0.228092L0.649529 0.240971C0.540445 0.31287 0.441306 0.400654 0.357013 0.498333L0.327234 0.524601L0.317308 0.542953L0.27765 0.593021L0.262785 0.612366C0.218159 0.67881 0.173534 0.748226 0.138825 0.822105L0.128899 0.850868L0.118972 0.877644L0.0892413 0.945072C0.0743661 0.989201 0.0545132 1.03284 0.0445964 1.07896L0.0396574 1.08588L0.0347184 1.13101C0.0198432 1.19398 0.00495839 1.25647 1.16393e-09 1.32291V1.35017V1.42207C1.16393e-09 1.49001 -1.93677e-05 1.55744 0.00493902 1.62339L0.0148655 1.66455L0.0247919 1.72105L0.0396574 1.79146L0.0644493 1.88569L0.0693883 1.90106C0.0941803 1.9794 0.12395 2.05624 0.163617 2.12814L0.173543 2.14501L0.18347 2.15443L0.188409 2.17624L26.8794 48.2287C27.1174 48.6368 27.5389 48.9041 28.0049 48.9452L28.1338 48.9512C28.5603 48.9512 28.9669 48.7642 29.2396 48.436L44.6602 30.1485L61.5038 36.5438L61.5881 36.576C61.7567 36.6385 61.9302 36.6688 62.0988 36.6688C62.5302 36.6688 62.9467 36.4788 63.2293 36.1303C63.5417 35.742 63.6161 35.2293 63.4673 34.7697L61.8757 12.4123L82.5868 3.17734C83.2066 2.89917 83.5537 2.22482 83.4149 1.55594C83.2711 0.888042 82.686 0.409065 82.0018 0.405098L1.4528 0H1.44287Z" fill="#0F62FE"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="83" height="83" viewBox="0 0 83 83" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.2" d="M36.3125 56.9555L46.6875 51.875V70.0312L36.3125 64.5779V67.4375C36.3125 68.1254 36.0392 68.7851 35.5528 69.2716C35.0664 69.758 34.4067 70.0312 33.7188 70.0312H15.5625C14.8746 70.0312 14.2149 69.758 13.7284 69.2716C13.242 68.7851 12.9688 68.1254 12.9688 67.4375V54.4688C12.9688 53.7808 13.242 53.1211 13.7284 52.6347C14.2149 52.1483 14.8746 51.875 15.5625 51.875H33.7188C34.4067 51.875 35.0664 52.1483 35.5528 52.6347C36.0392 53.1211 36.3125 53.7808 36.3125 54.4688V56.9555ZM49.2812 10.375V28.5312H67.4375L49.2812 10.375Z" fill="#0233BD"/>
+<path d="M48.0589 49.6736C47.6853 49.441 47.2585 49.3074 46.819 49.2853C46.3794 49.2632 45.9414 49.3533 45.5462 49.5471L38.6663 52.9157C38.3358 51.8623 37.6777 50.9417 36.7879 50.2881C35.8981 49.6344 34.8229 49.2817 33.7188 49.2812H15.5625C14.1867 49.2812 12.8672 49.8278 11.8944 50.8006C10.9215 51.7735 10.375 53.0929 10.375 54.4688V67.4375C10.375 68.8133 10.9215 70.1328 11.8944 71.1056C12.8672 72.0785 14.1867 72.625 15.5625 72.625H33.7188C34.8603 72.6237 35.9696 72.2459 36.8747 71.5501C37.7798 70.8543 38.43 69.8794 38.7247 68.7765L45.4814 72.3429C45.8779 72.5512 46.3215 72.6532 46.7691 72.6392C47.2167 72.6251 47.653 72.4953 48.0356 72.2626C48.4182 72.0298 48.734 71.702 48.9523 71.311C49.1706 70.9199 49.2839 70.4791 49.2812 70.0312V51.875C49.2812 51.4345 49.169 51.0012 48.9552 50.616C48.7413 50.2308 48.4329 49.9065 48.0589 49.6736ZM33.7188 67.4375H15.5625V54.4688H33.7188V64.5195C33.7188 64.5617 33.7188 64.6006 33.7188 64.6427V67.4375ZM44.0938 65.7386L38.9062 63.0087V58.5734L44.0938 56.0347V65.7386ZM69.2726 26.6962L51.1163 8.53992C50.8753 8.29913 50.5891 8.1082 50.2743 7.97802C49.9594 7.84785 49.622 7.78098 49.2812 7.78125H18.1562C16.7804 7.78125 15.461 8.32779 14.4881 9.30063C13.5153 10.2735 12.9688 11.5929 12.9688 12.9688V41.5C12.9688 42.1879 13.242 42.8476 13.7284 43.3341C14.2149 43.8205 14.8746 44.0938 15.5625 44.0938C16.2504 44.0938 16.9101 43.8205 17.3966 43.3341C17.883 42.8476 18.1562 42.1879 18.1562 41.5V12.9688H46.6875V28.5312C46.6875 29.2192 46.9608 29.8789 47.4472 30.3653C47.9336 30.8517 48.5933 31.125 49.2812 31.125H64.8438V70.0312H57.0625C56.3746 70.0312 55.7149 70.3045 55.2284 70.7909C54.742 71.2774 54.4688 71.9371 54.4688 72.625C54.4688 73.3129 54.742 73.9726 55.2284 74.4591C55.7149 74.9455 56.3746 75.2188 57.0625 75.2188H64.8438C66.2196 75.2188 67.539 74.6722 68.5119 73.6994C69.4847 72.7265 70.0312 71.4071 70.0312 70.0312V28.5312C70.0315 28.1905 69.9647 27.8531 69.8345 27.5382C69.7043 27.2234 69.5134 26.9372 69.2726 26.6962ZM51.875 16.6357L61.1768 25.9375H51.875V16.6357Z" fill="#0233BD"/>
+</svg>